Ο καλός ανταποκρινόμενος σχεδιασμός ιστοσελίδων, από τη φύση του, παραμένει απαρατήρητος σε όσους καταναλώνουν περιεχόμενο στο διαδίκτυο. Έτσι, όταν κάποιος ζητά έναν νέο ιστότοπο, είναι συχνά εντελώς απληροφόρητος της ιδέας, παρά το γεγονός ότι το βιώνει καθημερινά. Και όμως, ο ευέλικτος σχεδιασμός ιστοσελίδων αναγνωρίζεται πλέον ως συνήθης πρακτική σε ολόκληρο τον κλάδο.
Η οικοδόμηση ανταποκρινόμενων ιστοτόπων έχει αλλάξει τις διαδικασίες μας, από τη δημιουργία mockups πλήρων σελίδων, στην κατασκευή βιβλιοθηκών των επαναχρησιμοποιήσιμων στοιχείων και διατάξεων.
η διάταξη είναι οδηγούμενη από το περιεχόμενο και τα στυλ οδηγούνται από το σήμα
Πρόσφατα προσεγγίσαμε ένας υφιστάμενος πελάτης για να ανασχεδιάσουμε με επιτυχία τον ιστότοπό του. Είχαμε εργαστεί προηγουμένως μαζί τους χρησιμοποιώντας μια άκαμπτη διαδικασία καταρράκτη. Προχωρώντας σε μια ευκίνητη ροή εργασίας, μπορέσαμε να αγκαλιάσουμε την αλλαγή σε οποιοδήποτε σημείο του έργου.
Σε όλη τη διάρκεια της διαδικασίας τηρήσαμε τη φιλοσοφία ότι η διάταξη είναι περιεχόμενο που καθοδηγείται και τα στυλ οδηγούνται από τη μάρκα.
Τα έγγραφα των προδιαγραφών λειτουργούν εξαιρετικά για την καταγραφή όλων των λειτουργιών που πρέπει να διαθέτει ένας ιστότοπος. Αλλά είναι πραγματικά αυτό που χρειάζεται ο πελάτης; Είναι πολύ δύσκολο να απεικονίσετε αυτά τα χαρακτηριστικά στη θέση τους. Έτσι, το αποτέλεσμα είναι ότι τα έγγραφα των προδιαγραφών συχνά μετατρέπονται σε φουσκωμένα ευρετήρια λιστών. Αυτό δεν βοηθά τον πελάτη, τους σχεδιαστές ή τον τελικό ιστότοπο.
Αντί των εγγράφων προδιαγραφών, επιλέξαμε να χρησιμοποιήσουμε συρματοπλέγματα. Το πρώτο βήμα του έργου περιελάμβανε τη δημιουργία συρμάτων για κάθε σελίδα. Αυτό μπορεί να ακούγεται υπερβολικά, αλλά τα συρματόσχοινα οδήγησαν σε πρώιμες συζητήσεις για το περιεχόμενο και τα χαρακτηριστικά για κάθε σελίδα. Διαπιστώσαμε ότι προστέθηκαν χαρακτηριστικά που δεν εξετάσαμε ποτέ πριν, ενώ πολλά άλλα είχαν αφαιρεθεί.
Τα πλαίσια συρμάτων μας έδωσαν μια σαφή, οπτική αναπαράσταση του τρόπου με τον οποίο το περιεχόμενο και η λειτουργικότητα θα έπρεπε να δοθεί προτεραιότητα σε κάθε σελίδα. Αυτά τα συρμάτινα πλαίσια έγιναν τότε σημείο αναφοράς, αντικαθιστώντας ένα έγγραφο προδιαγραφών.
Το βασικό εργαλείο: παραγωγή πλαισίων καλωδίων αντί των προδιαγραφών εγγράφων επικεντρώνεται σε όλα τα βασικά χαρακτηριστικά και τη σημασία του περιεχομένου.
Ο έλεγχος των καλωδίων μας επιτρέπει να διαμορφώσουμε μια λίστα με όλα τα κοινά στοιχεία. Σε μια ενιαία τοποθεσία θα υπάρχουν δεκάδες μικρά τμήματα σε κάθε σελίδα που είναι πολύ παρόμοια. Αυτά τα στοιχεία μπορούν να ταξινομηθούν σε μια εξαντλητική λίστα που θα χρησιμοποιηθεί αργότερα.
Αυτό το στάδιο έχει τρία βασικά οφέλη:
Βασική προσέγγιση : ο προγραμματισμός του τρόπου προσέγγισης της ανάπτυξης ενός έργου στο μπροστινό μέρος είναι σημαντικός για τη δημιουργία μιας διατηρήσιμης, πτωχής βάσης κώδικα.
Οι βιβλιοθήκες μοτίβων είναι μια συλλογή κοινών στοιχείων που χρησιμοποιούνται σε έναν ιστότοπο. Με την εστίαση της ανάπτυξης του μπροστινού μέρους στα δομικά στοιχεία που δεν εξαρτώνται από τις σελίδες, μπορούμε να μειώσουμε το γενικό κόστος και να βελτιώσουμε τη συνοχή.
Χρησιμοποιώντας τη λίστα των στοιχείων που κατατάξαμε κατά τη διάρκεια του σταδίου ελέγχου, είμαστε σε θέση να διαρθρώσουμε το Sass σε μια εύχρηστη συλλογή αρχείων.
Χρησιμοποιήσαμε βιβλιοθήκες πρότυπων σε μερικά έργα, αλλά πάντα αγωνιζόμασταν με συμβάσεις ονομασίας, ιδιαίτερα τη δομή των φακέλων: πού τοποθετείτε τα στυλ σας για αυτό το πρόγραμμα αναπαραγωγής μουσικής, σε συστατικά μέρη ή σε μέρη;
Προηγουμένως, χρησιμοποιούσαμε ορολογία, όπως μεμονωμένα στοιχεία και στοιχεία, για την οργάνωση των αρχείων Sass. Παρόλο που αυτές μοιάζουν με εντελώς νόμιμες συμβάσεις ονομασίας, είναι ανοιχτές στην ερμηνεία. Όταν υπάρχουν πολλοί προγραμματιστές που εργάζονται σε ένα έργο, αφήνοντας την οργάνωση της βάσης κώδικα ανοικτή σε ερμηνεία οδηγεί σε ανοργάνωτη CSS.
Το BEM (Block, Element, Modifier), μας παρέχει μια κοινή σύμβαση που ακολουθεί και δημιουργεί μια κατανόηση μεταξύ των προγραμματιστών του front-end. Ο παλιός τρόπος αφέθηκε στους μεμονωμένους προγραμματιστές να βρουν ονόματα τάξεων που ήταν πάρα πολύ υψηλού επιπέδου για να συλλέξουν κάποιο νόημα. Ευτυχώς είχαμε την τύχη να δούμε Μπραντ Φρόστη μιλήστε για τη βιβλιοθήκη μοτίβου του στο Συνδιάσκεψη εκ των προτέρων στο Μάντσεστερ. Το Pattern Lab προσδίδει ορολογία από τη χημεία για να περιγράψει τα στοιχεία που συνθέτουν τη βιβλιοθήκη. Χρησιμοποιώντας άτομα, μόρια και οργανισμούς για να περιγράψετε τις διαφορές μεταξύ των στοιχείων σε μια σελίδα, βοηθάει να εξηγηθεί η ιδέα στους νέους προγραμματιστές του έργου.
Ο ατομικός σχεδιασμός είναι για διεπαφές χρηστών: http://t.co/eEZSYeK5VF Μπορείτε να εφαρμόσετε ατομικό σχεδιασμό σε οποιοδήποτε περιβάλλον χρήστη, όπως το Instagram pic.twitter.com/BrztgtRoGU
- Μπραντ Φρόστη (@brad_frost) 10 Ιουλίου 2015
Στη φύση, τα άτομα είναι η μικρότερη ονομαστική αξία (εκτός αν δουλεύουμε σε κουάρκ και ηλεκτρόνια). Στην ανάπτυξη ιστού, τα άτομα είναι τα πιο βασικά στοιχεία της HTML. Για όλους τους σκοπούς και τους σκοπούς δεν κάνουν πολύ μόνοι τους. Αυτά περιλαμβάνουν επικεφαλίδες, παραγράφους, εισροές, κουμπιά, λίστες ... Παίρνετε την ιδέα.
Αυτά είναι τα επόμενα στρώματα επάνω. Στη χημεία, τα μόρια αποτελούνται από άτομα, και το ίδιο ισχύει για τη δομή του CSS. Τα μόρια είναι στοιχεία στην ιστοσελίδα που χρησιμοποιούν άτομα για να τα διαμορφώσουν.
Ένα καλό παράδειγμα ενός μορίου είναι ένα κουτί αναζήτησης. Αυτό περιέχει 3 άτομα: μια ετικέτα, μια είσοδο και ένα κουμπί. Το στρώμα του μορίου αρχίζει να σχηματίζει μερικά από τα στοιχεία που μπορούμε να χρησιμοποιήσουμε στον ιστότοπο. Είναι σημαντικό να κάνετε όλα αυτά τα μόρια κλιμακωτά. Θα πρέπει να σχεδιάζονται με την ιδέα ότι θα μπορούσαν να χρησιμοποιηθούν οπουδήποτε στην περιοχή. Ο απώτερος στόχος μας είναι να κάνουμε το CSS όσο το δυνατόν πιο ευέλικτο και επαναχρησιμοποιούμενο.
Όπως υποδηλώνει το όνομα, οι οργανισμοί είναι ομάδες μορίων. Ορισμένα παραδείγματα περιλαμβάνουν μια κεφαλίδα, υποσέλιδο ή λίστα προϊόντων.
Αν πάρουμε το παράδειγμα μιας επικεφαλίδας, αυτό θα περιλαμβάνει ένα λογότυπο, αναζήτηση και πλοήγηση. Όλα αυτά δημιουργήθηκαν ως μόρια και συνδυάζονται για να σχηματίσουν έναν οργανισμό κεφαλίδας.
Εδώ τελειώνει η βιοχημική αναλογία. Όπως λέει ο Μπραντ, "εισάγετε σε γλώσσα που δίνει μεγαλύτερη σημασία στους πελάτες και την τελική παραγωγή" . Τα πρότυπα αποτελούν την κόλλα μιας ιστοσελίδας. Αυτά συνδυάζουν όλους τους οργανισμούς που έχουμε δημιουργήσει σε μια διάταξη που θα μπορούσε να εφαρμοστεί σε μια σελίδα στον ιστότοπο.
Ένα παράδειγμα θα μπορούσε να είναι μια λίστα ιστολογίων. Αυτό το πρότυπο θα περιλαμβάνει μια κεφαλίδα, ένα υποσέλιδο, μια λίστα στοιχείων ιστολογίου και μια πλευρική γραμμή. Τα πρότυπα είναι γενικά δομικά, που περιέχουν μόνο τη διάταξη.
Το τελευταίο τμήμα είναι σελίδες. Αυτό είναι όπου μπορείτε να δοκιμάσετε τα πρότυπα με πραγματικά δεδομένα. Οι σελίδες είναι ειδικές περιπτώσεις ενός προτύπου. Αυτό το τμήμα είναι σημαντικό επειδή μας επιτρέπει να δούμε πόσο επιτυχημένα είναι τα άτομα, τα μόρια, οι οργανισμοί και τα πρότυπα.
Είναι αναπόφευκτο ότι κατά την οικοδόμηση του δικτυακού τόπου, ορισμένα σενάρια θα χαθούν. Το κλασικό παράδειγμα είναι οι μακρινοί τίτλοι ή η τροφοδοσία για διαφορετικά νομίσματα και γλώσσες.
Βασική υπηρεσία: Οι συμβάσεις ονοματοδοσίας έχουν σημασία. Το Layer CSS δημιουργεί ένα καθαρό κώδικα βάσης για να δουλέψει από αυτό είναι όσο το δυνατόν μικρότερο.
Σχεδιάζοντας σχέδια είναι δύσκολο. Δεν μπορείτε να σχεδιάσετε ένα απομονωμένο μοτίβο, όπως ένα είδωλο, και αναμένετε να ταιριάζει με την υπόλοιπη σελίδα. Ο τρόπος με τον οποίο κατασκευάζουμε ιστότοπους και ο τρόπος που τα σχεδιάζουμε διαφέρουν.
Τα σχέδια είναι πιθανόν να αλλάξουν ανεξάρτητα από το αν θα έχουμε υπογραφή ... Η απογείωση έγινε ένα άσχετο βήμα στη διαδικασία που άσκησε πίεση και στις δύο πλευρές
Χρησιμοποιήσαμε το Photoshop για να δημιουργήσουμε mockups των καλωδίων με αυτά τα στυλ συστατικά στη θέση τους. Μόλις ήμασταν ευχαριστημένοι με την εμφάνιση και την αίσθηση των σχεδίων, μετακινήσαμε την απομόνωση κάθε συστατικού. Αυτό μας επέτρεψε να διασφαλίσουμε ότι κάθε στοιχείο είναι αρκετά ευέλικτο για να εργάζεται οπουδήποτε στον ιστότοπο.
Ήμασταν πολύ συνειδητοί για να μην πάρουμε υπογραφή για οποιαδήποτε εργασία σχεδίου. Η σχεδίαση υπογραφής δημιουργεί ένα εμπόδιο όπου ο σχεδιαστής αισθάνεται πίεση για να δημιουργήσει κάτι που θα τεθεί σε πέτρα. Τα σχέδια είναι πιθανό να αλλάξουν ανεξάρτητα από το αν θα έχουμε υπογραφή ή όχι. Γενικά είμαστε ευτυχείς να δεχτούμε οποιεσδήποτε αλλαγές σε οποιοδήποτε σημείο του χρονοδιαγράμματος του έργου. Η απόσυρση έγινε ένα άσχετο βήμα στη διαδικασία που άσκησε πίεση και στις δύο πλευρές σε βάρος της σχέσης.
Γνωρίζοντας πότε να μετακινηθείτε από το Photoshop σε κώδικα είναι σημαντική. Αυτό το βήμα είναι πολύ νωρίτερο από ό, τι συνηθίζαμε για δύο λόγους:
Αντί να ξοδεύουμε επιπλέον χρόνο στο Photoshop, επιλέξαμε να επενδύσουμε το χρόνο στον κώδικα. Αν πρέπει να τελειοποιήσουμε οτιδήποτε, θα πρέπει να είναι ο κώδικας, το κομμάτι που θα χρησιμοποιηθεί και θα δει πραγματικά από όλους τους χρήστες του ιστότοπου. Για εμάς, το Photoshop ήταν ένα εργαλείο για τη δημιουργία ενός στυλ σχεδιασμού που θα μπορούσε να χρησιμοποιηθεί σε ολόκληρη την ιστοσελίδα.
Σχεδιασμός είναι πολύ περισσότερο για τη συνεργασία μεταξύ όλων για την ομάδα. Τα mockups ήταν ακόμα ένα πολύ σημαντικό μέρος της διαδικασίας, βοηθώντας τον πελάτη να απεικονίσει πώς θα φανεί ο ιστότοπος. Αν είμαστε όλοι ευχαριστημένοι από τη γενική κατεύθυνση του σχεδιασμού, θα το μετακινήσαμε στον κώδικα. Σπανίως δαπανήσαμε χρόνο να επιστρέψουμε και να προχωρήσουμε, τροποποιώντας τα έγγραφα του Photoshop.
Λήψη κλειδιών: Το Photoshop είναι ένα εξαιρετικό εργαλείο για τη δημιουργία σχεδιαστικών εννοιών. Η μετάβαση στον κώδικα το συντομότερο δυνατόν είναι σημαντική. Τελειώνει τον κωδικό, όχι το Photoshop.
Η ομορφιά αυτής της ροής εργασίας είναι ότι υπάρχουν τόσα πολλά μέρη για να αναθεωρήσετε και να βελτιώσετε τον ιστότοπο.
Είναι σημαντικό να σημειωθεί ότι πρόκειται για χαλαρά βήματα στη διαδικασία του έργου μας. Αν χρειαστούμε κάτι νέο κατά τη διάρκεια του έργου, θα το αντιμετωπίσουμε γενικά ως ένα αυτόνομο, αρθρωτό στοιχείο που μπορεί να βρεθεί στον ιστότοπο και να υιοθετήσει το θέμα σχεδίασης του ιστότοπου.
Κάθε ένα από αυτά τα βήματα προσφέρει ένα σημείο όπου μπορούμε να αναθεωρήσουμε το έργο μας μέχρι στιγμής. Επιτρέπει επίσης μια νέα σειρά από μάτια για να δει τα πράγματα από μια διαφορετική οπτική γωνία.
Κατά τη διάρκεια οποιουδήποτε από αυτά τα στάδια μπορεί να διαπιστώσουμε ότι ορισμένα τμήματα δεν λειτουργούν όπως αναμένεται. Αυτό είναι εντάξει. Στην πραγματικότητα είναι καλό. Η προσεκτική χρήση της κακής χρηστικότητας είναι το κλειδί για μια επιτυχημένη ιστοσελίδα. Η επιστροφή και η συρραφή των εν λόγω τμημάτων του ιστότοπου θα καταστήσει το έργο καλύτερο όταν τεθεί σε λειτουργία.
Κλείσιμο κλειδιού: Μην φοβάστε να επιστρέψετε στην αρχή εάν κάτι χρειάζεται να βελτιωθεί. Η αλίευση αυτών των πρώτων θα καταστήσει το έργο καλύτερο όταν θα αρχίσει να ζει.
Ξοδέψαμε μέρες να συνεργαστούμε για να εξασφαλίσουμε ότι όλα τα μέρη του ιστότοπου θα έχουν τελειώσει σε υψηλό επίπεδο. Δοκίμασα όσο το δυνατόν περισσότερα σενάρια, διασφαλίζοντας ότι η εμπειρία περιήγησης ήταν συνεπής.
Μόλις τα δεδομένα βρίσκονται στον ιστότοπο, μπορούμε να δοκιμάσουμε πλήρως τον ιστότοπο. Είναι συχνά πολύ εύκολο να ορίσετε ένα έργο ζωντανά χωρίς πλήρη έλεγχο. Μπορούμε να ελέγξουμε την ταχύτητα, την ευκολία πλοήγησης και κυρίως τη ροή των αγορών.
Όλοι αναφέρουν την Apple για την ύπαρξη τελειομανής αλλά είμαι βέβαιος ότι οι πρώτες προσπάθειές τους δεν ήταν τέλειες. Χρειάζεται χρόνος και αφοσίωση για να κάνουμε αυτές τις τελικές βελτιώσεις για να μας δώσουμε τα προϊόντα που αγαπάμε σήμερα. Χρησιμοποιώντας το εργαστήριο των συσκευών μας, το οποίο περιλαμβάνει τις περισσότερες από τις δημοφιλείς συσκευές και πλατφόρμες, κατορθώσαμε να διασφαλίσουμε ότι η εμπειρία ήταν βελτιστοποιημένη σε όσο το δυνατόν περισσότερες τελευταίες πλατφόρμες και μεγέθη οθόνης.
Η εκμάθηση από κάθε έργο είναι σημαντική, ώστε να μπορούμε συνεχώς να βελτιώνουμε τις διαδικασίες που οδηγούν σε καλύτερες ιστοσελίδες.
Το έργο αυτό έβγαλε τη γέννηση της δικής μας βιβλιοθήκης εσωτερικών προτύπων που ενθαρρύνει τη συνοχή μεταξύ των σχεδίων. Όταν εργαζόμαστε σε έναν οργανισμό, ενδέχεται να έχουμε δεκάδες έργα που βρίσκονται σε εξέλιξη ταυτόχρονα. Η δυνατότητα οποιασδήποτε εργασίας σε οποιοδήποτε έργο είναι σημαντική.
Η δημιουργία βάσης για την οποία μπορούμε όλοι να εργαστούμε θα συμβάλει στην επίτευξη αυτού του στόχου.
Η απόδοση του ιστοτόπου θεωρήθηκε μόνο προς το τέλος του έργου. Ένας επιτυχημένος ιστοχώρος πρέπει να είναι φτωχός και γρήγορος. Το τεράστιο φάσμα των συσκευών και οι δυνατότητές τους ποικίλλουν μαζικά από τους ολοκαίνουργιους υπολογιστές Mac έως τα παλιά smartphones. Κατά την οικοδόμηση ενός ιστοτόπου πλούσιου σε πολυμέσα μπορεί να είναι πολύ δύσκολο να διαχειριστεί κανείς την απόδοση, ειδικά όταν αναδρομικά προσπαθεί να το βελτιώσει.
Στο Upfront Conference στο Μάντσεστερ, είδαμε Ναιένια Πέρεζ Κρουζ μιλάμε για την εξέταση της απόδοσης σε κάθε στάδιο ενός έργου, συμπεριλαμβανομένου του σχεδιασμού. Εκ των υστέρων, αυτό πρέπει να έχουμε εφαρμόσει. Ως ομάδα πολλαπλών σχεδιαστών, προγραμματιστών και πρωτοπόρων προγραμματιστών, η διαχείριση του συνολικού μεγέθους και των επιδόσεων (ιδιαίτερα η αντιληπτή απόδοση) έπρεπε να έχει μεγαλύτερη προτεραιότητα.
Τα πάντα σε μια σελίδα έχουν κόστος για την απόδοση. Ο καθορισμός προτεραιοτήτων για το τι είναι σημαντικό διασφαλίζει ότι ο ιστότοπος δεν είναι μόνο γρήγορος αλλά προσβάσιμος σε περισσότερες συσκευές. Σε ορισμένες παλαιότερες συσκευές διαπιστώσαμε ότι ο ιστότοπος συνέτριψε όχι μόνο το πρόγραμμα περιήγησης, αλλά ολόκληρη τη συσκευή. Προσπαθώντας να επιταχύνουμε τον ιστότοπο αναδρομικά σημαίνει ότι δεν θα μπορούσαμε να φτιάξουμε τον ιστότοπο όσο πιο γρήγορα μπορούσαμε.
Την επόμενη φορά θα διασφαλίσουμε ότι οι επιδόσεις θα ενσωματωθούν σε όλα τα στάδια της διαδικασίας, οπότε δεν πρόκειται για μια δεύτερη σκέψη.