Αρχές Responsive Web Design

Σήμερα, είναι συνήθης πρακτική η δημιουργία ενός ιστότοπου ή μιας εφαρμογής που προσαρμόζει τη διεπαφή χρήστη ανάλογα με το πρόγραμμα περιήγησης ή τη συσκευή. Υπάρχουν δύο προσεγγίσεις για την επίτευξη αυτού του στόχου. Το πρώτο περιλαμβάνει τη δημιουργία διαφορετικών εκδόσεων του ιστότοπου ή της εφαρμογής σας για διαφορετικές συσκευές. Αλλά είναι αναποτελεσματικό και μπορεί να οδηγήσει σε απρόβλεπτα λάθη.

Σε αναζήτηση μιας αξιόπιστης, μελλοντικής απόδειξης προσέγγισης, δημιουργήθηκε ο αποκριτικός-ή προσαρμοστικός-σχεδιασμός. Επικεντρώνεται στη δημιουργία μιας μοναδικής έκδοσης της διάταξής σας που προσαρμόζεται αυτόματα σε διαφορετικά προγράμματα περιήγησης ή συσκευές.

Σε αυτό το άρθρο, θα μάθουμε για το σχεδιασμό ιστοσελίδων με ανταπόκριση και τις θεμελιώδεις αρχές που θα σας βοηθήσουν να δημιουργήσετε έναν υπέροχο ιστότοπο.

Υλικά απόκρισης σχεδιασμού ιστοσελίδων

Ο αποκριτικός σχεδιασμός ιστοσελίδων δεν είναι τόσο περίπλοκος όσο ακούγεται. Είναι ένα σύνολο πρακτικών που μπορείτε να χρησιμοποιήσετε όταν γράφετε CSS, όχι μια ξεχωριστή τεχνολογία που θα πρέπει να μάθετε από την αρχή. Μπορεί να ακολουθείτε ήδη αρκετές από αυτές τις αρχές χωρίς να το καταλαβαίνετε. Μπορείτε να κατανοήσετε τον αποκριτικό σχεδιασμό ιστοσελίδων εξερευνώντας τα τέσσερα συστατικά του: ρευστές διατάξεις, μονάδες απόκρισης, ευέλικτες εικόνες και ερωτήματα πολυμέσων.

Διάταξη ρευστού

Με μια ρευστή διάταξη, μπορείτε να δημιουργήσετε ιστοσελίδες που προσαρμόζονται στο τρέχον πλάτος και ύψος της θύρας προβολής. Η συνήθης πρακτική περιλαμβάνει τη χρήση του μέγιστο πλάτος ιδιότητα αντί να δίνει σταθερό πλάτος σε ένα στοιχείο. Επίσης, χρησιμοποιώντας ποσοστό (%), ύψος θυρίδας προβολής (vh), ή πλάτος θυρίδας προβολής (vw) συμβάλλει στη βελτίωση της προσαρμοστικότητας που δεν είναι δυνατή με τα εικονοστοιχεία (px). Έτσι, την επόμενη φορά που θα φτιάξετε μια διάταξη, βεβαιωθείτε ότι εισάγετε αυτές τις μικρές αλλαγές και ξεκινήστε να επωφεληθείτε από τις τεχνικές σχεδιασμού που ανταποκρίνονται.

Μονάδες ανταπόκρισης

Καθώς μεταβαίνετε σε πιο προηγμένο CSS, θα βλέπετε συχνά τη χρήση του ρεμ και εμ μονάδες για μήκος αντί px μονάδες. Αυτό συμβαίνει γιατί το ρεμ η μονάδα καθιστά εξαιρετικά εύκολη την κλιμάκωση ολόκληρης της διάταξης. Από προεπιλογή, το 1rem ισούται με 16px επειδή είναι ανάλογο με το μέγεθος γραμματοσειράς στοιχείου, τυπικά 16 εικονοστοιχεία. Ωστόσο, μπορείτε να ορίσετε 1rem ίσο με 10px (ή οποιαδήποτε άλλη τιμή) για ευκολότερους υπολογισμούς, προσαρμόζοντας το μέγεθος γραμματοσειράς ανώτατου επιπέδου.

Ευέλικτες εικόνες

Οι εικόνες αποτελούν πρωταρχικό μέλημα ενώ σχεδιάζετε ακόμη και την πιο βασική διάταξη. Πρέπει πάντα να φροντίζετε να τα μεγεθύνετε σωστά, ώστε να ταιριάζουν στο σχέδιο. Επίσης, από προεπιλογή, δεν κλιμακώνονται με αλλαγές στο παράθυρο προβολής. Έτσι, θα πρέπει να χρησιμοποιήσετε % για τις διαστάσεις των εικόνων σας, μαζί με το μέγιστο πλάτος ιδιοκτησία.

