Le responsive design adapte la présentation d’une page à l’espace disponible. Le même contenu peut passer de plusieurs colonnes à une seule, les images se redimensionnent et la navigation change de forme. L’objectif est de conserver un parcours lisible et utilisable.
Exemple : un tableau d’audit
Un tableau de six colonnes peut tenir sur ordinateur et déborder sur téléphone. Réduire tout le texte à 9 pixels ne résout pas le problème de lecture. On peut garder les informations essentielles visibles, permettre le défilement du tableau dans son propre cadre et rendre les détails accessibles.
Cette adaptation doit préserver les données : cacher définitivement les colonnes importantes change le contenu disponible.
Une recette qui dépasse la capture d’écran
- Tester une largeur mobile, une largeur intermédiaire et un grand écran.
- Utiliser les vrais textes longs, pas seulement des libellés courts.
- Ouvrir menu, formulaire et éléments dépliables ; vérifier leurs boutons et le focus.
- Contrôler zoom de texte, orientation et absence de débordement horizontal global.
Les bases du responsive selon MDN présentent notamment viewport, mises en page flexibles et media queries.
Ce que cela change pour l’audit SEO
Vérifiez que les titres, liens et informations importantes restent disponibles. Une belle version mobile peut tout de même omettre un bloc utile ; une page responsive peut être lente.
Traitez donc trois contrôles séparés : mise en page, parité mobile-first et performance. Le livrable utile nomme l’élément bloquant, l’appareil concerné et le comportement attendu, plutôt qu’une simple mention « mobile à améliorer ».