Άνοιξες την ιστοσελίδα σου σε κινητό και βρήκες κάτι που δεν μοιάζει καθόλου με αυτό που έφτιαξες; Μια ιστοσελίδα που φαίνεται χαλασμένη στο κινητό είναι ένα από τα πιο συνηθισμένα παράπονα ιδιοκτητών brand που σχεδίασαν την ιστοσελίδα τους σε υπολογιστή και δεν έλεγξαν ποτέ πώς αποδίδει σε μικρότερη οθόνη. Αυτό το άρθρο εξηγεί τι προκαλεί το πρόβλημα, πώς να βρεις ποιο ζήτημα επηρεάζει την ιστοσελίδα σου και τι να κάνεις για να το διορθώσεις.
Πάνω από τη μισή κίνηση στο διαδίκτυο προέρχεται πλέον από κινητές συσκευές. Το ποσοστό αυτό ανεβαίνει εδώ και χρόνια και συνεχίζει να ανεβαίνει. Αν ένας επισκέπτης φτάσει στην ιστοσελίδα σου από κινητό και βρει κείμενο πολύ μικρό για να διαβαστεί, εικόνες που ξεχειλίζουν από την οθόνη ή μενού πλοήγησης που δεν αποκρίνεται στο άγγιγμα, οι πιθανότητες να μείνει είναι χαμηλές. Ένα υψηλό ποσοστό αναπήδησης στο κινητό είναι συχνά το πρώτο μετρήσιμο σημάδι ότι κάτι είναι χαλασμένο και πολλοί ιδιοκτήτες brand δεν συνδέουν τα δύο μέχρι να δουν τα analytics τους.
Το απογοητευτικό είναι ότι τα προβλήματα εμφάνισης στο κινητό δεν είναι πάντα προφανή από την προβολή υπολογιστή που χρησιμοποιείς για να διαχειρίζεσαι την ιστοσελίδα σου. Τα προβλήματα εμφανίζονται συνήθως μόνο όταν κοιτάς την πραγματική οθόνη του κινητού, και έτσι μπορεί να περνούν απαρατήρητα εβδομάδες ή μήνες, ενώ οι επισκέπτες φεύγουν αθόρυβα.
Γιατί μια ιστοσελίδα φαίνεται χαλασμένη στο κινητό;
Δεν υπάρχει μία μόνο αιτία για μια ιστοσελίδα χαλασμένη στο κινητό. Το πρόβλημα είναι συνήθως ένα από πέντε βασικά ζητήματα και σε ορισμένες περιπτώσεις συνδυασμός περισσότερων του ενός. Το ποια αιτία επηρεάζει την ιστοσελίδα σου καθορίζει ποια διόρθωση εφαρμόζεται.
Η ιστοσελίδα δεν χτίστηκε με responsive σχεδιασμό
Μια responsive ιστοσελίδα προσαρμόζει αυτόματα τη διάταξή της ανάλογα με το πλάτος της οθόνης που την εμφανίζει. Σε υπολογιστή, το περιεχόμενο μπορεί να εμφανίζεται σε τρεις στήλες. Σε tablet, σε δύο. Σε κινητό, σε μία στήλη που κυλά. Αυτή η προσαρμογή γίνεται με κανόνες CSS που λέγονται media queries και λένε στον browser πώς να αναδιατάξει το περιεχόμενο σε διαφορετικά μεγέθη οθόνης.
Αν μια ιστοσελίδα χτίστηκε χωρίς responsive σχεδιασμό, παρουσιάζει την ίδια σταθερή διάταξη ανεξάρτητα από το μέγεθος της οθόνης. Μια ιστοσελίδα σχεδιασμένη για οθόνη υπολογιστή πλάτους 1.440 pixel θα προσπαθήσει να αποδοθεί σε αυτό το πλάτος σε οθόνη κινητού περίπου 390 pixel. Το αποτέλεσμα είναι μια σελίδα σε μικρογραφία όπου το κείμενο δεν διαβάζεται και τα κουμπιά είναι πολύ μικρά για να τα πατήσεις. Το περιεχόμενο τεχνικά υπάρχει, αλλά δεν είναι χρήσιμο.
Οι παλιότερες ιστοσελίδες, ιδιαίτερα αυτές που χτίστηκαν με επεξεργαστές drag-and-drop που δεν έδιναν προτεραιότητα στο κινητό, έχουν συχνά αυτό το πρόβλημα. Σε αυτή την κατηγορία μπορούν να ανήκουν και ιστοσελίδες που γράφτηκαν με custom κώδικα χωρίς σκέψη mobile-first.
Οι εικόνες δεν έχουν μέγεθος κατάλληλο για οθόνες κινητού
Μια εικόνα που ανέβηκε με πλάτος 3.000 pixel και εμφανίζεται χωρίς περιορισμούς θα προσπαθήσει να αποδοθεί στο πλήρες μέγεθός της, όπου κι αν τη βλέπεις. Σε υπολογιστή, ο browser μπορεί να τη μικρύνει ώστε να χωρέσει. Σε κινητό χωρίς responsive κανόνες μεγέθους, η εικόνα μπορεί να ξεπεράσει την άκρη της οθόνης και να προκαλέσει οριζόντια κύλιση ή κατάρρευση της διάταξης.
Ακόμη κι όταν οι εικόνες δεν ξεχειλίζουν, οι μεγάλες αβελτιστοποίητες εικόνες επηρεάζουν το γιατί έχει σημασία η ταχύτητα της ιστοσελίδας στο κινητό. Μια εικόνα που φορτώνει αργά και εμποδίζει την υπόλοιπη σελίδα να εμφανιστεί είναι μορφή χαλασμένης συμπεριφοράς, ακόμη κι όταν η διάταξη τεχνικά κρατιέται. Οι επισκέπτες σε κινητές συνδέσεις είναι ιδιαίτερα ευαίσθητοι σε αυτό.
Στοιχεία σταθερού πλάτους ξεχειλίζουν από την οθόνη
Τα στοιχεία σταθερού πλάτους είναι containers, divs, πίνακες ή άλλα στοιχεία HTML που έχουν ορισμένο συγκεκριμένο πλάτος σε pixel στο stylesheet αντί για ποσοστό ή ευέλικτη μονάδα. Ένα container με πλάτος 900 pixel θα εμφανίζεται σωστά σε υπολογιστή αλλά θα ξεπερνά την άκρη της οθόνης του κινητού, αναγκάζοντας τον χρήστη να κυλήσει οριζόντια για να δει όλο το περιεχόμενο. Η οριζόντια κύλιση σε μια ιστοσελίδα είναι σχεδόν πάντα σημάδι προβλήματος υπερχείλισης σταθερού πλάτους.
Οι πίνακες είναι συχνός ένοχος. Ένας πίνακας τιμών ή σύγκρισης φτιαγμένος σε HTML με σταθερές στήλες μπορεί να καταρρεύσει δραματικά στο κινητό, με το κείμενο να στοιβάζεται με τρόπους αδύνατους να διαβαστούν. Το ίδιο ισχύει για πλαϊνές στήλες (sidebars), ενσωματωμένα widgets και κάθε στοιχείο που έχει κωδικοποιηθεί με ρητό πλάτος σε pixel μεγαλύτερο από τον διαθέσιμο χώρο της οθόνης του κινητού.
Τα μεγέθη γραμματοσειράς είναι πολύ μικρά για να διαβαστούν χωρίς ζουμ
Κείμενο που διαβάζεται καλά στα 14 pixel σε οθόνη υπολογιστή μπορεί να γίνει δυσανάγνωστο σε κινητό, ιδιαίτερα σε οθόνες υψηλής πυκνότητας όπου ο φυσικός αριθμός pixel είναι πολύ μεγαλύτερος από το λογικό μέγεθος της οθόνης. Αν ένας επισκέπτης πρέπει να κάνει pinch και ζουμ για να διαβάσει το περιεχόμενό σου, η εμπειρία είναι χαλασμένη ακόμη κι αν η διάταξη τεχνικά είναι άθικτη.
Το προτεινόμενο ελάχιστο μέγεθος γραμματοσειράς σώματος κειμένου για κινητό είναι 16 pixel. Οτιδήποτε μικρότερο κινδυνεύει να αποτύχει στην αναγνωσιμότητα σε σημαντικό ποσοστό συσκευών. Το μικρότερο κείμενο δείχνει επίσης στις μηχανές αναζήτησης ότι η σελίδα δεν είναι βελτιστοποιημένη για κινητό, κάτι που μπορεί να επηρεάσει την κατάταξη και την ευρετηρίαση της ιστοσελίδας.
Η πλοήγηση καταρρέει άσχημα ή δεν δουλεύει στην αφή
Τα μενού πλοήγησης υπολογιστή χτίζονται συχνά ως οριζόντιες μπάρες με στοιχεία που ανοίγουν με hover. Το hover δεν υπάρχει σε οθόνη αφής. Ένα μενού που εξαρτάται από αλληλεπίδραση hover απλώς δεν λειτουργεί σε κινητό. Οι επισκέπτες πατούν ένα στοιχείο του μενού και δεν συμβαίνει τίποτα, ή οδηγούνται σε λάθος σελίδα γιατί η κατάσταση hover που θα έπρεπε να αποκαλύψει ένα υπομενού δεν ενεργοποιείται ποτέ.
Ακόμη και η πλοήγηση που τεχνικά δουλεύει στην αφή μπορεί να είναι χαλασμένη στην πράξη, αν οι στόχοι αφής είναι πολύ μικροί ή πολύ κοντά ο ένας στον άλλο. Η γενική οδηγία για τους στόχους αφής στο κινητό είναι ελάχιστο 44 επί 44 pixel. Οι μικρότεροι στόχοι οδηγούν σε αστοχίες αφής, κατά λάθος πλοήγηση και απογοητευμένους επισκέπτες που βρίσκουν πιο εύκολο να φύγουν παρά να βρουν αυτό που ήρθαν να βρουν.
Πώς να ελέγξεις αν η ιστοσελίδα σου είναι φιλική προς το κινητό
Ο πιο γρήγορος έλεγχος είναι να ανοίξεις την ιστοσελίδα σε πραγματικό κινητό. Χρησιμοποίησε και τη δική σου συσκευή και, αν γίνεται, μια άλλη μάρκα και μοντέλο. Αυτό που φαίνεται καλό σε ένα κινητό μπορεί να εμφανίζεται διαφορετικά σε άλλο, λόγω διαφορών στην ανάλυση οθόνης, στη μηχανή απόδοσης του browser και στην έκδοση του λειτουργικού συστήματος.
Τα εργαλεία προγραμματιστή του browser προσφέρουν ενσωματωμένη προσομοίωση κινητού. Στους περισσότερους browser υπολογιστή, το F12 ανοίγει τον πίνακα προγραμματιστή. Ένα εικονίδιο γραμμής συσκευών σου επιτρέπει να προσομοιώσεις διαφορετικά μεγέθη οθόνης και τύπους συσκευών. Είναι χρήσιμο για γρήγορους ελέγχους, αλλά δεν αντικαθιστά πλήρως τη δοκιμή σε πραγματικό υλικό, γιατί τα προσομοιωμένα περιβάλλοντα δεν αναπαράγουν την πραγματική συμπεριφορά αφής, την απόδοση γραμματοσειρών ή τις συνθήκες δικτύου.
Το τεστ φιλικότητας προς το κινητό της Google, που είναι διαθέσιμο μέσω του Google Search Console, αξιολογεί τις σελίδες σου και επισημαίνει συγκεκριμένα προβλήματα ευχρηστίας στο κινητό. Εντοπίζει προβλήματα όπως κείμενο πολύ μικρό για να διαβαστεί, στοιχεία που πατιούνται και είναι πολύ κοντά το ένα στο άλλο και περιεχόμενο που δεν χωρά στο viewport. Η αναφορά δίνει λεπτομέρειες ανά σελίδα, ώστε να δεις ποιες συγκεκριμένες σελίδες αποτυγχάνουν και ποιες περνούν.
Ο έλεγχος των δεδομένων analytics προσθέτει ένα επίπεδο συμπεριφοράς στην τεχνική εικόνα. Αν το ποσοστό αναπήδησης στο κινητό είναι σημαντικά υψηλότερο από το ποσοστό στον υπολογιστή, αυτό το χάσμα δείχνει συχνά πρόβλημα εμφάνισης ή ευχρηστίας στα κινητά. Το άρθρο για το υψηλό ποσοστό αναπήδησης στο κινητό εξηγεί πώς να διαβάζεις αυτά τα σήματα και τι κάνει τους επισκέπτες να φεύγουν αμέσως σε μικρότερες οθόνες.
Πώς να διορθώσεις μια ιστοσελίδα που φαίνεται χαλασμένη στο κινητό
Η σωστή διόρθωση εξαρτάται από το ποια αιτία παράγει το πρόβλημα. Σε καθεμία από τις πέντε αιτίες παραπάνω αντιστοιχεί μια λύση.
Πέρασε σε responsive διάταξη
Αν η ιστοσελίδα δεν είναι καθόλου responsive, η λύση είναι είτε να την ξαναχτίσεις σε responsive framework είτε να περάσεις σε πλατφόρμα που παράγει responsive HTML από προεπιλογή. Η προσθήκη responsive συμπεριφοράς σε μη responsive ιστοσελίδα εκ των υστέρων είναι δυνατή, αλλά συχνά πιο επίπονη από το να ξαναχτίσεις από responsive αφετηρία. Αν η ιστοσελίδα βρίσκεται σε σύγχρονη πλατφόρμα που υποστηρίζει responsive θέματα ή πρότυπα, η αλλαγή σε responsive πρότυπο είναι συνήθως ο πιο γρήγορος δρόμος.
Άλλαξε το μέγεθος και περιόρισε τις εικόνες
Οι εικόνες πρέπει να ανεβαίνουν στο πραγματικό μέγεθος εμφάνισης που χρειάζεσαι και όχι στην αρχική ανάλυση εξαγωγής. Για τις περισσότερες εικόνες ιστοσελίδας, μέγιστο πλάτος 1.200 pixel αρκεί για οθόνες υψηλής πυκνότητας, κρατώντας τα μεγέθη αρχείων διαχειρίσιμα. Κανόνες CSS που ορίζουν max-width: 100% στις εικόνες εξασφαλίζουν ότι δεν ξεχειλίζουν ποτέ από το container τους, όποιο κι αν είναι το πλάτος της οθόνης. Αυτός ο ένας κανόνας λύνει τα περισσότερα προβλήματα υπερχείλισης εικόνων, χωρίς να χρειάζεται αλλαγή μεγέθους εικόνα προς εικόνα.
Αντικατέστησε τα σταθερά πλάτη με ευέλικτες μονάδες
Τα σταθερά πλάτη σε pixel σε containers, πίνακες και άλλα στοιχεία διάταξης πρέπει να αντικατασταθούν με πλάτη βασισμένα σε ποσοστά ή ευέλικτες μονάδες CSS όπως em, rem ή vw. Ένα container με width: 90% αντί για width: 900px θα κλιμακώνεται σωστά σε κάθε μέγεθος οθόνης. Για τους πίνακες, ένας κανόνας CSS που τους κάνει οριζόντια κυλιόμενους μέσα στο container τους τους εμποδίζει να χαλάσουν τη συνολική διάταξη σε στενές οθόνες.
Αύξησε τα μεγέθη γραμματοσειράς για το κινητό
Το κείμενο σώματος στο κινητό πρέπει να ορίζεται τουλάχιστον στα 16 pixel. Αν το stylesheet του υπολογιστή ορίζει μικρότερο μέγεθος, ένα media query που στοχεύει πλάτη οθόνης κινητού μπορεί να το παρακάμψει. Πρέπει να ελεγχθούν και τα μεγέθη των επικεφαλίδων, γιατί πολλά στυλ επικεφαλίδων που φαίνονται αναλογικά σε υπολογιστή γίνονται υπερβολικά μεγάλα στο κινητό και σπρώχνουν το υπόλοιπο περιεχόμενο κάτω από το ορατό τμήμα πριν προλάβει ο επισκέπτης να διαβάσει οτιδήποτε.
Αντικατέστησε την πλοήγηση βασισμένη σε hover με μενού κινητού
Η συνηθισμένη λύση για την πλοήγηση στο κινητό είναι ένα μενού που ανοίγει και κλείνει, συχνά λεγόμενο hamburger menu, και ενεργοποιείται με άγγιγμα και όχι με hover. Τα περισσότερα responsive frameworks και οι δημιουργοί ιστοσελίδων το περιλαμβάνουν από προεπιλογή. Αν η πλοήγηση της τρέχουσας ιστοσελίδας δεν έχει αντίστοιχο για κινητό, για να προσθέσεις ένα πρέπει είτε να τροποποιήσεις το stylesheet και την JavaScript είτε να περάσεις σε θέμα που περιλαμβάνει πλοήγηση για κινητό ως ενσωματωμένη λειτουργία. Πρέπει να ελεγχθεί και το μέγεθος των στόχων αφής, ώστε όλα τα στοιχεία του μενού να πληρούν την ελάχιστη οδηγία των 44 pixel.
Αν η ιστοσελίδα σου έχει χαλασμένες σελίδες παράλληλα με προβλήματα εμφάνισης, η διόρθωση πρώτα της οπτικής διάταξης κάνει συχνά πιο εύκολη την πλοήγηση και τη δοκιμή κάθε σελίδας κατά τη διαδικασία ελέγχου.
Πώς το WEMASY χειρίζεται το κινητό
Ο δημιουργός ιστοσελίδων του WEMASY παράγει responsive HTML σε κάθε σελίδα χωρίς να χρειάζεται ρύθμιση. Οι διατάξεις αναδιατάσσονται αυτόματα σε μεγέθη οθόνης κινητού, οι εικόνες περιορίζονται μέσα στα containers τους και η πλοήγηση γίνεται μενού φιλικό προς την αφή σε κινητά και tablet. Τα μεγέθη γραμματοσειράς, οι στόχοι αφής και οι αποστάσεις ορίζονται όλα μέσα στο σύστημα σχεδιασμού της πλατφόρμας ώστε να πληρούν τα πρότυπα ευχρηστίας στο κινητό, έτσι τα brands που ξεκινούν στο WEMASY ξεκινούν με ιστοσελίδα έτοιμη για κινητό και δεν χρειάζεται να την προσαρμόσουν εκ των υστέρων.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα διαθέσιμα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Γιατί η ιστοσελίδα μου φαίνεται καλά σε υπολογιστή αλλά χαλασμένη στο κινητό;
Αυτό συμβαίνει συνήθως επειδή η ιστοσελίδα χτίστηκε ή σχεδιάστηκε κυρίως για προβολή σε υπολογιστή, χωρίς responsive κανόνες CSS που προσαρμόζουν τη διάταξη για μικρότερες οθόνες. Ο browser του υπολογιστή έχει αρκετό πλάτος για να δείξει τη σταθερή διάταξη όπως προοριζόταν. Η οθόνη του κινητού δεν έχει, οπότε τα στοιχεία ξεχειλίζουν, επικαλύπτονται ή μικραίνουν μέχρι να γίνουν δυσανάγνωστα. Ο πιο γρήγορος τρόπος να δεις τι βλέπουν οι επισκέπτες από κινητό είναι να ελέγξεις την ιστοσελίδα στη λειτουργία προσομοίωσης κινητού του browser ή σε πραγματική συσκευή. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Επηρεάζει μια χαλασμένη διάταξη στο κινητό την κατάταξή μου στη Google;
Ναι. Η Google χρησιμοποιεί mobile-first indexing, δηλαδή η έκδοση για κινητό μιας σελίδας είναι αυτή που αξιολογεί κυρίως για την κατάταξη. Μια ιστοσελίδα με προβλήματα εμφάνισης στο κινητό, μικρό κείμενο ή περιεχόμενο που ξεχειλίζει από το viewport θα παίρνει χαμηλότερες βαθμολογίες ευχρηστίας, κάτι που επηρεάζει τη συνολική απόδοση στην αναζήτηση. Η διόρθωση των προβλημάτων στο κινητό είναι και βελτίωση της εμπειρίας χρήστη και όφελος για το SEO.
Τι προκαλεί οριζόντια κύλιση σε ιστοσελίδα στο κινητό;
Η οριζόντια κύλιση στο κινητό δείχνει σχεδόν πάντα ένα στοιχείο με σταθερό πλάτος σε pixel που ξεπερνά το πλάτος της οθόνης του κινητού. Συνηθισμένοι ένοχοι είναι πίνακες, πλαϊνές στήλες, ενσωματωμένο περιεχόμενο, εικόνες χωρίς περιορισμό πλάτους και containers με συγκεκριμένο πλάτος σε pixel αντί για ποσοστό. Αν εντοπίσεις το στοιχείο που ξεχειλίζει στα εργαλεία προγραμματιστή του browser και αντικαταστήσεις το σταθερό πλάτος με ποσοστό ή προσθέσεις έλεγχο υπερχείλισης στο γονικό του container, συνήθως λύνεται το πρόβλημα.
Πώς δοκιμάζω αν η ιστοσελίδα μου είναι φιλική προς το κινητό;
Άνοιξε την ιστοσελίδα σε πραγματικό κινητό και κύλησε όλες τις βασικές σελίδες. Μετά άνοιξέ την στα εργαλεία προγραμματιστή ενός browser υπολογιστή και χρησιμοποίησε τη λειτουργία προσομοίωσης συσκευής για να τη δεις σε διάφορα πλάτη οθόνης. Για δομημένο έλεγχο, πέρασε τις σελίδες από την αναφορά ευχρηστίας κινητού του Google Search Console, που επισημαίνει συγκεκριμένα ζητήματα όπως κείμενο πολύ μικρό, στοιχεία που πατιούνται και είναι πολύ κοντά και προβλήματα ρύθμισης του viewport. Οι δύο προσεγγίσεις μαζί δίνουν την πιο πλήρη εικόνα.
Μπορώ να διορθώσω μια χαλασμένη ιστοσελίδα για κινητό χωρίς να την ξαναχτίσω ολόκληρη;
Εξαρτάται από το πώς χτίστηκε αρχικά η ιστοσελίδα. Αν τρέχει σε πλατφόρμα που υποστηρίζει responsive θέματα, η αλλαγή σε responsive θέμα είναι συχνά η πιο γρήγορη λύση και δεν απαιτεί να ξαναχτίσεις το περιεχόμενο από την αρχή. Αν η ιστοσελίδα είναι γραμμένη με custom κώδικα και μη responsive διάταξη, στοχευμένες αλλαγές CSS με media queries μπορούν να λύσουν συγκεκριμένα προβλήματα χωρίς πλήρη ανακατασκευή. Αν όμως η διάταξη είναι χτισμένη σε πίνακες ή στηρίζεται παντού σε σταθερά πλάτη, μια πλήρης ανακατασκευή σε responsive βάση είναι συνήθως πιο αποδοτική από το μπάλωμα μεμονωμένων προβλημάτων.
Γιατί οι επισκέπτες φεύγουν από την ιστοσελίδα μου μετά από λίγα δευτερόλεπτα στο κινητό;
Όταν οι επισκέπτες φτάνουν σε σελίδα με προβλήματα εμφάνισης, δυσανάγνωστο κείμενο, χαλασμένη πλοήγηση ή εικόνες που φορτώνουν αργά, φεύγουν γρήγορα επειδή η σελίδα δεν καλύπτει τις βασικές προσδοκίες ευχρηστίας τους. Οι επισκέπτες από κινητό έχουν μικρότερη ανοχή στην τριβή από όσους είναι σε υπολογιστή. Αν η διάταξη είναι χαλασμένη ή αργή, θα γυρίσουν στα αποτελέσματα αναζήτησης και θα πατήσουν στο αποτέλεσμα ενός ανταγωνιστή. Το άρθρο για το γιατί οι επισκέπτες φεύγουν από την ιστοσελίδα σου καλύπτει όλο το φάσμα των λόγων που φεύγει κανείς γρήγορα και πώς να βρεις ποιος επηρεάζει τη δική σου ιστοσελίδα.