Site responsive : penser mobile d’abord

Vous ouvrez votre site sur votre ordinateur : tout est en place. Puis vous l'ouvrez sur votre téléphone : texte minuscule, menu impossible à toucher du pouce, bouton de contact qui sort de l'écran. Or c'est très probablement sur un téléphone qu'une partie de vos visiteurs vous découvre (vos statistiques donnent la vraie proportion pour votre site), et c'est aussi la version mobile de vos pages que Google lit en premier.

« Responsive », « adapté au mobile », « mobile-first » : ces mots sont souvent employés l'un pour l'autre. Ce guide les distingue, explique ce que Google fait de la version mobile, puis donne de quoi tester et corriger votre site sans être développeur.

Trois mots qu'on confond

• Responsive : une seule version du site, à la même adresse, dont la mise en page s'adapte à la largeur de l'écran (téléphone, tablette, ordinateur).
• Adapté au mobile (« mobile-friendly ») : un site simplement utilisable sur téléphone, quelle que soit la technique employée.
• Mobile-first : une façon de travailler. On conçoit d'abord l'écran de téléphone, le plus contraint, puis on l'enrichit pour la tablette et l'ordinateur.

Un site conçu mobile-first est responsive ; un site responsive n'a pas forcément été pensé mobile d'abord. Vous pouvez avoir un site qui « s'adapte » mais dont le contenu reste écrit pour le grand écran, avec des paragraphes interminables et douze entrées de menu.

Ce que fait Google de la version mobile

Google explore et classe les pages en s'appuyant sur leur version mobile : c'est ce qu'il appelle l'indexation mobile-first. Google précise que ce mode d'indexation ne donne pas, en soi, d'avantage de classement : il signifie simplement que la version qui compte est celle que voit un utilisateur de téléphone. Ses consignes se résument ainsi :

• Le même contenu sur mobile et sur ordinateur : textes, images, liens, données structurées. Ce qui n'existe que sur ordinateur risque de ne pas être pris en compte.
• Le responsive est le schéma recommandé : même code, même adresse, affichage adapté. C'est le plus simple à maintenir.
• Ne pas cacher le contenu principal derrière une interaction (balayage, clic) : Google ne fait pas ces gestes.
• Les mêmes consignes d'indexation (balises robots) sur les deux versions, sous peine de voir une page mal indexée.

Vérifier ce que Google voit de vos pages passe par la Search Console (voir le guide de la Search Console).

Tester son site sur mobile en quatre gestes

1. Ouvrez-le sur votre téléphone, puis sur celui d'un proche (iPhone et Android si possible), en navigation normale et non dans un simulateur.
2. Refaites le parcours de votre visiteur : trouver votre numéro, comprendre l'offre, envoyer un message. Notez chaque endroit où vous hésitez.
3. Mesurez la vitesse avec PageSpeed Insights, qui analyse la version mobile (voir lire un rapport PageSpeed Insights et les Core Web Vitals).
4. Consultez vos statistiques : la part des visites sur mobile et le comportement de ces visiteurs vous disent où concentrer l'effort.

Les erreurs mobile les plus fréquentes

• Du contenu qui disparaît sur mobile : un bloc, un tableau ou un texte présent sur ordinateur et absent sur téléphone.
• Un texte trop petit qui oblige à zoomer.
• Des éléments trop rapprochés : on touche le mauvais lien.
• Une fenêtre qui recouvre la page et se ferme mal : Google déconseille les fenêtres intrusives qui masquent le contenu.
• Des images trop lourdes qui ralentissent tout (voir choisir ses images).
• Un tableau plus large que l'écran : il doit défiler dans son cadre, pas faire déborder la page.
• Un numéro de téléphone non cliquable, alors que l'appel est souvent le premier geste attendu.

Mobile d'abord, ce n'est pas mobile seulement

Selon votre activité, une partie de vos clients consulte encore sur ordinateur, notamment pour comparer, lire un devis ou préparer un achat important. Le mobile-first fixe l'ordre de travail, il n'oublie pas le grand écran : la même page doit être claire sur les deux.

Sur WordPress : les pièges viennent après

La plupart des thèmes WordPress récents sont responsives. Le risque vient de ce qu'on ajoute ensuite : tableaux, images aux dimensions fixes, blocs personnalisés, extensions. Testez sur téléphone après chaque ajout important. Si vous confiez le site à un prestataire, exigez ce test sur de vrais appareils avant la validation (voir comment choisir une agence web) et inscrivez-le dans le cahier des charges.

À lire aussi : UX design : 15 principes pour un site clair ; Bonnes photos pour son site professionnel.