Κατασκευή ιστοσελίδων με συμβατότητα κινητού που ελέγχεται στην πράξη

Η συμβατότητα κινητού δεν σημαίνει ότι μια σελίδα απλώς χωρά σε μικρότερη οθόνη. Μια πραγματικά προσαρμοσμένη ιστοσελίδα αλλάζει τη διάταξη, την πλοήγηση, τα μεγέθη κειμένου, τα σημεία αφής και τον τρόπο εμφάνισης εικόνων και φορμών. Ο στόχος είναι ο επισκέπτης να μπορεί να διαβάσει, να βρει πληροφορίες και να ολοκληρώσει μια ενέργεια χωρίς ζουμ, οριζόντια κύλιση ή ακριβείς κινήσεις με το δάχτυλο. Αυτό πρέπει να σχεδιάζεται από την αρχή και να ελέγχεται πριν την τελική παράδοση.

Προσαρμοζόμενη σχεδίαση σημαίνει προσαρμογή και όχι σμίκρυνση

Η προσαρμοζόμενη σχεδίαση οργανώνει το ίδιο περιεχόμενο διαφορετικά ανάλογα με τον διαθέσιμο χώρο. Μια σειρά από τρεις στήλες μπορεί να γίνει μία στήλη, μια μεγάλη οριζόντια πλοήγηση να μετατραπεί σε συμπαγές μενού και μια σύνθετη περιοχή να απλοποιηθεί ώστε να παραμένει κατανοητή. Τα σημεία αλλαγής διάταξης δεν πρέπει να επιλέγονται μηχανικά μόνο από γνωστά μεγέθη συσκευών. Χρειάζεται να τοποθετούνται εκεί όπου το ίδιο το περιεχόμενο αρχίζει να πιέζεται, να επικαλύπτεται ή να χάνει την αναγνωσιμότητά του.

Η ιεράρχηση περιεχομένου γίνεται πιο αυστηρή στη μικρή οθόνη

Σε κινητό, ο χρήστης βλέπει πολύ μικρότερο τμήμα της σελίδας κάθε στιγμή. Για αυτό η σειρά των πληροφοριών αποκτά μεγαλύτερη σημασία. Ο τίτλος, η βασική πρόταση αξίας και η κύρια ενέργεια πρέπει να εμφανίζονται χωρίς να προηγούνται μεγάλα διακοσμητικά τμήματα. Οι δευτερεύουσες πληροφορίες μπορούν να ακολουθούν χαμηλότερα ή να οργανώνονται σε σαφείς ενότητες. Η γενική αρχιτεκτονική μιας ιστοσελίδας πρέπει λοιπόν να σχεδιάζεται με προτεραιότητες που λειτουργούν και όταν ο διαθέσιμος χώρος μειώνεται.

Κουμπιά και σύνδεσμοι πρέπει να είναι εύκολοι στην αφή

Ένα κουμπί που λειτουργεί άψογα με ποντίκι μπορεί να είναι δύσχρηστο με το δάχτυλο, ειδικά αν είναι μικρό ή βρίσκεται πολύ κοντά σε άλλο σύνδεσμο. Η πλοήγηση αφής χρειάζεται επαρκείς επιφάνειες επιλογής, καθαρή απόσταση μεταξύ ενεργών στοιχείων και ξεκάθαρη οπτική ένδειξη για το τι μπορεί να πατηθεί. Το ίδιο ισχύει για φίλτρα, εικονίδια, επιλογείς ημερομηνίας και μικρά στοιχεία ελέγχου. Η χρηστικότητα δεν κρίνεται από το αν «πατιέται» τεχνικά, αλλά από το αν πατιέται άνετα χωρίς λάθη.

Οι φόρμες χρειάζονται διαφορετική προσοχή στο κινητό

Μεγάλος αριθμός πεδίων, ασαφείς ετικέτες και μικρά μηνύματα σφάλματος κάνουν μια φόρμα κουραστική σε φορητή συσκευή. Κρατήστε μόνο τα απαραίτητα πεδία, χρησιμοποιήστε σωστό τύπο εισαγωγής όπου είναι χρήσιμος και δείξτε το σφάλμα ακριβώς δίπλα στο σημείο που πρέπει να διορθωθεί. Η σειρά των πεδίων πρέπει να ακολουθεί φυσική λογική, ενώ η κύρια ενέργεια να παραμένει εμφανής. Αν μια ιστοσελίδα βασίζεται σε αιτήματα προσφοράς ή ραντεβού, η ποιότητα της φόρμας σε κινητό είναι μέρος της επιχειρηματικής λειτουργίας και όχι μικρή τεχνική λεπτομέρεια.

