Rendre un site WordPress vraiment responsive

Quand votre client ouvre son site sur son mobile, trois jours après la livraison, il voit la différence entre un site qui rentre dans l’écran et un site vraiment responsive. Un site responsive reste lisible et utilisable à toutes les largeurs, y compris celles que personne n’a dessinées.

Cette différence se joue pendant l’intégration, sur une dizaine de décisions que la maquette ne tranche pas. Voici comment je les prends. Elles font partie de chaque intégration de maquettes que je livre aux agences.

Où placer les points de rupture ? Là où le contenu casse

La façon habituelle consiste à reprendre les largeurs des appareils du moment. Elle a un défaut : les appareils changent, le contenu reste. La méthode qui tient part du contenu.

1. Partir du contenu réelLes vrais titres, les vrais textes, les vraies images, sur la mise en page la plus étroite.
2. Faire varier la fenêtre progressivementSans viser de largeur d’appareil particulière.
3. Repérer le moment où quelque chose casseUn titre passe sur quatre lignes, trois colonnes deviennent illisibles, un tableau déborde.
4. Placer le point de rupture à cette largeur-làEt non à 768px parce que c’était la taille d’une tablette il y a dix ans.

Concrètement, un site vitrine bien construit demande deux ou trois points de rupture, rarement plus. Une grille produit peut en demander quatre. Au-delà de cinq, c’est en général le signe que la mise en page se bat contre elle-même.

Cette approche a un effet secondaire utile : le site continue de fonctionner sur les formats qui n’existaient pas au moment de l’intégration. Je contrôle ensuite chaque livraison à quatre largeurs, 360, 768, 1 280 et 1 920 pixels. Ces largeurs servent à vérifier le résultat. Les ruptures, elles, restent là où le contenu les demande.

Pourquoi écrire le mobile en premier, jusque dans le CSS

Écrire la version mobile en premier simplifie tout le reste, pour une raison technique.

En partant du petit écran, chaque règle ajoutée ensuite ne fait qu’enrichir. En partant du grand, chaque règle ajoutée doit annuler la précédente, et la feuille de style se remplit de corrections de corrections.

Le résultat se voit sur le poids et sur la maintenance. Un fichier écrit dans ce sens est plus court, et une modification demandée six mois plus tard ne casse pas trois autres écrans.

Images et typographie : les deux réglages qui pèsent le plus

Les images, premier poste de gâchis

C’est là que se perd la plus grande partie du temps de chargement sur mobile, et c’est le plus simple à corriger.

Une image affichée sur 400px de large mais envoyée en 2400px oblige le mobile à télécharger six fois trop de données, puis à les redimensionner. WordPress sait générer les tailles intermédiaires et proposer la bonne au navigateur, encore faut-il que les tailles déclarées correspondent aux usages réels du site.

Trois réglages font l’essentiel du travail :

• déclarer des tailles d’image alignées sur les emplacements réels du thème, plutôt que sur les valeurs par défaut,
• servir un format moderne compressé,
• différer le chargement de tout ce qui se trouve sous la ligne de flottaison, sans jamais différer l’image principale du haut de page, qui est justement celle que le visiteur attend.

Sur les images de fond en CSS, la vigilance est double : elles échappent aux mécanismes automatiques de WordPress et se gèrent à la main.

La typographie fluide

Les tailles de texte figées obligent à multiplier les points de rupture, uniquement pour ajuster des titres.

Une taille exprimée en fonction de la largeur de la fenêtre, bornée par un minimum et un maximum, règle le problème en une ligne. Le titre grandit progressivement entre les deux bornes, il ne saute plus d’une valeur à l’autre, et il n’a plus besoin de son propre point de rupture.

Deux garde-fous. Une borne basse assez haute pour rester lisible, jamais en dessous de la taille de lecture confortable. Et une longueur de ligne raisonnable sur grand écran : un paragraphe qui s’étire sur toute la largeur d’un écran de bureau devient pénible à lire, quelle que soit la taille du texte.

Ce que la maquette ne dit jamais

Six situations qui n’apparaissent sur aucune maquette et qui cassent souvent les intégrations livrées vite.

