Dès le départ, le World Wide Web a été conçu pour être indépendant. Peu importe le matériel que vous avez. Le système d'exploitation utilisé par votre appareil n'a pas d'importance. Tant que vous pouvez vous connecter à Internet, vous pouvez accéder au World Wide Web.
Aux débuts du Web, la plupart des gens utilisaient des ordinateurs de bureau. Aujourd'hui, le Web est disponible sur les ordinateurs de bureau, les ordinateurs portables, les tablettes, les téléphones pliables, les réfrigérateurs et les voitures. Les utilisateurs s'attendent à juste titre à ce que les sites Web s'affichent correctement, quel que soit l'appareil qu'ils utilisent. Le responsive design rend cela possible.
Le responsive design n'est pas la première approche de la conception de sites Web. Dans les années précédant la conception réactive, les concepteurs et développeurs Web essayaient de nombreuses techniques différentes.
Design à largeur fixe
Au début des années 1990, lorsque le Web est devenu populaire, la plupart des écrans avaient des dimensions de 640 pixels de large sur 480 pixels de haut. Il s'agissait de tubes à rayons cathodiques convexes, différents des écrans à cristaux liquides actuels.
À l'époque des débuts de la conception Web, il était sûr de concevoir des pages Web d'une largeur de 640 pixels. Mais alors que d'autres technologies comme les téléphones et les appareils photo étaient miniaturisés, les écrans devenaient plus grands (et finalement, de plus en plus plates). Avant longtemps, la plupart des écrans avaient des dimensions de 800 x 600 pixels. Les conceptions Web ont été modifiées en conséquence. Les concepteurs et les développeurs ont commencé à partir du principe que 800 pixels représentait une valeur par défaut sûre.
Puis les écrans sont de nouveau plus grands. 1 024 x 768 est devenu la valeur par défaut. Cela ressemblait à une course aux armements entre concepteurs Web et fabricants de matériel.
Qu'il s'agisse de 640, 800 ou 1 024 pixels, le choix d'une largeur spécifique pour la conception était appelé conception à largeur fixe.
Si vous spécifiez une largeur fixe pour votre mise en page, celle-ci ne s'affichera correctement que sur cette largeur spécifique. Si un visiteur de votre site a un écran plus large que la largeur que vous avez choisie, il y aura de l'espace gaspillé à l'écran. Vous pouvez centrer le contenu de vos pages pour répartir cet espace de manière plus uniforme (au lieu d'avoir un espace vide d'un côté), mais vous ne tireriez pas pleinement parti de l'espace disponible.
De même, si un visiteur arrive avec un écran plus étroit que la largeur que vous avez choisie, votre contenu ne s'adaptera pas horizontalement. Le navigateur génère une barre d'exploration (l'équivalent horizontal d'une barre de défilement). L'utilisateur doit déplacer la page entière vers la gauche et vers la droite pour en afficher l'intégralité.
Mises en page liquide
Alors que la majorité des concepteurs utilisaient des mises en page à largeur fixe, certains ont choisi de rendre leurs mises en page flexibles. Au lieu d'utiliser des largeurs fixes pour vos mises en page, vous pouvez créer une mise en page flexible en utilisant des pourcentages pour la largeur de vos colonnes. Ces conceptions fonctionnent dans plus de situations qu'une mise en page à largeur fixe qui ne semble correcte que dans une taille spécifique.
C'était ce qu'on appelle les mises en page liquides. Mais si une mise en page liquide aura un bon rendu sur un large éventail de largeurs, elle commencera à se détériorer aux extrêmes. Sur un grand écran, la mise en page semble étirée. Sur un écran étroit, la mise en page semble écrasée. Les deux scénarios ne sont pas idéaux.
Vous pouvez atténuer ces problèmes en utilisant min-width et max-width pour votre mise en page.
Toutefois, à n'importe quelle taille inférieure à la largeur minimale ou supérieure à la largeur maximale, vous rencontrez les mêmes problèmes qu'une mise en page à largeur fixe.
Sur un grand écran, l'espace inutilisé serait gaspillé.
Sur un écran étroit, l'utilisateur doit déplacer toute la page vers la gauche et vers la droite pour tout voir.
Le mot liquid n'est qu'un des termes utilisés pour décrire ce type de mise en page. Ces types de conceptions étaient également appelés mises en page fluides ou mises en page flexibles. La terminologie était aussi fluide que la technique.
Petits écrans
Au XXIe siècle, le Web n'a cessé de croître. Il en va de même pour les moniteurs. Mais de nouveaux écrans sont arrivés, plus petits que n'importe quel ordinateur de bureau. Avec l'arrivée des téléphones mobiles dotés de navigateurs Web complets, les concepteurs se sont retrouvés face à un dilemme. Comment peut-il s’assurer que ses conceptions s’afficheront bien sur un ordinateur de bureau et un téléphone mobile ? Elle avait besoin d'un moyen de styliser son contenu pour des écrans aussi petits que 240 pixels de largeur et plusieurs milliers de pixels de largeur.
Sites distincts
Une option consiste à créer un sous-domaine distinct pour les visiteurs mobiles. Mais vous devez ensuite gérer deux codebases et conceptions distincts. De plus, afin de rediriger les visiteurs sur des appareils mobiles, vous devez effectuer un reniflage de user-agent, qui peut être peu fiable et facilement falsifié. La chaîne user-agent de Chrome va être abandonnée pour des raisons de confidentialité. De plus, il n'y a pas de distinction claire entre mobile et non mobile. Vers quel site envoyez-vous les tablettes ?
Mises en page adaptatives
Au lieu d'avoir des sites distincts sur différents sous-domaines, vous pouvez avoir un seul site avec deux ou trois mises en page à largeur fixe.
Lorsque les requêtes média sont arrivées dans CSS, elles ont ouvert la voie à des mises en page plus flexibles. Mais de nombreux développeurs étaient encore plus à l'aise pour créer des mises en page à largeur fixe. L'une des techniques consistait à basculer entre quelques mises en page à largeur fixe avec des largeurs spécifiées. Certains appellent cela la conception adaptative.
La conception adaptative a permis aux concepteurs de fournir des mises en page qui semblaient bien dans différentes tailles, mais qui ne s'affichaient jamais parfaitement entre ces tailles. Le problème d'espace excessif a persisté, bien qu'il n'était pas aussi mauvais que dans une mise en page à largeur fixe.
Les requêtes média CSS vous permettent de proposer aux utilisateurs la mise en page la plus proche de la largeur de leur navigateur. Toutefois, étant donné la variété des tailles d'appareils, il est probable que la mise en page ne soit pas parfaite pour la plupart des utilisateurs.
Responsive Web Design
Si les mises en page adaptatives sont une combinaison de requêtes média et de mises en page à largeur fixe, le Responsive Web Design est une combinaison de requêtes média et de mises en page liquides.
Ce terme a été inventé par Ethan Marcette dans un article de "A List Apart" en 2010.
Ethan a défini trois critères de responsive design:
- Grilles fluides
- Médias fluides
- Requêtes média
La mise en page et les images d’un site responsive s’afficheront correctement sur n’importe quel appareil. Mais il y avait un problème.
Un élément meta pour viewport
Les navigateurs des téléphones mobiles devaient gérer des sites web conçus avec des mises en page à largeur fixe pour les écrans plus grands. Par défaut, les navigateurs mobiles supposaient que 980 pixels correspondait à la largeur pour laquelle les utilisateurs concevaient la conception (et ce n'était pas le cas). Ainsi, même si vous utilisez une mise en page liquide, le navigateur applique une largeur de 980 pixels, puis adapte la page Web affichée à la largeur réelle de l'écran.
Si vous utilisez le responsive design, vous devez indiquer au navigateur de ne pas effectuer ce scaling.
Pour ce faire, utilisez un élément meta dans le head de la page Web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Il existe deux valeurs, séparées par des virgules.
Le premier est width=device-width.
Cela indique au navigateur de supposer que la largeur du site Web est identique à la largeur de l'appareil (au lieu de supposer que la largeur du site Web est de 980 pixels).
La deuxième valeur est initial-scale=1.
Elle indique au navigateur le degré ou la faiblesse de scaling à effectuer.
Avec le responsive design, le navigateur ne doit pas effectuer de scaling du tout.
Une fois cet élément meta en place, vos pages Web sont prêtes à être responsives.
Conception responsive moderne
Aujourd'hui, nous sommes en mesure de créer des sites Web réactifs dans des domaines bien plus importants que les tailles des fenêtres d'affichage.
Les fonctionnalités multimédias permettent aux développeurs d'accéder aux préférences utilisateur et d'offrir des expériences personnalisées.
Les requêtes de conteneur permettent aux composants de posséder leurs propres informations responsives.
L'élément picture permet aux concepteurs de prendre des décisions concernant la direction artistique en fonction des formats d'écran.
Testez vos connaissances
Testez vos connaissances en matière de conception de sites Web réactifs
En 2021, est-il judicieux de concevoir des pages Web à une largeur fixe ?
Sur quel type d'écran les mises en page Liquid ont-elles généralement du mal ?
Les trois premiers critères de la conception réactive sont ?
Le responsive design est un monde passionnant et en pleine expansion qui regorge de possibilités. Dans la suite de ce cours, vous découvrirez ces technologies et comment les utiliser afin de créer des sites Web attrayants et réactifs pour tous.