Comment rendre un site Web accessible aux utilisateurs mobiles (étapes faciles) 

Si votre site WordPress est toujours réservé aux ordinateurs de bureau, vous perdez des visiteurs. Plus de la moitié des gens naviguent sur leur téléphone, et si votre site n'est pas adapté aux mobiles, ils le quitteront rapidement.

Je l'ai appris à mes dépens lorsque l'un de mes anciens sites, qui semblait parfait sur un ordinateur de bureau, s'est complètement effondré sur un téléphone portable. Le texte était minuscule, le menu ne fonctionnait pas et mon taux de rebond a grimpé en flèche. Après l'avoir corrigé, mon trafic et mes inscriptions se sont améliorés presque du jour au lendemain.

Dans ce guide, je vous montrerai exactement comment rendre un site web WordPress adapté aux mobiles. Il s'agit d'étapes simples que tout le monde peut suivre, même si vous n'avez jamais touché au code.

1. Vérifiez si votre site est déjà adapté aux mobiles

Avant de changer quoi que ce soit, vérifiez si votre site est déjà adapté aux mobiles. De nombreux thèmes WordPress récents sont réactifs par défaut, de sorte que vous avez peut-être déjà fait la moitié du chemin sans vous en rendre compte.

Le moyen le plus rapide de le vérifier est le test gratuit de convivialité mobile de Google. Collez votre URL, appuyez sur la touche Entrée et vous obtiendrez des résultats en quelques secondes.

Le rapport vous indique si votre site est satisfaisant, ainsi qu'une capture d'écran de son apparence sur un téléphone. Il suggère également des solutions si quelque chose ne fonctionne pas.

Lorsque j'ai effectué ce test sur l'un de mes anciens sites, les résultats m'ont ouvert les yeux. Les polices étaient trop petites, les boutons se chevauchaient et les menus ne s'ouvraient pas. Ce test m'a permis de dresser une liste précise des tâches à accomplir pour résoudre ces problèmes.

Si votre site ne passe pas, faites-en votre priorité. Même si c'est le cas, continuez à lire. Vous trouverez encore des moyens d'améliorer l'expérience mobile.

2. Choisir un thème WordPress adapté aux mobiles

Si votre thème actuel n'est pas adapté aux mobiles, la solution la plus rapide est de passer à un thème WordPress réactif. Un thème réactif s'adapte automatiquement à toutes les tailles d'écran, de sorte que les visiteurs n'ont pas à zoomer ou à défiler latéralement.

Vous pouvez trouver des options gratuites directement dans WordPress. Allez dans Apparence " Thèmes " Ajouter un nouveau et recherchez "Responsive". Vous verrez une série de thèmes adaptés aux téléphones portables que vous pouvez installer en un seul clic.

Lorsque j'ai testé cela pour la première fois sur l'un de mes anciens sites, le passage à un thème réactif a instantanément résolu la moitié de mes problèmes de mise en page. C'était l'amélioration la plus simple que j'aurais pu apporter.

Si vous préférez créer quelque chose d'unique, je vous recommande SeedProd. Il s'agit d'un constructeur de thème par glisser-déposer qui vous permet de concevoir votre propre thème WordPress réactif sans toucher au code.

Vous pouvez commencer par un modèle préétabli ou construire chaque section étape par étape. Quoi qu'il en soit, vous verrez vos modifications en direct dans l'éditeur visuel, et tout ce que vous créerez sera entièrement adapté à la mobilité.

Cela signifie que votre site Web aura une belle apparence et fonctionnera sans problème sur les téléphones, les tablettes et les ordinateurs de bureau, sans qu'aucune modification supplémentaire ne soit nécessaire.

3. Simplifiez votre menu de navigation

Les écrans des téléphones mobiles sont beaucoup plus petits que ceux des ordinateurs de bureau, de sorte que les menus longs et compliqués ne fonctionnent pas bien. Si les visiteurs doivent zoomer ou faire défiler l'écran latéralement pour trouver un lien, ils risquent d'abandonner.

La meilleure approche consiste à simplifier la navigation. Limitez votre menu à quelques éléments clés qui tiennent sur un seul écran. Il est ainsi plus facile pour les utilisateurs de se rendre rapidement là où ils veulent aller.

Lorsque j'ai simplifié l'un de mes propres menus en le ramenant à trois liens principaux, la différence a été énorme. Les utilisateurs ont passé plus de temps sur le site parce qu'ils pouvaient réellement trouver ce dont ils avaient besoin.

Si vous ne savez pas comment rendre votre menu réactif, consultez ce guide étape par étape sur la création d'un menu WordPress prêt pour les mobiles.

