Aujourd'hui, environ six visites sur dix dans le monde viennent d'un smartphone.
Pourtant, le web a été pensé pendant vingt ans pour des écrans d'ordinateur posés sur
des bureaux. Comment faire pour qu'un même site s'affiche correctement sur une dalle de
27 pouces et sur un téléphone de 6 pouces tenu à une main dans le métro ?
C'est tout l'enjeu du responsive design.
Un peu d'histoire
Dans les années 2000, les sites étaient conçus pour une résolution unique, très souvent
1024 pixels de large. Sur un écran plus petit, il fallait faire défiler horizontalement,
ce qui est la chose la plus désagréable du web. Sur un écran plus grand, le contenu
flottait au milieu d'un océan de blanc.
Quand l'iPhone est arrivé en 2007, le web n'était pas prêt du tout. Les sites
s'affichaient en miniature et il fallait pincer l'écran pour lire quoi que ce soit. La
parade de l'époque consistait à construire un deuxième site, une version mobile sur une
adresse séparée, en général du type "m.monsite.com". Deux sites à développer, deux sites
à maintenir, deux fois plus d'occasions d'oublier une mise à jour quelque part.
En mai 2010, un développeur nommé Ethan Marcotte publie un article qui formalise une autre
approche et lui donne son nom, le responsive web design. Un seul site, une seule base de
code, qui s'adapte automatiquement à la place disponible. Plus de quinze ans plus tard,
c'est devenu la norme au point qu'on ne le nomme même plus.
Comment ça marche ?
Le responsive design repose sur trois piliers techniques, exactement ceux décrits à l'origine.
Les grilles flexibles
Au lieu de figer la largeur d'un élément en pixels, en décidant que cette colonne fera
400 pixels, on l'exprime relativement à l'espace disponible, en disant qu'elle occupera
la moitié de la largeur. Les éléments s'étirent ou se compriment alors d'eux-mêmes.
Sur un grand écran, tu verras peut-être trois articles côte à côte. Sur une tablette,
deux. Sur un téléphone, un seul, les autres passant dessous. Le contenu est rigoureusement
le même, c'est la disposition qui change.
Les media queries
Les media queries sont des règles conditionnelles écrites dans le CSS, le langage qui
décrit l'apparence d'un site. Elles appliquent des styles différents selon les
caractéristiques de l'affichage.
En version simplifiée, ça donne "si l'écran fait moins de 768 pixels de large, masque le
menu latéral et affiche un menu hamburger à la place". C'est exactement le mécanisme qui
permet à un site d'avoir une barre de navigation horizontale sur ordinateur et un menu
déroulant sur mobile.
Les largeurs auxquelles la mise en page bascule s'appellent les points de rupture, ou
breakpoints. On les choisissait autrefois en fonction des appareils du moment, ce qui
obligeait à tout revoir à chaque nouveau modèle. La bonne pratique aujourd'hui est de les
placer là où le design commence à se dégrader, indépendamment de toute marque de
téléphone.
Les images flexibles
Une image de 2000 pixels de large n'a aucun intérêt sur un écran qui en affiche 400. Non
seulement elle déborde, mais elle gaspille de la bande passante, donc du temps de
chargement et du forfait data.
Le responsive design dimensionne les images proportionnellement à leur conteneur. Mieux
encore, un site moderne fournit plusieurs versions du même visuel et laisse le navigateur
choisir la plus adaptée, une version légère pour le mobile, une version haute définition
pour le grand écran. On rejoint ici directement le chapitre sur la
performance web, où les images sont le premier
poste d'optimisation.
La balise viewport
Il manque une pièce à ce tableau, et c'est celle qu'on oublie le plus souvent. Par défaut,
un navigateur mobile fait semblant d'avoir un écran large, puis dézoome le résultat, ce
qui était une astuce indispensable pour afficher les vieux sites sans les casser.
Une ligne dans le code de la page lui demande d'utiliser la vraie largeur de l'appareil,
et c'est elle qui active tout le reste. Sans cette balise, tes media queries les mieux
écrites ne se déclencheront jamais et ton site apparaîtra en miniature. C'est le premier
truc à vérifier quand un site "responsive" ne l'est visiblement pas.
Mobile-first : penser petit d'abord
La bonne pratique établie est le mobile-first. On conçoit d'abord l'expérience pour le
plus petit écran, puis on l'enrichit à mesure que la place augmente.
Pourquoi dans ce sens ? Parce qu'il est bien plus facile d'ajouter du contenu quand on a
de l'espace que d'en retirer quand on n'en a plus. Partir du desktop mène presque toujours
au même résultat, un design mobile bricolé où des éléments se chevauchent, où des colonnes
disparaissent et où le menu devient un labyrinthe.
La contrainte est d'ailleurs salutaire. Un écran de téléphone force à hiérarchiser, à
décider ce qui compte vraiment et à éliminer le reste. Beaucoup de pages d'accueil
gagneraient à être conçues dans cet ordre.
Google a de son côté généralisé le mobile-first indexing, annoncé dès 2016 puis étendu
par vagues jusqu'à devenir la règle pour tous les sites. C'est la version mobile de ton
site qui sert de référence pour le référencement. Si des
contenus n'existent que sur la version bureau, ils sont invisibles pour le moteur.
Responsive ne veut pas dire identique. Un même contenu peut légitimement se présenter autrement selon le contexte, mais amputer la version mobile de fonctionnalités présentes ailleurs reste une mauvaise idée, aussi bien pour l'utilisateur que pour le référencement.
UX et UI : deux disciplines complémentaires
Quand on parle de responsive design, on parle vite d'UX et d'UI. Ces deux sigles sont couramment confondus alors qu'ils désignent des métiers différents.
L'UX (User Experience)
L'UX, c'est l'expérience globale vécue par l'utilisateur. Le parcours d'achat est-il
fluide ? Trouve-t-il facilement ce qu'il cherche ? Comprend-il sans réfléchir comment
revenir en arrière ?
L'UX ne se limite pas au visuel. Elle englobe la vitesse de chargement, la clarté des
messages d'erreur, le nombre d'étapes pour finaliser un achat, et même le contenu des
emails de confirmation. Un bon UX designer passe beaucoup de temps à observer de vrais
utilisateurs et à éplucher les données d'usage.
De mon expérience personnelle, les meilleures décisions UX ne viennent presque jamais de
l'intuition. Elles viennent de la gêne qu'on ressent en regardant quelqu'un galérer
pendant trois minutes sur une étape qu'on jugeait évidente.
L'UI (User Interface)
L'UI, c'est l'interface concrète, les couleurs, les typographies, les boutons, les
espacements, les icônes. Ce que l'utilisateur voit et touche.
Un bon UI designer produit un design system, un ensemble de composants réutilisables,
boutons, formulaires, cartes, fenêtres modales, accompagnés de règles cohérentes. C'est ce
qui garantit qu'une page de paramètres ressemble encore au site sur lequel on croyait être.
L'outil de référence du métier est Figma, qui permet de construire des maquettes
interactives que les développeurs traduisent ensuite en code.
En résumé, l'UX décide que le bouton d'achat doit être visible sans faire défiler la page et accessible en un clic. L'UI décide que ce bouton est vert, arrondi, et porte le texte "Ajouter au panier".
Le tactile change les règles
Un détail que les maquettes oublient volontiers. Une souris pointe un pixel, un doigt
couvre une surface d'environ un centimètre. Les zones cliquables doivent donc être
nettement plus grandes sur mobile, et suffisamment espacées pour qu'on ne déclenche pas
"Supprimer" en visant "Modifier".
Il n'y a pas non plus de survol sur un écran tactile. Toute information qui n'apparaît
qu'au passage de la souris est purement et simplement inaccessible au doigt. C'est
d'ailleurs un point commun avec l'accessibilité, où
les mêmes négligences pénalisent les mêmes personnes.
Les dark patterns : quand le design manipule
Tout ce travail d'UX et d'UI n'est malheureusement pas toujours bienveillant. Les dark patterns sont des choix de design délibérément trompeurs, conçus pour pousser l'utilisateur vers une action qu'il ne voulait pas faire.
- Le bouton caché : "Accepter tous les cookies" est gros, coloré, centré. "Refuser" est gris clair, écrit petit, relégué en bas.
- L'abonnement piège : deux clics pour s'inscrire, et pour résilier une page introuvable, trois confirmations et parfois un appel téléphonique.
- La fausse urgence : "Plus que 2 en stock" ou "3 personnes regardent ce produit" quand ces chiffres sont générés au hasard.
- La case pré-cochée : "Oui, je souhaite recevoir les offres de nos partenaires", déjà cochée, en espérant que tu passes à côté.
- La confirmation culpabilisante : le bouton de refus rédigé sous la forme "Non merci, je préfère payer plein tarif".
L'Union européenne s'est saisie du sujet. Le Digital Services Act interdit explicitement aux plateformes en ligne les interfaces conçues pour tromper ou manipuler les utilisateurs. Sur le volet consentement, le RGPD est encore plus ancien et plus net, un consentement doit être libre et donné par un acte positif, ce qui rend la case pré-cochée illégale depuis des années. L'écart entre le texte et la réalité des bannières que tu croises chaque jour te donnera une idée de la difficulté à faire appliquer tout ça.
Tester le responsive
Tu veux vérifier comment un site se comporte sur différentes tailles d'écran ? Pas besoin
d'acheter dix appareils.
Ouvre les outils de développement de ton navigateur, avec la touche F12 sur Chrome ou
Firefox, puis active l'icône représentant un téléphone et une tablette dans la barre
d'outils du panneau. Tu peux alors simuler n'importe quelle dimension et voir en direct
les menus se transformer, les colonnes s'empiler et les images se redimensionner.
Plus simple encore, et étonnamment efficace, réduis progressivement la largeur de ta
fenêtre de navigateur. Un site correctement construit se réorganise sans jamais faire
apparaître de barre de défilement horizontale.
Le simulateur reste une simulation. Il reproduit la taille de l'écran, pas la puissance du processeur, ni la qualité du réseau, ni l'imprécision d'un doigt. Un test sur un vrai téléphone d'entrée de gamme reste irremplaçable, et c'est souvent une expérience humiliante pour l'équipe qui a conçu le site sur des machines haut de gamme.