Ο υπεύθυνος σχεδιασμός είναι ένας σχετικά νέος όρος στο σχεδιασμό ιστοσελίδων. Είχε δημιουργηθεί μόνο πριν από τρία χρόνια τον Μάιο του 2010, όταν ο σχεδιαστής Ιστού Ethan Marcotte χρησιμοποίησε τον όρο το άρθρο του για μια λίστα εκτός.
Σήμερα, υπάρχει ακόμη και μια μίνι συζήτηση για το κατά πόσον η ανταπόκριση του σχεδιασμού είναι εδώ για να μείνει ή αν είναι απλώς μια λάμψη στο τηγάνι. Μόνο ο χρόνος θα δείξει, αλλά προς το παρόν, είναι σαφές ότι η ευαίσθητη σχεδίαση προσπαθεί να κάνει την εμπειρία του χρήστη όσο το δυνατόν πιο άνετη.
Ο υπεύθυνος σχεδιασμός είναι μια φιλοσοφία σχεδιασμού ιστοσελίδων που εστιάζει στη δημιουργία ιστότοπων που προσφέρουν στους χρήστες μια βελτιωμένη εμπειρία προβολής. Αυτό περιλαμβάνει λειτουργίες όπως εύκολη πλοήγηση και ανάγνωση και ελάχιστη αλλαγή μεγέθους προγράμματος περιήγησης, κύλιση και περιήγηση. Όλα αυτά συμβαίνουν σε μια σειρά διαφορετικών συσκευών, από επιτραπέζιους υπολογιστές έως smartphones.
Δεδομένου ότι αυτή η προσέγγιση σχεδιασμού ιστοσελίδων είναι ακόμα σε μια νεοσύστατη κατάσταση, ίσως να μην είστε απολύτως σαφής σε ό, τι ανταποκρίνεται σχέδιο είναι όλα. Πρόκειται περισσότερο για απρόσκοπτη προβολή περιεχομένου σε πολλαπλές πλατφόρμες ή είναι κυρίως για να βοηθήσουμε τις επιχειρήσεις να δημιουργήσουν ελκυστικότερους ιστότοπους για να αυξήσουν τις πωλήσεις τους μέσω μιας καλύτερης εμπειρίας χρήστη;
Mashable έχει ήδη βγει σε ένα άκρο και που ονομάζεται 2013 το έτος της ανταποκρινόμενης σχεδίασης. Ενώ αυτό παραμένει προς συζήτηση, μερικές βασικές πτυχές του σχεδιασμού που ανταποκρίνεται είναι πρότυπα που ποτέ δεν θα πάει μακριά. Εδώ είναι τα πιο σημαντικά αντιληπτά σχεδιαστικά γεγονότα για να εξοικειωθείτε.
Θα είχατε συγχωρεθεί ότι σκεφτήκατε ότι η ευαίσθητη σχεδίαση και η κινητή σχεδίαση είναι ένα και το αυτό - αλλά δεν είναι. Σίγουρα, ο ανταποκρινόμενος σχεδιασμός δημιουργεί ιστότοπους έτσι ώστε και οι δύο να ανταποκρίνονται στο μέγεθος ενός προγράμματος περιήγησης και να είναι φιλικοί προς το κινητό, αλλά ο σχεδιασμός που ανταποκρίνεται είναι πραγματικά ολόκληρος ο σχεδιασμός ιστοσελίδων. Το πρόβλημα με την παραπομπή σε αυτήν την προσέγγιση σχεδιασμού ιστού ως κινητού σχεδιασμού είναι ότι είναι εγγενώς περιοριστική, γεγονός που υπονομεύει την ίδια την προσέγγιση.
Οι πιο αποτελεσματικές ιστοσελίδες που ανταποκρίνονται στις ανάγκες μπορούν να θεωρηθούν όπως είχαν σχεδιαστεί, σε μια σειρά ψηφισμάτων. Αυτό περιλαμβάνει τα πάντα, από τα συνηθισμένα 1024 × 768 εικονοστοιχεία μέχρι τις οθόνες 1920 × 1080 και όλα τα ενδιάμεσα. Τέτοιες τοποθεσίες μοιάζουν επίσης υπέροχα σε δισκία (τόσο στον αμφιβληστροειδή όσο και στις τυπικές οθόνες), καθώς και σε smartphones. Αν ένας σχεδιαστής ιστοσελίδων εξετάζει τον σχεδιασμό που ανταποκρίνεται αποκλειστικά στο πλαίσιο του κινητού, τότε πιθανόν να χάσει μια ευρύτερη εμπειρία χρήστη.
Ταυτόχρονα, το κινητό είναι ένα πραγματικά κατάλληλο σημείο εκκίνησης για ολόκληρη τη συζήτηση σχεδίασης. Έχει γίνει ο κανόνας να ξεκινήσετε με ένα κινητό σύστημα και στη συνέχεια να επεκτείνετε αυτό το σχέδιο σε πρόσθετα μεγέθη καθώς αναπτύσσεται ένας ανταποκρινόμενος ιστοχώρος. Πολλοί σχεδιαστές πιστεύουν ότι είναι απλούστερο να αναπτυχθούν γραφικά παρά να ελαχιστοποιηθούν.
Εάν υπάρχει ένας κανόνας που πρέπει να ακολουθήσουν οι σχεδιαστές ιστοσελίδων, είναι ότι η ποιότητα της εικόνας είναι πολύ πιο ζωτική από τον πραγματικό αριθμό των εικόνων. Ο λόγος είναι ότι μια εικόνα χαμηλής ποιότητας απλά δεν φαίνεται ελκυστική σε οποιοδήποτε μέγεθος. Ο χρόνος που χρειάζεται ένας ιστότοπος για να φορτώσει μια εικόνα είναι σχεδόν εξίσου σημαντικός με το μέγεθος. Οι χρήστες κινητής τηλεφωνίας θα συμφωνήσουν με αυτό, επειδή έχουν περιορισμένο εύρος ζώνης με το οποίο μπορούν να υποστηρίξουν.
Τι είναι ο σχεδιαστής ιστοσελίδων; Απλά φτάστε σε μια έξυπνη ισορροπία μεταξύ χρόνου φόρτωσης και ποιότητας. Αυτό περιλαμβάνει την κλιμάκωση των εικόνων με ιδιότητες ύψους και πλάτους CSS, τη διευκόλυνση της φόρτωσης εικόνων πλήρους μεγέθους και τη βελτιστοποίηση των εικόνων για το Internet. Πριν από τη μεταφόρτωση, συνιστάται ιδιαίτερα να περικόψετε οποιεσδήποτε εικόνες και να αποθηκεύσετε κάθε εικόνα στο μικρότερο δυνατό μέγεθος, αρκεί να διατηρεί ακόμα την απότομη, οπτική ποιότητα.
Ολοκλήρωση αγοράς Ιστοσελίδα της Sony USA . Σημειώστε πως όλες οι εικόνες είναι εξαιρετικά έντονες στην ποιότητα, ανεξάρτητα από το μέγεθος τους. Αφού επισκεφθείτε τον ιστότοπο ή ανανεώσετε την αρχική σελίδα, σημειώστε επίσης πόσο γρήγορα φορτώνονται οι εικόνες. Δεν χρειάζεται να περιμένετε περισσότερο από ένα δευτερόλεπτο για να μπορέσουν τα πάντα να επικεντρωθούν εξαιρετικά έντονα.
Οι σχεδιαστές έχουν πολλές επιλογές όταν ενσωματώνουν τις εικόνες σε μια προσαρμόσιμη ρύθμιση. Μπορούν να χρησιμοποιήσουν μόνο μερικές εικόνες. Μειώστε τη χρήση εικόνων μέσα στα προγράμματα κινητού μεγέθους. επιτρέπουν στις εικόνες να αποκρύπτονται σε κινητό περιβάλλον. ή να χρησιμοποιούν διάφορα μεγέθη αρχείων και εκδόσεις. Αυτές οι επιλογές θα λειτουργήσουν αποτελεσματικά, αν και μερικοί προγραμματιστές είναι ενάντια στην απόκρυψη εικόνων, επειδή ο χρήστης θα πρέπει ακόμα να φορτώσει τις εικόνες παρότι είναι αόρατοι.
Τύπος δεν πρέπει να είναι ένα μέγεθος που ταιριάζει σε όλους. Ένα είδος γραμματοσειράς που φαίνεται ελκυστικό για το μάτι στην επιφάνεια εργασίας σας μπορεί να είναι τρομερό στο smartphone σας. Η τυπογραφία πρέπει να ακολουθεί τους ίδιους κανόνες με άλλες πτυχές του σχεδιασμού που ανταποκρίνεται.
Η πιο σημαντική πτυχή της ανταποκρινόμενης τυπογραφίας είναι το μήκος γραμμής. Για ομαλή αναγνωσιμότητα, ο τύπος πρέπει να βελτιστοποιηθεί ανάλογα με το πλάτος της οθόνης. Ο κανόνας, για τους ιστότοπους γραφείου, είναι ότι μεταξύ 50 και 75 χαρακτήρων μια γραμμή είναι ιδανική. για κινητές συσκευές, είναι ιδανική από 35 έως 50 χαρακτήρες.
Ο τύπος πρέπει επίσης να διαβάζεται εύκολα κατακόρυφα. Πολλοί ιστότοποι χρησιμοποιούν ένα χώρο γραμμών που φτάνει μέχρι και το 140 τοις εκατό του μεγέθους σημείου της οθόνης για μεγαλύτερα μπλοκ κειμένου. Εάν η οθόνη είναι μικρότερη, πρέπει να προστεθεί περισσότερος χώρος.
Ακόμη και η ειδική γραμματοσειρά που χρησιμοποιείται είναι σημαντική. Οι φανταστικές γραμματοσειρές και οι γραμματοσειρές καινοτομίας έχουν τη δυνατότητα να φαίνονται οπτικά ελκυστικές σε μεγαλύτερες οθόνες, όμως είναι δύσκολο να διαβαστούν αν το μέγεθος του σημείου είναι μικρό. Αυτά τα είδη των γραμματοσειρών πρέπει να έχουν πολύ χώρο μεταξύ τους. Όταν εργάζεστε με μικρότερα μεγέθη, είναι πιο εύκολο να χρησιμοποιήσετε κανονικά styles sans serif και ακόμη και εγκεφαλικά επεισόδια.
Επί Ιστοσελίδα του Hardboiled Web Design , μπορείτε να δείτε πολλές από αυτές τις αρχές που ακολουθούνται, κάνοντας καλή ανταπόκριση. Σημειώστε πως το μήκος της γραμμής του κειμένου σε μια επιφάνεια εργασίας - ενώ είναι κατά μέσο όρο μεγαλύτερο από την ιδανική σύσταση των 50 έως 75 χαρακτήρων - αποτελείται από ένα γραμματοσειρά που είναι καθαρό και ευανάγνωστο. Επιπλέον, ο χώρος γραμμής είναι επίσης μεγαλύτερος από το μέγεθος του σημείου της γραμματοσειράς. Σε κινητές συσκευές, η ανταπόκριση του ιστότοπου είναι ακόμα καλύτερη: σε μια οθόνη iPhone 5, ο αριθμός χαρακτήρων ανά γραμμή ήταν περίπου 67, ο οποίος είναι λίγο πάνω από τον ιδανικό κανόνα που κυμαίνεται από 35 έως 50 χαρακτήρες.
Όσον αφορά την εμπειρία των χρηστών - που είναι ένας από τους πιο σημαντικούς παράγοντες που πρέπει να σκεφτούν οι σχεδιαστές ιστοσελίδων - η πλοήγηση είναι σωστή στην κορυφή των προτεραιοτήτων. Η πλοήγηση πρέπει να είναι ομαλή και αποτελεσματική για να εξασφαλίζει μια άνετη εμπειρία χρήστη.
Ο αποτελεσματικός σχεδιασμός που ανταποκρίνεται στις απαιτήσεις πρέπει να διασφαλίζει αυτό με την καταβολή ιδιαίτερης προσοχής στο συγκεκριμένο πλάτος ενός συγκεκριμένου προγράμματος περιήγησης. Ένας ιστότοπος που χρησιμοποιεί ευέλικτο σχεδιασμό και θα καθορίσει την πλοήγηση του ιστότοπού του σε διάφορες περιοχές, όλα εξαρτώνται από το πλάτος του προγράμματος περιήγησης. Ένα από τα καλύτερα παραδείγματα είναι Αίσθηση τροφίμων Της πλοήγησης ιστότοπου.
Θα ήταν λάθος για τον αποκρινόμενο σχεδιασμό να κλιμακώσει την πλοήγηση του ιστότοπου σε μεγαλύτερες αναλογίες σε συσκευές με μεγαλύτερες οθόνες.
Τώρα λοιπόν, όταν ακούτε σχεδιαστές ιστοσελίδων μιλώντας για ευαίσθητο σχεδιασμό, θα ξέρετε ότι δεν είναι απλώς να φτιάξετε έναν ιστότοπο που να δείχνει καλό και να λειτουργεί ομαλά σε μικρότερες, κινητές οθόνες. Θα γνωρίζετε ότι αυτή η προσέγγιση σχεδιασμού βασίζεται στην αρχή της δημιουργίας ιστότοπων παντός μεγέθους που παρέχουν την καλύτερη δυνατή εμπειρία στον χρήστη - ανεξάρτητα από το τι χρησιμοποιούν για την προβολή του ιστότοπου.
Ο υπεύθυνος σχεδιασμός εξακολουθεί να είναι μια σχετικά νέα έννοια, τουλάχιστον για τους περισσότερους ανθρώπους που βλέπουν μόνο ιστοσελίδες στο Διαδίκτυο. Αυτός είναι ο λόγος για τον οποίο τόσοι πολλοί άνθρωποι εξακολουθούν να μην μπορούν να συμφωνήσουν σε ό, τι κάνει την ανταποκρινόμενη σχεδίαση ... ανταποκρινόμενο σχεδιασμό. Πρόκειται να δούμε τα πάντα σωστά σε κινητές οθόνες; Είναι ακριβώς για τους χρόνους φόρτωσης και εικόνες υψηλής ποιότητας που θα ευχαριστήσουν το μάτι; Πρόκειται για ένα καθαρό σχέδιο και ευανάγνωστες γραμματοσειρές;
Είναι όλα αυτά και πολλά άλλα. Αυτά είναι μόνο τα θεμελιώδη στοιχεία αυτής της προσέγγισης σχεδιασμού ιστοσελίδων, αλλά ο ευαίσθητος σχεδιασμός εξακολουθεί να εξελίσσεται και να αλλάζει, συνεπώς οι πιθανότητες είναι καλές να ληφθούν υπόψη και πρόσθετα στοιχεία. Τελικά, πρόκειται για την ενίσχυση της εμπειρίας των χρηστών, επειδή κανείς δεν θέλει να ασχοληθεί με έναν ιστότοπο που είναι αργός, θολή, δύσκολος να διαβάσει, γεμάτος ή δύσκολο να πλοηγηθεί.
Είναι η ανταπόκριση του σχεδιασμού μόνο μια τάση; Ποιες είναι οι βασικές πτυχές του ανταποκρινόμενου σχεδιασμού; Ας γνωρίσουμε τις σκέψεις σας στα σχόλια.