4. Veiller à ce que les informations importantes soient faciles à trouver

Lorsque les internautes visitent votre site sur un téléphone, ils recherchent généralement quelque chose de précis. Il peut s'agir d'une réponse rapide, de vos coordonnées ou même de l'itinéraire pour se rendre à votre entreprise.

Si ces informations sont cachées, ils partiront. Sur mobile, chaque pression supplémentaire est lente et frustrante.

Pensez aux détails dont vos visiteurs ont le plus besoin et veillez à ce qu'ils soient au premier plan. Voici quelques moyens simples d'y parvenir :

• Ajout d'une petite section FAQ avec des réponses rapides
• Intégrer une courte vidéo explicative
• Mise en évidence de vos principales caractéristiques ou de vos principaux services

Lorsque j'ai placé mes coordonnées et mes FAQ plus haut sur un site sur lequel je travaillais, le taux de rebond a immédiatement chuté. Les internautes n'ont pas eu à chercher les réponses, ils les ont vues instantanément.

Il n'est pas nécessaire de tout mettre sur votre page d'accueil, mais veillez à ce que les éléments essentiels soient évidents et faciles à atteindre sur mobile.

5. Utiliser des polices de grande taille et lisibles

Un texte minuscule sur un téléphone est presque impossible à lire. Si les visiteurs doivent pincer et zoomer pour voir votre contenu, ils ne resteront pas sur place.

En règle générale, le corps du texte doit avoir une taille d'au moins 14 à 16 px. Les titres et les boutons doivent être encore plus grands afin d'être faciles à lire et à toucher.

Privilégiez les polices propres et standard qui se chargent rapidement. Les polices personnalisées fantaisistes peuvent être agréables sur un ordinateur de bureau, mais sur un téléphone portable, elles peuvent ralentir votre site et rendre la lecture plus difficile.

Lorsque j'ai augmenté la taille des polices sur l'un de mes blogs, la différence a été instantanée : les taux de rebond ont chuté et les lecteurs sont restés plus longtemps sur les pages parce qu'ils pouvaient lire confortablement sur leur téléphone.

Pour plus de détails, consultez notre guide sur la typographie dans la conception de sites web.

6. Des formulaires de contact et d'optin courts

Les longs formulaires sont l'un des principaux obstacles à l'utilisation des téléphones mobiles. Taper de nombreux détails sur un petit écran est frustrant et la plupart des gens ne terminent pas.

Examinez vos formulaires et demandez-vous si chaque champ est vraiment nécessaire. Par exemple, si vous créez une liste d'adresses électroniques, vous n'avez généralement besoin que d'un nom et d'une adresse électronique.

Si votre objectif est de réaliser des ventes, les formulaires de paiement doivent être aussi courts que possible : il suffit de fournir les informations de facturation et de livraison. Demander des détails supplémentaires ajoute de la friction et augmente l'abandon du panier.

Un jour, j'ai réduit le formulaire d'inscription d'un client de six à deux champs, et les conversions ont presque doublé. Sur mobile, c'est toujours le plus court qui l'emporte.

7. Faites en sorte que vos pages d'atterrissage soient adaptées aux mobiles

Les pages d'atterrissage sont l'endroit où se produisent la plupart des conversions, mais si elles ne fonctionnent pas bien sur mobile, vous laissez de l'argent sur la table. J'ai vu des pages qui semblaient parfaites sur un ordinateur de bureau s'effondrer complètement sur un téléphone - boutons coupés, texte se chevauchant et formulaires impossibles à remplir.

La solution la plus simple est d'utiliser un constructeur de pages WordPress avec des contrôles mobiles intégrés. De cette façon, vous pouvez créer une page une seule fois et savoir qu'elle s'affichera correctement sur tous les écrans.

SeedProd simplifie cette tâche. Il comprend une bibliothèque de modèles de pages d'atterrissage réactives que vous pouvez importer en un seul clic. À partir de là, vous pouvez tout personnaliser dans l'éditeur par glisser-déposer - aucun code n'est nécessaire.

Ce que j'aime le plus, c'est que SeedProd vous permet de basculer instantanément entre l'affichage sur ordinateur et l'affichage sur mobile. Vous pouvez ajuster l'espacement, la taille des polices et l'emplacement des boutons spécifiquement pour les petits écrans, le tout à partir de la même page.

Avant de publier, vous pouvez prévisualiser la version mobile en direct et y apporter des modifications sur place. Vous pouvez ainsi lancer votre site en toute confiance, en sachant que votre page sera convertie à la fois sur ordinateur et sur mobile.

8. Modifier la taille et l'emplacement de votre bouton CTA