• Les textes longs. Un nom de client à rallonge, un titre d’article de douze mots. La maquette montre toujours le cas court.
• Les tableaux. Ils ne se réduisent pas. Soit ils défilent horizontalement dans leur propre conteneur, soit ils se réorganisent en lignes empilées. Il faut choisir, et ce choix appartient à la direction artistique.
• Les images au mauvais format. Le client déposera un portrait là où un paysage était prévu. Le cadrage doit être défini à l’avance.
• Le menu à plusieurs niveaux. Un sous-menu au survol ne fonctionne pas au doigt. Il faut un comportement au clic, et un moyen de refermer.
• Les zones tactiles. Une icône de 16px est impossible à viser sur un mobile. La zone cliquable doit être plus grande que le dessin.
• Les écrans très larges. Au-delà d’une certaine largeur, le contenu doit s’arrêter de s’étirer, sinon la lecture devient impossible.

Quand l’un de ces états manque, je vous le propose avant de l’intégrer.

Constructeurs de page : où ranger les réglages responsive

Les constructeurs de page proposent des réglages responsive par élément : une marge différente sur mobile, une taille de texte par appareil, un bloc masqué en dessous d’une certaine largeur. C’est pratique, et c’est aussi le chemin le plus court vers des dizaines de valeurs éparpillées que personne ne peut plus modifier globalement.

La règle que j’applique : les décisions structurantes vivent dans la feuille de style du thème enfant, les ajustements ponctuels dans le constructeur. Une couleur, une taille de titre ou un point de rupture se changent à un seul endroit et se répercutent partout.

Même prudence pour les blocs masqués sur mobile. Un bloc masqué est toujours téléchargé, il pèse toujours, et il disparaît pour un visiteur qui aurait pu en avoir besoin. Mieux vaut le déplacer ou le simplifier que le cacher.

La recette, sur de vrais appareils

Le mode responsive du navigateur sert à développer. Pour la recette, il ne suffit pas : il ne reproduit ni le clavier virtuel qui recouvre la moitié de l’écran, ni la barre d’adresse qui apparaît et disparaît au défilement, ni la façon dont le doigt masque ce qu’il touche.

Ce que je vérifie sur un vrai mobile, à chaque livraison :

• le remplissage complet d’un formulaire, clavier ouvert, en vérifiant que le champ actif reste visible,
• le menu, ouvert et refermé, y compris depuis un sous-niveau,
• le défilement sur les pages longues, à la recherche d’un débordement horizontal,
• l’affichage en paysage, que personne ne teste et que tout le monde utilise dans le train,
• la navigation au clavier, où chaque élément atteint doit rester visible à l’écran,
• les tableaux et les grilles, sur la largeur la plus étroite du marché.

Le débordement horizontal mérite une mention spéciale. C’est le défaut le plus courant et le plus visible : la page se décale légèrement sur le côté, une barre de défilement apparaît en bas, et le site donne tout de suite une impression de travail bâclé. La cause est presque toujours un élément unique qui dépasse, et il se trouve en quelques minutes.

• contrôlées à chaque livraison4 largeurs


• de recette avant de livrer24 points


• de corrections après votre recette1 passe


• de garantie30 jours

Ce que ça change pour votre agence

Un responsive fait dans cet ordre ne se refait pas. Il encaisse un nouvel écran, un texte plus long que prévu, une image déposée de travers, sans qu’il faille rouvrir la feuille de style.

Il évite aussi la série de retours qui arrive trois jours après la livraison, quand le client ouvre le site sur son propre mobile et découvre ce que personne n’avait regardé.

C’est inclus dans chaque intégration de maquettes, avec le contrôle au pixel et une passe de corrections après votre recette. La grille des agences est dans leur kit, et le poids des pages fait partie de ce que je corrige en suivi SEO.

« De tous les devs avec qui j’ai travaillé, Anthony est celui qui a intégré le design de mes maquettes de la façon la plus fidèle ! »

Lire le témoignage entier

« J’ai travaillé avec Anthony à plusieurs reprises sur des différents projets. De tous les devs avec qui j’ai travaillé, Anthony est celui qui a intégré le design de mes maquettes de la façon la plus fidèle ! Il est à l’écoute et disponible. Je recommande encore et toujours son travail ! »