Μπορείτε να ζωντανεύσετε αποκριτικούς ιστότοπους χρησιμοποιώντας ερωτήματα πολυμέσων. Τα ρευστά πλέγματα είναι καλό για αρχή, αλλά θα διαπιστώσετε ότι υπάρχουν μερικά σημεία στα οποία η διάταξη αρχίζει να διασπάται. Η προσθήκη σημείων διακοπής για αυτά τα πλάτη θυρίδων συντονίζει τη διάταξη για διαφορετικές συσκευές. Τα ερωτήματα πολυμέσων σας βοηθούν να εφαρμόσετε επιλεκτικά το CSS με βάση τα αποτελέσματα των δοκιμών χαρακτηριστικών μέσων. Μπορείτε να εξερευνήσετε νέα Χαρακτηριστικά CSS για να δημιουργήσετε έναν ιστότοπο αποκριτικό σε λιγότερο χρόνο.

Αρχές Responsive Web Design

Αν και ο αποκριτικός σχεδιασμός ιστοσελίδων είναι ένας σωτήρας όταν πρόκειται για προβλήματα με πολλές οθόνες, ενδέχεται να μην έχετε έναν σταθερό φυσικό περιορισμό στον οποίο μπορείτε να αναφερθείτε. Ως εκ τούτου, υπάρχουν έξι βασικές αρχές σχεδιασμού ιστοσελίδων με τις οποίες πρέπει να ξεκινήσετε κατά το σχεδιασμό μιας αποκριτικής διάταξης.

Χρησιμοποιήστε σημεία διακοπής βάσει περιεχομένου

Μία από τις θεμελιώδεις αρχές σχεδιασμού ορίζει ότι ο σχεδιασμός της ιστοσελίδας σας πρέπει να υποστηρίζει το περιεχόμενο και όχι το αντίστροφο. Περιεχόμενο πολυμέσων, όπως βίντεο, φωτογραφίες και περιεχόμενο κειμένου, όπως μακρύ και σύντομο αντίγραφο ιστού, θα πρέπει να αποδίδεται με τον καλύτερο δυνατό τρόπο σε όλες τις οθόνες. Το κλειδί για τον αποκριτικό σχεδιασμό ιστοσελίδων είναι η χρήση σημείων διακοπής που βασίζονται σε περιεχόμενο και όχι αυτά που βασίζονται σε συσκευές.

Επιλέξτε Σοφά τις Γραμματοσειρές Ιστού και τις Γραμματοσειρές συστήματος

Οι γραμματοσειρές Ιστού φαίνονται εκπληκτικές! Έχετε πολλές επιλογές για να τροποποιήσετε το σχέδιό σας με εντυπωσιακές γραμματοσειρές ιστού. Αλλά πρέπει να γνωρίζετε ότι τα προγράμματα περιήγησης θα πρέπει να κατεβάσουν κάθε γραμματοσειρά ιστού. Περισσότερες γραμματοσειρές ιστού, περισσότερος χρόνος λήψης. Αντίθετα, οι γραμματοσειρές του συστήματος είναι αστραπιαίες. Εάν ο χρήστης δεν έχει μια γραμματοσειρά συστήματος στην τοπική του συσκευή, θα επιστρέψει στην επόμενη γραμματοσειρά η στοίβα γραμματοσειράς-οικογένειας. Επομένως, φροντίστε να λάβετε υπόψη τον χρόνο φόρτωσης και τη ζήτηση σχεδιασμού κατά την επιλογή γραμματοσειρών.

Βελτιστοποίηση εικόνων και διανυσμάτων Bitmap

Έχετε διαφορετικά εικονίδια στον ιστότοπό σας, που υποστηρίζουν το περιεχόμενο; Συχνά είναι καλή πρακτική να χρησιμοποιείτε μορφή bitmap εάν τα εικονίδια σας έχουν πολλές λεπτομέρειες. Από την άλλη πλευρά, οι διανυσματικές μορφές είναι ο τρόπος για να επιλέξετε τα εικονίδια που ανεβαίνουν και κατεβαίνουν όμορφα. Τα διανύσματα είναι συχνά μικροσκοπικά, αλλά το μειονέκτημα είναι ότι ορισμένα παλαιότερα προγράμματα περιήγησης ενδέχεται να μην τα υποστηρίζουν. Επίσης, υπάρχουν περιπτώσεις που τα διανύσματα είναι βαρύτερα από τα bitmaps, όπως όταν η εικόνα είναι πολύ λεπτομερής. Επομένως, βεβαιωθείτε πάντα ότι βελτιστοποιείτε τις εικόνες και τα διανύσματα bitmap σας προτού συνδεθούν στο διαδίκτυο.

Διεξαγωγή δοκιμών για ανταπόκριση στην πρώτη φάση

