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. Et plutôt que de débattre de largeurs théoriques, ouvre ton outil
d'analytics, il te dira les tailles d'écran réelles de ton
audience, et souvent que le vieux téléphone que tout le monde ignore pèse dix pour cent des visites.
Le même mécanisme sert à bien plus que la largeur. Le système d'exploitation transmet au site les
préférences de la personne, mode sombre, animations réduites, texte agrandi, et le CSS peut y répondre avec
les mêmes règles conditionnelles. C'est un prolongement direct du responsive, et un pont naturel vers
l'accessibilité. Il existe même une règle pour l'impression, le
parent pauvre absolu du web, qui décide de ce qu'il advient d'une facture ou d'un billet quand quelqu'un
appuie sur imprimer.
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.
Il existe un monde où tout ce qui précède ne s'applique pas, celui des emails. Chaque logiciel de messagerie a ses propres limites, certains ignorent la plupart des règles CSS modernes, et un email responsive se construit avec des techniques d'un autre âge, des tableaux imbriqués et des styles écrits en ligne. Une newsletter qui s'affiche bien partout demande plus de travail qu'une page web, et c'est pour ça que les outils d'emailing imposent leurs propres gabarits.
Responsive, UX et UI
Le responsive design est une affaire de mise en page. Il dit comment les éléments se réorganisent quand la
place change, pas si l'écran obtenu est agréable, compréhensible ou honnête.
Ces questions-là relèvent de deux disciplines voisines et constamment confondues, l'UX et l'UI, auxquelles
le guide consacre le chapitre suivant. Tu y trouveras aussi ce que le
tactile change aux règles du jeu, et ce qui se passe quand le design se met à manipuler.
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.