Vos boutons d'appel à l'action (CTA) sont la partie la plus importante de votre page, mais sur mobile, ils se perdent souvent. Si les visiteurs ne peuvent pas les voir ou les toucher facilement, vous manquerez des conversions.

Faites en sorte que vos boutons soient suffisamment grands pour être touchés avec le pouce et placez-les à l'endroit où les utilisateurs font défiler naturellement les pages, en général vers le milieu ou le bas de l'écran. Évitez d'empiler trop de CTA sur une même page, car cela crée de la confusion.

Une étude a montré que sur plus de la moitié des sites web, il faut plus de trois secondes pour trouver les boutons CTA. Si le vôtre est tout de suite évident, vous avez déjà un avantage.

Une fois, j'ai déplacé un bouton d'inscription plus haut sur une page d'atterrissage et j'ai doublé les conversions sur mobile. Parfois, un simple changement d'emplacement fait la plus grande différence.

9. Supprimer ou simplifier les fenêtres pop-up mobiles

Les fenêtres contextuelles fonctionnent bien sur les ordinateurs de bureau, mais sur les téléphones portables, elles font souvent plus de mal que de bien. Sur les petits écrans, il est difficile de les fermer et, si l'utilisateur appuie au mauvais endroit, il risque d'être envoyé par erreur sur une autre page.

La meilleure solution consiste à faire en sorte que les fenêtres contextuelles soient légères et discrètes. Au lieu d'une fenêtre contextuelle en plein écran, essayez une barre d'accueil flottante ou une petite fenêtre coulissante qui ne bloque pas toute la vue.

Sur un site avec lequel j'ai travaillé, le remplacement d'une grande fenêtre d'entrée par une petite barre inférieure a permis de réduire les plaintes et d'améliorer les conversions. Les utilisateurs pouvaient continuer à naviguer sans se sentir interrompus.

Si vous voulez plus d'idées, voici un guide sur les meilleures pratiques en matière de popups mobiles d'OptinMonster, qui couvre les stratégies qui fonctionnent sans frustrer les visiteurs mobiles.

10. Utiliser des plugins WordPress adaptés aux mobiles

Tous les plugins WordPress ne sont pas conçus pour les téléphones portables. Choisir les bons peut faire une grande différence dans la fluidité de votre site sur un téléphone.

Recherchez des plugins légers, réactifs et testés sur de petits écrans. Voici quelques bonnes options :

• Plugins de formulaires adaptés aux mobiles
• Plugins responsives pour les cadeaux ou les concours
• Plugins de flux de médias sociaux redimensionnés pour les mobiles
• Plugins de mise en cache WordPress pour un chargement plus rapide
• Plugins de menus réactifs

Sur l'un de mes propres sites, le passage à un plugin de formulaire plus léger a permis de réduire de moitié le temps de chargement sur mobile. L'expérience a été plus fluide et les conversions ont immédiatement augmenté.

Vous pouvez voir d'autres recommandations dans ce tour complet des meilleurs plugins mobiles WordPress.

11. Faire de la vitesse du site web une priorité

La lenteur d'un site est un facteur décisif sur mobile. Des études montrent qu'un délai de trois secondes peut inciter plus de la moitié des visiteurs à quitter le site. Sur les petits écrans, où les gens s'attendent à des résultats instantanés, la vitesse est encore plus importante.

Le moyen le plus simple de maintenir la rapidité de votre site est d'utiliser un design épuré et d'éviter tout encombrement inutile. Chaque script, image ou plugin supplémentaire allonge le temps de chargement.

Voici quelques moyens éprouvés d'améliorer la vitesse de votre site:

• Redimensionner et compresser les grandes images
• Utiliser un réseau de diffusion de contenu (CDN)
• Activer le chargement paresseux pour les images et les vidéos
• Maintenir WordPress, les thèmes et les plugins à jour
• Minifier les fichiers CSS et JavaScript
• Réduire les processus lourds en arrière-plan

Lorsque j'ai optimisé les images et ajouté un CDN sur l'un de mes sites, les temps de chargement mobile ont diminué de moitié. Le taux de rebond a immédiatement baissé et les utilisateurs ont passé plus de temps sur chaque page.

Pour des conseils plus détaillés, consultez ce guide ultime sur la vitesse et les performances de WordPress.

FAQ sur l'adaptation d'un site web à la mobilité

J'espère que cet article vous a aidé à apprendre comment rendre mobile un site web qui ne fonctionne que sur ordinateur. Vous pourriez aussi aimer cet article sur les meilleurs plugins SEO pour WordPress.

Pendant que vous êtes ici, n'oubliez pas de nous suivre sur Facebook, Twitter et YouTube pour obtenir d'autres conseils et tutoriels utiles.