Κατασκευή ιστοσελίδων για όλους τους τύπους συσκευών

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

Τι σημαίνει πραγματική προσαρμογή σε κάθε οθόνη

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

Κινητό τηλέφωνο: η πιο αυστηρή δοκιμή προτεραιοτήτων

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

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

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

Επιτραπέζιος υπολογιστής: περισσότερος χώρος χωρίς οπτική φλυαρία

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

Περιεχόμενο πρώτα και όχι «μικρογραφία» της μεγάλης έκδοσης

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

Εικόνες, βίντεο και φόρμες σε διαφορετικές συσκευές

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

Πρακτικός πίνακας απόφασης πριν από την κατασκευή

Κίνδυνοι που αξίζει να εντοπιστούν πριν τη δημοσίευση

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

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

Πότε θεωρείται ολοκληρωμένη η εμπειρία πολλών συσκευών

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

Σημεία αλλαγής διάταξης με βάση το περιεχόμενο

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

Έλεγχος με πραγματικό περιεχόμενο και όχι με κενές μακέτες

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

Συντήρηση μετά τη δημοσίευση

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

Προσβασιμότητα και μέγεθος οθόνης δεν είναι το ίδιο πράγμα

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