Votre site a été validé sur un écran 27 pouces. Vos visiteurs sont sur mobile.

La maquette est présentée sur un grand écran, en réunion, par vidéoprojecteur. Elle est validée là. Le site est recetté dans les mêmes conditions.

Ce n’est l’appareil de presque aucun visiteur.

Ce que le grand écran ne montre pas

Les colonnes qui s’empilent mal. Une mise en page à trois colonnes devient trois blocs verticaux dont l’ordre n’a pas été pensé. L’élément important se retrouve en troisième position, après deux écrans de défilement.

Les cibles trop petites. Un lien de douze pixels se clique à la souris, pas au pouce. Deux liens adjacents séparés de quatre pixels produisent des erreurs de sélection systématiques.

Les tableaux. Un tableau de sept colonnes ne rentre pas. Sans traitement, il déborde et provoque un défilement horizontal de toute la page — ce qui casse la lecture de tout le reste.

Les formulaires. Le clavier occupe la moitié de l’écran. Le champ en cours de saisie passe sous le clavier, le bouton d’envoi est inatteignable, et le type de clavier proposé n’est pas adapté au champ.

Le survol. Un menu ou une info-bulle qui apparaît au survol n’existe pas au doigt. Toute information accessible uniquement ainsi est perdue.

L’ordre de recette qui évite les mauvaises surprises

Sur téléphone d’abord, sur grand écran ensuite.

L’inverse produit systématiquement le même effet : la version mobile est traitée comme une adaptation, en fin de projet, avec le budget restant. Alors qu’elle est la version majoritaire.

Les tests qui prennent dix minutes

Sur un vrai téléphone, pas dans une fenêtre réduite :

• parcourir un formulaire complet, du premier champ à la confirmation ;
• augmenter la taille de police système au maximum et vérifier qu’aucun texte n’est tronqué ni aucun bouton inatteignable ;
• passer en mode paysage ;
• couper le Wi-Fi et charger la page en données mobiles.

Le test de taille de police est le plus révélateur, et le moins pratiqué. Une part non négligeable des utilisateurs augmente cette taille, et beaucoup de mises en page se cassent alors.

Ce que la fenêtre réduite ne reproduit pas

Réduire la fenêtre du navigateur teste la largeur, et rien d’autre. Pas le clavier virtuel, pas le doigt, pas la latence du réseau mobile, pas la lenteur du processeur, pas le mode économie de données.

C’est un premier filtre utile. Ce n’est pas une recette.