Vos clients cherchent un artisan, un commerce ou un prestataire depuis leur téléphone : dans la voiture, sur un chantier, entre deux rendez-vous. Si votre site est difficile à lire ou à utiliser sur un petit écran, ils partent en quelques secondes. Créer un site web adapté au mobile n’est donc plus une option : c’est la base.
Dans cet article, je vous explique ce que cela veut dire concrètement, les règles de conception que j’applique et comment vérifier si votre site est à la hauteur.
Pourquoi la version mobile de votre site passe en premier
Il y a deux raisons principales.
- Vos visiteurs : pour beaucoup de TPE, une grande partie des visites vient du téléphone. Vous pouvez vérifier votre propre répartition dans Google Analytics ou dans Site Kit si votre site est sous WordPress.
- Google : le moteur de recherche indexe désormais les sites à partir de leur version mobile. Si votre site mobile est incomplet ou pénible à utiliser, c’est cette version-là qui compte pour votre référencement.
Site responsive, site mobile ou application : quelle différence ?
- Le site responsive : un seul site dont la mise en page s’adapte automatiquement à la taille de l’écran. C’est la solution que je recommande dans la grande majorité des cas, et celle que j’utilise pour mes clients.
- Le site mobile séparé (souvent sur une adresse du type m.monsite.fr) : une deuxième version à maintenir. Cette approche est aujourd’hui dépassée pour une petite entreprise.
- L’application mobile : utile pour un service utilisé tous les jours, mais coûteuse et inutile pour présenter une activité et recevoir des demandes de devis.
Pour la conception d’un site vitrine ou d’une petite boutique en ligne, un site WordPress responsive bien construit suffit largement.
Les règles de conception d’un site adapté au mobile
Penser mobile d’abord
Je commence par la version téléphone, puis j’enrichis pour la tablette et l’ordinateur. Cette méthode, appelée « mobile first », oblige à garder l’essentiel : sur un petit écran, il n’y a pas de place pour le superflu. Le résultat est souvent plus clair sur toutes les tailles d’écran.
Une navigation simple
Un menu court, facile à ouvrir d’un pouce, avec quelques rubriques bien nommées. Si votre menu contient quinze entrées, il faut regrouper ou supprimer. Le visiteur doit trouver en deux gestes vos services, vos réalisations et le moyen de vous contacter.
Des textes lisibles sans zoomer
- une taille de texte confortable (je pars en général de 16 pixels pour le texte courant) ;
- un bon contraste entre le texte et le fond ;
- des paragraphes courts et des intertitres réguliers ;
- pas de texte important intégré dans une image.
Des boutons faciles à toucher
Un doigt est moins précis qu’une souris. Les boutons et les liens doivent être assez grands et assez espacés pour éviter les erreurs. Les outils de Google recommandent des zones de clic d’environ 48 pixels de côté. Les boutons importants, comme « M’appeler » ou « Demander un devis », doivent rester visibles sans chercher.
Le téléphone et les actions en un geste
Sur mobile, le numéro de téléphone doit être cliquable, tout comme l’adresse e-mail et, si vous recevez du public, l’itinéraire vers votre adresse. C’est souvent le chemin le plus court entre une recherche Google et un nouveau client.
Des images légères
Une photo de plusieurs mégaoctets ralentit fortement l’affichage, surtout en 4G dans une zone mal couverte. Je redimensionne et compresse les images, j’utilise des formats récents comme le WebP et je fais charger les images au fur et à mesure du défilement.
Des formulaires pensés pour le pouce
Peu de champs, des étiquettes claires et le bon type de clavier : pavé numérique pour le téléphone, clavier avec « @ » pour l’e-mail. Un formulaire pénible à remplir sur téléphone, c’est une demande de devis perdue.
Pas de fenêtres qui bloquent l’écran
Une pop-up qui couvre toute la page dès l’arrivée est encore plus gênante sur mobile que sur ordinateur. Google indique d’ailleurs que ce type de fenêtre intrusive peut nuire à l’expérience et donc au référencement. Si vous avez besoin d’un bandeau (cookies, newsletter), il doit rester discret et facile à fermer.
Comment tester la version mobile de votre site
- Sur de vrais téléphones : le vôtre, mais aussi celui d’un proche avec un autre modèle et un autre navigateur.
- Avec PageSpeed Insights, l’outil gratuit de Google : il donne un score de performance mobile et liste les points à corriger.
- Avec le mode « appareil » de Chrome (outils de développement) pour simuler différentes tailles d’écran.
- Dans la Search Console, le rapport sur les Core Web Vitals signale les pages lentes ou instables sur mobile.
Faites aussi le test le plus simple : trouvez votre numéro de téléphone et envoyez une demande de devis depuis votre téléphone, en moins d’une minute. Si ce n’est pas possible, il y a du travail.
Création de site mobile avec WordPress : ma façon de faire
Quand je crée ou refonds un site WordPress, la version mobile n’est pas une retouche de fin de projet. Je règle la mise en page, la taille des textes et l’ordre des blocs pour chaque format d’écran, puis je teste sur plusieurs téléphones avant la mise en ligne. Je surveille aussi le poids des pages, parce qu’un site adapté au mobile doit être rapide autant que lisible.
Un site bien conçu pour le mobile est aussi un site qui donne envie de vous contacter. J’en parle plus en détail dans cet article : créer un site web qui convertit.
Pour aller plus loin
- Découvrez comment je conçois les sites web pour les TPE et les artisans.
- Votre site est lent sur téléphone ? Voici que faire quand un site WordPress est lent.
- Votre site a plusieurs années ? Voici par où commencer pour une refonte.
- Vous êtes près de Marseille ? Je me déplace à Septèmes-les-Vallons, Allauch et Plan-de-Cuques.
UN PROJET EN TÊTE ? PARLONS-EN.
Pour aller plus loin
