Responsive design : c'est quoi, et comment savoir si votre site l'est

Le responsive design, c’est le mot que votre prestataire emploie pour dire une chose simple : votre site doit être aussi lisible sur un téléphone que sur un écran d’ordinateur, sans que vous ayez deux sites à entretenir. Le terme fait technique, la vérification tient dans un geste : sortez votre téléphone, tapez votre métier et votre ville, regardez ce que trouve votre client.

« Responsive design » : ce que le mot veut dire, en clair

Une mise en page en proportions, pas en centimètres

Un site non responsive est dessiné pour une largeur fixe, celle d’un écran d’ordinateur. Sur un téléphone, cette page ne rétrécit pas : elle se retrouve entière dans une fenêtre trois fois trop petite. D’où les symptômes que vous connaissez : écarter deux doigts pour lire, une page qui déborde sur les côtés, un menu qui recouvre le texte.

Un site responsive fait l’inverse : la mise en page est construite en proportions. Les colonnes se replient, les images se recadrent, le menu devient un bouton.

Pourquoi Google vous note sur votre version mobile

Google applique le mobile-first indexing : il analyse et note votre site à partir de sa version mobile. La version que vous validez au bureau n’est donc pas celle qui décide de vos positions, et un site impeccable sur ordinateur mais brouillon sur téléphone est jugé sur le second.

Si votre version mobile masque des paragraphes, tronque un menu ou remplace du texte par une image, c’est cette version amputée que le moteur retient. Le contenu doit rester le même des deux côtés : seule sa présentation change.

Le vrai juge, c’est le contexte du visiteur

Vos clients vous découvrent debout, pressés, avec un pouce pour toute souris, le soleil sur la vitre et un réseau moyen. Traiter le responsive comme une finition revient à valider un véhicule sans sortir du garage.

Responsive, adaptatif, mobile-first : trois mots pour trois choses

Ces trois termes circulent ensemble et se font confondre, y compris dans des devis. Ils ne désignent pas la même chose.

Le responsive : une seule mise en page qui s’étire

Le responsive décrit le résultat : une mise en page fluide qui s’adapte à toutes les largeurs, sans seuil de rupture visible. Un seul gabarit, un seul contenu, une seule adresse à faire vivre. C’est ce que votre prestataire doit livrer par défaut, sans que vous ayez à le demander.

L’adaptatif : des gabarits figés, et ce qui tombe entre eux

L’adaptatif (adaptive) est une autre façon d’y arriver : plusieurs gabarits figés, servis selon des tailles prédéfinies. Il fonctionne, mais il vieillit mal, parce qu’un format non prévu tombe entre deux gabarits. Chaque nouveau modèle de téléphone est un pari sur une liste écrite il y a des années.

Le mobile-first : une méthode de conception, pas une technique

Le mobile-first, enfin, n’est pas une technique mais une méthode : dessiner d’abord la version téléphone, la plus contrainte, puis élargir vers les grands écrans. C’est elle qui fait la différence, et c’est elle qui manque le plus souvent.

Partir du petit écran oblige à trancher tôt : quel message en premier, quel bouton, quelle information indispensable. Le responsive fait donc partie de ce qui rend un site d’entreprise efficace, dès le cadrage de l’arborescence.

Le test du pouce : trois minutes pour juger votre site

Pas besoin d’être développeur. Passez chaque point sur votre site, votre propre téléphone à la main.

• Un texte lisible sans zoomer : si vous devez écarter deux doigts pour lire, le visiteur aussi, et il ne le fera pas.
• Des boutons taillés pour un pouce, pas pour un curseur : assez gros, assez espacés pour ne pas cliquer à côté.
• Un numéro cliquable qui lance l'appel en un tap, jamais un numéro qu'il faut sélectionner et recopier.
• Un menu qui ne cache pas l'essentiel : coordonnées, prestations et bouton de contact en un ou deux touchers.
• Un formulaire court : sur mobile, chaque champ en trop est un abandon. Demandez le minimum pour rappeler la personne.
• Aucun défilement horizontal : si la page déborde sur les côtés et qu'il faut la faire glisser, elle n'est pas responsive.

La cible tactile : pourquoi vos boutons se ratent

Une souris pointe un pixel, un pouce couvre une surface, et cette surface est large. Un bouton doit donc être assez grand pour être atteint sans viser, et surtout assez isolé de ses voisins. Les critères d’accessibilité du W3C fixent une cible d’au moins 24 pixels CSS de côté ; les guides d’Apple et de Google recommandent plus large.

D’où la règle qui évite les dégâts : deux actions différentes ne doivent jamais se toucher. Un bouton d’appel accolé à un lien de réseau social, et le visiteur déclenche la mauvaise. Il ne se dira pas qu’il a mal visé, il se dira que votre site ne marche pas.

