Concevoir une interface en Responsive Design

1. Objectifs

   • Définir le responsive design et ses principes.
   • Concevoir mobile d'abord.
   • Choisir des points de rupture et les grilles associées.
   • Utiliser les motifs d'adaptation d'un écran.
   • Tester une interface sur plusieurs tailles.

1. Qu'est-ce que le responsive design ?

   • Le responsive design (conception adaptative) consiste à concevoir une seule interface qui s'adapte à la largeur de l'écran : téléphone, tablette, ordinateur, et toutes les tailles entre deux.
   • Le terme vient de l'article « Responsive Web Design » d'Ethan Marcotte (2010), qui reposait sur trois idées : une grille fluide, des images fluides et des requêtes média (media queries) qui changent la mise en page selon la largeur.
   • Le contenu et les fonctions restent les mêmes : seule la disposition change. Un usager qui commence sa commande sur ordinateur doit la retrouver sur son téléphone.
   • À ne pas confondre avec une version mobile séparée (un autre site, une autre application), plus coûteuse à maintenir et souvent incomplète.

1. Concevoir mobile d'abord

   • Le mobile d'abord (mobile first) consiste à concevoir d'abord l'écran le plus petit, puis à l'enrichir quand la place augmente.
   • Le petit écran oblige à choisir l'essentiel: ce qui ne tient pas sur un téléphone était peut-être inutile partout.
   • Les usagers sont souvent d'abord sur mobile : pour CantineCampus, presque toutes les commandes se font sur téléphone, entre deux cours.
   • L'approche inverse (ordinateur d'abord) mène à « retirer » des éléments pour le mobile, qui devient une version dégradée.
   • En CSS, cela se traduit par des styles de base pour le mobile et des requêtes @media (min-width: …) qui ajoutent des règles pour les écrans plus larges.

1. Les points de rupture

   • Un point de rupture (breakpoint) est une largeur à partir de laquelle la mise en page change.
   • Trois classes suffisent souvent. Dans ce cours : compacte (moins de 600 px : téléphone), moyenne (600 à 1 023 px : tablette, téléphone en paysage), étendue (1 024 px et plus : ordinateur). Les valeurs varient selon les systèmes : Material Design place la limite suivante à 840 px, Bootstrap utilise 576, 768, 992 et 1 200 px.
   • À chaque classe correspond une grille: 4, 8 et 12 colonnes (leçon précédente).
   • On choisit les points de rupture là où le contenu casse (une ligne trop longue, des cartes trop étroites), et non pour un modèle de téléphone : les tailles d'écran changent chaque année.
   • Entre deux points de rupture, la mise en page est fluide: les colonnes s'élargissent, les images suivent.

1. Les motifs d'adaptation

   • Empiler: les éléments côte à côte sur grand écran passent les uns sous les autres sur petit écran.
   • Révéler: un élément s'affiche à côté du contenu quand la place le permet (le panier à droite sur ordinateur) et devient un écran séparé sur téléphone.
   • Changer la navigation: barre d'onglets en bas sur téléphone, rail d'icônes sur tablette, menu latéral complet sur ordinateur.
   • Tableau ↔ cartes: un tableau sur grand écran, une carte par ligne sur petit écran.
   • Images fluides: les images s'adaptent à la largeur de leur colonne, avec un ratio fixe ; on fournit plusieurs tailles d'image pour ne pas charger une image d'ordinateur sur un téléphone.
   • Typographie adaptée: le corps de texte reste à 16 px ; les grands titres peuvent grandir sur grand écran.

1. Penser au-delà de la largeur

   • Le mode d'interaction: doigt sur mobile (zones tactiles de 48 px, pas de survol), souris et clavier sur ordinateur (survol, raccourcis, focus visible).
   • Le contexte: sur téléphone, l'usager est souvent debout, pressé, au soleil ; sur ordinateur, il est assis et dispose de plus de temps.
   • L'orientation: un téléphone en paysage a peu de hauteur ; la barre d'action fixe ne doit pas cacher tout le contenu.
   • Le zoom: un usager qui agrandit le texte à 200 % ne doit perdre ni contenu ni fonction (WCAG, critère 1.4.4), et à 320 px de large, il ne doit pas avoir à défiler horizontalement (WCAG, critère 1.4.10).

1. Du design au code

   • Dans Figma, dessinez un cadre par classe (360, 768, 1 280 px), avec sa grille, et utilisez l'Auto Layout et les contraintes pour voir le comportement en redimensionnant le cadre.
   • En CSS, les grilles s'écrivent avec display: grid et grid-template-columns: repeat(4, 1fr), et changent dans des requêtes média ou des requêtes de conteneur (@container).
   • Les frameworks reprennent la même logique : la grille de 12 colonnes et les classes col-md-6 de Bootstrap, les LayoutBuilder et MediaQuery de Flutter.
   • Indiquez dans la spécification le comportement de chaque composant à chaque classe : un tableau composant × largeur évite les interprétations.

.plats { display: grid; gap: 16px; grid-template-columns: 1fr; }        /* compact : 1 carte */
@media (min-width: 600px)  { .plats { grid-template-columns: repeat(2, 1fr); } }  /* moyen : 2 cartes */
@media (min-width: 1024px) { .plats { grid-template-columns: repeat(3, 1fr); } }  /* étendu : 3 cartes */

1. Tester une interface responsive

   • Testez au moins trois largeurs (360, 768 et 1 280 px) et des tailles « entre deux » (500 px, 900 px) où les mises en page cassent souvent.
   • Testez les deux orientations, le zoom à 200 % et la largeur minimale de 320 px.
   • Utilisez le mode appareil des outils de développement du navigateur (F12, puis Ctrl+Maj+M), mais validez aussi sur un vrai téléphone: le doigt, la lumière et le réseau ne se simulent pas.
   • Faites réaliser les mêmes tâches aux usagers sur chaque taille (TP 6) : une tâche réussie sur ordinateur peut échouer sur téléphone.

1. Aide-mémoire

1. Activités

1. Erreurs fréquentes

1. Bilan

   • Le responsive design adapte une seule interface à toutes les largeurs : même contenu, autre disposition.
   • On conçoit mobile d'abord, puis on enrichit.
   • Trois classes de largeur (compacte, moyenne, étendue) avec leurs grilles de 4, 8 et 12 colonnes.
   • Les motifs empiler, révéler, changer la navigation et tableau ↔ cartes réorganisent l'écran.
   • On teste sur plusieurs largeurs, orientations, au zoom et sur un vrai téléphone.

Une interface responsive ne rétrécit pas : elle se réorganise pour l'écran que l'usager a dans la main.