Ο υπεύθυνος webdesign έχει γίνει ένας πολύ καλός όρος για την εύρυθμη λειτουργία του ιστότοπού σας σε χαμηλές αναλύσεις.
Τα smartphones επανάφεραν τον κινητό ιστό και τα δισκία ρίχνουν ένα άλλο κλειδί στα εργαλεία με την αυξανόμενη δημοτικότητά τους. Με όλα τα πράγματα που εξετάστηκαν, ένας ιστότοπος σήμερα θα μπορούσε να βιωθεί σε ένα smartphone χαμηλής ανάλυσης, ένα tablet μεσαίας ανάλυσης ή ένα desktop ή φορητό υπολογιστή υψηλής ανάλυσης. Όταν ρίχνετε τις οθόνες του αμφιβληστροειδούς στο μίγμα, ο αριθμός πιθανών μεγεθών οθόνης είναι ζαλάδες. Στην ιδανική περίπτωση, ο ιστότοπός σας θα φαίνεται και θα λειτουργεί με χαρά σε όλα τα παραπάνω, σε οποιαδήποτε ανάλυση.
Ανταπόκριση webdesign από μόνη της είναι η διαδικασία της δημιουργίας ενός δικτυακού τόπου εργασίας σε πολύ μικρές οθόνες, πολύ μεγάλες οθόνες, και σε οποιαδήποτε ανάλυση στο μεταξύ.
Τα τελευταία χρόνια, ο κλάδος έχει αναπτύξει συλλογικά έναν κατάλογο κοινών βέλτιστων πρακτικών. Πολλές από αυτές τις πρακτικές επικεντρώνονται στον εκ των υστέρων προσαρμογή ιστότοπων που προορίζονται για υψηλή ανάλυση σε χαμηλότερα μεγέθη. Άλλοι ξεκινούν από το κινητό και εργάζονται στα μεγαλύτερα παράθυρα προβολής, βελτιστοποιώντας ανάλογα με τις ανάγκες. Όλες αυτές οι πρακτικές μπορούν γενικά να κατηγοριοποιηθούν ως προσαρμοστικές ή προσαρμοστικές διατάξεις.
Οι ανταποκρινόμενες διατάξεις γενικά λειτουργούν καλύτερα από τις προσαρμοστικές διατάξεις, αλλά σε ορισμένες περιπτώσεις (πολύπλοκες webapps για παράδειγμα) μια προσαρμοστική προσέγγιση θα μπορούσε να εξυπηρετήσει καλύτερα τους χρήστες. Είτε έτσι είτε αλλιώς, ο στόχος είναι να κάνετε τον ιστότοπό σας πάντα να δείχνει το καλύτερο με την επιθυμητή λύση.
Οι περισσότεροι άνθρωποι επιλέγουν να χρησιμοποιούν ερωτήματα μέσων για να το κάνουν αυτό, όπως είναι πετρώματα στερεά εκτός αν χρειάζεστε υποστήριξη για IE8 ή παρακάτω. Για όσους από εμάς έχουμε ακόμη κοινό στο IE6 - 8, ο Scott Jehl δημιούργησε ένα Το JavaScript polyfill αποκαλείται Respond.js αυτό θα κάνει τα πράγματα να λειτουργούν.
Πριν, πολλοί webdesigners είχαν ελάχιστη επικοινωνία με τους προγραμματιστές μέχρι τη μεταβίβαση. Τώρα, όμως, οι σχεδιαστές και οι προγραμματιστές πρέπει να συνεργαστούν τόσο με τη διαδικασία σχεδιασμού όσο και με την ανάπτυξη, ώστε τα πάντα να πάνε ομαλά. Από τα αναλυτικά στοιχεία των χρηστών έως το τι μπορεί ή δεν μπορεί να αναδιαρθρωθεί κατά την αλλαγή των παραθύρων προβολής-σχεδιαστές και προγραμματιστές είναι πιο κοντά από ποτέ, αν όχι το ίδιο πρόσωπο. Αν ψάχνετε για έμπνευση σχετικά με το πώς μοιάζουν με τις προσαρμοστικές διατάξεις, MediaQueri.es είναι μια δημοφιλής συλλογή webdesign που εμφανίζει τέσσερα παράθυρα προβολής ενός ιστότοπου.
Όταν η ιδέα του ανταποκρινούς webdesign άρχισε να κερδίζει έδαφος, οι προσαρμοστικές τεχνικές κυριάρχησαν για λίγο. Είναι πιο εύκολο να μεταβείτε σε σχεδιασμό και ανάπτυξη για αυτές τις διατάξεις, αν και χρειάζονται περισσότερη δουλειά από ότι οι απαντήσεις τους. Αυτή είναι και η διαδρομή που πολλοί άνθρωποι λαμβάνουν κατά τη μετασκευή ενός υφιστάμενου ιστότοπου για να είναι φιλικοί προς κινητά. Λόγω της φύσης των προσαρμοστικών διατάξεων, δίνουν πολύ μεγαλύτερο έλεγχο στον σχεδιασμό του ιστότοπου. Πρέπει να σχεδιάσετε μόνο για συγκεκριμένα παράθυρα προβολής και τα προγράμματα περιήγησης εμφανίζουν μόνο το υψηλότερο που θα χωρέσει στο πλάτος του. Αυτές οι διατάξεις είναι αυτές που "κουμπώνουν" κατά την προσαρμογή καθώς αλλάζετε το μέγεθος του παραθύρου του προγράμματος περιήγησης. Στην πραγματικότητα, αν αλλάξετε το μέγεθος του παραθύρου σας ώστε να είναι μικρότερο από 1024 pixels, θα δείτε αυτήν την ξαφνική αλλαγή που μιλάω, καθώς η διάταξη αυτού του ιστότοπου προσαρμόζεται ώστε να επικεντρώνεται σε ένα παράθυρο προβολής μέσης ανάλυσης.
Κατά το σχεδιασμό μιας προσαρμοστικής προσέγγισης ανάπτυξης, η εργασία είναι αρκετά εύκολη. Πριν από την απόκριση webdesign έγινε κάτι, απλά σχεδιάσατε μια διάταξη και στη συνέχεια αναπτύξατε την. Τώρα, θα σχεδιάσετε για πολλά παράθυρα προβολής και θα τα αναπτύξετε. Γενικά, είναι πιο εύκολο να ξεκινήσετε σε παραθυράκια χαμηλής ανάλυσης και να προχωρήσετε προς τα πάνω. Αν ξεκινήσετε με προβολές υψηλής ανάλυσης και κατεβείτε, τα πράγματα θα μπορούσαν να καταλήξουν λίγο ... συμπαγή. Και από τη στιγμή που φτάνετε στα κινητά, γεμάτα.
Ο αριθμός των παραθύρων προβολής που σχεδιάζετε εξαρτάται αποκλειστικά από εσάς και τον προγραμματιστή, επεξεργαστείτε ένα σχέδιο μάχης που βασίζεται στους χρήστες σας. Εάν τα τρέχοντα αναλυτικά στοιχεία τοποθεσιών δείχνουν ότι οι χρήστες χρησιμοποιούν κυρίως παραθύρια προβολής χαμηλής και μέσης ανάλυσης, σχεδιάστε αυτά. Θέλετε τουλάχιστον τρία: ένα για παράθυρα προβολής χαμηλής ανάλυσης (smartphones), παράθυρα προβολής μέσης ανάλυσης (δισκία) και ένα για παράθυρα προβολής υψηλής ανάλυσης (επιτραπέζιους υπολογιστές και φορητούς υπολογιστές). Στην ιδανική περίπτωση, ο προγραμματισμός για έξι είναι ο στάνταρ, έχοντας διάταξη υψηλής και χαμηλής ανάλυσης για καθένα από τα τρία παράθυρα προβολής που αναφέρονται παραπάνω. Ωστόσο, έχοντας πάρα πολλά περισσότερα από ότι θα κάνουν την ανάπτυξη και τη συντήρηση πάρα πολύ να χειριστεί, οπότε να είστε επιφυλακτικοί.
Η ανάπτυξη προσαρμοστικής διάταξης είναι στην πραγματικότητα αρκετά απλή. Υποθέτοντας ότι έχετε δουλέψει με τον σχεδιαστή (ή είστε ο σχεδιαστής) από το get-go είναι ακριβώς όπως την ανάπτυξη ενός παραδοσιακού ιστοτόπου. Θα ξεκινήσετε αναπτύσσοντας τον ιστότοπο σε ένα κινητό παράθυρο προβολής για κινητά. Αφού το κάνετε αυτό, θα χρησιμοποιήσουμε ερωτήματα μέσων για να επεκτείνουμε τη διάταξη για προβολές προβολής υψηλότερης ανάλυσης. Παρακάτω παρατίθενται ερωτήματα μέσων προβολής χαμηλής, μεσαίας και υψηλής ανάλυσης:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Εκεί προέρχεται το "snap" στην προσαρμοστική προσέγγιση. Εφόσον στοχεύουμε σε πολλαπλές αναλύσεις κοινών προβολών προβολής, μεταβαίνοντας από το ένα στο άλλο όταν αλλάζουμε το μέγεθος του παραθύρου, μπορεί να προκληθεί πτώση της διάταξης. Όπως ανέφερα προηγουμένως, ο προσαρμοστικός σχεδιασμός και ανάπτυξη είναι πολύ χρήσιμος μόνο για τον εκ των υστέρων εξοπλισμό ή για πολύπλοκα webapps. Ο σχεδιασμός και η ανάπτυξη γι 'αυτό πολλές διατάξεις για ανεξάρτητες παραστάσεις προβολής είναι πολύ περισσότερο από μια ταλαιπωρία εάν δεν είναι απαραίτητη.
Από σήμερα, ο ευαίσθητος σχεδιασμός και ανάπτυξη είναι η de-facto προσέγγιση στη χρήση. Παρόλο που προσφέρει λιγότερο έλεγχο της διάταξης σε σύγκριση με μια προσαρμοστική προσέγγιση, είναι πολύ λιγότερη εργασία για την υλοποίηση και συντήρηση, καθώς τεχνικά έχετε μόνο μία διάταξη. Είναι επίσης πιο προσαρμοσμένο για την ιστοσελίδα, επίσης, και αυτό είναι το βασικό σημείο πώλησης. Θα είστε σε θέση να κάνετε τα δικά σας σημεία διακοπής με βάση το πότε ο σχεδιασμός σας σπάει ή δεν φαίνεται σωστά.
Οι ανταποκρινόμενες διατάξεις περιλαμβάνουν επίσης διατάξεις υγρού. Πριν από την απόκριση του webdesign, τα ρευστά συστήματα ήταν δημοφιλή - οι μορφές που χρησιμοποιούν ποσοστά για τα πλάτη. Ενώ σίγουρα δούλεψαν καλά στις περισσότερες περιπτώσεις, αυτό ήταν πριν έχουμε smartphones και δισκία. Τώρα, οι περισσότερες διατάξεις υγρού ενισχύονται από ερωτήματα μέσων σε πολύ χαμηλές και πολύ υψηλές αναλύσεις. Διαφορετικά, θα μπορούσατε να καταλήξετε σε εξαιρετικά συμπαγείς ή εξαιρετικά μεγάλες διατάξεις.
Ενώ έχετε έναν πολύ απλό οδηγό για να ακολουθήσετε με προσαρμοστικό σχεδιασμό, ο σχεδιασμός που ανταποκρίνεται δεν είναι τόσο ξεκάθαρος. Υπάρχει έντονη συζήτηση ότι ο σχεδιασμός στο πρόγραμμα περιήγησης είναι ο καλύτερος τρόπος να το κάνετε - σχεδιάζοντας και αναπτύσσοντας ταυτόχρονα. Δεδομένου ότι πρόκειται ουσιαστικά να λάβετε υπόψη όλα τα παράθυρα προβολής κατά το σχεδιασμό, υπάρχουν περισσότερες εργασίες που εμπλέκονται στην πλευρά του σχεδιασμού. Στην ιδανική περίπτωση, θέλουμε να διατηρούμε υπόψη τα παράθυρα προβολής, αλλά να μην σχεδιάζουμε για κάποιο συγκεκριμένο. Εάν είναι δυνατόν, προσπαθήστε να συναντηθείτε σε μεσαίο έδαφος. Η εστίαση στις προβολές μέσου ανάλυσης, έχοντας παράλληλα υπόψη τη διάταξη, θα χρειαστεί να προσαρμοστεί για χαμηλότερες και υψηλότερες αναλύσεις αργότερα.
Είναι εξαιρετικά σημαντικό να χρησιμοποιείτε τα υπάρχοντα αναλυτικά στοιχεία των χρηστών αν τα έχετε. Εάν ο ιστότοπός σας διαθέτει ήδη αναλυτικά στοιχεία που δείχνουν ότι το κοινό σας διαβάζει κυρίως από παραθυράκια χαμηλής ανάλυσης, σχεδιάστε με έμφαση σε αυτά. Στοχεύστε το κοινό σας , ακόμα κι αν αυτό σημαίνει ότι αγνοείτε ορισμένες από τις καλύτερες πρακτικές εκεί έξω. Τελικά, ο ιστότοπός σας θα τους εξυπηρετεί, όχι οι άνθρωποι που συγκεντρώνουν αυτές τις «καλύτερες» πρακτικές.
Μόλις ολοκληρωθεί η φάση σχεδιασμού, η ανάπτυξη είναι εκεί όπου αρχίζει η πραγματική διασκέδαση. Όπως αναφέρθηκε προηγουμένως, εάν έχετε αναλυτικά δεδομένα του τυπικού ακροατηρίου σας, ξεκινήστε εκεί. Μόλις αναπτύξετε τη διάταξή σας, θα χρησιμοποιήσετε ερωτήματα μέσων για να την αποκρίσετε. Αντί να ορίσετε ορισμένους οθόνες προβολής, θα αλλάξετε το μέγεθος του προγράμματος περιήγησής σας με μη αυτόματο τρόπο μέχρι να σπάσει η διάταξη. Όταν συμβαίνει αυτό, αυτό είναι το πλάτος του σημείου διακοπής - προσθέστε ένα ερώτημα μέσων για να διορθώσετε το σπάσιμο του σχεδιασμού και να συνεχίσετε την αλλαγή μεγέθους. Στην ιδανική περίπτωση, θα το κάνετε αυτό από συσκευή υψηλής ανάλυσης, ώστε να μπορείτε να δείτε όλα τα παράθυρα προβολής. Αφού βεβαιωθείτε ότι έχετε υποστήριξη για παράθυρα προβολής χαμηλής και υψηλής ανάλυσης, μεταβείτε στη δοκιμή.
Σπάνια, ενδέχεται να αντιμετωπίσετε έναν ιστότοπο που χρησιμοποιεί μια προσαρμοσμένη λύση, όπως {$lang_domain} . Σε γενικές γραμμές, η πλειοψηφία του ιστού εμπίπτει είτε στις ομάδες απόκρισης είτε στις προσαρμοστικές ομάδες όπως περιγράφεται παραπάνω, αλλά μερικές φορές οι άνθρωποι γίνονται δημιουργικοί και κάνουν τη δική τους λύση. {$lang_domain} το πράττει ξεκινώντας με τα τυπικά χαμηλά, μεσαία και υψηλά σημεία διακοπής, και στη συνέχεια συμπληρώνοντας ανάλογα με τις ανάγκες όταν η διάταξη σπάσει. Εκτός από αυτό, η διάταξη είναι επίσης ρευστός στη φύση μέχρι μια καθορισμένη μέγιστη ανάλυση. Με αυτό το πνεύμα, δημιουργήστε και δημιουργήστε κάτι που παραβιάζει τον κανόνα!
Δυστυχώς, δεν υπάρχει πραγματικά καλή λύση για τον έλεγχο του προγράμματος περιήγησης αυτών των διατάξεων ακόμα. Ο καλύτερος τρόπος για να δοκιμάσετε είναι να το κάνετε με το χέρι: φόρτωση της σελίδας στο τηλέφωνό σας, tablet, φορητό υπολογιστή και οτιδήποτε άλλο γύρω. Μπορείτε επίσης να χρησιμοποιήσετε ένα spoofer προβολής στο πρόγραμμα περιήγησής σας αν υποστηρίζει μια τέτοια επέκταση. Αναπαραγωγέας είναι μια επέκταση που χρησιμοποιώ στο Chrome για να δοκιμάσω ορισμένα παράθυρα προβολής χαμηλής ανάλυσης. Ενώ είναι σίγουρα άβολο να δοκιμάσετε χειροκίνητα τις συσκευές, δίνει μια πιο ακριβή εικόνα της λειτουργικότητας του ιστότοπού σας. Το UI που φαίνεται εντάξει σε έναν εξομοιωτή, μπορεί στην πραγματικότητα να εκτελέσει αρκετά άσχημα σε μια πραγματική συσκευή.
Όσο εκτεταμένο είναι αυτό το άρθρο, αυτό είναι απλά ένα αστάρι στο θέμα των τύπων διάταξης. Υπάρχουν πολλές πληροφορίες σχετικά με τις μεθόδους webdesign που δεν περιλαμβάνονται σε αυτό το άρθρο. Η βελτιστοποίηση των στοιχείων και της τυπογραφίας UI, των αποκρινόμενων εικόνων και μέσων, των αναλογιών των pixel συσκευών και πολλά άλλα δεν εξηγείται εδώ. Ωστόσο, υπάρχουν πολλές πηγές για αυτές τις γνώσεις, σε πολύ περισσότερες πληροφορίες πυκνές μορφές. Από τότε που ήρθε η ιδέα του ανταποκρινούς webdesign, έχουμε συνεισφέρει σε έναν εξαιρετικά ευρύ πλούτο γνώσεων σχετικά με το θέμα. Ελπίζω εξηγώντας τη διαφορά μεταξύ των τύπων διάταξης εδώ, θα έχετε τη δυνατότητα να χειριστείτε καλύτερα την ιδέα ενός ανταποκρινόμενου ιστού ... χωρίς να χάσετε την τρύπα του κουνελιού.
Η κοινότητα δημιουργεί συνεχώς νέες τεχνικές και δημιουργεί δημιουργικές λύσεις σε προβλήματα που μόλις αρχίζουμε να συναντούμε. Έτσι, ενώ υπάρχει ένας τεράστιος πλούτος πληροφοριών σχετικά με τον ανταποκρινόμενο webdesign εκεί έξω, είναι μια ιδέα ακόμα στο νηπιακό της στάδιο. Ενώ οι βέλτιστες πρακτικές και οι συνήθεις περιπτώσεις χρήσης είναι εύκολο να προσαρμοστούν, είναι δημιουργική και ανοίγοντας τη δική σας λύση ενθαρρύνεται πάντα. Εάν έχετε οποιεσδήποτε συμβουλές ή υποδείξεις για όσους από εμάς μόλις μπαίνουμε σε, ή επεκτείνουμε τις γνώσεις μας σχετικά με την ανταποκρινόμενη webdesign και την ανάπτυξη, πυροδοτεί μια συζήτηση παρακάτω!
Προτεινόμενη εικόνα / μικρογραφία, χρησιμοποιεί ευαίσθητη εικόνα μέσω Shutterstock.