Vérifier que son site est vraiment responsive

Le mot figure sur presque tous les devis et toutes les offres de créateurs de sites : responsive, c'est-à-dire capable de s'adapter à l'écran de chaque visiteur, du grand moniteur au petit téléphone. Entre la promesse et la réalité se glissent pourtant un menu qui ne s'ouvre pas, un formulaire coupé ou un texte minuscule. Dix minutes suffisent pour savoir si votre site responsive mérite vraiment ce nom.

Ce que « responsive » veut dire

Un site responsive présente le même contenu, à la même adresse, sur tous les appareils. Seule la disposition change selon la largeur de l'écran : les colonnes s'empilent, les images se redimensionnent, le menu se replie derrière une icône. Une ligne de code demande au navigateur du téléphone de caler la page sur la largeur de l'écran ; sans elle, il affiche une version réduite de la page d'ordinateur, qu'il faut agrandir du bout des doigts.

Deux approches plus anciennes subsistent : la version mobile séparée, à une adresse du type m.votre-site.fr, souvent moins complète, et le site conçu pour ordinateur, qui rétrécit simplement sur téléphone. Méfiez-vous aussi d'un piège fréquent : un modèle responsive ne garantit pas un site responsive. Un tableau trop large, une image chargée de texte ou un module extérieur à largeur fixe suffisent à casser l'affichage d'une page.

Pourquoi le téléphone passe en premier

Pour un restaurant, un commerce ou un artisan, une grande partie des visites, souvent la majorité, arrive depuis un téléphone : un client cherche une adresse dans la rue, compare deux artisans entre deux rendez-vous, suit un lien depuis Instagram. Votre outil de statistiques indique la répartition par type d'appareil : consultez-la avant de juger votre site sur un écran d'ordinateur.

Google, de son côté, explore et classe les sites à partir de leur version mobile. Ce qui manque ou s'affiche mal sur téléphone pèse donc aussi sur votre référencement, comme l'explique l'article sur l'indexation mobile.

Le test des dix minutes

Prenez votre propre téléphone, coupez le wifi pour naviguer en données mobiles et ouvrez votre site depuis une recherche Google, comme un client. Gardez une note ouverte pour consigner chaque problème, avec une capture d'écran.

Minutes 1 à 3 : la page et le menu

Faites glisser la page vers la gauche : elle ne doit ni se décaler ni laisser apparaître une bande vide sur le côté.
Ouvrez le menu : chaque rubrique se lit, se touche sans viser, et le menu se referme facilement.
Testez les sous-rubriques : un écran tactile ne connaît pas le survol de la souris, et un menu qui en dépend reste bloqué.
Observez l'en-tête : s'il reste fixé en haut, il ne doit pas occuper une part excessive de l'écran.

Minutes 4 à 6 : les boutons et les liens

Touchez chaque bouton principal avec le pouce, sans zoomer.
Vérifiez que deux liens voisins ne sont pas collés au point de faire toucher le mauvais.
Touchez le numéro de téléphone, qui doit lancer l'appel, puis l'adresse, qui doit ouvrir l'itinéraire.

Minutes 7 à 9 : un formulaire jusqu'au bout

Remplissez votre formulaire de contact ou de réservation : le bon clavier doit apparaître, avec les chiffres pour le téléphone et l'arobase pour l'e-mail.
Vérifiez que le clavier ne cache ni le champ en cours ni le bouton d'envoi.
Commettez une erreur volontaire pour voir si le message s'affiche lisiblement, puis envoyez pour de bon.
Si la réservation passe par un module extérieur, il doit tenir dans la largeur de l'écran, calendrier compris.

Minute 10 : texte agrandi et écran tourné

Dans les réglages du téléphone, augmentez la taille du texte, comme le font beaucoup de personnes qui voient mal, puis rechargez le site : le texte doit grossir sans se chevaucher ni se couper. Tournez ensuite le téléphone à l'horizontale et vérifiez que la page reste lisible, en-tête compris. Essayez enfin d'agrandir une photo du bout des doigts : un site qui bloque le zoom gêne les malvoyants, comme le rappelle l'article sur l'accessibilité numérique.

Les défauts les plus courants

Ce test fait souvent apparaître les mêmes problèmes :

une grille de tarifs ou une image trop large, qui fait déborder toute la page ;
une affiche, une carte ou des horaires publiés en image, illisibles sans zoom ;
une vidéo, un plan ou un module d'avis intégré avec une largeur fixe ;
une fenêtre surgissante dont la croix de fermeture sort de l'écran ;
des blocs masqués sur téléphone pour « alléger » la page, avec des informations utiles dedans ;
des espaces ou des retours à la ligne ajoutés à la main, parfaits sur ordinateur et bancals sur mobile.

Pensez aussi aux écrans intermédiaires. Sur une tablette, ou dans une fenêtre de navigateur réduite, certains sites affichent une mise en page hybride, ni tout à fait mobile ni tout à fait ordinateur.

Corriger, ou repartir sur de bonnes bases

Une partie des défauts se corrige sans toucher au modèle : remplacer une image de texte par du vrai texte, transformer un tableau en liste, régler la largeur d'un module, supprimer une fenêtre surgissante. Le reste relève du thème ou du code : envoyez à votre prestataire la liste des problèmes, captures à l'appui, en précisant le modèle de téléphone.

Sur ordinateur, les navigateurs proposent dans leurs outils de développement un mode qui simule différents écrans : pratique pour vérifier une correction, il ne remplace pas un vrai téléphone dans la main. Une fois les corrections faites, observez quelques clients en situation réelle, selon la méthode pour faire tester son site par de vrais clients. Si le site a été conçu pour les seuls ordinateurs, une refonte coûte parfois moins cher qu'une accumulation de rustines : le configurateur de devis vous donne un prix ferme pour comparer.

Votre plan de vérification

Faites le test des dix minutes aujourd'hui sur votre téléphone, puis sur celui d'un proche d'une autre marque.
Corrigez vous-même ce qui relève du contenu, et transmettez le reste à votre prestataire avec vos captures.
Refaites le test après chaque ajout important, nouvelle page ou nouveau module, et au moins une fois par an.