Le formulaire au pouce : chaque champ se paie

Sur ordinateur, un champ supplémentaire coûte une seconde. Sur téléphone, il coûte un clavier qui recouvre la moitié de l’écran, une correction automatique qui se trompe et un doigt qui ressort du champ.

Trois réglages suffisent. Demandez le strict minimum pour rappeler la personne. Déclarez le type de chaque champ, pour que le téléphone ouvre le clavier numérique sur un numéro et le clavier à arobase sur un e-mail. Et laissez une seule colonne : deux champs côte à côte se ratent l’un l’autre.

Le menu replié : ce qu’il ne doit jamais enfermer

Le menu replié en bouton est la solution normale sur petit écran. Le problème n’est pas le repli, c’est ce que le repli avale : un visiteur qui doit ouvrir un menu, faire défiler et choisir dans une liste de quatorze entrées pour trouver votre numéro abandonne avant la troisième étape.

Sortez donc du menu les deux ou trois actions qui comptent : appeler, venir, demander un devis. C’est un arbitrage de contenu, et il se prend quand le plan du site s’écrit.

Sur un petit écran, ce qui reste et ce qui saute

Le mobile-first se résume à une série de choix de contenu. Voici comment nous les tranchons, dans cet ordre.

Ce qui reste en haut, quoi qu’il arrive

Trois éléments ne descendent jamais sous la ligne de flottaison : ce que vous faites, où vous êtes, comment vous joindre. Un visiteur doit y répondre sans faire défiler une seule fois. Le reste peut attendre, y compris votre plus belle photo. Ajoutez-y les deux boutons qui se touchent en un geste : le numéro qui lance l’appel, l’itinéraire qui ouvre la carte.

Ce qui saute sans que personne le regrette

Le carrousel d’accueil, dont personne ne voit la deuxième image. Le bandeau animé, qui retarde la seule information cherchée. Les colonnes latérales, qui atterrissent tout en bas et n’y sont jamais lues. Les icônes de réseaux sociaux en haut de page, qui font sortir le visiteur avant qu’il ait rien lu. Aucune de ces suppressions n’appauvrit la page : elles enlèvent ce qui, sur téléphone, ne rendait déjà aucun service.

Ce qui se replie plutôt que de disparaître

Entre garder et supprimer existe une troisième voie, souvent la bonne. Un long tableau de prestations devient une liste dépliable. Une carte interactive lourde devient une image cliquable qui ouvre l’application de navigation. Une galerie de trente photos devient six photos et un lien vers le reste.

La règle : le contenu reste présent dans la page, donc lisible par le moteur, mais il ne s’impose plus au premier coup d’œil.

Ce qu’un site internet responsive ne règle pas

La vitesse de chargement est un chantier voisin

Un site peut être parfaitement responsive et rester lent. Les confondre coûte cher : vous refaites la mise en page alors que le problème était le poids des images. La rapidité de chargement se traite à part, dans le guide sur le temps de chargement et son effet sur le référencement.

Le symptôme les distingue. La page s’affiche correctement mais lentement : c’est la performance. Elle s’affiche vite et mal cadrée : c’est le responsive. Elle est lente et mal cadrée : commencez par la mise en page, elle décide de ce qu’il faut charger.

La conversion est un autre métier

Un site responsive n’est pas pour autant un site qui convertit. Il rend la page utilisable, il ne décide pas de ce qu’elle demande au visiteur. Le bouton d’appel, la place du formulaire, la promesse en haut de page relèvent d’un autre travail, celui du taux de conversion.

Le texte, lui, ne rétrécit pas tout seul

Le responsive réorganise la mise en page ; il ne réécrit pas vos paragraphes. Un pavé de quinze lignes conçu pour une colonne large devient, sur téléphone, un mur que personne ne remonte. Un tableau à sept colonnes reste illisible, quelle que soit son adaptation.

Écrire pour le petit écran fait donc partie du travail : phrases courtes, intertitres fréquents, une idée par paragraphe. C’est l’une des bonnes pratiques de développement qui se décident avant la première ligne de code, et c’est le point de départ de toute refonte de site internet : savoir si vous réparez une mise en page ou si vous reconstruisez des fondations.

Votre site sera dessiné pour le pouce avant l’écran

Pour les commerces, artisans et PME de l’Hérault et du Gard, nos maquettes commencent par l’écran le plus petit : textes lisibles sans zoom, boutons dimensionnés pour le pouce, formulaires courts, numéro qui appelle en un tap, et une recette sur de vrais appareils avant la mise en ligne. Le tout tout inclus, avec un interlocuteur unique, et vous êtes propriétaire de votre site. Notre page création de site internet à Montpellier détaille la méthode.