Ο υπεύθυνος σχεδιασμός ιστοσελίδων έχει γίνει σχεδόν πανταχού παρών λέξη στο διαδίκτυο. Δοκιμάστε να αναζητήσετε το # rwd στο Twitter για να βρείτε ισάξια κομμάτια και μηνύματα spam. Αυτή είναι μια κοινή φάση στην ωρίμανση μιας νέας ιδέας. Θυμάμαι όταν η AJAX ήταν όλη η οργή. ο όρος άρχισε να οδηγείται στο έδαφος. Τώρα, λίγοι άνθρωποι μιλούν για το AJAX, αλλά οι βιβλιοθήκες όπως το jQuery είναι πλήρως αγκαλιασμένες στη ροή εργασίας ενός προγραμματιστή.
Αυτό φαίνεται να αντικατοπτρίζει το τι συμβαίνει με την ανταποκρινόμενη σχεδίαση ιστοσελίδων. Ο όρος είναι παντού. Ένας φίλος μου είναι στην έκδοση περιοδικών, πήγε πρόσφατα σε μια διάσκεψη και ένας συντάκτης για ένα γνωστό νέο περιοδικό μιλούσε για τις επικείμενες τάσεις και ανέφερε ότι ανταποκρίνεται στον σχεδιασμό ιστοσελίδων. Οι συντάκτες ενδέχεται να μην είναι επαγγελματίες ιστού, αλλά γνωρίζουν τις λέξεις-κλειδιά.
Καθώς ο σχεδιασμός ιστοσελίδων με ευαισθησία κερδίζει ατμό, ο τρόπος που δημιουργούμε ιστοσελίδες άλλαξε. Καθώς ο όρος μεταβαίνει από το buzzword σε ένα κοινό μέρος κάθε σχεδίου web design, ο τρόπος που εργαζόμαστε ως επαγγελματίες του διαδικτύου πρέπει να αλλάξει. Έχοντας αυτό υπόψη, πρέπει να θέσουμε ορισμένους νέους βασικούς κανόνες για το πώς δουλεύουμε.
Όταν κάποιος σας λέει να "δείτε αυτό το site που ανταποκρίνεται", ποιο είναι το πρώτο πράγμα που κάνετε; Πιθανότατα να μεγεθύνετε το παράθυρο για να δείτε πώς αλλάζει η διάταξη. Πιθανώς να μην το ανοίξω στο τηλέφωνο και στο tablet μου και να αρχίσω να αλλάζω προσανατολισμούς ή να ξεκινήσω να τρέχω δοκιμές ταχύτητας σελίδας. Βαθμολογώ το πρόγραμμα περιήγησης και συνεχίζω με την ημέρα μου. Αυτή είναι η εμπειρία μας ως σχεδιαστές και προγραμματιστές, αλλά όχι ως χρήστες. Όταν επισκέπτομαι έναν ιστότοπο ως χρήστη, δεν έχω υπομονή. Δεν με νοιάζει αν το site λιώνει ωραία. Θέλω μόνο αυτό που θέλω.
"Squishy" είναι μια γραμμική κλιμάκωση μιας ιστοσελίδας. Η περιοχή πηγαίνει από κοκαλιάρικο σε λίπος; Αντί της γραμμικής κλίμακας, ο ανταποκρινόμενος σχεδιασμός ιστού θα πρέπει να επικεντρωθεί στη δημιουργία ενός πυρήνα του ιστότοπου και τη σταδιακή φόρτωση από εκεί, με βάση τις δυνατότητες. Φανταστείτε ένα site που έπρεπε να κατασκευαστεί για ένα μικροσκοπικό κινητό τηλέφωνο που τρέχει IE7 σε ένα δίκτυο EDGE. Αυτό θα πρέπει να είναι ο κεντρικός ιστότοπός σας και στη συνέχεια να κλιμακωθεί ανάλογα με το μέγεθος και τις δυνατότητες της οθόνης.
Ο υπεύθυνος σχεδιασμός ιστοσελίδων είναι περίπλοκος. Αυτό ακριβώς συμβαίνει. Θα ήθελα να υπήρχε κάτι που θα μπορούσα να σας πω για να το καταφέρετε εύκολα, αλλά δεν υπάρχει. Οι περισσότεροι άνθρωποι έχουν ανταποκριθεί στον ανταποκρινόμενο σχεδιασμό ιστοσελίδων προσθέτοντας κάτι στις ροές εργασίας τους, είτε πρόκειται για ένα νέο παραδοτέο είτε απλά πηγαίνοντας σε έναν προγραμματιστή και ρωτώντας αν ο σχεδιασμός τους θα λειτουργήσει με απόλυτη ανταπόκριση.
Έχω έναν φίλο που εργάζεται σε έναν ανταποκρινόμενο χώρο για έναν πελάτη. Χτίζει την τοποθεσία στο Photoshop σε μέγεθος επιφάνειας εργασίας. Μετά από μερικές mockups σε μερικές σελίδες, ήθελε να δείξει τι θα μοιάζει με τον ιστότοπο σε ένα tablet και ένα smartphone, γι 'αυτό έκανε και αυτά τα mockups. Μετά την παρουσίαση στον πελάτη, της δόθηκαν κάποια δημιουργικά τσιμπήματα. Υπάρχουν περίπου 50 αρχεία PSD για αυτόν τον ιστότοπο σε αυτό το σημείο. Χρειάζεται λίγες μέρες για να αναθεωρήσει τις διατάξεις.
Η προσπάθεια προσθήκης νέων σχεδίων μόνο θα έχει ως αποτέλεσμα μια χρονοβόρα και ασυνεπή διαδικασία. Ένας από τους καλύτερους τρόπους για να επιλυθεί αυτό είναι με το πρωτότυπο κορνίζες σας και την παρουσίαση αυτών στον πελάτη σας. Αυτό σας δίνει ένα παραδοτέο για να μιλήσετε απευθείας στη διάταξη του site χωρίς να μιλάτε ταυτόχρονα για το σχέδιο. Ίδρυμα από την ZURB είναι ένα εξαιρετικό εργαλείο για την κατασκευή πρωτοτύπων γρήγορα.
Απλά προσθέτοντας πρωτότυπα στη δουλειά σας δεν θα είναι αρκετό όμως. Για να μπορέσετε να δημιουργήσετε ανταποκρινόμενες τοποθεσίες, πρέπει να προσαρμόσετε, πράγμα που μας φέρνει στον επόμενο κανόνα.
Όταν ξεκίνησα αρχικά την κατασκευή ιστοσελίδων, χρησιμοποίησα δύο εργαλεία, Photoshop και GoLive. Τώρα έχω τουλάχιστον έξι προγράμματα που χρειάζομαι απολύτως για να οικοδομήσω ένα site. Χρησιμοποιώ ακόμα το Photoshop για τη δημιουργία γραφικών στοιχείων, αλλά σχεδιάζω κυρίως στο πρόγραμμα περιήγησης με το Sublime Text 2 και χρησιμοποιώ τα εργαλεία ανάπτυξης του Safari για να επιθεωρήσω στοιχεία στο iOS 6. Επίσης, χρησιμοποιώ το Codekit για να συντάξω το προ-επεξεργασμένο CSS και το Terminal για έλεγχο έκδοσης στο Git.
Ο υπεύθυνος σχεδιασμός ιστοσελίδων σημαίνει επίσης να αλλάξετε τον τρόπο που σχεδιάζετε. Αντί να φτιάξω μια ολόκληρη σελίδα στο Photoshop, χρησιμοποιώ Τα πλακάκια στυλ της Samantha Warren για την αρθρωτή οπτική σχεδίαση. Σχεδιάζοντας το οπτικό σήμα και τα στοιχεία διεπαφής ενός δικτυακού τόπου εκτός μιας πραγματικής διάταξης, μπορείτε να επικοινωνήσετε απευθείας με το σχέδιο και να το συνδυάσετε με τη διάταξη του πρωτοτύπου για να δημιουργήσετε τον ανταποκρινόμενο ιστότοπό σας στο πρόγραμμα περιήγησης.
Οι προεπεξεργαστές CSS είναι επίσης τεράστια βοήθεια σε οποιαδήποτε απόκριση ροής εργασίας. Για να το θέσουμε απλά, οι προεπεξεργαστές μπορούν να χρησιμοποιηθούν για να ξεδιπλώσουν μερικές από τις επιπλοκές της οικοδόμησης ενός χώρου και να διευκολύνουν πολύ την επανάληψη να κληρονομήσουν την εργασία στο CSS. Προσωπικά προτιμώ το SCSS, αλλά λιγότερο είναι μια καλύτερη εναλλακτική λύση για ορισμένους, καθώς έχει χαμηλότερο φράγμα εισόδου και έχει καλύτερη τεκμηρίωση.
[Ο Ιστός] θα πρέπει να είναι προσβάσιμος από οποιοδήποτε είδος υλικού που μπορεί να συνδεθεί στο Internet: ακίνητο ή κινητό, μικρή οθόνη ή μεγάλη. - Ο Tim Berners-Lee
Το HTML και το CSS είναι εγγενώς ευαίσθητα. Από την έναρξη της HTML, ο ιστός προοριζόταν να είναι αρκετά ευέλικτος για να λειτουργεί σε οποιοδήποτε υλικό με σύνδεση στο Internet. Δεν ήμασταν μέχρι που εμείς ως σχεδιαστές και προγραμματιστές προχωρούσαμε προς σταθερές διατάξεις που άλλαξαν αυτό. Προσπαθώντας να επιβάλουμε σταθερές διαστάσεις στους ιστότοπους, περιορίσαμε τον ιστό στους επιτραπέζιους υπολογιστές.
Ο ανταποκρινόμενος ιστός είναι αυτός που περιγράφει τι πρέπει να πείτε από το πώς το λέτε. Πάρτε, για παράδειγμα, την πρόσφατη μετακίνηση του NPR σε ένα μοντέλο περιεχομένου με API. Μεταβαίνοντας σε ένα API για την παροχή περιεχομένου, το NPR κατάφερε να διαχειρίζεται τη συλλογή εφαρμογών και ιστότοπων με συνεπή τρόπο. Το μόνο πράγμα που αλλάζει είναι το στρώμα παρουσίασης.
Αυτός είναι ο λόγος για τον οποίο θα πρέπει να είναι ο ανταποκρινόμενος ιστός. Κατανοώντας τι είναι αυτό που πρέπει να πείτε και αφήνοντας το πώς λέτε ότι οδηγείται από αυτό. Ο σχεδιασμός αφορά στην ικανοποίηση μιας ανάγκης με έναν τρόπο ο οποίος είναι ευχάριστος οπτικά, αλλά και που λειτουργεί για την κάλυψη των αναγκών του χρήστη.
Αυτός είναι ο λόγος για τον ανταποκρινόμενο ιστό, οι χρήστες που δημιουργούν ιστότοπους που δουλεύουν για τους ανθρώπους που τα χρησιμοποιούν, ωστόσο έχουν πρόσβαση στο περιεχόμενο. Η δημιουργία ιστότοπων που μπορούν να επαναπροσδιοριστούν για μικρές οθόνες είναι μόνο η αρχή.
Έχετε αγκαλιάσει ανταποκριτική σχεδιασμό ιστοσελίδων ακόμα; Ποιοι κανόνες για την ανταποκρινόμενη σχεδίαση θα θέλατε να προσθέσετε; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, μεγέθους εικόνας μέσω Shutterstock.