Responsive Design

Le responsive design est une méthode de conception qui produit une seule version d'un site, dont la mise en page, les images et la typographie s'adaptent automatiquement à la taille de l'écran et aux préférences de l'utilisateur. Une seule base de code, une seule URL, un rendu approprié partout.

Le terme a été popularisé en 2010 par Ethan Marcotte, autour de trois ingrédients : une grille fluide, des images flexibles et des requêtes de média. Il s'opposait à la pratique du site mobile séparé, hébergé sur un sous-domaine, qui imposait de maintenir deux sites et deux jeux d'URLs.

Comment ça marche

• Une balise de configuration de la fenêtre d'affichage empêche le navigateur mobile de simuler un écran de bureau
• Les dimensions s'expriment en unités relatives plutôt qu'en pixels fixes, pour suivre la taille de police choisie par l'utilisateur
• Les requêtes de média appliquent des règles selon la largeur disponible, mais aussi selon le mode sombre ou la préférence de mouvement réduit
• Les grilles modernes absorbent une grande partie de l'adaptation sans point de rupture, grâce aux fonctions de bornes et au remplissage automatique
• Les images sont déclinées en plusieurs largeurs, le navigateur choisissant la source adaptée à l'écran
• Les requêtes de conteneur permettent à un composant de s'adapter à la largeur de son parent, et non plus à celle de la fenêtre

L'approche mobile d'abord consiste à écrire les styles pour le petit écran, puis à enrichir vers le haut. Elle donne des feuilles de style plus courtes et force à hiérarchiser le contenu.

Ce que ça change concrètement

• Une seule URL par contenu, ce qui simplifie le référencement, le partage et la mesure d'audience
• Une cohérence avec l'indexation mobile d'abord : les moteurs évaluent la version mobile
• Un critère d'accessibilité satisfait : le contenu doit rester lisible et utilisable en zoom fort, sans double défilement
• Un coût de maintenance divisé : la correction est faite une seule fois

Les pièges

• Masquer du contenu sur mobile plutôt que le réorganiser, ce qui appauvrit la version la plus consultée
• Caler les points de rupture sur des modèles d'appareils du moment au lieu de les définir là où la mise en page se dégrade
• Oublier de déclarer les dimensions des images, ce qui provoque des décalages pendant le chargement
• Des zones tactiles trop petites ou trop rapprochées, confortables à la souris et pénibles au doigt
• Les tableaux de données, cas le plus difficile : ils demandent une vraie décision de conception, pas un simple défilement horizontal
• Tester en redimensionnant la fenêtre du navigateur, alors que le clavier virtuel et le pouce changent tout

Ce qu'il ne résout pas

S'adapter à la taille n'est pas s'adapter au contexte. Le réseau, la puissance de l'appareil et l'intention de l'utilisateur mobile diffèrent, et aucune requête de média ne les détecte. Le poids réel de la page reste un choix séparé.