Η πρώτη πτυχή ενός ιστότοπου είναι η προβολή που βλέπουν οι επισκέπτες όταν φορτώνεται για πρώτη φορά, πριν από οποιαδήποτε κύλιση. Συχνά περιλαμβάνει ένα τμήμα ηρώων με α αποκριτική γραμμή πλοήγησης, εισαγωγικό αντίγραφο και μέσα ενημέρωσης και CTA. Η ανταπόκριση δεν περιορίζεται μόνο στις κινητές συσκευές. Θα πρέπει επίσης να λάβετε υπόψη σας ταμπλέτες, κονσόλες παιχνιδιών και άλλες οθόνες. Έτσι, το κλειδί είναι να διεξάγουμε συχνές δοκιμές τουλάχιστον για την πρώτη διπλή προβολή του ιστότοπου. Μπορείτε να χρησιμοποιήσετε το Chrome DevTools (Φάρος) για να ελέγξετε την ποιότητα της ιστοσελίδας.

Μην αποκρύπτετε περιεχόμενο σε μικρότερες οθόνες

Πολλοί άνθρωποι συνήθιζαν να υποθέτουν ότι οι χρήστες κινητών τηλεφώνων βιάζονται πάντα, ψάχνοντας για πληροφορίες μικρού μεγέθους, ενώ οι επιτραπέζιοι χρήστες ασχολούνται περισσότερο με περιεχόμενο μεγάλης διάρκειας. Τώρα αναγνωρίζουμε ότι αυτό δεν ισχύει στον σημερινό κόσμο. Οι άνθρωποι χρησιμοποιούν παντού κινητές συσκευές, αναζητώντας πλήρες περιεχόμενο και πλήρη πρόσβαση σε όλες τις υπηρεσίες. Πρέπει να διασφαλίσετε ότι, αντί να αποκρύψετε περιεχόμενο, διαχειρίζεστε τη διάταξη και τα σημεία διακοπής για να το παρουσιάσετε όσο το δυνατόν πιο εύκολα και χωρίς κόπο.

Διαχειριστείτε τη διάταξη χρησιμοποιώντας ένθετα αντικείμενα

Η δημιουργία σωστής διάταξης και τοποθέτησης στοιχείων τοποθεσίας απαιτεί αξιοπρεπή προσπάθεια. Μπορεί επίσης να έχετε αντιμετωπίσει δυσκολίες στη διαχείριση πολλών στοιχείων που εξαρτώνται το ένα από το άλλο. Επομένως, θα πρέπει να εξετάσετε το ενδεχόμενο να τυλίξετε σχετικά στοιχεία σε ένα δοχείο ή. Αυτό βοηθά στη μείωση του έργου της σύνθεσης πολλών στοιχείων σε ένα στο οποίο τοποθετείτε ένα μόνο στοιχείο.

Αποκριτική σχεδίαση: Πρέπει πρώτα να πάτε με επιφάνεια εργασίας ή πρώτα με κινητό;

Η πρώτη προσέγγιση επιφάνειας εργασίας σημαίνει ότι θα γράψετε CSS για μεγάλες οθόνες και στη συνέχεια θα εφαρμόσετε ερωτήματα πολυμέσων για να συρρικνώσετε το σχέδιο για μικρότερες οθόνες. Αντίθετα, η πρώτη προσέγγιση για κινητά περιλαμβάνει τη σύνταξη CSS για φορητές συσκευές, με μικρότερες οθόνες και στη συνέχεια την εφαρμογή ερωτημάτων μέσων για την επέκταση του σχεδιασμού για μεγαλύτερες οθόνες. Ο πρωταρχικός στόχος είναι να μειωθεί ο ιστότοπος και οι εφαρμογές στα απόλυτα απαραίτητα.

Εάν ξεκινάτε με την ανάπτυξη ιστοσελίδων με ανταπόκριση, θα πρέπει πρώτα να πάτε στην επιφάνεια εργασίας προσέγγιση καθώς στο τέλος της ημέρας, θα πρέπει να στοιβάζετε το δοχείο το ένα πάνω στο άλλο στο κινητό συσκευές. Αν και είναι εντελώς προσωπική απόφαση, η πρώτη προσέγγιση για κινητά σας βοηθά στη δομή της HTML με καλύτερο τρόπο, ενώ η προσέγγιση για την επιφάνεια εργασίας θα σας βοηθήσει με τη διάταξη και το διάστημα τεχνικές.

Τα 6 κορυφαία μαθήματα για να μάθετε το UX Design

Αν ψάχνετε να μάθετε σχεδιασμό UX ή να βελτιώσετε τις δεξιότητές σας, εδώ είναι τα έξι καλύτερα διαδικτυακά μαθήματα που μπορείτε να παρακολουθήσετε.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα