Περιηγώ στο διαδίκτυο καθημερινά, σε πολλές συσκευές. Χρησιμοποιώ το Macbook Pro, το iMac, το PC, το iPad, το iPhone και ναι ακόμη και την τηλεόραση μου. Έτσι, με ενοχλεί πραγματικά όταν βλέπω ιστοσελίδες που δεν έχουν βελτιστοποιηθεί για μεγαλύτερες αναλύσεις οθόνης ή που χρειάζονται δύο λεπτά για να φορτώσουν την κινητή συσκευή μου.
Έχουμε όλοι αγκαλιάσει την έννοια του ανταποκρινόμενου σχεδιασμού. Πολύ λίγοι άνθρωποι διαφωνούν. Στην πραγματικότητα, το μόνο πειστικό repost που έχω ακούσει πρόσφατα είναι ότι ένας πελάτης δεν είναι πρόθυμος να πληρώσει για το επιπλέον χρόνο που εμπλέκεται. Αλλά όπως και με οποιαδήποτε νέα πρακτική, οι μύθοι έχουν μεγαλώσει για να την αντισταθμίσουν.
Ας δούμε αν μπορούμε να αποδώσουμε μερικές από αυτές τις παρανοήσεις ...
Ναι, ο κινητός ιστός εκρήγνυται και ναι, είναι η κινητήρια δύναμη πίσω από την ευαίσθητη σχεδίαση, αλλά όταν σκεφτόμαστε τον αποκρινόμενο σχεδιασμό, πρέπει να εξετάσουμε κάτι περισσότερο από το κινητό. Με την εισαγωγή των οθονών αμφιβληστροειδούς και των προγραμμάτων περιήγησης βιντεοπαιχνιδιών, οι χρήστες του Διαδικτύου βλέπουν τώρα ιστοσελίδες σε αναλύσεις μεγαλύτερης οθόνης και σε πολλά διαφορετικά πλαίσια.
Προσπαθήστε να λάβετε υπόψη διαφορετικά περιβάλλοντα χρήστη κατά το σχεδιασμό και την ανάπτυξη ανταποκρινόμενων ιστοτόπων. Πρέπει να σκεφτείτε τη συσκευή που χρησιμοποιεί ένας χρήστης: είναι ο χρήστης σε μια κινητή συσκευή ή στο σπίτι μπροστά από την τηλεόραση; Πρέπει να σκεφτείτε πού εντοπίζεται ο χρήστης: είναι ο χρήστης στη γραμμή στο κατάστημα παντοπωλείων ή κάμπινγκ έξω στην έρημο; Έχοντας καλό περιεχόμενο δεν σημαίνει τίποτα εάν ο ιστότοπός σας διαρκεί δέκα λεπτά για να φορτώσει, ενώ οι χρήστες σας κάθεται στην παραλία έχοντας μαργαρίτα.
Το περιεχόμενο είναι όλα, αλλά το περιβάλλον είναι παντού και είναι κάτι που δεν έχετε απολύτως κανένα έλεγχο. Για το λόγο αυτό, ρεαλιστικά, το περιεχόμενό σας πρέπει να κλιμακώνεται σε οποιαδήποτε ανάλυση, μεγάλη ή μικρή. Έχουμε στη διάθεσή μας ένα σύνολο εργαλείων που θα μας επιτρέψουν να χειριστούμε τις διατάξεις, να βελτιστοποιούμε τα μεγέθη των κειμένων και να αυξάνουμε την απόδοση για οποιοδήποτε περιβάλλον, ώστε να θυμάστε να τα χρησιμοποιείτε.
Θυμηθείτε ότι το πλαίσιο μετατοπίζεται συνεχώς, γι 'αυτό είναι τόσο σημαντικό να ισορροπήσετε την οπτική διάταξη, τις ανάγκες του χρήστη και τις επιδόσεις όταν πλησιάζετε σε ένα ανταποκρινόμενο σχέδιο. Δεν πρόκειται μόνο για το κινητό.
Συνηθίζαμε να υποστηρίζουμε ότι ο υπεύθυνος σχεδιασμός ιστοσελίδων δεν θα λειτουργήσει για κάθε έργο και ότι εξαρτάται από την περίπτωση χρήσης. Λοιπόν, πρόσφατα τροποποίησα την άποψή μου και πιστεύω ακράδαντα ότι, αν θέλουμε να σχεδιάσουμε και να σχεδιάσουμε χρήστες, πρέπει να προσεγγίσουμε κάθε σχέδιο με το ντιζάιν σχεδίασης.
Οι ιστοσελίδες σταθερού πλάτους μπορούν να περιοριστούν σε μεγαλύτερες και μικρότερες αναλύσεις οθόνης. Η κατώτατη γραμμή είναι ότι οι ιστότοποί μας θα πρέπει να είναι προσβάσιμοι σε όλους ανεξάρτητα από τη συσκευή ή την ανάλυση οθόνης που χρησιμοποιούν, χωρίς περιορισμούς.
Έχω παρατηρήσει μια τάση που αναδύεται στη βιομηχανία όπου οι σχεδιαστές και οι προγραμματιστές χτίζουν ανταποκρινόμενες ιστοσελίδες που κλιμακώνονται σε συγκεκριμένες αναλύσεις συσκευών μόνο, και είμαι ένοχος για αυτό επίσης. Οι τρεις πιο συνηθισμένες συσκευές είναι φυσικά φορητοί / επιτραπέζιοι υπολογιστές, iPad και iPhones (ή άλλες κινητές συσκευές). Ως σχεδιαστές πρέπει να συνειδητοποιήσουμε ότι ο ευαίσθητος σχεδιασμός αφορά τα σημεία διακοπής του σχεδιασμού και καθιστά το περιεχόμενο ευανάγνωστο και προσβάσιμο σε όλους, όχι μόνο στους χρήστες ορισμένων συσκευών.
Τούτου λεχθέντος, αν σχεδιάζετε ιστοσελίδες σε ένα πρόγραμμα λογισμικού, είναι σημαντικό να έχετε κάποιο είδος πλαισίου με σημεία διακοπής για να εργαστείτε μακριά από. Προτείνω να δημιουργήσετε το δικό σας. Βελτιστοποιήστε τη διάταξη σας σύμφωνα με το περιεχόμενο. Ο καλύτερος τρόπος για να μάθετε ποια σημεία διακοπής λειτουργούν καλύτερα είναι να σχεδιάσετε πρώτα μερικά wireframes για να πάρετε μια ιδέα, τότε μπορείτε να αρχίσετε να καθορίζετε εικονοστοιχεία στο λογισμικό της επιλογής σας. Βεβαιωθείτε ότι εργάζεστε από το ίδιο πλέγμα κατά την κατασκευή και τη σχεδίαση.
Εάν είστε σαν εμένα τότε κωδικοποιείτε τα wireframes σας και δημιουργείτε ένα ζωντανό πρωτότυπο. Αυτό με βοήθησε πολύ με την απόκριση της ροής εργασίας μου, επειδή μπορώ να δημιουργήσω ένα ρευστό mockup και να προσθέσω σημεία διακοπής στο σχεδιασμό καθώς ο σχεδιασμός σπάει αντί να προσπαθεί να τσακίσει pixels στο Photoshop.
Ένα από τα μεγαλύτερα προβλήματα που έχω παρατηρήσει σε πολλές ανταποκρίσιμες ιστοσελίδες είναι ότι η τυπογραφία ρίχνεται στους λύκους όταν οι σχεδιαστές και οι προγραμματιστές επιλέγουν να χρησιμοποιήσουν τα σημεία διακοπής της συσκευής πάνω από τα σημεία διακοπής του σχεδιασμού. Κατά τη γνώμη μου, η επιλογή της συσκευής σε σχέση με το σχεδιασμό δείχνει πλήρη αδιαφορία για το περιεχόμενο που δημοσιεύεται και για το χρήστη που καταναλώνει αυτό το περιεχόμενο. Το περιεχόμενο θα πρέπει να διατηρεί την αναγνωσιμότητά του μέχρι να προσαρμοστεί για να διατηρήσει αυτή την αναγνωσιμότητα. Το περιεχόμενο θα είναι πάντα βασιλιά και η προσβασιμότητα και η αναγνωσιμότητα του περιεχομένου σας θα πρέπει να είναι πάντα η υψηλότερη προτεραιότητα.
Ένας από τους τρόπους που μου αρέσει να χειρίζομαι τη διατήρηση της αναγνωσιμότητας του περιεχομένου σε ένα ανταποκρινόμενο σχέδιο είναι η χρήση σχετικών μονάδων όπως ems για μέγεθος γραμματοσειράς, padding, περιθώρια και διάταξη. Ο ευέλικτος σχεδιασμός αφορά τα αναλογικά σχέδια και, κατά τη γνώμη μου, τα ems είναι τέλεια προσαρμοσμένα.
Τα Ems είναι σχετικές μονάδες που μπορούν να κλιμακωθούν στο μέγεθος γραμματοσειράς των γονικών στοιχείων, μπορούν να σας εξοικονομήσουν πολύ χρόνο και ταλαιπωρία και να σας βοηθήσουν να διατηρήσετε τη δομή ολόκληρης της διάταξης. Τι σημαίνει αυτό; Λοιπόν αυτό σημαίνει ότι, καθώς το βασικό μέγεθος γραμματοσειράς αυξάνεται ή μειώνεται, η διάταξη ρυθμίζεται ομοιόμορφα χωρίς να δημιουργείται πρόβλημα.
Ακολουθεί ένα παράδειγμα, ας πούμε ότι έχουμε βρει δύο σημεία διακοπής του σχεδιασμού, ένα για μια πολύ μεγάλη επιφάνεια εργασίας σε super resolution και μία για ένα μικρό tablet. Ας πούμε επίσης ότι το βασικό μέγεθος γραμματοσειράς είναι 16px το οποίο ισούται με 1,0 και γεμίζουμε το βασικό μέγεθος γραμματοσειράς έως και 22px όταν ο ιστότοπος προβάλλεται με ανάλυση 3840 x 2160 (σούπερ ανάλυση) και μειώνουμε αυτό το βασικό μέγεθος γραμματοσειράς 14 px σε ανάλυση 800 x 600 (μικρό φορητό υπολογιστή / tablet). Έχουμε αλλάξει δραματικά το μέγεθος του τύπου και τη διάταξη της ιστοσελίδας μας σε δύο καθορισμένα σημεία διακοπής, ένα μεγάλο και ένα μικρό. Ένας τίτλος στο 1.4μ με μέγεθος γραμματοσειράς 22px για μεγαλύτερες αναλύσεις σημαίνει ότι το 1.4μ ισούται με 30.8px και το μικρότερο γραμματοσειρά μεγέθους 14px, 1.4em ίσο με 19.6px. Παρόλο που το μέγεθος των γραμματοσειρών μας ήταν εντυπωσιακά μεγαλύτερο στα 3840 x 2160 δεν χρειάζεται να ανησυχούμε για το σπάσιμο της διάταξης επειδή έχει επίσης προσαρμοστεί. Ας πούμε ότι το στοιχείο που περιέχει είχε πλάτος 50εκ. Σε ανάλυση 800 x 600 που θα ήταν 700px αλλά με ανάλυση 3840 x 2160 θα ήταν 1100px. Το παραπέτασμα και τα περιθώρια θα προσαρμοστούν επίσης. Με τη μεγαλύτερη ανάλυση που έχει μέγεθος γραμματοσειράς και διάταξη σε ems επέτρεψε στον σχεδιασμό μας να αναβαθμιστεί ανάλογα, γεγονός που καθιστά το περιεχόμενό μας πιο προσβάσιμο και πιο ευανάγνωστο.
Ο σκοπός του ανταποκρινόμενου σχεδιασμού είναι να κάνει το περιεχόμενό σας προσιτό σε όλους, ακόμα και σε άτομα με ειδικές ανάγκες, σε όλες τις αναλύσεις οθόνης και τις συσκευές. Η απόκρυψη περιεχομένου δεν είναι ποτέ καλή ιδέα και, πιθανότατα, αν πρέπει να το κρύψετε δεν χρειάστηκε να ξεκινήσει. Η απόκρυψη περιεχομένου το καθιστά δυσανάγνωστο στους αναγνώστες οθόνης και τώρα καθιστάτε το περιεχόμενό σας απρόσιτο σε όσους έχουν οπτικές ή γνωστικές αναπηρίες. Λάβετε αυτό υπόψη, το περιεχόμενο πρέπει να είναι καθολικό σε όλες τις συσκευές, μην τιμωρείτε τους χρήστες σας περιορίζοντας τι μπορούν να δουν σε ξεχωριστή συσκευή.
Τούτου λεχθέντος, εξακολουθώ να βρίσκω μερικές περιπτώσεις χρήσης όπου απεικόνιση: καμία? έρχεται βολικό. Κυρίως όλες οι περιπτώσεις χρήσης ασχολούνται με κάποιο είδος πλοήγησης, και χρησιμοποιώ οθόνη: κανένα? σε στοιχεία πλοήγησης που αλλάζουν μορφή σε διαφορετικές συσκευές. Δεν είναι ποτέ καλή ιδέα να περιορίσετε ή να αποκρύψετε περιεχόμενο σε διαφορετικές συσκευές, επειδή πιθανότατα βάσατε αυτή την απόφαση σε υπόθεση και κάποιος χρήστης, κάπου, θα έχει πολύ κακή εμπειρία.
Έχουν υπάρξει αρκετές ιστοσελίδες που έχω δει τελευταία που έχουν δείξει έλλειψη συμπάθειας προς τους χρήστες με χαμηλό εύρος ζώνης. Η πλειοψηφία αυτών των ιστότοπων έχει τα ίδια πράγματα σε κοινές, μεγάλες εικόνες και μεγάλες βιβλιοθήκες JavaScript και πολλές από αυτές τις ιστοσελίδες θα μπορούσαν να έχουν βελτιστοποιηθεί εάν είχαν σχεδιαστεί με μια πρώτη κινητή προσέγγιση.
Επειδή υπάρχει ακόμα πολλή συζήτηση σχετικά με τις αποκρινόμενες εικόνες, είναι δύσκολο για οποιονδήποτε να δεσμευτεί σε κάποια λύση. Αντιλαμβάνομαι το δίλημμα, αλλά η αναμονή για μια τέλεια λύση που είναι πρότυπη σε όλα τα προγράμματα περιήγησης και συσκευές δεν καθιστά τον τρέχοντα ιστότοπό σας πιο εύκολο στη χρήση σε συσκευές με περιορισμένο εύρος ζώνης. Βρείτε μια λύση που διορθώνει καλύτερα το πρόβλημά σας και τρέξτε μαζί της. Η εξεύρεση λύσης δεν σημαίνει προβλήματα επιδόσεων για τον καθένα και αυτό αποδυναμώνει εντελώς τον σκοπό του ανταποκρινόμενου σχεδιασμού.
Μεγάλες βιβλιοθήκες JavaScript μπορούν επίσης να προκαλέσουν προβλήματα σε μικρότερες συσκευές. Δοκιμάστε να βρούμε έναν τρόπο να τους καλέσετε υπό όρους με βάση την ανάλυση της οθόνης ή τον τύπο της συσκευής. Η απόδοση δεν θα πρέπει να είναι μια δεύτερη σκέψη, όταν πρόκειται για σχέδιο που ανταποκρίνεται.
Ο ιστός έχει εξαντληθεί και με την έλευση της τεχνολογίας κινητών και smartphone μπορούμε να έχουμε πρόσβαση σε περιεχόμενο οπουδήποτε και σε οποιοδήποτε πλαίσιο. Είναι σημαντικό να διασφαλίσουμε ότι μπορούμε να φτάσουμε σε όλους τους χρήστες μας και να τους δώσουμε ό, τι θέλουν, όταν το θέλουν. Ο υπεύθυνος σχεδιασμός είναι μια πολύ νέα τεχνική και κατά τη γνώμη μου είναι η τέλεια τεχνική για την ενοποίηση του περιεχομένου μας στον ιστό.
Ποιοι άλλοι μύθοι σχετικά με το σχεδιασμό που θέλετε να αποκρύψετε; Υπάρχουν οποιεσδήποτε αρνητικές συνέπειες στον σχεδιασμό; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, ανταποκρινόμενη εικόνα Ιστού μέσω Shutterstock.