Le responsive web design en trois ingrédients

Le texte publié par Ethan Marcotte le 25 mai 2010 emprunte son image à l'architecture : un bâtiment qui s'adapte au passage de ses occupants. Appliquée à une page, l'idée est simple à énoncer et coûteuse à admettre : la largeur de l'écran n'est pas une donnée que l'on choisit, c'est une donnée que l'on reçoit.

Ce que l'on faisait avant

La pratique dominante consistait à publier deux sites. L'un pour les écrans larges, l'autre pour les téléphones, souvent hébergé sur une adresse distincte commençant par un m. Le serveur examinait la signature du navigateur et redirigeait vers l'une ou l'autre version.

• Deux contenus à tenir à jour, donc deux occasions de se contredire.
• Des liens partagés qui renvoyaient vers la mauvaise version, souvent vers l'accueil.
• Une liste d'appareils à maintenir, périmée à chaque sortie de modèle.
• Un référencement dispersé sur deux adresses pour un même contenu.

Les trois ingrédients

Grille fluide

Les largeurs sont exprimées en proportions plutôt qu'en pixels fixes. Une colonne occupe un tiers de la place disponible, quelle que soit cette place.

Images souples

Une image ne dépasse jamais la largeur de son conteneur. Sans cette règle, une seule photographie trop large fait déborder la page entière sur un téléphone.

Requêtes de média

Des règles de style conditionnelles, appliquées seulement au-delà ou en deçà d'une certaine largeur. C'est ce qui permet de passer de trois colonnes à une seule sans changer de page.

Le quatrième ingrédient, souvent oublié

Sur un téléphone, le navigateur simule par défaut un écran large puis réduit le tout, ce qui rend le texte illisible. Une déclaration placée dans l'en-tête du document lui demande de prendre la largeur réelle de l'appareil. Sans elle, les trois autres ingrédients ne servent à rien : la page est bien adaptative, mais personne ne le voit.

Pourquoi cinq ans avant la généralisation

Les requêtes de média ne sont pas comprises par le navigateur encore majoritaire en 2010, ce qui oblige à prévoir une mise en page de repli. Il faut ensuite convaincre les équipes de conception d'abandonner la maquette à largeur fixe, unité de travail depuis quinze ans. La bascule économique arrive en 2015, quand le confort de lecture sur téléphone devient un critère de classement dans les résultats de recherche : à partir de là, la discussion cesse d'être esthétique.

Ce que la méthode ne résout pas

Une page adaptative reste une page unique : par défaut, elle envoie le même poids à un ordinateur relié à la fibre et à un téléphone en bord de réseau. La mise en page s'adapte, pas la facture. Trois compléments sont arrivés depuis pour traiter ce qui manquait.

• Les images à plusieurs résolutions, qui laissent le navigateur choisir le fichier adapté à l'écran, généralisées au milieu des années 2010.
• Le chargement différé des éléments hors écran, devenu une simple mention dans la balise à partir de 2019.
• Les requêtes de conteneur, qui règlent la mise en forme d'un bloc selon la place dont ce bloc dispose et non selon la fenêtre entière, disponibles dans les principaux navigateurs à partir de 2022 et 2023.