Οι εικόνες πρέπει να προσαρμόζονται χωρίς να βαραίνουν τη σελίδα

Μεγάλες εικόνες που μεταφορτώνονται χωρίς προσαρμογή μπορούν να καθυστερούν την εμφάνιση της σελίδας, παρότι τελικά προβάλλονται σε μικρό πλάτος. Η βελτιστοποίηση εικόνων αφορά σωστές διαστάσεις, κατάλληλη συμπίεση και επιλογή αρχείου που αντιστοιχεί στον διαθέσιμο χώρο. Παράλληλα, η περικοπή μιας εικόνας πρέπει να διατηρεί το σημαντικό θέμα ορατό και στη στενή διάταξη. Δεν αρκεί να οριστεί απλώς μέγιστο πλάτος. Χρειάζεται να ελεγχθεί αν η εικόνα συνεχίζει να εξυπηρετεί το περιεχόμενο όταν αλλάζει αναλογία ή θέση.

Η τυπογραφία πρέπει να παραμένει αναγνώσιμη χωρίς ζουμ

Το μέγεθος των γραμμάτων, το μήκος της γραμμής, το διάστιχο και η απόσταση ανάμεσα στις παραγράφους επηρεάζουν άμεσα την ανάγνωση σε κινητό. Πολύ μικρό κείμενο κουράζει, ενώ υπερβολικά μεγάλοι τίτλοι μπορούν να καταλάβουν ολόκληρη την πρώτη οθόνη. Η σωστή λύση είναι μια κλιμακωτή τυπογραφία που προσαρμόζεται ομαλά. Οι τίτλοι πρέπει να ξεχωρίζουν χωρίς να σπάνε άκομψα και τα μεγάλα ονόματα ή οι διευθύνσεις να μην προκαλούν υπερχείλιση έξω από το πλαίσιο.

Μενού, επικεφαλίδα και σταθερά στοιχεία θέλουν δοκιμή

Ένα σταθερό μενού μπορεί να βοηθά στην πρόσβαση, αλλά αν καταλαμβάνει πολύ ύψος μειώνει δραστικά τον χώρο του περιεχομένου. Αναδυόμενα πλαίσια, ειδοποιήσεις συγκατάθεσης και γραμμές προσφορών μπορούν επίσης να συσσωρευτούν και να κρύψουν μεγάλο μέρος της οθόνης. Η συμβατότητα κινητού πρέπει να ελέγχεται με όλα αυτά τα στοιχεία ενεργά, όχι μόνο σε μια καθαρή δοκιμαστική σελίδα. Ιδιαίτερη προσοχή χρειάζεται και στο άνοιγμα του πληκτρολογίου, που μειώνει ακόμη περισσότερο τον διαθέσιμο χώρο.

Η ταχύτητα είναι μέρος της κινητής εμπειρίας

Η φορητή χρήση δεν γίνεται πάντα σε ιδανικές συνθήκες σύνδεσης ή σε ισχυρή συσκευή. Για αυτό μια σελίδα χρειάζεται λογικό όγκο πόρων, περιορισμένα περιττά αρχεία και προτεραιότητα στο περιεχόμενο που πρέπει να εμφανιστεί πρώτα. Βαρύς οπτικός διάκοσμος, πολλά πρόσθετα και μη αναγκαίος κώδικας μπορούν να κάνουν την αλληλεπίδραση αργή. Η τεχνική βελτιστοποίηση δεν πρέπει να αντιμετωπίζεται ξεχωριστά από τον σχεδιασμό: κάθε εφέ και λειτουργία έχει κόστος φόρτωσης και πρέπει να δικαιολογεί την παρουσία του.

Ο έλεγχος χρειάζεται πραγματικές συσκευές και διαφορετικές διαστάσεις

