Responsive σχεδιασμός για ιστοσελίδες: οι απαιτήσεις που πρέπει να οριστούν πρώτα

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

Απαίτηση 1: απογραφή τύπων σελίδας και περιεχομένου

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

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

Απαίτηση 2: εύρος πλάτους αντί για λίστα συσκευών

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

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

Απαίτηση 3: πλοήγηση και ιεραρχία ενεργειών

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

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

Απαίτηση 4: φόρμες, πίνακες και δύσκολα στοιχεία

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

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

Απαίτηση 5: εικόνες και πολυμέσα

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

Αυτές οι αποφάσεις συνδέονται με τη διαχείριση περιεχομένου: ο συντάκτης πρέπει να γνωρίζει τι είδους αρχείο ανεβάζει και ποια όρια έχει κάθε θέση.

Απαίτηση 6: απόδοση ως μέρος του εύρους

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

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

Κατάλογος απαιτήσεων πριν ξεκινήσει η υλοποίηση

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

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

Κριτήρια αποδοχής που μπορούν να ελεγχθούν

Τα κριτήρια πρέπει να εφαρμόζονται και σε πραγματικό περιεχόμενο με ακραίες αλλά ρεαλιστικές περιπτώσεις, όπως μακρύς τίτλος ή περισσότερα στοιχεία σε λίστα.

Τι παραδίδεται στο τέλος

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

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

Απαιτήσεις για αλλαγές μετά την πρώτη δημοσίευση

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

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

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

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