Le responsive design : un site pour tous les écrans

Vos visiteurs n’arrivent pas tous avec le même écran : un téléphone tenu d’une main, une tablette sur un canapé, un ordinateur portable, un grand moniteur. Plutôt que de fabriquer un site différent pour chacun, le responsive design consiste à écrire un seul site qui s’adapte. Dans cette leçon, vous apprendrez à rendre le portfolio de Camille agréable partout, avec une méthode simple : commencer par le mobile.

Étape 1 : la balise meta viewport

Sans consigne, un navigateur mobile suppose que la page a été conçue pour un grand écran : il la rend dans une fenêtre virtuelle large puis la réduit, ce qui produit un texte minuscule. La balise meta viewport corrige cela en indiquant que la largeur de la page doit suivre celle de l’appareil :

<meta name="viewport" content="width=device-width, initial-scale=1">

Placez-la dans le head de chaque page, juste après meta charset. C’est la condition préalable à tout le reste. Ne désactivez jamais le zoom (par exemple avec user-scalable=no) : il est indispensable aux personnes malvoyantes.

Étape 2 : les images et médias fluides

Une image plus large que l’écran provoque une barre de défilement horizontale. La règle de base, à placer au début de votre feuille de style :

img, video {
  max-width: 100%;
  height: auto;
}

L’image garde sa taille d’origine sur un grand écran, mais se réduit si son conteneur est plus petit, en conservant ses proportions. Pour des images adaptées aux différentes tailles d’écran, HTML propose les attributs srcset et sizes qui permettent au navigateur de choisir la version la plus adéquate :

<img
  src="images/projets/alpes-800.jpg"
  srcset="images/projets/alpes-400.jpg 400w,
          images/projets/alpes-800.jpg 800w,
          images/projets/alpes-1600.jpg 1600w"
  sizes="(min-width: 60rem) 33vw, 100vw"
  alt="Sommets enneigés au lever du soleil"
  width="800" height="533">

On fournit plusieurs fichiers avec leur largeur réelle (400w…), et on indique la largeur à laquelle l’image sera affichée (sizes). Le navigateur choisit ensuite le fichier le mieux adapté à l’écran, ce qui économise des données sur mobile. Nous y reviendrons au chapitre 5.

Étape 3 : penser « mobile d’abord »

L’approche mobile-first consiste à écrire d’abord le style pour les petits écrans, puis à ajouter des règles pour les écrans plus grands. Les avantages sont nombreux :

• le contenu essentiel est hiérarchisé : sur un petit écran, il n’y a pas de place pour le superflu ;
• le code de base est simple (une colonne, des boîtes empilées) ;
• les appareils les moins puissants reçoivent le moins de règles à interpréter ;
• on enrichit progressivement, plutôt que de devoir défaire une mise en page complexe.

Étape 4 : les media queries

Une media query applique des règles seulement si une condition est vraie, le plus souvent sur la largeur de la fenêtre :

