Θυμάστε τις παλιές καλές μέρες; Ξέρεις τις ημέρες για τις οποίες μιλάω. τις ημέρες όχι πολύ καιρό πριν, όταν χρησιμοποιήσαμε για να σχεδιάσουμε ιστότοπους με καθορισμένα πλάτη. Κοιτάζοντας πίσω τώρα φαίνονται σαν μια τόσο απλή ώρα. μια πιο ευτυχισμένη ώρα? μια στιγμή που θα μπορούσα να απαγγέλλω κάθε γραμματοσειρά που ήταν διαθέσιμη για να χρησιμοποιηθεί online χωρίς δεύτερη σκέψη. Η αλήθεια είναι ότι το Responsive Web Design άλλαξε τα πάντα. Ο κόσμος ήταν επίπεδος και τώρα είναι στρογγυλός, ήμουν τυφλός και τώρα βλέπω ότι ο ιστός ήταν pixels και τώρα είναι ποσοστά.
Με την εισαγωγή του RWD, είναι ζωτικής σημασίας να εξελίσσουμε τη δουλειά μας για να ανταποκριθούμε καλύτερα στις απαιτήσεις του νέου ιστού. Πολλοί από εμάς έχουν εκφράσει τις απογοητεύσεις μας σχετικά με τον τρόπο με τον οποίο η προσέγγιση των σταθερών εικονοστοιχείων του Photoshop είναι ακατάλληλη για το σχεδιασμό των υγρών διατάξεων που απαιτούνται για έναν ανταποκρινόμενο ιστότοπο, αλλά δεν έχουν προσφερθεί χρήσιμες εναλλακτικές λύσεις. Ο κόσμος του σχεδιασμού ιστοσελίδων είναι απελπισμένος για ένα ειδικό λογισμικό που είναι χτισμένο από το έδαφος με το RWD στο μυαλό. Προϊόντα όπως το Adobe Reflow είναι μια εξαιρετική εκκίνηση, καθώς δείχνει ότι η Adobe προσπαθεί τουλάχιστον να βρει λύση, αλλά μετά από λίγες ώρες με αυτό το Σαββατοκύριακο, βλέπω ότι έχει ακόμα πολύ δρόμο για να γίνει χρήσιμη προσθήκη στη ροή εργασίας μου. Με το να είμαστε σε αμηχανία ανάμεσα σε ένα προϊστορικό λογισμικό και την υπόσχεση του τι πρόκειται να έρθει αύριο, πρέπει να δημιουργήσουμε εναλλακτικές ροές εργασίας για να αντιμετωπίσουμε τις ελλείψεις του τρέχοντος «λογισμικού σχεδιασμού» μας, εισάγοντας άλλα εργαλεία και διαδικασίες που θα βοηθήσουν στη γεφύρωση του χάσματος μεταξύ της σταθερής απόκρισης των εικονοστοιχείων και του ρευστού.
Το παρακάτω δεν είναι σε καμία περίπτωση ένας κατάλογος με τον τρόπο προσέγγισης των έργων RWD, αλλά πώς έχω προσαρμόσει τη ροή εργασίας μου ώστε να ταιριάζει στο νέο τοπίο.
Έχω βρεθεί στα σύνορα μεταξύ του διαχωρισμού του Photoshop / Fireworks / Illustrator καθώς όλοι έχουν αγωνιστεί για υπεροχή και έχουν δει αθώους ανθρώπους να πιάνονται σε ένα crossfire pixels. Οι σχεδιαστές τείνουν να έχουν το αγαπημένο τους και προτιμούν να πεθάνουν έναν αργό επώδυνο θάνατο από το να παραδεχτούν ότι ένα άλλο λογισμικό έχει ένα χαρακτηριστικό που πραγματικά θα ήθελαν. Η άποψή μου είναι ότι πρέπει να σχεδιάζετε σε οποιοδήποτε λογισμικό που σας επιτρέπει να εργάζεστε με τον πιο αποτελεσματικό τρόπο και να διερευνάτε γρήγορα τις ιδέες σας, είτε είναι το Photoshop, το Powerpoint ή το Paint.
Είναι σχεδόν άσχετο που επιλέγετε, καθώς πρέπει απλώς να είναι ένα σημείο εκκίνησης για γρήγορο πειραματισμό με διαφορετικές διατάξεις. Προσωπικά, προτιμώ τα πυροτεχνήματα, καθώς τσιμπουρίζει περισσότερα κουτιά από αυτά που θέλω σε ένα λογισμικό. Προσπαθώ να μην πάω βαριά στις λεπτομέρειες σε αυτό το στάδιο και πραγματικά προσπαθώ απλώς να κάνω κάποιες προκαταρκτικές αποφάσεις σχετικά με τη διάταξη και τη δομή όπως και μερικά ευγενή wireframes.
Όλα όσα πρέπει να ειπωθούν για τη χρήση του Lorem Ipsum στο site mock ups έχουν ειπωθεί έτσι παρακαλώ μόνο να με εμπιστευτείτε σε αυτό και, όπου είναι δυνατόν, να χρησιμοποιήσετε πραγματικό περιεχόμενο για να σχεδιάσετε. Όπου δεν είναι δυνατόν, χρησιμοποιήστε το περιεχόμενο των τελευταίων ετών, γράψτε το δικό σας περιεχόμενο ή χρησιμοποιήστε τους στίχους στο 'Κερί στον άνεμο', αλλά μην χρησιμοποιείτε το Lorem ipsum. Εάν δεν χρησιμοποιήσετε πραγματικό περιεχόμενο, θα είναι δύσκολο να δείτε ποια σημεία σπασίματος απαιτούν προσαρμογή ορισμένων στοιχείων.
Αυτό είναι μόνο το πλάτος που μου αρέσει να ξεκινάει, καθώς είναι κοντά σε μια μικρή εμπειρία γραφείου, η οποία είναι εύκολο να κλιμακωθεί σε μεγαλύτερες οθόνες και να μειωθούν οι εμπειρίες tablet / κινητών. Μερικοί άνθρωποι προτιμούν να ξεκινούν ευρύτερα, ενώ άλλοι προτιμούν να σχεδιάζουν κινητά πρώτα, απλώς κατεβαίνουν σε αυτό που λειτουργεί για εσάς.
Το RWD αφορά όλα τα δοχεία υγρών που αναπτύσσονται και συρρικνώνονται για να γεμίσουν την περιοχή του προγράμματος περιήγησης, οπότε η σχεδίαση σε ποσοστά και όχι σε εικονοστοιχεία θα εξασφαλίσει ότι τα σχέδιά σας θα ρέουν ανάλογα με το πρόγραμμα περιήγησης και θα απαιτούν λιγότερα σημεία διαλείμματος από το σχεδιασμό με βάση τα εικονοστοιχεία.
Έχω την τάση να έχουν το In-Design ανοιχτό στο παρασκήνιο, ώστε να μπορώ εύκολα και γρήγορα να ανακαλύψω ένα ποσοστό επί τοις εκατό ενός στοιχείου που βασίζεται σε εικονοστοιχεία. Το InDesign είναι εξαιρετικό στο χειρισμό αυτών των υπολογισμών και μπορείτε εύκολα να μάθετε ποιο μέγεθος θα είναι ένα στοιχείο 428px x 333px στο 46% του αρχικού του πλάτους διατηρώντας ταυτόχρονα τις αναλογίες του ή ίσως να ανακαλύψετε το 27% ενός πλάτους προγράμματος περιήγησης 889px σε δευτερόλεπτα. Τα αποτελέσματα εξακολουθούν να σας δίνονται σε εικονοστοιχεία, ώστε να μπορείτε να επιστρέψετε στο λογισμικό που σχεδιάζετε και να δημιουργήσετε αυτό το δοχείο σε εικονοστοιχεία, γνωρίζοντας ότι αυτό θα είναι σε σχέση με το ποσοστό του χώρου εργασίας που έχετε ορίσει.
Εάν νομίζετε ότι μπλέκω σχετικά με τη χρήση πραγματικού περιεχομένου στα σχέδιά σας, θα πρέπει να ακούσετε να συνεχίζω σχεδιάζοντας στυλ τυπογραφίας στο Photoshop (ή ισοδύναμο). Η τυπογραφία θα φαίνεται εντυπωσιακά διαφορετική στο πρόγραμμα περιήγησης από ό, τι φαίνεται στα συνηθισμένα πακέτα της Adobe που θα σημαίνουν περισσότερη δουλειά για να τροποποιήσετε το σχέδιο μόλις χτιστεί.
Αποθηκεύστε τον πονοκέφαλο και χρησιμοποιήστε εφαρμογές όπως typecast.com να πειραματιστείτε και να δημιουργήσετε τα στυλ γραμματοσειράς σας με. Μόλις είστε ευχαριστημένοι με τη διάταξη και το στυλ της τυπογραφίας σας, μπορείτε να εξαγάγετε ολόκληρο το χώρο εργασίας σας ως διαφανή PNG για να το τοποθετήσετε στις μακέτες σχεδιασμού σας. Δεν θα χρειαστεί να έχετε εγκατεστημένες τις επιλεγμένες γραμματοσειρές σας στο σύστημά σας, καθώς πρόκειται απλώς για μια εικόνα, αλλά δεν θα μπορείτε επίσης να την επεξεργαστείτε χωρίς να επιστρέψετε στο typecast.
Μέχρι τώρα θα πρέπει να σχεδιάσετε το πλάτος των 1000px (ή το πλάτος που επιλέξατε κατά την εκκίνηση), συμπληρωμένο με τα πλάτη των εμπορευματοκιβωτίων που περιέχουν το δικό σας περιεχόμενο μεταφρασμένα σε ποσοστά. Θα ξεκινούσα τώρα να δημιουργώ ένα παραμετρικό πλέγμα που μιμείται τα πλάτη του δοχείου που χρησιμοποιώ στο σχεδιασμό μου. Έτσι, εάν έχω μια πλαϊνή μπάρα πλάτους 30% και μια περιοχή περιεχομένου που είναι το 55% του προγράμματος περιήγησής μου, με το 5% padding εκατέρωθεν, το πλέγμα μου μπορεί να μοιάζει με 5%, 30%, 5%, 55% και 5%.
Μπορείτε να χρησιμοποιήσετε εφαρμογές όπως Gridset για να δημιουργήσετε το δικό σας δίκτυο, αλλά και πάλι, προτιμώ να χρησιμοποιώ το InDesign καθώς μπορείτε να ομαδοποιήσετε στοιχεία και να τα αλλάξετε ανάλογα με το μέγεθος.
Τώρα παίρνω το πλέγμα που έχω δημιουργήσει χρησιμοποιώντας το InDesign και το επικολλήσω σε πλάτος 1600px (ή το μέγιστο πλάτος που θέλετε το site σας να είναι) έγγραφο. Στη συνέχεια, αρχίζω να αλλάζω το μέγεθος του πλέγματος μου πιο πλατιά και στενότερο κατά 100 εκατοστά σε όλο το πλάτος μέχρι τα 300px. Σε κάθε αύξηση, ελέγχει το πλάτος κάθε περιέκτη περιεχομένου και βεβαιωθείτε ότι εξακολουθεί να είναι αρκετά μεγάλο για να φιλοξενήσει το περιεχόμενό του. Όταν φτάσω σε ένα πλάτος που νομίζω ότι κάνει ένα δοχείο πολύ μικρό, απλά επεξεργάζομαι το πλέγμα για να ταιριάζει. Έτσι, αν η πλάγια γραμμή που είχα δημιουργήσει στο 30% του πλάτους του προγράμματος περιήγησης είναι πολύ στενή, θα μπορούσα να προσθέσω επιπλέον 10% σε αυτό, καθιστώντας το τώρα το 40% του πλάτους του προγράμματος περιήγησής μου και να είναι αρκετά ευρύς ώστε να φιλοξενήσει το περιεχόμενό του .
Το βασικό πράγμα που πρέπει να θυμάστε είναι ότι αν κάνετε ένα δοχείο ευρύτερο, θα πρέπει να κάνετε ένα άλλο κοντέινερ στενότερο από το ίδιο ποσό για να διατηρήσετε ολόκληρο το πλάτος 100%. Αυτός είναι ο καλύτερος τρόπος με τον οποίο έχω εντοπίσει τον καθορισμό σημείων θραύσης (το σημείο στο οποίο θα αλλάξει η διάταξή σας), καθώς προσθέτετε μόνο ένα άλλο σημείο διακοπής όταν το περιεχόμενο σπάσει και όχι το πλάτος μιας νέας συσκευής. Αυτή η διαδικασία μπορεί να είναι χρονοβόρα δεδομένου ότι θα καταλήξετε με 14 διαφορετικές προεπισκοπήσεις του πλέγματος σας καθώς αυξάνεται από 300px σε 1600px πλάτος, αλλά είναι ο καλύτερος τρόπος που έχω βρεί να ελέγξει πώς το σχέδιό σας θα εξετάσει διαφορετικά πλάτη οθόνης πριν να είναι ανάπτυξη.
Μια άλλη επιλογή είναι να χρησιμοποιήσετε ένα εργαλείο όπως το Adobe Reflow που σας επιτρέπει επίσης να προσθέσετε περιεχόμενο σε δοχεία και στη συνέχεια να σύρετε το χώρο εργασίας σας και να δείτε την κλίμακα των στοιχείων. Μπορείτε επίσης να καθορίσετε τα σημεία διακοπής σας, αλλάζοντας το μέγεθος του χώρου εργασίας σας μέχρι να σπάσει το περιεχόμενο και απλά να προσθέσετε ένα ερώτημα μέσων. Το Reflow είναι ακόμα στο δημόσιο Beta και μπορείτε να το κατεβάσετε εδώ .
Αφού κλιμακώσατε τα σχέδιά σας σε βήματα κάθε 100px, θα επισημάνετε μερικά πλάτη στα οποία το περιεχόμενο σπάει και διορθώνει προσθέτοντας ένα σημείο διακοπής. Τώρα μπορείτε να επιστρέψετε στο λογισμικό στο οποίο δημιουργήσατε τα αρχικά σχέδια και να αλλάξετε τη διάταξη του σχεδίου σας στα πλάτη που προσδιορίσατε ως σημεία διακοπής. Αυτό σημαίνει ότι καταλήγετε στο να σχεδιάζετε μόνο 2, 3 ή 4 διαφορετικές διατάξεις (ανάλογα με την πολυπλοκότητα του δικτύου σας και πόσα σημεία διακοπής χρειάζεστε) που θα καλύπτουν όλο το μήκος από 300px σε 1600px.
Αν ακολουθήσατε αυτή τη διαδικασία, θα πρέπει τώρα να έχετε ένα σύνολο σχεδίων που ταιριάζουν με τα σημεία διακοπής σας, ένα έγγραφο που δείχνει πώς το πλέγμα σας αποτελείται από τα ποσοστά του πλάτους του προγράμματος περιήγησης και πώς καταρρέει για μικρότερες οθόνες καθώς και όλες τις τυπογραφικά στυλ που έχουν ήδη δημιουργηθεί και δοκιμαστεί στο πρόγραμμα περιήγησης. Αυτό θα πρέπει να είναι ένα πολύ ισχυρό σημείο για έναν προγραμματιστή να αρχίσει στη συνέχεια να χτίσει τα σχέδιά σας με ακρίβεια και χωρίς να χρειάζεται να ασχοληθεί με το σπάσιμο του περιεχομένου σε συγκεκριμένα πλάτη αργότερα.
Αυτή η διαδικασία μπορεί να φαίνεται πολύ μακροσκελή, αλλά χωρίς ένα συγκεκριμένο εργαλείο που έχει κατασκευαστεί αποκλειστικά για RWD, είναι ο καλύτερος τρόπος που έχω διαπιστώσει ότι μπορεί εύκολα να δοκιμάσει την προσαρμοσμένη διάταξή μου χρησιμοποιώντας λογισμικό που δεν ανταποκρίνεται και να μεταφέρει σαφώς τις ιδέες μου σε έναν προγραμματιστή. Αυτό δεν είναι καθόλου ο μόνος τρόπος προσέγγισης ενός έργου RWD, αλλά είναι το καλύτερο που έχω βρει.
Τι έχει αλλάξει ο σχεδιασμός που ανταποκρίνεται στην ροή εργασίας σας; Τι συμβουλές θα μοιραστείτε; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, ροής εικόνας μέσω Shutterstock.