Version mobile d'un site : 10 règles avec exemples avant/après
La plupart des visiteurs d'une boutique en ligne arrivent sur mobile, et c'est là qu'ils décident d'acheter. Voici 10 règles pour la version mobile avec des exemples avant/après et les tailles exactes de boutons et de texte selon Apple, Google et le WCAG.
Pourquoi la version mobile n'est-elle pas un site « réduit » ?
Sur mobile, on tape du doigt, on lit sur un petit écran et souvent d'une seule main. Ce qui est confortable sur ordinateur devient minuscule, serré et confus sur téléphone. De plus, Google indexe les sites selon leur version mobile : la recherche comme les ventes en dépendent.
10 règles avec exemples
1. Faites de grands boutons
On appuie avec le doigt, pas avec un curseur. Apple recommande une zone d'au moins 44 × 44 pt, Android 48 × 48 dp, et la norme d'accessibilité WCAG 2.2 fixe un minimum de 24 × 24 px.
2. Agrandissez le texte
Ce qui va sur ordinateur est illisible sur mobile. Le texte courant fait en général 16 px ou plus pour éviter de zoomer ; Lighthouse de Google signalait les pages où plus de 40 % du texte faisait moins de 12 px.
3. Soignez les espacements
Des blocs collés donnent un écran surchargé et bon marché. Il faut plus d'air qu'on ne le pense.
4. Empilez les boutons
Deux boutons côte à côte deviennent étroits sur mobile. Pleine largeur, l'un sous l'autre : plus faciles à toucher, moins d'erreurs.
5. Montrez qu'on peut faire défiler
Si des cartes défilent, cela doit se voir : le bord de la carte suivante, des points ou des flèches indiquent la suite.
6. Réduisez le menu
L'en-tête ne doit pas occuper la moitié de l'écran. Un en-tête compact avec logo et bouton menu laisse la place à l'essentiel.
7. Masquez le secondaire
Sur mobile, inutile de tout montrer : accordéons, onglets et « voir plus » allègent la page. Masquez sans supprimer : Google indexe la version mobile, le contenu doit être le même que sur ordinateur.
8. Rendez les contacts cliquables
Téléphone et e-mail doivent s'ouvrir d'un toucher : c'est le rôle des liens tel: et mailto:. Un bouton « Appeler » est encore plus simple.
9. Ne surchargez pas le premier écran
Il y a peu de place en haut : un titre, une courte explication et une action principale. Bannières, promotions et inscriptions plus bas.
10. Ne copiez pas l'ordinateur
La version mobile n'est pas un site réduit. On réordonne les blocs, trois colonnes deviennent une, on retire le superflu.
Metriverra montre comment convertissent les visiteurs sur mobile et sur ordinateur : vous vérifiez facilement si les améliorations mobiles ont rapporté des ventes.
En bref
- Boutons d'au moins 44 × 44 pt (Apple) ou 48 × 48 dp (Android) ; minimum WCAG 24 × 24 px.
- Texte courant d'au moins 16 px, avec des espacements entre blocs.
- Boutons pleine largeur empilés ; contacts cliquables.
- Premier écran : une action principale ; le secondaire en accordéons.
- Le mobile est une refonte, pas un site réduit ; même contenu que sur ordinateur.
Sources: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