Η προεπισκόπηση του προγράμματος περιήγησης είναι χρήσιμη, αλλά δεν αρκεί από μόνη της. Πριν την παράδοση, χρειάζεται έλεγχος σε περισσότερες από μία φυσικές συσκευές, σε κατακόρυφο και οριζόντιο προσανατολισμό και σε διαφορετικά πλάτη. Δοκιμάστε πλοήγηση, φόρμες, κλήσεις, συνδέσμους, βίντεο, χάρτες, πίνακες και κάθε διαδραστικό στοιχείο. Ένας ευρύτερος οδηγός για ποιοτική κατασκευή ιστοσελίδων μπορεί να λειτουργήσει συμπληρωματικά, αλλά η κινητή εμπειρία χρειάζεται δική της λίστα ελέγχου.

Τι να ζητήσετε πριν εγκρίνετε την παράδοση

Ζητήστε να δείτε την ιστοσελίδα σε αντιπροσωπευτικά πλάτη και μην περιοριστείτε στην αρχική σελίδα. Ελέγξτε σελίδες με πολύ κείμενο, φωτογραφίες, φόρμες και τυχόν ειδικές λειτουργίες. Βεβαιωθείτε ότι δεν υπάρχουν οριζόντιες μπάρες κύλισης, κομμένα κουμπιά, επικαλύψεις ή στοιχεία που αλλάζουν θέση απρόβλεπτα. Η κατασκευή ιστοσελίδων με συμβατότητα κινητού ολοκληρώνεται όταν ο χρήστης μπορεί να εκτελέσει τις βασικές εργασίες του με άνεση σε μικρή οθόνη, όχι όταν απλώς περνά ένας οπτικός έλεγχος.

Μην ξεχνάτε πίνακες, χάρτες και ενσωματωμένο περιεχόμενο

Τα πιο συχνά προβλήματα σε κινητό δεν προέρχονται πάντα από το βασικό σχέδιο αλλά από στοιχεία που προστίθενται αργότερα. Ένας φαρδύς πίνακας, ένας ενσωματωμένος χάρτης, ένα βίντεο ή ένα εξωτερικό πλαίσιο μπορεί να ξεπεράσει το πλάτος της οθόνης και να δημιουργήσει οριζόντια κύλιση. Κάθε τέτοιο στοιχείο χρειάζεται δική του συμπεριφορά: δυνατότητα οριζόντιας κύλισης μέσα στο πλαίσιό του, αλλαγή μορφής, προσαρμοζόμενο μέγεθος ή εναλλακτική απλούστερη παρουσίαση. Ο έλεγχος πρέπει να γίνεται σε πραγματικές σελίδες περιεχομένου, όχι μόνο σε πρότυπα χωρίς δεδομένα.

Προβλέψτε μεγάλα κείμενα και πραγματικές τιμές

Η διάταξη μπορεί να φαίνεται σωστή με σύντομες δοκιμαστικές λέξεις αλλά να σπάσει όταν εμφανιστεί μεγάλο επώνυμο, μακρύς τίτλος υπηρεσίας, διεύθυνση ή μήνυμα σφάλματος. Στα κουμπιά, στις κάρτες και στις επικεφαλίδες χρειάζεται να υπάρχει χώρος για πραγματικό περιεχόμενο και όχι μόνο για το ιδανικό δείγμα. Το ίδιο ισχύει για μεταφράσεις, όπου μια λέξη μπορεί να καταλάβει περισσότερο χώρο. Η ανθεκτική σχεδίαση δεν προσπαθεί να προβλέψει κάθε πιθανό κείμενο, αλλά αποφεύγει άκαμπτα ύψη και στενά πλαίσια που καταρρέουν εύκολα.

Η κινητή έκδοση πρέπει να διατηρεί όλη την κρίσιμη λειτουργία

Η απλοποίηση σε μικρή οθόνη δεν πρέπει να αφαιρεί πληροφορίες ή ενέργειες που είναι απαραίτητες. Αν ένα φίλτρο, ένας τρόπος επικοινωνίας ή μια σημαντική επιλογή υπάρχει μόνο σε επιτραπέζια προβολή, ο χρήστης κινητού παίρνει υποδεέστερη υπηρεσία. Επιτρέπεται να αλλάζει η μορφή, να συμπτύσσονται ενότητες ή να μετακινούνται στοιχεία, αλλά η βασική λειτουργικότητα πρέπει να παραμένει προσβάσιμη. Πριν την έγκριση, είναι χρήσιμο να εκτελεστούν τα ίδια σενάρια εργασίας σε κινητό και υπολογιστή και να επιβεβαιωθεί ότι καταλήγουν στο ίδιο αποτέλεσμα.