Responsive Web Design - Πώς να κάνετε έναν ιστότοπο να φαίνεται καλό σε τηλέφωνα και tablet

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

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

Σύμφωνα με τη Statistica, από το 2019, το 61% όλων των επισκέψεων αναζήτησης Google πραγματοποιούνται σε κινητή συσκευή. Τον Σεπτέμβριο του 2020 η Google θα αλλάξει τον αλγόριθμο αναζήτησης για να δώσει προτεραιότητα σε ιστότοπους φιλικούς προς κινητά.

Σε αυτήν την ανάρτηση θα καλύψω τα εξής:

  • Τι είναι ο σχεδιασμός ιστοσελίδων που ανταποκρίνεται;
  • Η μετα-ετικέτα viewport και τι κάνει
  • Αποτελεσματικές τεχνικές που χρησιμοποιούνται στο σχεδιασμό ιστοσελίδων που ανταποκρίνεται σε κινητές συσκευές και tablet
  • Εργαλεία που βοηθούν στην προσομοίωση και παρακολούθηση της εμπειρίας των χρηστών για κινητά και tablet

Τι είναι το Responsive Web Design; (RWD)

Ο ανταποκρινόμενος σχεδιασμός ιστοσελίδων είναι μια προσέγγιση που εστιάζει στο περιβάλλον του χρήστη μιας ιστοσελίδας. Το περιβάλλον του χρήστη εξαρτάται από τη συσκευή που έχει συνδέσει στο Διαδίκτυο.

Υπάρχουν πολλά χαρακτηριστικά συσκευών που παρέχουν ευκαιρίες για εστίαση στο χρήστη. Μερικά από αυτά περιλαμβάνουν:

  • σύνδεση δικτύου
  • Μέγεθος οθόνης
  • τύπος αλληλεπίδρασης (οθόνες αφής, τακάκια)
  • γραφική ανάλυση.

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

Όμως, στον ανταποκρινόμενο σχεδιασμό Ιστού ο διακομιστής στέλνει πάντα τον ίδιο κώδικα HTML σε όλες τις συσκευές και το CSS χρησιμοποιείται για να αλλάξει την απόδοση της σελίδας στη συσκευή.

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

Η μετα-ετικέτα Viewport για τον προσδιορισμό ενός ιστότοπου για κινητά

Η ετικέτα meta viewport δίνει οδηγίες στο πρόγραμμα περιήγησης πώς να προσαρμόσει τη σελίδα στο πλάτος κάθε συσκευής.

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

Ακολουθεί μια τυπική εφαρμογή:

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

Ερωτήματα πολυμέσων CSS για διαφορετικά μεγέθη οθόνης και προσανατολισμούς

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

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

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

.column { width: 100%; } @media (min-width: 600px) { .column { width: 50%; } }

Ο παραπάνω κώδικας είναι ένα απλό παράδειγμα, αλλά αυτό που κάνει είναι πολύ ενδιαφέρον.

  1. Εξετάζοντας πρώτα το κινητό, το στοιχείο "στήλη" έχει πλάτος 100%.
  2. Χρησιμοποιώντας ένα min-widthερώτημα πολυμέσων, ορίζουμε κανόνες ειδικά για προβολές με ελάχιστο πλάτος 600px(προβολές ευρύτερες από 600px). Επομένως, για προβολές ευρύτερες από 600px, το στοιχείο στήλης θα έχει πλάτος που είναι το 50% του γονικού του.

Αν και τα ερωτήματα πολυμέσων είναι απαραίτητα για την απόκριση του σχεδιασμού ιστοσελίδων, πολλές άλλες νέες δυνατότητες CSS υιοθετούνται επίσης και υποστηρίζονται ευρέως στα προγράμματα περιήγησης. Το Flexbox είναι ένα από αυτά τα νέα, σημαντικά χαρακτηριστικά CSS από την άποψη της απόκρισης σχεδιασμού ιστοσελίδων.

Τι είναι το Flexbox;

