Πάνω από το 60 τοις εκατό της κίνησης στο διαδίκτυο έρχεται πλέον από κινητές συσκευές. Μια ιστοσελίδα που δεν είναι φιλική προς τα κινητά αποτυγχάνει με τους περισσότερους από όσους την επισκέπτονται, δεν είναι σπάνια εξαίρεση. Το να στήσεις σωστά το κινητό δεν είναι έξτρα λειτουργία. Είναι το βασικό επίπεδο που αναμένεται από μια επαγγελματική ιστοσελίδα.
Το να κάνεις μια ιστοσελίδα φιλική προς τα κινητά σημαίνει να δίνεις στους επισκέπτες κινητού την ίδια ποιότητα εμπειρίας με αυτούς του υπολογιστή. Όχι μια λειτουργικά περιορισμένη έκδοση που απλώς φορτώνει, αλλά μια σελίδα όπου το κείμενο διαβάζεται, η πλοήγηση δουλεύει, οι εικόνες εμφανίζονται σωστά και οι φόρμες στέλνονται πραγματικά από το κινητό χωρίς εκνευρισμό.
Αυτό το άρθρο περνά από τις πρακτικές αλλαγές που κάνουν μια ιστοσελίδα πραγματικά φιλική προς τα κινητά, από την πλοήγηση και το κείμενο μέχρι τις εικόνες, τις φόρμες και την ταχύτητα.
Τι σημαίνει στην πράξη «φιλική προς τα κινητά»;
Μια ιστοσελίδα φιλική προς τα κινητά είναι αυτή όπου κάθε λειτουργία δουλεύει σωστά στο κινητό χωρίς να χρειάζονται λύσεις έκτακτης ανάγκης. Το κείμενο διαβάζεται στο προεπιλεγμένο zoom. Η πλοήγηση ανοίγει και κλείνει σωστά. Τα κουμπιά είναι αρκετά μεγάλα ώστε να τα πατάς χωρίς να πετύχεις λάθος στοιχείο. Οι εικόνες φορτώνουν και εμφανίζονται σωστά. Οι φόρμες συμπληρώνονται και στέλνονται χωρίς εκνευρισμό.
Η διάκριση ανάμεσα σε τεχνικά συμβατή με κινητά και πραγματικά φιλική προς τα κινητά μετράει. Μια σελίδα είναι τεχνικά συμβατή αν δεν χαλάει στο κινητό. Είναι πραγματικά φιλική αν η χρήση της στο κινητό φαίνεται τόσο φυσική όσο στον υπολογιστή. Η διαφορά κρύβεται στις λεπτομέρειες. Οι αποστάσεις, το μέγεθος της γραμματοσειράς, το μέγεθος των στοιχείων που πατάς και ο χρόνος φόρτωσης καθορίζουν αν η εμπειρία είναι σωστή ή μόλις και μετά βίας λειτουργική.
Το θεμέλιο μιας ιστοσελίδας φιλικής προς τα κινητά είναι ο responsive σχεδιασμός, που κάνει τη διάταξη να προσαρμόζεται αυτόματα σε διαφορετικά μεγέθη οθόνης. Το άρθρο τι είναι ο responsive σχεδιασμός εξηγεί πώς δουλεύει αυτό σε τεχνικό επίπεδο.
Πώς δοκιμάζεις αν η ιστοσελίδα σου είναι φιλική προς τα κινητά;
Η πιο αξιόπιστη δοκιμή είναι να περάσεις τη δική σου σελίδα σε ένα πραγματικό κινητό. Όχι στην προεπισκόπηση για κινητά ενός προγράμματος περιήγησης. Όχι σε παράθυρο υπολογιστή μικρού πλάτους. Σε ένα πραγματικό κινητό, με τους αντίχειρές σου, όπως θα το χρησιμοποιούσε ένας επισκέπτης.
Πέρασε κάθε σελίδα. Άνοιξε την πλοήγηση και έλεγξε ότι κάθε σύνδεσμος είναι προσβάσιμος. Διάβασε το κείμενο για να βεβαιωθείς ότι διαβάζεται χωρίς zoom. Πάτα κάθε κουμπί για να δεις ότι ανταποκρίνεται σωστά. Συμπλήρωσε τις φόρμες και στείλε τες. Έλεγξε ότι οι εικόνες φορτώνουν και εμφανίζονται σωστά. Έλεγξε ότι τίποτα δεν απαιτεί οριζόντια κύλιση.
Οι μηχανές αναζήτησης παρέχουν επίσης δωρεάν εργαλεία δοκιμής για κινητά. Βάζεις το URL σου και το εργαλείο επισημαίνει συγκεκριμένα προβλήματα, όπως κείμενο πολύ μικρό για να διαβαστεί, στοιχεία που πατιούνται και είναι πολύ κοντά μεταξύ τους ή περιεχόμενο πιο πλατύ από την οθόνη. Για ευρύτερη καθοδήγηση για το τι να ελέγξεις πριν βγει μια σελίδα live, το άρθρο τι να ξέρεις πριν λανσάρεις την ιστοσελίδα σου καλύπτει τη δοκιμή σε κινητό ως μέρος της πλήρους διαδικασίας πριν το λανσάρισμα.
Πώς κάνεις την πλοήγηση να δουλεύει στο κινητό;
Η πλοήγηση είναι το σημείο όπου η εμπειρία στο κινητό χαλάει πιο συχνά. Ένα οριζόντιο μενού που απλώνεται σε όλο το πλάτος μιας οθόνης υπολογιστή δεν έχει πού να πάει σε οθόνη κινητού. Η βασική λύση είναι ένα αναδιπλούμενο μενού που ανοίγει με ένα κουμπί, συνήθως σε μια γωνία στο πάνω μέρος.
Το κουμπί του μενού πρέπει να αναγνωρίζεται αμέσως. Το εικονίδιο με τις τρεις γραμμές έχει γίνει ευρέως κατανοητή σύμβαση για τα αναδιπλούμενα μενού πλοήγησης. Όταν ανοίγει το μενού, πρέπει να καλύπτει αρκετό μέρος της οθόνης ώστε να διαβάζεται και να πατιέται εύκολα. Τα στοιχεία χρειάζονται αρκετή κάθετη απόσταση, ώστε το δάχτυλο να πατά το ένα χωρίς να πετυχαίνει αυτό από πάνω ή από κάτω.
Κράτα το μενού του κινητού σύντομο. Αν η πλοήγηση για υπολογιστή έχει πολλά στοιχεία, σκέψου ποια είναι πιο πιθανό να χρειαστούν οι επισκέπτες κινητού και αν τα δευτερεύοντα μπορούν να ομαδοποιηθούν ή να φύγουν από το πρώτο επίπεδο. Ένα πιο καθαρό μενού κινητού είναι ευκολότερο στη χρήση. Το άρθρο τι είναι η πλοήγηση ιστοσελίδας καλύπτει τη δομή και την ευχρηστία της πλοήγησης σε όλες τις συσκευές.
Πώς πρέπει να είναι το κείμενο και οι γραμματοσειρές στο κινητό;
Ένα κείμενο που διαβάζεται εύκολα σε υπολογιστή μπορεί να γίνει άβολα μικρό σε κινητό, αν το μέγεθος της γραμματοσειράς είναι πολύ χαμηλό. Ελάχιστο μέγεθος γραμματοσειράς 16 pixel για το κυρίως κείμενο είναι το ευρέως χρησιμοποιούμενο πρότυπο για ευαναγνωσία στο κινητό. Κάτω από αυτό, το κείμενο θέλει zoom, κάτι που οι περισσότεροι επισκέπτες δεν θα κάνουν.
Μετράει και το μήκος της γραμμής. Σε υπολογιστή, μια γραμμή κειμένου μπορεί να απλώνεται σε 600 με 700 pixel. Στο κινητό, το ίδιο κείμενο σπάει σε πολύ πιο σύντομες γραμμές. Αν η απόσταση μεταξύ των γραμμών είναι πολύ μικρή ή οι παράγραφοι πολύ μεγάλες, η ανάγνωση γίνεται άβολη σε μικρή οθόνη. Οι σύντομες παράγραφοι, η γενναιόδωρη απόσταση γραμμών και τα καθαρά διαλείμματα ανάμεσα στις ενότητες βελτιώνουν την ευαναγνωσία.
Οι επικεφαλίδες πρέπει να μικραίνουν αναλογικά. Ένα H1 που είναι 48 pixel σε υπολογιστή μπορεί να είναι κατάλληλο στα 28 με 32 pixel στο κινητό. Αν οι επικεφαλίδες μένουν στο μέγεθος του υπολογιστή στο κινητό, κυριαρχούν στην οθόνη και σπρώχνουν το πραγματικό περιεχόμενο κάτω από το πρώτο σκρολάρισμα (below the fold).
Πώς χειρίζεσαι τις εικόνες στο κινητό;
Οι εικόνες είναι από τους μεγαλύτερους κινδύνους απόδοσης στο κινητό. Μια εικόνα πλήρους ανάλυσης, σχεδιασμένη για οθόνη υπολογιστή 1440 pixel, είναι πολύ μεγαλύτερη από όσο χρειάζεται όταν εμφανίζεται σε οθόνη κινητού 375 pixel. Αν τη στείλεις στους επισκέπτες κινητού, σπαταλάς εύρος ζώνης και επιβραδύνεις αισθητά τη σελίδα.
Η λύση είναι να στέλνεις εικόνες κατάλληλου μεγέθους σε διαφορετικές συσκευές. Οι περισσότεροι σύγχρονοι δημιουργοί ιστοσελίδων το κάνουν αυτόματα, δημιουργώντας πολλαπλά μεγέθη και στέλνοντας το σωστό ανάλογα με την οθόνη. Αν διαχειρίζεσαι τις εικόνες χειροκίνητα, άλλαξε το μέγεθός τους στο μεγαλύτερο μέγεθος στο οποίο θα εμφανίζονται, όχι στο μεγαλύτερο που μπορεί να βγάλει η κάμερά σου.
Πρόσεξε πώς κόβονται οι εικόνες στο κινητό. Μια πλατιά οριζόντια εικόνα που φαίνεται ισορροπημένη σε υπολογιστή μπορεί να κοπεί άβολα σε ψηλή οθόνη κινητού. Οι εικόνες hero και οι ενότητες banner είναι τα πιο συνηθισμένα σημεία όπου το κόψιμο σε υπολογιστή και κινητό διαφέρει αισθητά. Το άρθρο τι είναι η ταχύτητα ιστοσελίδας εξηγεί τον αντίκτυπο της βελτιστοποίησης εικόνων στη συνολική απόδοση της σελίδας.
Τι κάνει τις φόρμες να δουλεύουν καλά στο κινητό;
Οι φόρμες είναι σημείο υψηλής τριβής στο κινητό. Το να συμπληρώνεις πεδία με μικρό πληκτρολόγιο αφής είναι πιο κουραστικό από το να πληκτρολογείς σε πλήρες πληκτρολόγιο. Όσο λιγότερα πεδία βάζεις, τόσο καλύτερα. Κάθε έξτρα πεδίο είναι ευκαιρία για εκνευρισμό και λόγος εγκατάλειψης.
Μετράει το μέγεθος των πεδίων. Τα πεδία πρέπει να είναι αρκετά μεγάλα για να τα πατάς με ακρίβεια και αρκετά πλατιά ώστε το κείμενο μέσα τους να διαβάζεται. Οι ετικέτες πρέπει να εμφανίζονται πάνω από κάθε πεδίο, όχι μόνο ως κείμενο υποδείξεων μέσα του, επειδή το κείμενο υποδείξεων χάνεται μόλις αρχίσει κάποιος να πληκτρολογεί.
Όρισε σωστά τους τύπους πεδίων. Ένα πεδίο email πρέπει να ανοίγει το πληκτρολόγιο email. Ένα πεδίο τηλεφώνου πρέπει να ανοίγει το αριθμητικό πληκτρολόγιο. Ένα πεδίο ημερομηνίας πρέπει να ανοίγει επιλογέα ημερομηνίας. Είναι μικρές τεχνικές ρυθμίσεις που κάνουν την εμπειρία αισθητά πιο ομαλή.
Δοκίμασε κάθε φόρμα στο κινητό σου, συμπληρώνοντάς την ολόκληρη και στέλνοντάς την. Επιβεβαίωσε ότι η αποστολή περνά και ότι το μήνυμα επιβεβαίωσης εμφανίζεται σωστά. Μια φόρμα επικοινωνίας που στέλνεται επιτυχώς σε υπολογιστή αλλά αποτυγχάνει στο κινητό χάνει σιωπηλά δυνητικούς πελάτες χωρίς να το ξέρεις.
Πώς επηρεάζει η φιλικότητα προς τα κινητά την κατάταξη στις αναζητήσεις;
Οι μηχανές αναζήτησης καταχωρίζουν πρώτα την έκδοση της ιστοσελίδας σου για κινητά. Αυτό σημαίνει ότι η εμπειρία στο κινητό δεν μετράει μόνο για τους επισκέπτες κινητού. Είναι η έκδοση που καθορίζει πώς γίνεται κατανοητή και κατατάσσεται η σελίδα σου σε όλες τις συσκευές.
Μια σελίδα που αποδίδει άσχημα στο κινητό, είτε λόγω αργής φόρτωσης, σπασμένων διατάξεων ή δυσανάγνωστου κειμένου, θα κατατάσσεται κάτω από συγκρίσιμες σελίδες που χειρίζονται καλά το κινητό. Οι επισκέπτες που μπαίνουν σε μια σελίδα από κινητό και φεύγουν αμέσως επειδή δεν δουλεύει στέλνουν ξεκάθαρο σήμα ότι η σελίδα δεν κάλυψε τις ανάγκες τους. Τα υψηλά ποσοστά εγκατάλειψης από επισκέπτες κινητού επηρεάζουν την κατάταξη με τον καιρό.
Η ταχύτητα της σελίδας στο κινητό είναι ξεχωριστός παράγοντας. Μια σελίδα που φορτώνει σε δύο δευτερόλεπτα σε γρήγορη σύνδεση broadband μπορεί να χρειαστεί έξι ή περισσότερα σε μια τυπική σύνδεση δεδομένων κινητού. Οι βελτιστοποιημένες εικόνες, τα ελάχιστα scripts που μπλοκάρουν τη φόρτωση και μια καθαρή δομή προτύπου συμβάλλουν σε πιο γρήγορη φόρτωση στο κινητό. Για πλήρη εικόνα του πώς δουλεύει η βελτιστοποίηση για τις αναζητήσεις, το τι είναι το SEO καλύπτει ολόκληρο το θέμα, μαζί με τους τεχνικούς παράγοντες.
Πώς χειρίζεται το WEMASY το κινητό
Ο δημιουργός ιστοσελίδων του WEMASY χρησιμοποιεί responsive πρότυπα που προσαρμόζονται αυτόματα σε υπολογιστή, tablet και κινητό. Ο οπτικός επεξεργαστής περιλαμβάνει προεπισκόπηση για κινητό, ώστε να ελέγχεις πώς φαίνεται κάθε ενότητα σε μικρή οθόνη όσο χτίζεις. Τη βελτιστοποίηση των εικόνων και την απόδοση στο κινητό τις αναλαμβάνει η πλατφόρμα, χωρίς χειροκίνητη ρύθμιση.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Πώς ξέρω αν η ιστοσελίδα μου είναι φιλική προς τα κινητά;
Πέρασε την ιστοσελίδα σου σε ένα πραγματικό κινητό. Δοκίμασε κάθε σελίδα, κάθε στοιχείο πλοήγησης, κάθε φόρμα και κάθε κουμπί. Οι μηχανές αναζήτησης παρέχουν επίσης δωρεάν εργαλεία δοκιμής για κινητά, όπου βάζεις το URL σου και επισημαίνουν συγκεκριμένα προβλήματα. Ο συνδυασμός χειροκίνητης διαδρομής και ελέγχου με εργαλείο θα φέρει στην επιφάνεια τα προβλήματα που μετράνε περισσότερο. Οι προεπισκοπήσεις του προγράμματος περιήγησης για κινητά είναι χρήσιμες κατά την ανάπτυξη, αλλά δεν αναπαράγουν πλήρως την εμπειρία σε πραγματική συσκευή. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Μπορώ να κάνω μια υπάρχουσα ιστοσελίδα φιλική προς τα κινητά χωρίς να την ξαναχτίσω;
Εξαρτάται από το πώς χτίστηκε η σελίδα. Στις σελίδες που χτίστηκαν με σύγχρονους δημιουργούς ιστοσελίδων, η εμπειρία στο κινητό μπορεί συχνά να βελτιωθεί με προσαρμογή των ρυθμίσεων του προτύπου, αλλαγή μεγέθους των εικόνων ή μετάβαση σε καλύτερο πρότυπο. Οι σελίδες που χτίστηκαν με προσαρμοσμένο κώδικα ή σε παλαιότερες πλατφόρμες μπορεί να χρειάζονται πιο σημαντική δουλειά. Σε κάποιες περιπτώσεις, το να ξαναχτίσεις σε μια τρέχουσα πλατφόρμα είναι πιο γρήγορο και δίνει καλύτερο αποτέλεσμα από το να προσπαθείς να φέρεις μια παλιά σελίδα στα νερά της.
Κατατάσσεται ψηλότερα στις αναζητήσεις μια ιστοσελίδα φιλική προς τα κινητά;
Οι μηχανές αναζήτησης χρησιμοποιούν την έκδοση της ιστοσελίδας σου για κινητά ως την κύρια έκδοση για καταχώριση και κατάταξη. Μια σελίδα που δουλεύει καλά στο κινητό και φορτώνει γρήγορα σε αυτό θα αποδίδει γενικά καλύτερα από μια φτιαγμένη κυρίως για υπολογιστή. Πέρα από το όφελος στην κατάταξη, μια ιστοσελίδα φιλική προς τα κινητά κρατά τους επισκέπτες περισσότερο, μειώνει τα ποσοστά εγκατάλειψης και κάνει περισσότερες μετατροπές. Αυτά τα σήματα συμπεριφοράς επηρεάζουν και τη μακροπρόθεσμη απόδοση στις αναζητήσεις.
Ποιο είναι το ελάχιστο μέγεθος γραμματοσειράς για μια ιστοσελίδα κινητού;
Μέγεθος γραμματοσειράς 16 pixel για το κυρίως κείμενο είναι το ευρέως προτεινόμενο ελάχιστο για ευαναγνωσία στο κινητό. Κάτω από αυτό, το κείμενο διαβάζεται δύσκολα χωρίς zoom. Οι επικεφαλίδες πρέπει να μικραίνουν αναλογικά, ώστε να μην πιάνουν όλη την οθόνη. Απόσταση γραμμών τουλάχιστον 1,5 φορές το μέγεθος της γραμματοσειράς βελτιώνει την ευαναγνωσία σε μικρές οθόνες, ιδιαίτερα στις μεγαλύτερες παραγράφους.
Πόσο μεγάλα πρέπει να είναι τα κουμπιά σε μια ιστοσελίδα κινητού;
Ελάχιστο μέγεθος στόχου πατήματος 44 επί 44 pixel προτείνεται ευρέως για τα κουμπιά στο κινητό. Αυτό δίνει στο δάχτυλο καθαρό στόχο και μειώνει τα τυχαία πατήματα σε γειτονικά στοιχεία. Τα κουμπιά πρέπει επίσης να έχουν αρκετό χώρο μεταξύ τους, ώστε το πάτημα του ενός να μη μετράει ως πάτημα σε κάτι κοντινό. Τα κουμπιά ενέργειας πρέπει να είναι μεγάλα, οπτικά ξεχωριστά και εύκολα προσβάσιμα με τον αντίχειρα χωρίς να αλλάζεις θέση στο κινητό.