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

Ο υπεύθυνος σχεδιασμός ιστοσελίδων είναι η διαδικασία σχεδιασμού ενός ιστότοπου ή μιας εφαρμογής ιστού, έτσι ώστε το περιεχόμενό του να προσαρμόζεται κατάλληλα ανάλογα με τη συσκευή στην οποία βλέπει. Πριν από μερικά χρόνια, είδα μια άριστη διάσκεψη από τον Ethan Marcotte - ο οποίος εφάρμοσε τον όρο «ανταποκρινόμενος σχεδιασμός ιστοσελίδων» - στον οποίο παρομοίασε τοποθεσίες που ανταποκρίνονται στο δέντρο Pando του Utah. έναν ενιαίο οργανισμό με μια συνδεδεμένη ρίζα δομή, που αναδύεται από το έδαφος σε διαφορετικά μέρη, διαφορετικά πλαίσια, σε διαφορετικά μεγέθη, αλλά όλα φέρουν την ίδια γενετική βάσης.

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

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

Αλλά ο σχεδιασμός που ανταποκρίνεται δεν είναι χωρίς τα προβλήματά του. Εξ ορισμού, τα ανταποκρινόμενα σχέδια «ανταποκρίνονται» στο μέγεθος του παραθύρου, όχι σε περιεχόμενο. Οι παραλλαγές που βασίζονται σε κοντέινερ στα ερωτήματα των μέσων ενημέρωσης του CSS έχουν τεθεί ως λύση, αλλά μέχρι στιγμής είναι μόνο ένα post-it στον πίνακα του άλλου.

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

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

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

εάν υπάρχει ευθύνη για την κατανομή, σίγουρα βρίσκεται στην εφαρμογή

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

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

Προτεινόμενη εικόνα, Εικόνα Pando από τον Tony Frates μέσω του Flickr