Introduction

Dès le début, 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 de votre appareil n'a pas d'importance. Tant que vous pouvez vous connecter à Internet, le World Wide Web est accessible pour vous.

Aux débuts du Web, la plupart des gens utilisaient des ordinateurs de bureau. De nos jours, 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 gens s'attendent à juste titre que les sites Web s'affichent correctement, quel que soit l'appareil utilisé. Le responsive design rend cela possible.

Le responsive design n'est pas la première approche pour concevoir des sites Web. Dans les années qui ont précédé le responsive design, les concepteurs Web et les développeurs ont essayé de nombreuses techniques différentes.

Conception à largeur fixe

Au début des années 1990, lorsque le Web est devenu populaire pour la première fois, la plupart des moniteurs ont des dimensions d’écran de 640 pixels de largeur par 480 pixels de haut. Il s'agissait de tubes cathodiques convexes, contrairement aux écrans à cristaux liquides plates que nous avons maintenant.

<ph type="x-smartling-placeholder">

</ph>

Aux débuts de la conception web, il était judicieux 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ées, les écrans devenaient plus grands (et finalement, plus plats). Très rapidement, 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é à supposer que 800 pixels était une valeur par défaut sûre.

<ph type="x-smartling-placeholder">

</ph>

Puis les écrans se sont de nouveau grandis. 1024 par 768 est devenu la valeur par défaut. Cela ressemblait à une course aux armements entre les concepteurs Web et les fabricants de matériel.

​​

<ph type="x-smartling-placeholder">

</ph>

Qu'il s'agisse de 640, 800 ou 1024 pixels, choisir une largeur spécifique à concevoir était appelé conception à largeur fixe.

Si vous spécifiez une largeur fixe pour votre mise en page, votre mise en page ne s'affichera correctement que dans cette largeur spécifique. Si un visiteur de votre site possède un écran plus large que la largeur choisie, il y aura des espaces inutiles. Vous pouvez centrer le contenu de vos pages afin de répartir cet espace plus équitablement. (au lieu d'avoir un espace vide d'un côté), mais vous ne tireriez toujours pas pleinement parti de l'espace disponible.

<ph type="x-smartling-placeholder">

</ph>

De même, si un visiteur arrive avec un écran plus étroit que la largeur 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) et l'utilisateur doit déplacer la page entière vers la gauche et vers la droite pour voir tout le contenu.

<ph type="x-smartling-placeholder">

</ph>

Mises en page Liquid

Si 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 vos largeurs de colonne. Ces conceptions fonctionnent dans plus de situations qu'une mise en page à largeur fixe qui ne s'affiche que dans une taille spécifique.

C'était ce qu'on appelait les mises en page liquides. Toutefois, même si une mise en page liquide s'adapte bien à diverses largeurs, elle va commencer à s'aggraver 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.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

Vous pouvez limiter ces problèmes en utilisant min-width et max-width pour votre mise en page. Mais pour toute taille inférieure à la largeur minimale ou supérieure à la largeur maximale, vous rencontrerez les mêmes problèmes qu'avec une mise en page à largeur fixe. Sur un grand écran, il y aurait de l'espace inutilisé qui serait gaspillé. Sur un écran étroit, l'utilisateur devrait 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 a continué à croître de plus en plus. tout comme les moniteurs. Mais de nouveaux écrans sont arrivés qui étaient plus petits que n'importe quel ordinateur de bureau. Avec l'arrivée des téléphones portables dotés de navigateurs Web complets, les concepteurs ont été confrontés à un dilemme. Comment peut-il s’assurer que ses conceptions s’afficheraient bien sur un ordinateur de bureau et un téléphone mobile ? Ils avaient besoin d'un moyen de styliser leur contenu pour des écrans aussi petits que 240 pixels de large et aussi grands que des milliers de pixels de large.

Sites distincts

Vous pouvez créer un sous-domaine distinct pour les mobinautes. Vous devez ensuite gérer deux codebases et conceptions distincts. Pour rediriger les visiteurs sur leurs appareils mobiles, reniflage par user-agent ce qui peut être peu fiable et facilement falsifié. Chrome va abandonner sa chaîne user-agent pour des raisons de confidentialité. Par ailleurs, il n'existe pas de distinction claire entre les mobiles et les autres types d'appareils. Vers quel site envoyez-vous les tablettes ?

Mises en page adaptatives

Au lieu d'avoir des sites distincts sur des sous-domaines différents, vous pouvez avoir un seul site avec deux ou trois mises en page à largeur fixe.

Lorsque les requêtes média sont apparues pour la première fois dans CSS, l'équipe a pu rendre les mises en page plus flexibles. Mais de nombreux développeurs étaient encore plus à l'aise pour créer des mises en page à largeur fixe. Une technique consistait à passer d'une mise en page à largeur fixe à des largeurs spécifiées. Certaines personnes appellent cela une conception adaptative.

La conception adaptative a permis aux concepteurs de fournir des mises en page qui s’affichaient bien dans différentes tailles, mais la conception ne semblait jamais très correcte quand on la regardait entre ces tailles. Le problème d'espace excessif persistait même si ce n'était pas aussi grave que dans une mise en page à largeur fixe.

Grâce aux requêtes média CSS, vous pouvez proposer aux utilisateurs la mise en page la plus proche de la largeur de leur navigateur. Toutefois, compte tenu de la variété des tailles d'appareils, il y a de fortes chances que la mise en page ne soit pas parfaite pour la plupart des utilisateurs.

Responsive Web Design

Si les mises en page adaptatives sont un mélange de requêtes média et de mises en page à largeur fixe, le responsive web design est un mélange de requêtes média et de mises en page liquides.

Ce terme a été inventé par Ethan Marcotte dans un article dans A List Apart en 2010.

Ethan a défini trois critères pour le responsive design:

1. Grilles fluides
2. Support fluide
3. Requêtes média

La mise en page et les images d’un site responsive seraient bonnes 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 traiter les sites Web conçus avec des mises en page à largeur fixe pour les écrans plus grands. Par défaut, les navigateurs mobiles supposaient que la largeur de 980 pixels correspondait à celle pour laquelle les utilisateurs concevaient (et ce n'était pas faux). Même avec une mise en page liquide, le navigateur applique une largeur de 980 pixels, puis réduit le rendu de la page Web à la largeur réelle de l'écran.

Si vous utilisez le responsive design, vous devez indiquer au navigateur de ne pas effectuer cette mise à l'échelle. 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 y a 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. qui indique au navigateur le niveau de scaling à effectuer. Avec le responsive design, vous ne voulez pas que le navigateur effectue un scaling.

<ph type="x-smartling-placeholder">

</ph>

Une fois cet élément meta en place, vos pages Web sont prêtes à être responsives.

Design réactif moderne

Aujourd'hui, nous avons la possibilité de concevoir des sites Web réactifs dans un format qui va bien au-delà de la taille de la fenêtre d'affichage. Les fonctionnalités multimédias permettent aux développeurs d'accéder aux préférences des utilisateurs et offrent 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 artistiques en fonction des formats d'écran.

Testez vos connaissances

Tester vos connaissances en matière de conception de sites Web réactifs

Le responsive design est un monde de possibilités en constante évolution. Dans la suite de ce cours, vous découvrirez ces technologies et comment les utiliser pour créer de superbes des sites Web réactifs pour tous.