Conception adaptative (responsive)
La manière de construire une seule page qui se réorganise selon la taille de l'écran.
Définition
La conception adaptative, ou responsive design, construit une seule page qui se réorganise selon la taille de l’écran, au lieu de plusieurs versions du site. Elle repose sur trois techniques combinées et sur une ligne de code souvent oubliée, sans laquelle rien ne s’applique sur un téléphone.
Sur quoi repose la conception adaptative ?
Sur trois techniques qui n’ont d’effet qu’ensemble.
Des grilles souples
Les largeurs s’expriment en proportions plutôt qu’en pixels fixes. Une colonne qui vaut la moitié de son conteneur reste la moitié, quel que soit l’écran.
Des images qui suivent
Une image ne dépasse jamais la largeur de son conteneur. Sans cette règle, une seule photo trop large déclenche un défilement horizontal sur tout le site.
Des requêtes de média
Des blocs de mise en forme qui ne s’appliquent qu’au-delà ou en deçà d’une largeur donnée. C’est ce qui fait passer un menu horizontal en menu déroulant.
Ces trois techniques, décrites par MDN comme le socle du responsive design, produisent un site consultable sur ordinateur, tablette et smartphone sans code séparé. Les mises en page modernes des feuilles de style, en grille ou en boîtes flexibles, sont adaptatives par nature. Elles réduisent le nombre de largeurs de bascule à écrire à la main, sans les supprimer.
Pourquoi un site responsive reste-t-il minuscule sur mobile ?
Parce qu’il manque la balise qui déclare la zone d’affichage.
Sans elle, un navigateur mobile fait comme si l’écran mesurait environ 980 pixels de large, dessine la page à cette taille, puis réduit le tout pour le faire tenir. Le résultat est un site complet mais illisible, dont le texte demande un zoom manuel. Les requêtes de média, écrites pour de petites largeurs, ne se déclenchent jamais puisque le navigateur croit disposer d’un grand écran.
La déclaration attendue tient en une ligne dans l’en-tête de la page et demande deux choses : caler la zone d’affichage sur la largeur réelle de l’appareil, et afficher la page sans zoom initial. Sur WordPress, elle est fournie par le thème. C’est pourquoi le symptôme apparaît d’un coup après un changement de thème ou l’ajout d’une page construite hors du thème.
Ne jamais bloquer le zoom. Interdire l’agrandissement empêche les personnes malvoyantes de lire la page, et la norme d’accessibilité demande un zoom d’au moins deux fois. La consigne est en plus devenue peu fiable, les navigateurs mobiles récents l’ignorant fréquemment. On la retire, on ne la contourne pas.
Adaptatif ou site mobile séparé ?
Le site séparé double le travail, pas le résultat.
Une version mobile distincte est un second site, avec ses propres adresses, son propre contenu à tenir à jour et ses propres pannes. C’était la solution courante avant que le responsive design ne se généralise, et elle survit sur des sites anciens. Chaque publication se fait deux fois, et le décalage entre les deux finit toujours par arriver.
La conception adaptative garde une adresse, un contenu et une mise à jour. C’est aussi ce qui la rend vérifiable : ce que voit un visiteur sur téléphone est la même page que sur ordinateur, réorganisée.
Comment vérifier qu’un site est vraiment adaptatif ?
En trois contrôles qui ne demandent aucun outil payant.
| Contrôle | Comment | Ce qui doit se produire |
|---|---|---|
| Largeur de fenêtre | Réduire progressivement la fenêtre du navigateur sur ordinateur | La mise en page se réorganise, sans barre de défilement horizontale |
| Zoom du texte | Agrandir la page à 200 pour cent | Le texte grossit et reste entièrement lisible |
| Téléphone réel | Ouvrir le site sur un vrai smartphone et sur une tablette, pas seulement en simulation | Texte lisible sans zoomer, boutons atteignables au pouce |
Le troisième contrôle est le seul qui attrape les problèmes de saisie et de menus, que la simulation sur ordinateur ne reproduit pas fidèlement.
Questions fréquentes
Un thème WordPress récent est-il forcément responsive ?
Presque toujours pour ses pages standard. Le défaut apparaît le plus souvent ailleurs : un tableau large collé dans un article, une image aux dimensions fixes, ou une page construite avec un constructeur en largeurs figées.
D’où vient une barre de défilement horizontale sur mobile ?
D’un élément plus large que l’écran. Les causes les plus fréquentes sont une image sans limite de largeur, un tableau à colonnes fixes et un bloc dont la largeur est écrite en pixels. Un seul élément suffit à décaler toute la page.
Faut-il prévoir une largeur de bascule par modèle de téléphone ?
Non. Les largeurs de bascule se choisissent là où la mise en page cesse d’être lisible, pas d’après une liste d’appareils. Cette liste change en permanence, la lisibilité non.
Responsive veut-il dire rapide ?
Non, ce sont deux sujets différents. Une page responsive peut rester lourde si elle envoie au smartphone les mêmes images que sur un grand écran. L’adaptation concerne la mise en page, la vitesse concerne le poids et le serveur.
Sources
Et sur votre site ?
Une définition ne dit pas si vous êtes concerné.
L'audit gratuit répond dans votre cas : état technique, temps de chargement, et ce que Google voit réellement de vos pages. Un constat écrit, sans engagement et sans jargon.