Ίσως αναρωτιέστε - "τι κάνει το Flexbox"; Η καλύτερη ερώτηση είναι - "τι δεν μπορεί να κάνει το Flexbox"; Ποιος είναι ο ευκολότερος τρόπος να κεντράρετε κάθετα με CSS; Flexbox. Πώς δημιουργείτε μια αποκριτική διάταξη πλέγματος; Flexbox. Πώς μπορούμε να επιτύχουμε παγκόσμια ειρήνη; Flexbox.

Η μονάδα Flexbox Layout (Flexible Box) παρέχει έναν πιο αποτελεσματικό τρόπο διάταξης, ευθυγράμμισης και διανομής χώρου μεταξύ αντικειμένων σε ένα δοχείο, ακόμα και όταν το μέγεθός τους είναι δυναμικό (εξ ου και η λέξη "flex").

Στο παρακάτω παράδειγμα συνδυάζουμε ερωτήματα πολυμέσων όπως εξηγείται παραπάνω για να δημιουργήσουμε ένα πλέγμα που ανταποκρίνεται.

 main { background: #d9d7d5; display: flex; flex-wrap: wrap; justify-content: space-between; } div { background: #767775; flex-basis: 100%; height: 100px; margin-bottom: 0.5rem; } @media (min-width: 600px) { main { flex-wrap: nowrap; } div { flex-basis: 33%; } } 

Επιτυγχάνουμε τα εξής με αυτόν τον κωδικό:

  1. Δημιουργήστε μια διάταξη flexbox με display: flexστο mainστοιχείο κοντέινερ μας .
  2. Στυλ για κινητά πρώτα. Ρυθμίζουμε το mainστοιχείο στο flex-wrap: wrapοποίο επιτρέπει στα παιδικά στοιχεία να τυλίγονται μέσα στη διάταξη flexbox όπως φαίνεται παρακάτω στο σχήμα 1. Ρυθμίζουμε flex-basis: 100%τα divστοιχεία μας για να διασφαλίσουμε ότι καλύπτουν το 100% του γονικού πλάτους στη διάταξη flexbox (εικόνα 1).
  3. Στυλ για μεγαλύτερες συσκευές, όπως tablet και επιτραπέζιο υπολογιστή. Χρησιμοποιούμε ένα ερώτημα μέσων παρόμοιο με το παράδειγμά μας στην προηγούμενη ενότητα για να ορίσουμε το mainστοιχείο κοντέινερ flex-wrap: nowrap. Αυτό διασφαλίζει ότι τα θυγατρικά στοιχεία δεν τυλίγονται και ότι διατηρούν μια στήλη σε έναν τύπο γραμμής διάταξης. Με τον καθορισμό divστο flex-basis: 33%πλαίσιο του ερωτήματος μέσα ενημέρωσης - θα δημιουργήσει στήλες που είναι 33% το πλάτος της μητρικής.
  4. Σε αυτό το παράδειγμα, η μαγεία θα εμφανιζόταν σε μεγαλύτερες συσκευές με τους συνδυασμένους κανόνες ερωτήματος μέσων και flexbox. Επειδή ορίσαμε display: flexκαι επειδή δεν παρακάμψαμε τον κανόνα στο ερώτημα πολυμέσων, έχουμε μια διάταξη flexbox για κινητά, tablet και επιτραπέζιους υπολογιστές. Το ερώτημα πολυμέσων flex-basis: 33%και οι κληρονομικοί display: flexκανόνες θα μας δώσουν μια αναγνωρίσιμη διάταξη flexbox όπως φαίνεται στο σχήμα 2. Στο παρελθόν, για να επιτύχουμε αυτόν τον τύπο διάταξης στήλης, θα χρειαζόταν να κάνουμε κάποια σοβαρή βαριά ανύψωση και να γράψουμε μπερδέματα του CSS.

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

Οριζόντια κύλιση με κύλιση υπερχείλισης

Μπορεί να έρθει μια στιγμή που το περιεχόμενο να ξεχειλίζει από τη θύρα προβολής χωρίς έναν χαριτωμένο τρόπο να το χειριστεί. Ιδού ... κύλιση υπερχείλισης για τη διάσωση. ;

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

Responsive Web Design RWD Μενού Responsive Overflow scroll scroll Αυτό είναι πολύ περιεχόμενο! Ναι έχουμε άλλο αντικείμενο
 menu { background: #d9d7d5; padding: 0.25rem; overflow-y: scroll; white-space: nowrap; } span { background: #767775; color: #ffffff; display: inline-block; margin: 0.25rem; padding: 0.5rem; }   Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item 

Πώς το έκανες αυτό ;; Ας κάνουμε μια βαθύτερη βουτιά.

  • overflow-y: scrollείναι το βασικό συστατικό αυτής της συνταγής. Με τον καθορισμό του, τα θυγατρικά στοιχεία θα ξεχειλίσουν τον οριζόντιο άξονα με συμπεριφορά κύλισης.
  • Οχι τόσο γρήγορα! Αν και πιστεύετε ότι overflow-yθα ήταν αρκετό, πρέπει επίσης να πούμε στο πρόγραμμα περιήγησης να μην τυλίξει τα θυγατρικά στοιχεία white-space: nowrap;

Now that we have a few RWD layout techniques up our sleeve, let's take a look at elements that pose challenges specific to their visual nature - images and video.

Responsive Images

By using modern image tag attributes we can accommodate a range of devices and resolutions. Below is an example of a responsive image.

 img { max-width: 100%; }     

This is doing a lot of things. Let's break it down:

  1. By setting max-width: 100% the image will scale up or down based on its container width.
  2. By using a combination of picture, source, and img tags we are actually only rendering one image and are only loading the best fitting image based on the user's device.
  3. WebP is a modern image format that provides superior compression for images on the web. By utilizing source we can reference a WebP image to use for browsers that support it, and another source tag to reference a PNG version of the images that don't support WebP.
  4. srcset is used to tell the browser which image to use based on the device's resolution.
  5. We establish native lazy loading by utilizing the loading="lazy" attribute / value pair.

Responsive Video

Responsive video is another subject that has inspired a large number of articles and documentation.

One key strategy to establish responsive images, video, iframes and other elements involves the use of aspect-ratio. The aspect ratio box is not a new technique and quite a useful tool to have up your sleeve as a web developer.

This article provides a solid demonstration about how to achieve "fluid" width videos. Let's take a look at the code and break it down.

 .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  

In this example we have a YouTube video embed as an iframe and a div container with videoWrapper class. This code is doing a lot... let's dig in.

  • position: relative on the container element allows child elements to utilize absolution positioning relative to it.
  • height: 0 combined with padding-bottom: 56.25% is the key ingredient here which establishes a dynamic behavior, enforcing a 16:9 aspect ratio.
  • position: absolute, top: 0 and left: 0 set on the iframe creates a behavior in which the element positions itself absolutely relative to its parent... sticking it to the top left.
  • And finally width and height of 100% makes the child, iframe element 100% of its parent. The parent, .videoWrapper takes full control of establishing this aspect ratio layout.

I know... it's a lot. There's more we can do to make video and images look the best on phones and tablets. I'd encourage research on those topics independently in addition to this.

Okay, now that we're masters of responsive web design, how can we test what we've done? Fortunately, we have a number of tools to simulate and monitor user experience on a variety of devices.

Tools to Simulate and Monitor Responsive Websites

There are a variety of useful tools to help us create websites with responsive web design. Below are a couple that I find especially useful.

Chrome DevTools Mobile Emulation

Chrome's DevTools provides mobile emulation of a range of tablet and mobile devices. It also provides a "responsive" option which allows you to define a custom viewport size.

Monitoring Mobile Website Performance with Foo

Lighthouse is an open-source tool that provides a way of analyzing website performance specific to a device.

Foo uses Lighthouse behind the scenes to monitor website performance and provides feedback for analysis. You can setup monitoring for both desktop and mobile devices to get continuous feedback about how responsive your website is.

For example, a Lighthouse report will callout images that are improperly loaded based on device.

Conclusion

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

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