/* Style de base : mobile */
.entete {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* À partir de 48rem (environ 768 px) */
@media (min-width: 48rem) {
  .entete {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

En mobile-first, on utilise surtout min-width : « à partir de cette largeur, ajoute ces règles ». Le résultat est lisible comme une progression : base, puis tablette, puis grand écran.

Choisir ses points de rupture

Un point de rupture est la largeur à laquelle votre mise en page a besoin de changer. Ne les choisissez pas en fonction de modèles d’appareils précis, qui évoluent sans cesse : redimensionnez plutôt la fenêtre de votre navigateur (ou utilisez le mode adaptatif des outils de développement) et ajoutez une règle quand le contenu commence à paraître étiré, trop serré ou mal équilibré. Beaucoup de sites s’en sortent avec deux ou trois points de rupture. En rem, ils respectent la préférence de taille de police de l’utilisateur.

D’autres conditions utiles

• (orientation: landscape) : écran en mode paysage ;
• (prefers-color-scheme: dark) : l’utilisateur a choisi un thème sombre ;
• (prefers-reduced-motion: reduce) : l’utilisateur souhaite limiter les animations (nous y reviendrons au chapitre 5) ;
• print : règles pour l’impression, par exemple masquer le menu.

@media print {
  nav { display: none; }
  body { color: black; background: white; }
}

Étape 5 : des tailles qui s’ajustent avec clamp()

Au lieu de définir une taille fixe puis de la modifier à chaque point de rupture, la fonction clamp(minimum, valeur préférée, maximum) produit une taille fluide, bornée des deux côtés :

h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

main {
  padding-inline: clamp(1rem, 4vw, 3rem);
}

Le titre ne sera jamais inférieur à 2 rem ni supérieur à 3,5 rem ; entre les deux, il grandit en proportion de la largeur de l’écran. Moins de règles de média, des transitions douces entre les tailles. Combinez vw avec une valeur en rem (comme ci-dessus) pour que le texte continue à réagir au réglage de taille de police de l’utilisateur.

Étape 6 : naviguer sur mobile

Un menu horizontal qui tient sur un grand écran peut déborder sur mobile. Plusieurs solutions existent, de la plus simple à la plus complexe :

1. laisser les liens passer à la ligne avec flex-wrap: wrap (suffisant quand il y a peu d’entrées, comme pour Camille) ;
2. afficher le menu en colonne, avec de grandes zones tactiles ;
3. utiliser un composant de menu repliable, ce qui demande en général du JavaScript et une attention particulière à l’accessibilité.

Quelle que soit la solution, pensez au tactile : les cibles cliquables (liens, boutons) doivent être assez grandes pour être touchées au doigt, et suffisamment espacées pour éviter les erreurs. Une hauteur d’environ 44 pixels est un repère couramment recommandé.

Tableaux et contenus larges

Un tableau large déborde du mobile. Une solution simple consiste à l’envelopper dans un conteneur qui défile horizontalement :

.tableau-defilant {
  overflow-x: auto;
}

Il en va de même pour un bloc de code long : donnez-lui overflow-x: auto pour qu’il défile au lieu de casser la mise en page.

Tester le responsive

• Utilisez le mode adaptatif des outils de développement pour simuler différentes largeurs, du très étroit au très large ;
• redimensionnez lentement la fenêtre pour repérer les endroits où la mise en page devient inconfortable ;
• testez, dès que vous le pouvez, sur un vrai téléphone : taille réelle des cibles tactiles, lisibilité en extérieur ;
• essayez de zoomer le texte à 200 % : rien ne doit se chevaucher ni disparaître ;
• vérifiez qu’il n’y a aucun défilement horizontal sur la page.

Le portfolio, version responsive

<meta name="viewport" content="width=device-width, initial-scale=1">

img { max-width: 100%; height: auto; }

.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .carte:first-child { grid-column: span 2; }
}

Une colonne sur téléphone, deux sur tablette, trois sur grand écran avec la première carte plus large : la carte « vedette » de la leçon précédente n’est désormais appliquée que lorsque la grille a la place de l’accueillir. Cette approche explicite est plus prévisible qu’auto-fit quand on veut maîtriser le nombre exact de colonnes.

À vous de jouer

1. Ajoutez la balise meta viewport à toutes vos pages ;
2. appliquez max-width: 100%; height: auto; à vos images ;
3. écrivez le menu en colonne sur mobile, puis en ligne à partir de 48 rem ;
4. donnez au h1 une taille fluide avec clamp() ;
5. testez dans le mode adaptatif de votre navigateur et notez l’endroit où la mise en page commence à moins bien fonctionner.

img { max-width: 100%; height: auto; }

.menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

@media (min-width: 48rem) {
  .menu {
    flex-direction: row;
    gap: 1.5rem;
  }
}

Pour finir ce chapitre, vous apprenez à positionner précisément des éléments et à ajouter de petits effets animés.