Προσαρμοστική διάταξη: τι είναι και πώς να το χρησιμοποιήσετε. Προσαρμοστική και Responsive Σχεδίαση Ιστοσελίδων
Το θέμα αυτού του μήνα είναι η ανταπόκριση ιστοσελίδων, γι' αυτό αποφασίσαμε να μιλήσουμε λεπτομερέστερα για το τι είναι το responsive web design, γιατί χρειάζεται και ποιες είναι οι βασικές αρχές του responsive web design.
Η προσαρμοστική σχεδίαση ιστοσελίδων είναι μια αρκετά νέα κατεύθυνση στον σχεδιασμό των πόρων ιστού, αλλά τώρα είναι ένας από τους κύριους δείκτες ποιότητας ιστοτόπου. Σε αυτό το άρθρο θα μιλήσουμε για το τι είναι το responsive web design και τι μπορεί να είναι.
Τι είναι το responsive web designΗ προσαρμοστική σχεδίαση ιστοσελίδων (στα αγγλικά «responsive web design») είναι η σχεδίαση ιστοσελίδων που παρέχουν εξαιρετική εμπειρία σε διάφορες συσκευές συνδεδεμένες στο Διαδίκτυο.
Αυτό σημαίνει ότι ο ίδιος ιστότοπος μπορεί να προβληθεί σε διάφορες συσκευές, ανεξάρτητα από την ανάλυση και τη μορφή οθόνης - smartphone, tablet, φορητοί υπολογιστές κ.λπ. Ταυτόχρονα, η προβολή θα είναι εξίσου βολική για όλες τις μορφές - οι χρήστες κινητών συσκευών, για παράδειγμα, δεν θα χρειαστεί να επεκτείνουν μεμονωμένες περιοχές του ιστότοπου για να μην χάνουν τον επιθυμητό σύνδεσμο.
Ο αποκριτικός σχεδιασμός στοχεύει να κάνει τις ιστοσελίδες και την εμφάνιση του περιεχομένου τους κατάλληλες για τη συσκευή στην οποία προβάλλονται.
Γιατί χρειάζεστε responsive σχεδιασμό ιστοσελίδων;1) Μεγάλη ποικιλία συσκευών από τις οποίες μπορείτε να έχετε πρόσβαση στο Διαδίκτυο. Επί του παρόντος, υπάρχουν πολλές συσκευές που χρησιμοποιούν οι άνθρωποι, συμπεριλαμβανομένης της πρόσβασης στο Διαδίκτυο. Όλες αυτές οι συσκευές διαφέρουν ως προς το μέγεθος της οθόνης, την ανάλυση και συνεπώς τον τρόπο εμφάνισης ενός ιστότοπου σε αυτές. Επομένως, είναι σημαντικό ο ιστότοπός σας να φαίνεται καλός και να εμφανίζεται σωστά για οποιονδήποτε χρήστη, ανεξάρτητα από τη συσκευή που χρησιμοποιεί.
2) Η δημοτικότητα των φορητών συσκευών με πρόσβαση στο Διαδίκτυο και η αύξηση της κίνησης στο Διαδίκτυο από κινητά. Με την αυξανόμενη δημοτικότητα των φορητών συσκευών, ο αριθμός των χρηστών που έχουν πρόσβαση σε ιστότοπους από αυτές έχει αυξηθεί αισθητά, επομένως δεν μπορείτε πλέον απλώς να τους αγνοήσετε - δεν είναι ένα ή δύο άτομα κάθε έξι μήνες, αυτό είναι ένα σημαντικό μέρος του κοινού σας, και θα πρέπει να αισθάνονται άνετα χρησιμοποιώντας τον ιστότοπό σας (διαφορετικά δεν θα το κάνουν).
3) Επείγουσα ενημέρωση. Εάν ο πόρος σας περιέχει ειδήσεις/επείγουσες πληροφορίες και υπάρχει μεγάλη πιθανότητα ο χρήστης να χρειαστεί να διαβάσει αυτές τις πληροφορίες από το τηλέφωνο (επειδή δεν έχει άλλες συσκευές στο χέρι) τη δεδομένη στιγμή, πρέπει να βεβαιωθείτε ότι έχει την ευκαιρία να το κάνετε αυτό.
Η διαφορά μεταξύ μιας αποκριτικής ιστοσελίδας και μιας έκδοσης για κινητά (εφαρμογή) ενός ιστότοπουΟι εκδόσεις ιστοτόπων και εφαρμογών για φορητές συσκευές, ειδικά σχεδιασμένες για διάφορες φορητές συσκευές, λύνουν επίσης το πρόβλημα της ευκολίας προβολής του ιστότοπου, αλλά έχουν ορισμένα μειονεκτήματα.
1) Κάθε τύπος λειτουργικού συστήματος απαιτεί τη δική του έκδοση εφαρμογής / ιστότοπου. Αυτό απαιτεί πρόσθετους πόρους, τόσο χρόνο όσο και χρήμα.
2) Η ανάγκη λήψης της εφαρμογής. Για να χρησιμοποιήσετε την εφαρμογή σας, οι χρήστες πρέπει να την κατεβάσουν. Αυτό απαιτεί κάποια πρόσθετη προσπάθεια από τους χρήστες και πολλοί δεν θα το κάνουν αν δεν είναι απολύτως βέβαιοι ότι χρειάζονται πραγματικά την εφαρμογή και σχεδιάζουν να τη χρησιμοποιούν τακτικά.
3) Διαχωρισμός κυκλοφορίας. Από την άποψη της προώθησης ιστότοπου, μια εφαρμογή για κινητά δεν είναι βολική επειδή διαιρεί όλη την επισκεψιμότητα των πόρων σε επισκεψιμότητα ιστότοπου και επισκεψιμότητα εφαρμογών, η οποία θα μοιάζει με λιγότερη επισκεψιμότητα ιστότοπου.
4) Η ανάγκη ενσωμάτωσης υλικών του ιστότοπου. Στην περίπτωση μιας εφαρμογής για κινητά, είναι απαραίτητο είτε να συγχρονίσετε τον ιστότοπο με την εφαρμογή (πρόσθετοι πόροι), είτε να κάνετε διπλή εργασία για να γεμίσετε τον ιστότοπο και την εφαρμογή με υλικά.
Σε αντίθεση με τις εφαρμογές για κινητές συσκευές, η αποκριτική σχεδίαση είναι μία διεύθυνση τοποθεσίας, μία σχεδίαση, ένα σύστημα διαχείρισης και περιεχόμενο ιστότοπου.
Φυσικά, ο προσαρμοστικός σχεδιασμός έχει και τα μειονεκτήματά του, το κυριότερο από τα οποία είναι η σχετική καινούργια τεχνολογία και, ως εκ τούτου, η έλλειψη καλών ειδικών και γνώσεων για το σχεδιασμό προσαρμοστικών ιστοσελίδων.
Αρχές Responsive DesignΟ σχεδιασμός ξεκινά με μια responsive έκδοση του ιστότοπου για κινητές συσκευές. Σε αυτό το στάδιο, οι σχεδιαστές προσπαθούν να μεταφέρουν σωστά το νόημα και τις κύριες ιδέες χρησιμοποιώντας μια μικρή οθόνη και μόνο μια στήλη. Το περιεχόμενο μειώνεται εάν είναι απαραίτητο, αφαιρώντας ασήμαντα μπλοκ πληροφοριών και αφήνοντας τα πιο σημαντικά.
- Σχεδιασμός για φορητές συσκευές από τα πρώτα στάδια («πρώτα το κινητό»).
- Χρησιμοποιώντας μια ευέλικτη διάταξη που βασίζεται σε πλέγμα.
- Χρήση ευέλικτων εικόνων.
- Εργασία με ερωτήματα πολυμέσων.
- Εφαρμογή σταδιακής βελτίωσης.
Το άρθρο για το Habrahabr παρουσιάζει τους κύριους τύπους προσαρμοστικών διατάξεων που υπάρχουν αυτήν τη στιγμή.
1) ΚαουτσούκΕύκολη εφαρμογή και προφανής στον χρήστη τύπος παρουσίασης ιστότοπου. Τα κύρια μπλοκ συμπιέζονται στο πλάτος της οθόνης της κινητής συσκευής, όπου αυτό είναι αδύνατο - αναδιατάσσονται σε μια μακριά ταινία.
2) Μεταφορά μπλοκΈνας προφανής τρόπος για έναν ιστότοπο με πολλές στήλες: όταν μειώνεται το πλάτος της οθόνης, επιπλέον μπλοκ (πλευρικές γραμμές) μετακινούνται στο κάτω μέρος της διάταξης.
3) Εναλλαγή διατάξεωνΑυτή η μέθοδος είναι πιο βολική όταν διαβάζετε έναν ιστότοπο από διαφορετικές συσκευές: αναπτύσσεται ξεχωριστή διάταξη για κάθε ανάλυση οθόνης. Η μέθοδος είναι έντασης εργασίας, επομένως λιγότερο δημοφιλής από τις δύο προηγούμενες.
Εναλλαγή διατάξεων. Μια πολύ απλή μέθοδος που είναι κατάλληλη για απλούς ιστότοπους. Επιτυγχάνεται με απλή κλιμάκωση εικόνων και τυπογραφίας. Δεν είναι πολύ δημοφιλές, γιατί... στερείται ευελιξίας.
Προσαρμοστικότητα με λίγο αίμα. Fragment of the LukeW Ideation + Design website 5) Πίνακες Μια μέθοδος που προήλθε από εφαρμογές για κινητά, όπου μπορεί να εμφανιστεί ένα πρόσθετο μενού με οριζόντιο ή κάθετο πάτημα. Το κύριο μειονέκτημα είναι ότι οι ενέργειες δεν είναι προφανείς στον χρήστη: είναι πολύ ασυνήθιστο να βλέπεις πλοήγηση μέσω κινητού σε έναν ιστότοπο. Αλλά με την πάροδο του χρόνου, η μέθοδος μπορεί να γίνει αρκετά δημοφιλής.
Πρέπει να θυμόμαστε ότι οι διατάξεις που παρουσιάζονται παραπάνω δεν είναι καθολικές λύσεις - για κάθε έργο είναι απαραίτητο να επιλέξετε τη μέθοδο που είναι πιο κατάλληλη για τις ανάγκες και τις δυνατότητες.
Οι χρήστες του Διαδικτύου περιηγούνται σε ιστότοπους σε διαφορετικές συσκευές με διαφορετικά μεγέθη οθόνης. Τα μεγέθη οθόνης αλλάζουν συνεχώς, επομένως είναι σημαντικό ο ιστότοπος να προσαρμόζεται σε οποιοδήποτε από αυτά. Υπάρχουν δύο βασικές προσεγγίσεις για τη δημιουργία ιστοτόπων που προσαρμόζονται εύκολα σε διαφορετικούς τύπους συσκευών:
Responsive Design (RWD) - responsive design - σχεδιασμός ιστότοπου με ορισμένες τιμές ιδιοτήτων, για παράδειγμα, ένα ευέλικτο πλέγμα διάταξης, το οποίο επιτρέπει σε μία διάταξη να λειτουργεί σε διαφορετικές συσκευές.
Adaptive Design (AWD) - προσαρμοστικός σχεδιασμός ή δυναμική οθόνη - σχεδιασμός ιστότοπου με συνθήκες που αλλάζουν ανάλογα με τη συσκευή, βάσει πολλών διατάξεων σταθερού πλάτους.
1. Responsive Design ΤεχνικέςΗ φιλοσοφία πίσω από το responsive web design είναι να διευκολύνει την προβολή του ιστότοπου σε οποιαδήποτε συσκευή, ανεξάρτητα από το μέγεθος της οθόνης. Η φράση responsive design επινοήθηκε από τον Ethan Marcotte το 2011. Το κύριο χαρακτηριστικό του responsive web design είναι ότι λόγω του ρευστού πλέγματος, η διάταξη ανταποκρίνεται αυτόματα σε αλλαγές στο μέγεθος της οθόνης, φουσκώνοντας ή συστέλλοντας σαν μπαλόνι.
Το Responsive Web Design συνδυάζει τρεις τεχνικές - ευέλικτη διάταξη βάσει πλέγματος, ευέλικτες εικόνες και ερωτήματα πολυμέσων.
Η ευελιξία της διάταξης βασίζεται στη χρήση σχετικών μονάδων μέτρησης αντί για σταθερές τιμές pixel, επιτρέποντας την προσαρμογή του πλάτους ώστε να ταιριάζει στον διαθέσιμο χώρο.
Η ευελιξία του περιεχομένου κειμένου επιτυγχάνεται με τον υπολογισμό των μεγεθών γραμματοσειράς σε σχέση με το προεπιλεγμένο μέγεθος γραμματοσειράς 16 εικονοστοιχείων των προγραμμάτων περιήγησης, για παράδειγμα για ένα σταθερό μέγεθος γραμματοσειράς: 42 εικονοστοιχεία, το σχετικό μέγεθος είναι 42 εικονοστοιχεία / 16 εικονοστοιχεία = 2,625 εικονοστοιχεία.
Το πρόβλημα των ευέλικτων εικόνων επιλύεται χρησιμοποιώντας τον κανόνα img (πλάτος: 100%; μέγιστο πλάτος: 100%;) για όλες τις εικόνες στον ιστότοπο. Αυτός ο κανόνας διασφαλίζει ότι οι εικόνες δεν είναι ποτέ πιο φαρδιές από τα δοχεία τους και ποτέ δεν υπερβαίνουν το πραγματικό τους μέγεθος σε μεγαλύτερες οθόνες.
Τα ερωτήματα πολυμέσων τροποποιούν στυλ με βάση τα χαρακτηριστικά της συσκευής που σχετίζονται με την εμφάνιση περιεχομένου, όπως ο τύπος οθόνης, το πλάτος, το ύψος, ο προσανατολισμός και η ανάλυση. Τα ερωτήματα πολυμέσων δημιουργούν μια αποκριτική σχεδίαση που εφαρμόζει κατάλληλα στυλ σε κάθε μέγεθος οθόνης.
Ρύζι. 1. Responsive Design Πρόσθετες Τεχνικές Responsive Design Διανυσματικά γραφικά με δυνατότητα κλιμάκωσης - Χρησιμοποιήστε εικόνες SVG που κλιμακώνονται σε οποιοδήποτε μέγεθος χωρίς απώλεια ποιότητας και φαίνονται όμορφες στις οθόνες Retina.
Διεπαφές καρτών - Χρησιμοποιήστε τις λεγόμενες διεπαφές καρτών - ορθογώνια σχήματα με στρογγυλεμένες γωνίες που αντιπροσωπεύουν δοχεία για περιεχόμενο. Τέτοια μπλοκ είναι αυτόνομες μονάδες διεπαφής και είναι εύκολο να μετακινηθούν γύρω από τη διάταξη.
Ρύζι. 2. Pinterest, διάταξη που βασίζεται σε κάρτες Η διατήρηση μόνο των απαραίτητων είναι μια καλή τεχνική, ειδικά για ανταποκρινόμενο σχεδιασμό. Δημιουργήστε ανταποκρινόμενες και φιλικές μινιμαλιστικές διεπαφές που γίνονται όλο και πιο δημοφιλείς στις μέρες μας.
Ρύζι. 3. Hotellook, μινιμαλισμός στο web design Δώστε προτεραιότητα και αποκρύψτε σωστά το περιεχόμενο - χρησιμοποιήστε κρυφά χειριστήρια, ειδικά για συσκευές με μικρές οθόνες. Αναδυόμενα παράθυρα, καρτέλες, μενού εκτός καμβά και άλλες παρόμοιες τεχνικές θα βοηθήσουν στη μείωση του αριθμού των στοιχείων στη σελίδα. Απελευθερώνοντας χώρο από περιττά στοιχεία, θα κάνετε τη διεπαφή βολική και φιλική προς το χρήστη.
Δημιουργήστε έναν μεγάλο χώρο με δυνατότητα κλικ για τα κουμπιά σας - όσο μεγαλύτερη είναι η περιοχή με δυνατότητα κλικ ενός κουμπιού, τόσο πιο εύκολο είναι για τον χρήστη να αλληλεπιδράσει μαζί του.
Προσθέστε διαδραστικότητα στις διεπαφές σας - ως απόκριση σε μια ενέργεια χρήστη, δημιουργήστε μια ενέργεια απόκρισης - μια κινούμενη εικόνα που θα λειτουργεί όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο σε επιτραπέζιες συσκευές και όταν αγγίζετε ένα στοιχείο σε κινητές συσκευές.
2. Προσαρμογή της θύρας προβολής χρησιμοποιώντας τη μετα-ετικέτα της θύρας προβολήςΓια να αποτρέψετε την αυτόματη αλλαγή μεγέθους σελίδων ιστότοπου στα προγράμματα περιήγησης για κινητά για λειτουργικά συστήματα Android και iOS, χρησιμοποιείται μια ειδική ετικέτα με το χαρακτηριστικό name="viewport". Αυτή η ετικέτα σάς επιτρέπει να ορίσετε μια συγκεκριμένη τιμή για τις παραμέτρους πλάτους και αρχικής κλίμακας:
— αρχική κλίμακα=1 σημαίνει ότι το μέγεθος της σελίδας στο πρόγραμμα περιήγησης θα είναι ίσο με το 100% του μεγέθους της θύρας προβολής. Δηλαδή, η αναλογία μεταξύ του φυσικού εικονοστοιχείου και του εικονοστοιχείου css θα είναι 1:1.
— width=device-width σημαίνει ότι το πλάτος της σελίδας θα είναι ίσο με το 100% του πλάτους του παραθύρου οποιουδήποτε προγράμματος περιήγησης. Δηλαδή, το πλάτος της σελίδας του ιστότοπου αντιστοιχεί στο πλάτος της συσκευής, επομένως δεν χρειάζεται κλιμάκωση.
Σε αυτό το παράδειγμα, το περιεχόμενο στο παράθυρο του προγράμματος περιήγησης θα είναι 2 φορές μεγαλύτερο σε σύγκριση με το φυσικό του μέγεθος.
Η ετικέτα μπορεί επίσης να χρησιμοποιηθεί για τον έλεγχο του πόσο οι χρήστες μπορούν να αυξήσουν ή να μειώσουν το πλάτος της σελίδας:
Αυτός ο κωδικός θα σας επιτρέψει να αυξήσετε το πλάτος της σελίδας σε μια τιμή ίση με 3 φορές το πλάτος της οθόνης της συσκευής και να το μειώσετε στο μισό του πλάτους της οθόνης της συσκευής.
Μπορείτε να αρνηθείτε στους χρήστες τη δυνατότητα κλιμάκωσης χρησιμοποιώντας το χαρακτηριστικό με δυνατότητα κλίμακας χρήστη:
3. Καθολικά πρότυπα
Οι περισσότερες από τις διατάξεις που χρησιμοποιούνται για τη δημιουργία responsive web design εμπίπτουν σε μία από τις πέντε κατηγορίες μοτίβων που ορίζονται από τον Luke Wroblewski:
Κυρίως ρευστό (τα περισσότερα από καουτσούκ),
Πτώση στήλης (Στήλες η μία κάτω από την άλλη),
Layout Shifter (Κινούμενη διάταξη),
Tiny Tweaks (Μικροσκοπικές αλλαγές),
Εκτός καμβά.
Σε ορισμένες περιπτώσεις, μια σελίδα μπορεί να χρησιμοποιεί έναν συνδυασμό προτύπων, όπως απόθεση στήλης και Off Canvas.
Μια δημοφιλής διάταξη που αποτελείται κυρίως από πλέγμα από καουτσούκ. Σε οθόνες μεγάλου ή μεσαίου πλάτους, το μέγεθός του παραμένει συνήθως αμετάβλητο σε μεγάλες οθόνες, προσαρμόζονται μόνο τα περιθώρια. Σε μικρότερες οθόνες, το λαστιχένιο πλέγμα προκαλεί τον εκ νέου υπολογισμό της διάταξης για το κύριο περιεχόμενο και οι στήλες τοποθετούνται η μία κάτω από την άλλη. Το πλεονέκτημα του προτύπου είναι ότι απαιτεί μόνο ένα σημείο ελέγχου μεταξύ μικρών και μεγάλων οθονών. 
Οι στήλες τοποθετούνται μία προς μία κάθετα εάν το πλάτος του παραθύρου δεν μπορεί να εμφανίσει όλο το περιεχόμενο. Ως αποτέλεσμα, οι στήλες θα τοποθετηθούν κάθετα η μία κάτω από την άλλη. Η επιλογή των σημείων διακοπής για αυτό το πρότυπο διάταξης εξαρτάται από το περιεχόμενο και καθορίζεται για κάθε επιλογή σχεδίασης ξεχωριστά. 
Το πρότυπο με τη μεγαλύτερη απόκριση, καθώς παρέχει πολλαπλά σημεία ελέγχου για οθόνες διαφορετικού πλάτους. Η κύρια διαφορά με αυτήν τη διάταξη είναι ότι αντί να υπολογιστεί εκ νέου το δέντρο απόδοσης και να τοποθετηθούν στήλες η μία κάτω από την άλλη, το περιεχόμενο μετακινείται. Λόγω των σημαντικών διαφορών μεταξύ των κύριων σημείων διακοπής, η διατήρηση αυτής της διάταξης είναι πιο δύσκολη και ίσως χρειαστεί να αλλάξετε όχι μόνο τη συνολική διάταξη του περιεχομένου, αλλά και τα στοιχεία του. 
Το πρότυπο κάνει μικρές αλλαγές στη διάταξη, όπως προσαρμογή του μεγέθους της γραμματοσειράς, αλλαγή μεγέθους εικόνων ή μετακίνηση περιεχομένου. Λειτουργεί καλά σε διατάξεις μιας στήλης, όπως ιστότοπους μιας σελίδας και άρθρα με πολύ κείμενο. 
Το περιεχόμενο που χρησιμοποιείται σπάνια, όπως στοιχεία πλοήγησης ή μενού εφαρμογών, τοποθετείται εκτός οθόνης και εμφανίζεται μόνο όταν το επιτρέπει το μέγεθος της οθόνης. Σε μικρότερες οθόνες, το περιεχόμενο ανοίγει με ένα κλικ. 
Σε αντίθεση με το responsive design, το Adaptive Web Design εστιάζει στα μεγέθη συσκευών. Χρησιμοποιεί πολλές στατικές διατάξεις για διαφορετικούς τύπους συσκευών (κινητές συσκευές, tablet, επιτραπέζιους υπολογιστές), με βάση τα σημεία ελέγχου (σπάσιμο). Δηλαδή, οι διατάξεις φορτώνουν σε συγκεκριμένα μεγέθη παραθύρων του προγράμματος περιήγησης συσκευών και οι μεταβάσεις μεταξύ των διατάξεων γίνονται απότομα και όχι ομαλά.
Συνήθως, οι αποκριτικές διατάξεις έχουν έξι επιλογές διάταξης ανάλογα με το πλάτος της οθόνης:
320
480
760
960
1200
1600.
Οι διατάξεις με απόκριση εστιάζουν στη λειτουργικότητα, πράγμα που σημαίνει ότι ο σχεδιασμός λαμβάνει υπόψη χαρακτηριστικά της συσκευής, όπως χειριστήρια αφής για κινητές συσκευές ή μεγάλους χώρους για επιτραπέζιους οθόνες.
Βασικές τεχνικές Responsive DesignΔιατηρήστε τη συνέπεια – οποιοσδήποτε ιστότοπος πρέπει να οικοδομήσει εμπιστοσύνη με τον χρήστη, ώστε να αισθάνεται άνετα να πλοηγείται και να αλληλεπιδρά μαζί του. Ο συνεπής σχεδιασμός σημαίνει ότι όταν μετακινείται σε άλλη σελίδα σε έναν ιστότοπο, ο χρήστης δεν αισθάνεται ότι βρίσκεται σε άλλο ιστότοπο. Δώστε προσοχή στις μικρές λεπτομέρειες, δημιουργήστε μια οπτική ιεραρχία και επισημάνετε σημαντικά στοιχεία με έντονη γραφή. Χρησιμοποιήστε έναν σταθερό συνδυασμό χρωμάτων σε ολόκληρο τον ιστότοπο, επαναχρησιμοποιώντας τα ίδια στοιχεία για διαφορετικές καταστάσεις, όπως το ίδιο σχέδιο ειδοποίησης αναδυόμενων παραθύρων.
Χρησιμοποιήστε ένα πλέγμα—μια δομή 12 στηλών είναι προτιμότερη για τον έλεγχο του πλάτους της στήλης και του χώρου μεταξύ των στηλών.
5. Ποια είναι η διαφορά μεταξύ του responsive και του adaptive web design
Ρύζι. 4. Απόκριση και προσαρμοστική σχεδίαση σε διαφορετικές συσκευές Για να δημιουργήσετε διατάξεις που αποκρίνονται, χρησιμοποιείτε ερωτήματα πολυμέσων και τα σχετικά μεγέθη των στοιχείων πλέγματος που καθορίζονται με % . Στον αποκριτικό σχεδιασμό, τα σενάρια από την πλευρά του διακομιστή καθορίζουν πρώτα τον τύπο της συσκευής στην οποία ο χρήστης προσπαθεί να αποκτήσει πρόσβαση στον ιστότοπο (επιτραπέζιος υπολογιστής, τηλέφωνο ή tablet) και στη συνέχεια φορτώνει ακριβώς την έκδοση της σελίδας που είναι πιο βελτιστοποιημένη για αυτόν. Τα στοιχεία πλέγματος έχουν σταθερά μεγέθη px.
Επομένως, η κύρια διαφορά μεταξύ αυτών των τεχνικών είναι η απόκριση σχεδίασης - μία διάταξη για όλες τις συσκευές, προσαρμοστική σχεδίαση - μία διάταξη για κάθε τύπο συσκευής.
6. Χρήσιμες υπηρεσίες και εργαλείαΕξομοιωτής Android για Windows, Linux και Mac OS X. Ο προσομοιωτής iOS είναι διαθέσιμος μόνο για χρήστες Mac OS X και αποτελεί μέρος του πακέτου Xcode (μπορείτε να το κατεβάσετε δωρεάν από το Mac App Store).
Ένα σενάριο PHP που εκτελείται σε οποιονδήποτε ιστότοπο εντοπίζει το μέγεθος της οθόνης και προσαρμόζει το μέγεθος της εικόνας ώστε να ταιριάζει, με αποτέλεσμα ένα μικρό μέγεθος εικόνας σε μικρές οθόνες.
Πίνακες αντιστοιχίας μεταξύ των φυσικών διαστάσεων των συσκευών και των τιμών CSS για το ύψος και το πλάτος, καθώς και την τιμή αναλογίας pixel για κινητές συσκευές.
Μια συλλογή από ιστότοπους που χρησιμοποιούν ερωτήματα πολυμέσων και ανταποκρινόμενο σχεδιασμό ιστοσελίδων.
Πλαίσιο CSS που βασίζεται σε διάταξη 12 στηλών, μέγιστο 960 εικονοστοιχεία. Υποστηρίζεται από Chrome, Safari, Firefox, IE 7 και νεότερες εκδόσεις προγραμμάτων περιήγησης για κινητά.
Ένα σύνολο εργαλείων για την ανάπτυξη διαδικτυακών εφαρμογών. LESS γλώσσα, προσαρμοστική διάταξη 12 στηλών, υποστήριξη για φορητές συσκευές, tablet και οθόνες, πολλά στοιχεία, κουμπιά, αναπτυσσόμενα μενού, προσαρμοσμένο στυλ πεδίων εισαγωγής, λίστες, επικεφαλίδες, ετικέτες, εικονίδια, ειδοποιήσεις, καρτέλες, γραμμές προόδου, συμβουλές εργαλείων , "ακορντεόν", "καρουσέλ" και ούτω καθεξής, διάφορα πρόσθετα Javascript, υποστήριξη Scaffolding, συμπεριλαμβανομένης της εφαρμογής στυλ Bootstrap σε ήδη δημιουργημένο HTML.
Χαιρετισμούς, περιστασιακούς επισκέπτες και τακτικούς αναγνώστες του ιστότοπου του ιστολογίου!
Κατά τη διάρκεια της ύπαρξης αυτού του ιστότοπου, άλλαξα το πρότυπο αρκετές φορές και δημιούργησα ακόμη και το δικό μου από την αρχή.
Μία από τις κύριες εργασίες κατά την επιλογή ενός νέου προτύπου είναι η προσαρμοστική διάταξη του ιστότοπου για όλες τις αναλύσεις οθόνης.
Σύντομη περιγραφή του άρθρου:
Σε προηγούμενο άρθρο έγραψα ήδη γιατί χρειάζεται. Πώς όμως να επιτευχθεί αυτή ακριβώς η προσαρμοστικότητα;
Υπάρχουν διάφοροι τρόποι για να γίνει αυτό. Κάποιοι χρησιμοποιούν javascript, άλλοι χρησιμοποιούν κάτι άλλο. Πιστεύω όμως ότι ο πιο απλός και σωστός τρόπος είναι η προσαρμοστική χρήση CSS.
Πώς να φτιάξετε μια responsive διάταξη ιστότοπου
Πρώτα,Εάν αποφασίσετε να δημιουργήσετε μια αποκριτική σχεδίαση ιστότοπου, εισαγάγετε τον ακόλουθο κώδικα μεταξύ των ετικετών:
Τι ανόητος που ήμουν που δεν το έκανα αμέσως όταν προσπαθούσα να φτιάξω μια προσαρμοστική διάταξη ιστότοπου!!!
Το πρόβλημα με τα προγράμματα περιήγησης για κινητά είναι η κλιμάκωση της διάταξης του ιστότοπού τους, ακόμη και των προσαρμοστικών.
Φανταστείτε, σχεδιάζω ένα σχέδιο, μετά γράφω όλα τα απαραίτητα στυλ και ερωτήματα, ελέγχω την προσαρμοστικότητα του ιστότοπου σε διαφορετικές αναλύσεις. Όλα δείχνουν να είναι καλά! Αλλά όταν ανοίγω το blog μου στο smartphone μου, βλέπω ότι ο ιστότοπος έχει απλώς συρρικνωθεί. Δεν προσαρμόστηκε στην κινητή συσκευή, αλλά απλώς μείωσε το μέγεθος της γραμματοσειράς, των εικόνων κ.λπ.
Πως και έτσι; Άρχισα να ελέγχω ξανά όλα τα στυλ για να δω αν είχα γράψει σωστά τις τάξεις και τελικά έφτασα στο σημείο όπου έλεγξα το πλάτος του παραθύρου του προγράμματος περιήγησης σε px χρησιμοποιώντας javascript. Σοκαρίστηκα. Κατά τον έλεγχο σε φορητό υπολογιστή, έλαβα ένα αποτέλεσμα 1024 εικονοστοιχείων και είχα περίπου το ίδιο αποτέλεσμα όταν άνοιξα τον ιστότοπο σε smartphone!
Αλλά αυτό δεν μπορεί να είναι!
Αποδεικνύεται ότι εάν δεν γράψετε τον κωδικό που ανέφερα παραπάνω, το πρόγραμμα περιήγησης για κινητά δεν καταλαβαίνει ότι ο ιστότοπος είναι προσαρμοστικός και απλώς προσπαθεί να μειώσει τη σελίδα του ιστότοπου έτσι ώστε να χωράει στη μικρή οθόνη ενός κινητού τηλεφώνου.
Λόγω της βλακείας και της ανικανότητάς μου, έχασα πολύ χρόνο. Αλλά τώρα το θυμάμαι για πάντα))).
Ερωτήματα μέσων CSS προσαρμοστικής διάταξης
Για να το κάνετε να ανταποκρίνεται χρησιμοποιώντας CSS, πρέπει να χρησιμοποιήσετε ερωτήματα πολυμέσων.
Πώς είναι αυτό; Ναι, πολύ απλό. Στο αρχείο CSS πρέπει να γράψετε ερωτήματα όπως:
Οθόνη @media και (ελάχ. πλάτος: 1440 εικονοστοιχεία) και (μέγιστο πλάτος: 1599 εικονοστοιχεία)( )
Αυτός ο κώδικας σημαίνει ότι τα στυλ που περικλείονται μεταξύ του "( )" θα λειτουργούν για οθόνες με ελάχιστο πλάτος 1440 pixel και μέγιστο 1599 px.
Δηλαδή, αυτά τα στυλ στοιχείων τοποθεσίας που πρέπει να προσαρμοστούν ανάλογα με την ανάλυση οθόνης πρέπει να γράφονται ξεχωριστά για κάθε πιθανό πλάτος οθόνης.
Οι πιο σημαντικές αναλύσεις οθόνης για προσαρμοστική διάταξη- 320 px - Κινητές συσκευές (κατακόρυφος προσανατολισμός).
- 480 px - Κινητές συσκευές (οριζόντιος προσανατολισμός).
- 600 px - Μικρά tablet.
- 768 px - Tablets (κατακόρυφος προσανατολισμός).
- 1024 px - Tablets (οριζόντιος προσανατολισμός)/Netbooks.
- 1280 px και περισσότερα - PC.
Σε αυτές τις αναλύσεις πρέπει να εστιάσετε και να δώσετε ιδιαίτερη προσοχή όταν κάνετε προσαρμοστικές διατάξεις. Αυτοί είναι οι πιο συνηθισμένοι τύποι αναλύσεων οθόνης.
Bootstrap με απόκριση σχεδιασμού
Είναι πολύ βολικό να χρησιμοποιείτε το bootstrap για τη δημιουργία προσαρμοστικής διάταξης. Η ευκολία είναι ότι όλα τα στυλ για την προσαρμογή μπλοκ, κουμπιών, πινάκων κ.λπ. είναι ήδη εγγεγραμμένοι στο bootstpap. Απλώς πρέπει να υπολογίσετε ποια κλάση να αντιστοιχίσετε σε ποιο στοιχείο.
Για να ξεκινήσετε, κατεβάστε την πιο πρόσφατη έκδοση του bootstrap και συνδέστε την στον ιστότοπό σας. Λάβετε υπόψη ότι η σύνδεση στυλ και σεναρίων με το WordPress έχει τα δικά της χαρακτηριστικά.
Η διάταξη στο Bootstrap είναι διαφορετική στο ότι το πλάτος του μπλοκ ή της οθόνης χωρίζεται σε 12 ίσα μέρη. Και αναθέτοντας μια συγκεκριμένη κλάση σε ένα μπλοκ, μπορείτε να ορίσετε το πλάτος του μπλοκ ίσο με τον απαιτούμενο αριθμό τμημάτων.
Για παράδειγμα, αυτός ο σχεδιασμός θα σας επιτρέψει να διαθέσετε ένα ευρύ μπλοκ για περιεχόμενο πλάτους 8 τμημάτων και ένα στενό μπλοκ για μια πλαϊνή γραμμή πλάτους 4 μερών:
Το πλάτος των μπλοκ θα υπολογιστεί αυτόματα ανάλογα με το πλάτος της οθόνης. Και όταν προβάλλονται σε κινητή συσκευή, αυτά τα μπλοκ θα μετακινηθούν το ένα κάτω από το άλλο.
Μπορείτε επίσης να προσαρμόσετε την απόσταση του μπλοκ από την άκρη, ξανά, στον απαιτούμενο αριθμό εξαρτημάτων. Για παράδειγμα αυτό το σχέδιο:
Θα δημιουργηθεί ένα μπλοκ πλάτους 10 τμημάτων με αριστερή εσοχή 1 μέρους της οθόνης.
Αν το κοιτάξετε, η εργασία με το bootstrap κάνει τη δουλειά πολύ γρήγορη. Επιπλέον, αυτά τα στυλ σίγουρα λειτουργούν σωστά και δεν θα υπάρχει τίποτα στραβό στον ιστότοπο.
Στο μέλλον σκοπεύω να δημοσιεύσω αρκετά μαθήματα για την εργασία με το bootsrap. Επομένως, σας συμβουλεύω να μην χάσετε αυτή τη στιγμή.
Έλεγχος προσαρμοστικότητας ιστότοπου
Αλλά τίθεται το ερώτημα: πώς να ελέγξετε την προσαρμοστικότητα του ιστότοπου; Τώρα έχετε γράψει ερωτήματα πολυμέσων σε CSS, συνδέσατε το bootstrap και χρησιμοποιήσατε τις απαραίτητες κλάσεις. Πώς μπορείτε να ελέγξετε ότι ο ιστότοπος προσαρμόζεται σωστά σε όλες τις αναλύσεις οθόνης;
Μια πολύ ακριβής και το πιο σημαντικό δωρεάν υπηρεσία που αξίζει σεβασμό και ευγνωμοσύνη από τους webmasters και τους σχεδιαστές διάταξης που ασχολούνται με την προσαρμοστική διάταξη ιστότοπου.
Λοιπόν, πώς σας φαίνεται το άρθρο; Ολα ΕΝΤΑΞΕΙ; Αν όχι, γράψτε στα σχόλια, θα το καταλάβουμε μαζί.
Ναι, για να δημιουργήσετε ένα responsive σχεδιασμό ιστότοπου, πρέπει να εργαστείτε σκληρά. Αλλά αυτές οι προσπάθειες θα ανταμειφθούν με μια ευνοϊκή στάση απέναντι στον ιστότοπό σας από τις μηχανές αναζήτησης, και το πιο σημαντικό, από τους επισκέπτες του ιστότοπού σας.
Η προσαρμοστική διάταξη αλλάζει τη σχεδίαση της σελίδας ανάλογα με τη συμπεριφορά του χρήστη, την πλατφόρμα, το μέγεθος οθόνης και τον προσανατολισμό της συσκευής και αποτελεί αναπόσπαστο μέρος της σύγχρονης ανάπτυξης ιστού. Σας επιτρέπει να εξοικονομήσετε σημαντικά χρήματα και να μην χρειάζεται να σχεδιάσετε ένα νέο σχέδιο για κάθε ανάλυση, αλλά να αλλάξετε το μέγεθος και τη θέση των μεμονωμένων στοιχείων.
Αυτό το άρθρο θα εξετάσει τα κύρια στοιχεία του ιστότοπου και τον τρόπο προσαρμογής τους.
Ρύθμιση ανάλυσης οθόνηςΚατ 'αρχήν, μπορείτε να χωρίσετε τις συσκευές σε διαφορετικές κατηγορίες και να σχεδιάσετε για καθεμία από αυτές ξεχωριστά, αλλά αυτό θα πάρει πάρα πολύ χρόνο και ποιος ξέρει ποια θα είναι τα πρότυπα σε πέντε χρόνια; Επιπλέον, σύμφωνα με στατιστικά στοιχεία, έχουμε μια ολόκληρη σειρά διαφορετικών αναλύσεων:
Γίνεται προφανές ότι δεν θα μπορέσουμε να συνεχίσουμε να σχεδιάζουμε για κάθε συσκευή ξεχωριστά. Αλλά τι να κάνουμε τότε;
Μερική λύση: κάντε τα πάντα ευέλικταΦυσικά, αυτή δεν είναι μια τέλεια μέθοδος, αλλά εξαλείφει τα περισσότερα προβλήματα.
Ο Ethan Marcotte δημιούργησε ένα απλό πρότυπο που δείχνει τη χρήση της διάταξης που αποκρίνεται:
Με την πρώτη ματιά μπορεί να φαίνεται ότι όλα είναι εύκολα, αλλά δεν είναι. Ρίξτε μια ματιά στο λογότυπο:
Εάν μειώσετε ολόκληρη την εικόνα, οι επιγραφές θα γίνουν δυσανάγνωστες. Επομένως, για να αποθηκεύσετε το λογότυπο, η εικόνα χωρίζεται σε δύο μέρη: το πρώτο μέρος (εικονογράφηση) χρησιμοποιείται ως φόντο, το δεύτερο (λογότυπο) αλλάζει το μέγεθός του αναλογικά.
Το στοιχείο h1 περιέχει μια εικόνα ως φόντο και η εικόνα είναι στοιχισμένη στο φόντο του κοντέινερ (κεφαλίδα).
Ευέλικτες εικόνεςΗ εργασία με εικόνες είναι ένα από τα πιο σημαντικά προβλήματα όταν εργάζεστε με αποκριτικό σχεδιασμό. Υπάρχουν πολλοί τρόποι για να αλλάξετε το μέγεθος των εικόνων, και οι περισσότεροι από αυτούς είναι αρκετά εύκολοι στην εφαρμογή τους. Μια λύση είναι να χρησιμοποιήσετε το μέγιστο πλάτος στο CSS:
Img (μέγιστο πλάτος: 100%;)
Το μέγιστο πλάτος μιας εικόνας είναι 100% του πλάτους της οθόνης ή του παραθύρου του προγράμματος περιήγησης, επομένως όσο μικρότερο είναι το πλάτος, τόσο μικρότερη είναι η εικόνα. Σημειώστε ότι το μέγιστο πλάτος δεν υποστηρίζεται στον IE, επομένως χρησιμοποιήστε το πλάτος: 100% .
Η παρουσιαζόμενη μέθοδος είναι μια καλή επιλογή για τη δημιουργία προσαρμοστικών εικόνων, αλλά αλλάζοντας μόνο το μέγεθος, θα αφήσουμε το βάρος της εικόνας ίδιο, γεγονός που θα αυξήσει τον χρόνο φόρτωσης σε κινητές συσκευές.
Ένας άλλος τρόπος: αποκριτικές εικόνεςΗ τεχνική, που εισήγαγε η Filament Group, όχι μόνο αλλάζει το μέγεθος των εικόνων, αλλά και συμπιέζει την ανάλυση των εικόνων σε μικρές οθόνες για να επιταχύνει τη φόρτωση.
Αυτή η τεχνική απαιτεί πολλά αρχεία διαθέσιμα στο Github. Πρώτα παίρνουμε το αρχείο JavaScript ( rwd-images.js), αρχείο .htaccessΚαι rwd.gif(αρχείο εικόνας). Στη συνέχεια χρησιμοποιούμε λίγο HTML για να συσχετίσουμε μεγάλες και μικρές αναλύσεις: πρώτα μια μικρή εικόνα με ένα πρόθεμα .r(για να δείξετε ότι η εικόνα πρέπει να αποκρίνεται), στη συνέχεια συνδέστε τη μεγάλη εικόνα χρησιμοποιώντας data-fullsrc:
Για οποιαδήποτε οθόνη μεγαλύτερη από 480 px, θα φορτωθεί μια εικόνα υψηλότερης ανάλυσης ( largeRes.jpg), και στις μικρές οθόνες θα φορτώσει ( smallRes.jpg).
Το iPhone και το iPod Touch έχουν ένα χαρακτηριστικό: ένα σχέδιο που δημιουργείται για μεγάλες οθόνες απλώς συρρικνώνεται σε ένα πρόγραμμα περιήγησης χαμηλής ανάλυσης χωρίς κύλιση ή πρόσθετη διάταξη κινητού. Ωστόσο, οι εικόνες και το κείμενο δεν θα είναι ορατά:
Για να λύσετε αυτό το πρόβλημα, χρησιμοποιήστε τη μετα-ετικέτα:
Εάν η αρχική κλίμακα είναι ίση με ένα, το πλάτος των εικόνων γίνεται ίσο με το πλάτος της οθόνης.
Προσαρμόσιμη δομή διάταξης σελίδαςΓια σημαντικές αλλαγές στο μέγεθος της σελίδας, ίσως χρειαστεί να αλλάξετε τη συνολική διάταξη των στοιχείων. Αυτό μπορεί να γίνει εύκολα μέσω ενός ξεχωριστού αρχείου στυλ ή, πιο αποτελεσματικά, μέσω ενός ερωτήματος μέσων CSS. Δεν θα πρέπει να υπάρχουν προβλήματα, καθώς τα περισσότερα στυλ θα παραμείνουν ίδια και μόνο μερικά θα αλλάξουν.
Για παράδειγμα, έχετε ένα βασικό αρχείο στυλ που καθορίζει #wrapper , #content , #sidebar , #nav μαζί με χρώματα, φόντο και γραμματοσειρές. Εάν τα κύρια στυλ σας κάνουν τη διάταξή σας πολύ στενή, κοντή, φαρδιά ή ψηλή, μπορείτε να το προσδιορίσετε και να συμπεριλάβετε νέα στυλ.
style.css (κύριο):
/* Βασικά στυλ που θα κληρονομηθούν από το θυγατρικό φύλλο στυλ */ html,body( φόντο... γραμματοσειρά... χρώμα... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Δομικά στοιχεία */ #wrapper( πλάτος: 80%; περιθώριο: 0 αυτόματο; φόντο: #fff; γέμιση: 20 εικονοστοιχεία; ) #content( πλάτος: 54%; float: αριστερά; περιθώριο-δεξιά: 3%; ) # sidebar-left( πλάτος: 20%; float: αριστερά; margin-right: 3%; ) #sidebar-right (πλάτος: 20%; float: αριστερά; )
mobile.css (παιδί):
#wrapper( πλάτος: 90%) margin-top: 20 px ) #sidebar-right(πλάτος: 100%; clear: και τα δύο; /* Πρόσθετο στυλ για τη νέα μας διάταξη */ border-top: 1px συμπαγές #ccc; margin-top: 20px; )
Σε μια ευρεία οθόνη, η αριστερή και η δεξιά πλαϊνή γραμμή εφαρμόζουν όμορφα στο πλάι. Σε πιο στενές οθόνες, αυτά τα μπλοκ βρίσκονται το ένα κάτω από το άλλο για μεγαλύτερη ευκολία.
Ερωτήματα μέσων CSS3Ας δούμε πώς μπορείτε να χρησιμοποιήσετε ερωτήματα πολυμέσων CSS3 για να δημιουργήσετε σχέδια με απόκριση. Το min-width καθορίζει το ελάχιστο πλάτος του παραθύρου ή της οθόνης του προγράμματος περιήγησης στο οποίο θα εφαρμοστούν ορισμένα στυλ. Εάν κάποια τιμή είναι κάτω από το min-width , τα στυλ θα αγνοηθούν. Το max-width κάνει το αντίθετο.
Οθόνη @media και (ελάχ. πλάτος: 600 εικονοστοιχεία) ( .hereIsMyClass (πλάτος: 30%; float: δεξιά; ) )
Το ερώτημα μέσων θα λειτουργεί μόνο όταν το ελάχιστο πλάτος είναι μεγαλύτερο ή ίσο με 600 px.
Οθόνη @media και (μέγιστο πλάτος: 600 εικονοστοιχεία) ( .aClassforSmallScreens ( διαγραφή: και τα δύο, μέγεθος γραμματοσειράς: 1,3 εκ. ) )
Σε αυτή την περίπτωση η τάξη ( aClassforSmallscreens) θα λειτουργήσει όταν το πλάτος της οθόνης είναι μικρότερο ή ίσο με 600 px.
Ενώ το ελάχιστο πλάτος και το μέγιστο πλάτος μπορούν να ισχύουν τόσο για το πλάτος της οθόνης όσο και για το πλάτος του παραθύρου του προγράμματος περιήγησης, ίσως χρειαστεί να εργαστούμε μόνο με το πλάτος της συσκευής. Για παράδειγμα, για να αγνοήσετε τα προγράμματα περιήγησης που ανοίγουν σε ένα μικρό παράθυρο. Μπορείτε να χρησιμοποιήσετε το min-device-width και το max-device-width για αυτό:
Οθόνη @media και (μέγ. πλάτος συσκευής: 480 εικονοστοιχεία) ( .classForiPhoneDisplay ( μέγεθος γραμματοσειράς: 1,2 εκ. : 2 px στερεά #ccc ) )
Ειδικά για το iPad, τα ερωτήματα πολυμέσων έχουν την ιδιότητα προσανατολισμός, οι τιμές των οποίων μπορεί να είναι είτε τοπίο(οριζόντια), ή πορτρέτο(κατακόρυφος):
Οθόνη @media και (προσανατολισμός: οριζόντιος) ( .iPadLandscape (πλάτος: 30%; float: δεξιά; ) ) οθόνη @media και (προσανατολισμός: κατακόρυφος) ( .iPadPortrait ( καθαρό: και τα δύο; ) )
Μπορείτε επίσης να συνδυάσετε τιμές ερωτήματος μέσων:
Οθόνη @media και (ελάχ. πλάτος: 800 εικονοστοιχεία) και (μέγιστο πλάτος: 1200 εικονοστοιχεία) ( .classForaMediumScreen ( φόντο: #cc0000; πλάτος: 30%; αιώρηση: δεξιά; ) )
Αυτός ο κώδικας θα εκτελεστεί μόνο για οθόνες ή παράθυρα προγράμματος περιήγησης πλάτους μεταξύ 800 και 1200 px.
Μπορείτε να φορτώσετε ένα συγκεκριμένο φύλλο με στυλ για διαφορετικές τιμές ερωτήματος μέσων όπως αυτό:
JavaScript
Εάν το πρόγραμμα περιήγησής σας δεν υποστηρίζει ερωτήματα πολυμέσων CSS3, τότε η αντικατάσταση στυλ μπορεί να γίνει χρησιμοποιώντας το jQuery:
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Εάν το πλάτος είναι λιγότερο από 600 px, χρησιμοποιείται φύλλο στυλ για κινητά εάν (newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Εάν το πλάτος είναι μεγαλύτερο από 600 px, χρησιμοποιείται το φύλλο στυλ επιφάνειας εργασίας $("link").attr((href: "style.css")); ) ) ));
Προαιρετική εμφάνιση περιεχομένουΗ δυνατότητα συρρίκνωσης και αναδιάταξης στοιχείων ώστε να χωρούν σε μικρές οθόνες είναι εξαιρετική. Αλλά αυτή δεν είναι η καλύτερη επιλογή. Οι φορητές συσκευές διαθέτουν συνήθως ένα ευρύτερο σύνολο αλλαγών: απλοποιημένη πλοήγηση, πιο εστιασμένο περιεχόμενο, λίστες ή σειρές αντί για στήλες.
Εδώ είναι η σήμανση μας:
Κύριο περιεχόμενο A Left Sidebar A Right Sidebar
style.css (κύριο):
#content( πλάτος: 54%; float: αριστερά; margin-right: 3%; ) #sidebar-left( πλάτος: 20%; float: αριστερά; margin-right: 3%; ) #sidebar-right( πλάτος: 20 %; float: αριστερό;
mobile.css (απλοποιημένο):
#content( πλάτος: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
Εάν το μέγεθος της οθόνης μειωθεί, μπορείτε, για παράδειγμα, να χρησιμοποιήσετε ένα σενάριο ή ένα εναλλακτικό αρχείο στυλ για να αυξήσετε το λευκό διάστημα ή να αντικαταστήσετε την πλοήγηση για μεγαλύτερη ευκολία. Έτσι, έχοντας τη δυνατότητα απόκρυψης και εμφάνισης στοιχείων, αλλαγής μεγέθους εικόνων, στοιχείων και πολλά άλλα, μπορείτε να προσαρμόσετε το σχέδιο σε οποιαδήποτε συσκευή και οθόνη.
Από τον συγγραφέα: Το Responsive website design είναι μια ολοκαίνουργια προσέγγιση στο σχεδιασμό που κερδίζει όλο και περισσότερη προσοχή, αλλά δεδομένου του πόσο διαφέρει από τις παραδοσιακές μεθόδους ανάπτυξης, μπορεί αρχικά να φαίνεται απαγορευτικά δύσκολο για νέους σχεδιαστές και προγραμματιστές ιστοσελίδων. Σε αυτό το άρθρο, θα καλύψω μερικά από τα πιο σημαντικά σημεία που σχετίζονται με την ανάπτυξη και την υλοποίηση του responsive web design και θα κάνω τη ζωή σας λίγο πιο εύκολη, φίλοι μου.
Η κλασική προσέγγιση για τη δημιουργία ενός ιστότοπου μοιάζει κάπως έτσι: ένα μπλοκ ανάπτυξης, ένα μπλοκ σχεδίασης ιστοσελίδων, ένα μπλοκ διάταξης κ.λπ. Ωστόσο, τα τελευταία χρόνια, όλα έχουν αρχίσει να αλλάζουν δραματικά: ο όρος "σχεδιασμός ιστού" γίνεται σταδιακά εξασθενεί, ενώ ενώ ο «προσαρμοστικός σχεδιασμός» ενισχύει ύπουλα τη θέση του, κάνοντας σταδιακά αλλαγές στη συνείδηση των ειδικών.
Σε γενικές γραμμές, η σχεδίαση ιστοσελίδων δεν πρέπει να γίνεται αντιληπτή τόσο ξεκάθαρα, και η ταχεία ανάπτυξη του προσαρμοστικού σχεδιασμού, που θεωρείται σχεδόν βιομηχανικό πρότυπο, συνεπάγεται ένα ολόκληρο καρουζέλ από διάφορα εργαλεία και πλατφόρμες.
Έννοια της προσαρμοστικότητας«Τι είναι ο responsive design και σε τι προσαρμόζεται;» - μπορεί να ρωτήσει ένας αδαής. Θα σας απαντήσω: στον τύπο της συσκευής που χρησιμοποιείται. Ο αποκριτικός σχεδιασμός εξασφαλίζει καλή προβολή ιστοσελίδων σε διάφορα gadget που είναι συνδεδεμένα στο Διαδίκτυο.
Ο ίδιος ιστότοπος θα πρέπει να φαίνεται υπέροχος σε φορητούς υπολογιστές, smartphone, tablet κ.λπ., ανεξάρτητα από τη μορφή οθόνης και την ανάλυση που χρησιμοποιείται. Ταυτόχρονα, θα πρέπει να είναι εξίσου βολικό για τους χρήστες να προβάλλουν ιστοσελίδες για όλες τις μορφές, χωρίς να χρειάζεται, για παράδειγμα, να επεκτείνουν μεμονωμένα μπλοκ ώστε να μην χάνουν το επιθυμητό κουμπί.
Λόγω του γεγονότος ότι κάθε προσαρμοστικό έργο είναι ατομικό και επαναλαμβανόμενο, είναι αρκετά δύσκολο να αναλυθούν όλες οι διαδικασίες του προκειμένου να δοθούν λύσεις για όλες τις καταστάσεις και να βελτιωθεί η αποδοτικότητα της εργασίας. Ωστόσο, υπάρχουν γενικές επιτυχημένες στρατηγικές και τεχνικές για την εφαρμογή, τη βελτίωση και τη δημιουργία responsive σχεδίασης ιστοσελίδων που μπορούν να εφαρμοστούν σχεδόν σε κάθε περίπτωση.
Mobile First StrategyΑυτή η στρατηγική ανάπτυξης προτάθηκε το 2009 από τον Luke Wroblewski, συγγραφέα βιβλίων και άρθρων για το σχεδιασμό ιστοσελίδων, επικεφαλής του κοινωνικού δικτύου Bagcheck, το οποίο εξαγοράστηκε από την Twitter Inc. μόλις 9 μήνες μετά τη δημιουργία του.
Η προσέγγιση του Luke Wroblewski στην ανάπτυξη ονομάζεται "Mobile First" για τρεις λόγους:
το φορητό περιβάλλον σάς επιτρέπει να εστιάσετε και να απαλλαγείτε από την ακαταστασία που δημιουργείται λόγω της «σύνθεσης» μεγάλου χώρου στην οθόνη.
Η αγορά κινητής τηλεφωνίας τείνει να αναπτύσσεται με ιλιγγιώδεις ρυθμούς.
Το κινητό περιβάλλον συνδέεται με πολλές δυνατότητες (κάμερα, χειρονομίες πολλαπλής αφής, GPS, επιταχυνσιόμετρο, γεωεντοπισμός).
Έκτοτε, ο σχεδιασμός ιστοσελίδων έχει μετατοπιστεί σταθερά προς αυτήν την προσέγγιση. Πολλοί σχεδιαστές ιστοσελίδων και προγραμματιστές ιστού σκέφτονται πρώτα πώς να δημιουργήσουν μια αποκριτική σχεδίαση για την έκδοση του ιστότοπου για κινητά και στη συνέχεια ασχολούνται με την ανάπτυξη επιτραπέζιων υπολογιστών.
Η στρατηγική "Mobile First" ξεκινά δημιουργώντας τη δομή και το περιεχόμενο μιας έκδοσης για κινητά που λειτουργεί σε περιβάλλοντα Διαδικτύου χαμηλής ταχύτητας και κινείται προς μεγαλύτερα σημεία διακοπής με ταχύτερες συνδέσεις, βελτιώνοντας και βελτιστοποιώντας τις εκδόσεις lite.
Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων
Μάθετε τον αλγόριθμο για γρήγορη ανάπτυξη από την αρχή στη δημιουργία ιστοσελίδων
Αυτό εξασφαλίζει καινοτόμο και αποτελεσματική λειτουργία όλων των τύπων συσκευών. Οι προγραμματιστές ιστοτόπων εστιάζουν στις ανάγκες των χρηστών, δημιουργούν βελτιστοποιημένες και υψηλής ταχύτητας σελίδες και δίνουν προσοχή σε σημαντικό περιεχόμενο. Παρεμπιπτόντως, ακόμη και η Google χρησιμοποιεί την προσέγγιση "Πρώτα στο κινητό".
Στρατηγική περιεχομένου "Εξαγωγή περιεχομένου"Ο στόχος της δημιουργίας σχεδίασης με απόκριση είναι να παρέχει την καλύτερη χρηστικότητα σε οποιοδήποτε πλαίσιο. Αυτή είναι μια εξαιρετική ευκαιρία να αναλύσετε το περιεχόμενο και να το κάνετε εύκολα προσβάσιμο και αναγνώσιμο σε όλους τους τύπους συσκευών.
Πολλοί που δεν χρησιμοποιούν στρατηγική Mobile First προτιμούν τη στρατηγική Content First. Αυτό είναι, φυσικά, το σωστό, ωστόσο, δεν πρέπει να λάβετε αυτό το κάλεσμα κυριολεκτικά και να σκεφτείτε ότι δεν πρέπει να ξεκινήσετε να αναπτύσσετε ένα σχέδιο μέχρι να είναι έτοιμο όλο το περιεχόμενο.
Το περιεχόμενο θα πρέπει να δημιουργείται και να συζητείται συνεχώς τόσο στο στάδιο της δημιουργίας ενός responsive σχεδιασμού ιστοσελίδας όσο και μετά την ολοκλήρωσή του! Όπως είπε ο διάσημος σχεδιαστής Cennydd Bowles, «ο σχεδιασμός και το περιεχόμενο πρέπει να πάνε χέρι-χέρι». Πρέπει να αλληλοσυμπληρώνονται.
Η στρατηγική «Πρώτα η δομή περιεχομένου» είναι ένα εντελώς διαφορετικό θέμα. Πρώτα απ 'όλα, πρέπει να είστε ξεκάθαροι σχετικά με την αποστολή του ιστότοπου, τι προσπαθεί να πει στον κόσμο. Και μόνο τότε εξετάστε προσεκτικά τη δομή του περιεχομένου του, τις μεθόδους δημιουργίας, τους τύπους και τον σκοπό κάθε στοιχείου, ενώ ο χρήστης θα πρέπει να τεθεί στην πρώτη γραμμή.
Θα πρέπει να έχετε μια στρατηγική που θα διασφαλίζει ότι παρέχετε σε κάθε χρήστη το απαραίτητο περιεχόμενο σε κάθε στάδιο της διαδρομής του στον πόρο σας. Η δομή του ιστότοπου θα πρέπει να βασίζεται στην έρευνα σχετικά με τη συμπεριφορά και τις ανάγκες του κοινού-στόχου σας.
Εάν δομήσετε καλά το περιεχόμενό σας στα αρχικά στάδια ανάπτυξης ιστοτόπου, μπορείτε εύκολα να το μεταφέρετε σε άλλες πλατφόρμες και συσκευές στο μέλλον. Φυσικά, δεν θα έβλαπτε να έχετε ένα παράδειγμα σχεδιασμού με απόκριση ως αναφορά για την αναφορά σας.
Αφιερώστε χρόνο για σκίτσο και πρωτότυποΗ απόφαση για το ποιες αναλύσεις θα χρησιμοποιηθούν για προσαρμοστικό σχεδιασμό θα πρέπει να ξεκινήσει με τη δημιουργία μιας οργανωμένης διάταξης - σκιαγράφησης, η οποία θα είναι εύκολο να κλιμακωθεί στο μέλλον.
Η ποικιλία των συσκευών με τις δυνατότητες, τις αναλύσεις και τα μεγέθη οθόνης τους σημαίνει μεγάλο αριθμό διατάξεων. Η δημιουργία ενός σκίτσου θα θέσει τα θεμέλια για ένα μελλοντικό πρωτότυπο του έργου. Με τη βοήθειά του, μπορείτε να φέρετε διάφορες ιδέες για συζήτηση, να κάνετε πρόχειρα σκίτσα που θα αποτελέσουν τη βάση του πλαισίου του ιστότοπου.
Μόλις το σκίτσο είναι έτοιμο, μπορείτε να προχωρήσετε στη δημιουργία μιας λειτουργικής πρόχειρης έκδοσης του ιστότοπου ή του προτύπου HTML. Αυτή η διαδικασία ονομάζεται πρωτότυπο και περιλαμβάνει ελάχιστο οπτικό σχεδιασμό για τη βελτίωση της αλληλεπίδρασης και της λειτουργικότητας.
Αυτή η στρατηγική θα σας βοηθήσει να αναθεωρήσετε ολόκληρη την προσέγγισή σας στη δημιουργία σχεδιασμού με απόκριση. Αντί να αναπτύσσετε "ιστοτόπους για κινητά" και "ιστοτόπους", θα εστιάσετε τώρα στην ανάπτυξη ευέλικτων συστημάτων με ένα σύνολο κανόνων που καθορίζουν τον τρόπο παράδοσης και παράδοσης περιεχομένου με βάση το πλαίσιο.
Ελπίζω ότι αυτό το άρθρο ήταν χρήσιμο τόσο για έμπειρους όσο και για αρχάριους σχεδιαστές ιστοσελίδων.
Και τέλος, οι παραδοσιακές λέξεις αποχωρισμού: κάντε τον ιστότοπο χρήσιμο, βολικό και οικείο, ανεξάρτητα από τη συσκευή στην οποία προβάλλεται. Τα λέμε ξανά φίλοι!
P.S.: έχετε ήδη εγγραφεί στις ενημερώσεις του ιστολογίου μας;
Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων
Μάθετε τον αλγόριθμο για γρήγορη ανάπτυξη από την αρχή στη δημιουργία ιστοσελίδων
