Responsive σχεδιασμός ιστοσελίδων για κινητές συσκευές: κριτήρια πέρα από το πλάτος

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

Η συσκευή είναι σύνολο συνθηκών, όχι μία ανάλυση

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

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

Πίνακας συνθηκών που πρέπει να ελεγχθούν

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

Διάταξη με βάση τον διαθέσιμο χώρο

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

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

Προσανατολισμός και περιορισμένο ύψος

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

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

Αφή, δείκτης και αλληλεπίδραση χωρίς αιώρηση

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

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

Κίνηση, προτιμήσεις χρήστη και σταθερότητα

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

Αυτό το κριτήριο συνδέει τον responsive σχεδιασμό με ευρύτερη ποιότητα αλληλεπίδρασης και όχι μόνο με την εμφάνιση.

Εικόνες και περιεχόμενο ανάλογα με το πλαίσιο

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

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

Έλεγχος υπηρεσίας πριν την παραλαβή

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

Ο κατάλογος αυτός είναι πιο χρήσιμος από μια γενική δήλωση «φιλικό προς κινητά», γιατί περιγράφει συγκεκριμένες συνθήκες που μπορούν να επαναληφθούν.

Πώς επιλέγεται η κατάλληλη υπηρεσία

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

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

Τι σημαίνει ανθεκτικό συστατικό διεπαφής

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

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

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

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