Responsive

Un site responsive adapte sa mise en page à la taille de l'écran : une colonne sur téléphone, deux ou trois sur ordinateur, avec le même contenu et la même adresse. En France, plus de la moitié des pages vues le sont aujourd'hui sur mobile, et Google analyse d'abord la version mobile des pages. Cette page explique les notions à connaître pour en parler avec un prestataire, repérer ce qui ne va pas et le régler vous-même dans WordPress.

L'expression vient d'un article d'Ethan Marcotte publié le 25 mai 2010 dans le magazine A List Apart. Il y décrit trois ingrédients techniques, toujours valables :

• une grille fluide : les colonnes sont définies en proportions (pourcentages, fractions) plutôt qu'en pixels fixes ;

• des images flexibles : une image ne dépasse jamais la largeur de son conteneur et se réduit avec lui ;

• les media queries : des règles CSS qui ne s'appliquent qu'à partir d'une certaine largeur d'écran (ou en dessous).

Avant le responsive, beaucoup de sites avaient une version mobile séparée (souvent sur une adresse du type m.monsite.fr), à maintenir en double. Le responsive sert une seule page à tous les appareils : c'est l'affichage qui change, pas le contenu.

• Vos visiteurs sont sur mobile. Selon StatCounter, en septembre 2026 en France, 53,05% des pages vues l'ont été sur mobile, 44,45% sur ordinateur et 2,5% sur tablette.

• Google indexe la version mobile. La documentation de Google Search l'indique clairement : Google utilise la version mobile du contenu d'un site, explorée avec son robot pour smartphone, pour l'indexation et le classement. Google y recommande le responsive, qu'il juge le plus simple à mettre en place et à maintenir (documentation Google Search Central).

• L'expérience utilisateur en dépend. Un texte qu'il faut zoomer ou un bouton trop petit pour le doigt font partir le visiteur, quelle que soit la qualité du contenu (voir les principes de l'UX).

Un point de rupture est la largeur d'écran à partir de laquelle la mise en page change : par exemple, trois colonnes deviennent une seule. Il n'existe pas de liste officielle : chaque thème ou constructeur de pages fixe les siens, généralement trois niveaux (ordinateur, tablette, téléphone). La bonne pratique consiste à placer un point de rupture là où votre contenu commence à mal s'afficher, pas sur la taille d'un modèle de téléphone précis.

Côté code, deux éléments font tout le travail. La balise viewport, dans l'en-tête de la page (les thèmes WordPress récents l'ajoutent pour vous), et une media query dans la feuille de style :

Concevoir « mobile first », c'est partir de la version téléphone puis enrichir la mise en page quand l'écran s'agrandit (c'est ce que fait l'exemple CSS ci-dessus avec min-width). L'intérêt n'est pas que technique : un petit écran oblige à hiérarchiser. Si un bloc n'a pas sa place sur mobile, demandez-vous s'il est vraiment utile sur ordinateur.

• Les tableaux larges : ils débordent de l'écran. Limitez le nombre de colonnes ou rendez le tableau défilable horizontalement dans son propre cadre.

• Les images et vidéos à largeur fixe : elles provoquent un défilement horizontal de toute la page.

• Les menus : un menu de huit entrées sur une ligne ne tient pas ; il doit passer en menu « hamburger » ou être raccourci.

• Les textes centrés sur plusieurs lignes : déjà difficiles à lire sur ordinateur, ils deviennent pénibles sur un écran étroit (voir typographie).

• Les boutons et liens trop petits ou trop proches : les règles d'accessibilité WCAG 2.2 demandent une cible d'au moins 24 × 24 pixels CSS (niveau AA) et recommandent 44 × 44 pixels (niveau AAA).

• Les colonnes dans le mauvais ordre : sur mobile, les colonnes s'empilent de gauche à droite ; une alternance texte / image peut alors donner deux images à la suite. Exemple de correction avec Divi : inverser l'ordre des colonnes sur mobile.

• Les fenêtres surgissantes et bandeaux fixes qui masquent une grande partie d'un petit écran.

1. Dans le navigateur : ouvrez les outils de développement (touche F12), puis le mode « appareil » (Ctrl + Maj + M dans Chrome comme dans Firefox ; sur Mac, Cmd + Maj + M dans Chrome et Cmd + Option + M dans Firefox). Vous choisissez une largeur d'écran et voyez la page s'adapter. Voir aussi inspecter un élément dans une page Web.

2. Sur un vrai téléphone : le simulateur ne remplace pas le doigt. Parcourez les pages principales, remplissez un formulaire, ouvrez le menu.

3. En réduisant la fenêtre de votre navigateur progressivement : vous repérez la largeur exacte où quelque chose se casse.

Les thèmes WordPress actuels sont responsives par défaut : la question n'est plus « est-il responsive ? » mais « me laisse-t-il régler l'affichage par appareil ? ». Les constructeurs de pages comme Divi proposent des réglages distincts pour ordinateur, tablette et téléphone (taille des textes, marges, affichage ou masquage d'un module).

Pour une démonstration complète, la leçon Le responsive dans Divi de la formation « Mieux utiliser Divi » reprend une page construite de zéro et ajuste sa version tablette et mobile, réservée aux membres.