10 astuces pour rendre un site web mobile

Rendre un site web mobile, c’est un mix d’optimisations techniques et d’améliorations éditoriales. Voici une check-list des 10 actions à effectuer pour rendre son site internet responsive et mobile-friendly, autrement dit faciliter la navigation sur téléphone mobile et sur tablette numérique.

Lors d’une visite sur votre site internet depuis votre mobile, vous vous apercevez que cette interface mobile n’est pas adaptée : problèmes d’affichage, site non-intuitif, texte déplacé. C’est simplement que votre template (thème) n’est pas responsive ! Autrement dit, il n’est pas adapté pour être vu depuis une tablette ou un smartphone mais uniquement sur le web. Avec nos quelques conseils simples, vous optimiserez ainsi votre site.

75 % des Français sont équipés d’un smartphone, selon le Baromètre du numérique 2018 – 18ème édition, de l’ARCEP (Autorité de Régulation des Communications Electroniques et des Postes), soient plus de 34 millions de mobinautes. Et Google a annoncé qu’il allait baser son indexation sur les versions mobiles des sites internet. Il est donc urgent de penser mobile-first !

Rassurez-vous, la technique peut être très simple si votre site dispose d’un CMS (Content Management System) type WordPress. L’éditorial dépend, quant à lui, surtout de votre vision marketing et de vos capacités rédactionnelles. Toutes les astuces qui suivent n’ont pas été réalisées par un développeur, mais par de « simples » rédacteurs web qui maîtrisent WordPress.

1. Choisir un thème adapté au mobile

Lorsque vous achetez un thème (ou template) pour personnaliser la maquette de votre site web, vérifiez qu’il soit bien responsive, c’est-à-dire que le contenu s’adapte correctement à la taille des différents écrans. Pour le vérifier, il suffit d’afficher le site démo du thème sur votre navigateur desktop puis de réduire la taille de la fenêtre avec la souris : si le contenu « suit », autrement dit si les éléments (menu, textes, photos, etc.) s’adaptent pour rester lisibles, le thème est bien responsive.

Le thème doit aussi être mobile-friendly, c’est-à-dire que la navigation est conçue pour être utilisée avec des gros doigts sur un petit écran. Les menus doivent rester utilisables, les liens doivent être suffisamment espacés, etc. Pour le vérifier, copiez-collez l’URL du site web dans le test d’optimisation mobile de Google. La réponse s’affiche rapidement à l’écran, sans avoir besoin de créer de compte.

Pour le site Editoile, le thème WordPress n’a pas changé, car il était déjà responsive et mobile-friendly.

2. Alléger les images

Si elles sont trop grandes et trop lourdes, les images peuvent ralentir le téléchargement des pages et faire fuir les mobinautes. Les images mettent en effet plus de temps à s’afficher sur mobile avec une connexion sans fil, alors qu’elles s’affichent correctement sur un desktop avec une connexion filaire.

Il existe des extensions WordPress qui permettent d’alléger automatiquement toutes les images de son site, comme Imagify. Vous pouvez aussi formater vos images avant de les téléverser sur votre site en utilisant des outils gratuits comme Photo Réducteur (un petit logiciel à installer sur son ordinateur) ou Tinyjpg (en cliquer-glisser en ligne).

Vérifier que vos images restent lisibles sur un petit écran mobile. En effet, certains thèmes diminuent fortement la taille des images, quand d’autres les recadrent en zoomant automatiquement sur le centre ou le haut de l’image. Le résultat est parfois incompréhensible.

Pour le site Editoile, nous avons redimensionné toutes les photos des pages principales (accueil, agence, services, etc.) à 1200 pixels de large comme le préconise Facebook pour que l’image s’affiche en grand lorsqu’un internaute décide de partager le lien sur son profil. Nous avons aussi allégé les photos à moins de 50 Ko chacune.

3. Accélérer le téléchargement des pages

Si les pages s’affichent trop lentement, le mobinaute fuit ! Pour voir où vous en êtes niveau rapidité, Google propose un outil gratuit qui permet de tester la vitesse de chargement de son site sur mobile : Test My Site. L’outil calcule en secondes le temps d’affichage d’une URL donnée sur mobile et donne des conseils (très) techniques pour l’améliorer.

La mise en cache est une optimisation classique pour accélérer l’affichage d’un site web. Le principe est simple : lorsqu’une page web s’affiche, de nombreuses données sont calculées. Il s’agit d’enregistrer les données récurrentes pour éviter d’avoir à les recalculer lors d’un nouvel affichage, et donc de limiter les requêtes du serveur, et donc d’afficher plus rapidement les pages. Si vous avez un site WordPress, installez des extensions dédiées comme WP Rocket (payant) ou WP Super Cache (gratuit).

Profitez-en pour faire le ménage dans vos extensions. Certaines extensions WordPress peuvent en effet ralentir votre site plus que d’autres. Pour repérer celles qui sont les moins économes en temps, testez-les avec l’extension P3 (Plugin Performance Profiler).

Pour le site Editoile, le temps d’affichage a été un peu amélioré, mais on a encore des progrès à faire ! La lenteur du chargement (le temps nécessaire pour charger le code html) est due à notre hébergement mutualisé et celle du téléchargement (le temps nécessaire pour aller chercher les ressources comme les images) au thème WordPress lui-même. Certains thèmes sont en effet plus ou moins bien codés et donc plus ou moins lents à se charger. Ce sera un des critères de choix du prochain thème (template).

4. Supprimer les pop-up et publicités

Les pop-up et les publicités sont très contraignants sur mobile, car ces fenêtres qui s’ouvrent toutes seules en couvrant l’écran empêchent de voir le site correctement. En plus, elles ne sont pas toujours évidentes voire impossibles à fermer sur un mobile.

Rappelons que les bonnes pratiques de qualité web Opquast préconisent clairement que ‘la navigation sur le site ne provoque pas l’ouverture de fenêtres surgissantes (pop-up) » et que les « mécanismes de fermeture de fenêtres sont immédiatement disponibles. »

Sur le site Editoile, nous avons conservé la bannière d’avertissement obligatoire pour les cookies qui s’affiche en haut à la première visite, mais nous avons supprimé toutes les publicités. Nous étions auparavant affiliés à Google AdSense qui affichait sur desktop une publicité limitée à un widget situé en bas de la sidebar du blog. Mais sur mobile, cette publicité s’affichait de façon beaucoup plus intrusive en pop-up en bas de toutes les pages du site web.

5. Simplifier le menu principal

Très jolis sur desktop, les méga-menus avec ou sans images ou les menus avec plusieurs niveaux imbriqués peuvent être très difficiles à utiliser sur mobile. Dans la plupart des thèmes responsive, ils sont réduits sous la forme d’un « burger » (des barres horizontales empilées) qui se développe lorsqu’on les touche.

L’idéal est que toutes les entrées du burger s’affichent d’un coup sur l’écran mobile, sans avoir à scroller. Ce qui pousse à réduire le nombre d’entrées du menu. Et donc à simplifier l’organisation des pages de son site web. Attention, cependant, à ne pas simplifier trop votre menu, car cela risquerait d’augmenter la profondeur du site.

Sur le site Editoile, nous avons réduit le menu principal à 4 entrées seulement : Blog, Services, Agence et Contact, en réorganisant autrement les pages internes. Pour mieux organiser les pages d’un site web, nous vous conseillons d’appliquer la méthode du tri des cartes.

6. Rédiger les textes pour le mobile

Lorsqu’on affiche une page web sur mobile, on a envie de savoir tout de suite si elle répond à notre recherche pour décider de scroller plus bas ou pas. On va lire plus facilement des paragraphes courts avec des phrases courtes, bien hiérarchisés avec des intertitres, que des blocs de texte interminables… Mieux vaut organiser le plan de sa page en suivant la méthode de la pyramide inversée.

Commencez par rédiger un chapô ou résumé de quelques lignes, qui s’affiche en gros caractères en haut de chaque page, en expliquant quel est son intérêt direct pour l’utilisateur. Raccourcissez la longueur de vos paragraphes, quitte à les scinder en plusieurs parties. Raccourcissez la longueur de vos phrases en évitant les subordonnées. Transformez les énumérations en listes à puces. Ajoutez des intertitres clairs. Ici, vous trouverez 10 astuces pour simplifier votre écriture pour le Web.

Les textes du site Editoile appliquaient déjà ces conseils (la rédaction web est notre cœur de métier !), mais nous avons dans le cadre de ce « toilettage » encore plus veillé à concentrer notre écriture en organisant chaque page en blocs de contenus avec des listes à puces.

7. Ajouter des boutons et des liens internes

Pour faciliter la navigation sur mobile, il faut éviter au maximum les liens cassés (erreurs 404) et les pages « cul-de-sac », c’est-à-dire qui ne proposent pas au mobinaute une façon simple de continuer sa navigation en cliquant sur un lien ou sur un bouton, sans avoir besoin de remonter en haut de page dans le menu.

Dans les pages de présentation de l’agence, nous avons ajouté des boutons call-to-action (appel à l’action), bien visibles sur fond rouge, disposés à intervalles réguliers sur la page. Ces boutons invitent l’internaute à visiter une page connexe, à télécharger un pdf, à retourner sur une landing page (page d’atterrissage) ou à contacter l’agence.

Rédiger les ancres des liens n’est pas évident. Ici, vous trouverez des trucs pour mieux rédiger vos liens et les rendre plus affordants (incitatifs au clic).

8. Rendre le numéro de téléphone cliquable

Le mobinaute a justement son téléphone dans la main : autant lui faciliter la tâche pour qu’il vous appelle ! Le numéro de téléphone de l’entreprise doit être non seulement facilement accessible sur toutes les pages du site mobile, mais il faut aussi qu’on puisse appeler simplement en touchant le numéro.

Cela nécessite un codage particulier. Si vous vous contentez d’écrire le numéro en visuel, il ne sera pas cliquable. Il faut le coder de la façon suivante en html <a href= »tel:+33 5 53 24 82 50 »>+33 5 53 24 82 50</a> pour qu’il s’affiche ainsi : +33 5 53 24 82 50

Sur le site Editoile, nous avons placé le numéro de téléphone dans le menu principal, dans le footer (pied de page) et dans la page Contact. Nous l’avons rendu cliquable, ce qui n’était pas le cas auparavant. Dans le même ordre d’idée, nous avons aussi ajouté un formulaire de contact en bas de quasiment toutes les pages de présentation de l’agence.

9. Ajouter une carte Google Map

Si les internautes utilisent leur téléphone pour aller sur votre site web, c’est qu’ils sont en mobilité. Peut-être sont-ils à proximité de votre boutique en train de faire leurs courses ? Peut-être ont-ils rendez-vous avec vous et cherchent l’adresse ?

Ajouter une carte Google sur votre site est donc très utile pour les mobinautes. Tapez votre adresse dans Google Maps, puis cliquez sur « Partager », puis cliquez sur « Intégrer la carte », puis personnalisez la taille de la fenêtre pour obtenir le code html à copier-coller dans le html de votre site.

Pour le site Editoile, il y avait déjà une Google Map sur la page Contact, mais celle-ci ne fonctionnait bizarrement plus… Plutôt que de passer par le module Map intégré dans le template, nous avons tout simplement embarqué le code fourni par Google Map.

10. Tester le site sur plusieurs terminaux mobiles

Pour terminer, mettez vous à la place de vos utilisateurs en essayant de naviguer sur votre site à partir de différents terminaux mobiles (téléphones, tablettes, Android, iPhone, etc.) et avec différents navigateurs (Chrome, Safari, Samsung Internet, etc.). Faites le aussi tester par des proches, des clients, regardez comment ils l’utilisent, écoutez leurs remarques.

Pour le site Editoile, nous l’avons testé pendant plusieurs jours auprès de plusieurs personnes pour repérer les erreurs, les liens cassés, les culs-de-sac, les lenteurs d’affichage, etc. Et il y en a sûrement encore : signalez-les nous si vous en trouvez !

Pour terminer, voici d’autres articles de ce blog pour apprendre à mieux référencer son site web :

• Bien référencer son site WordPress en 3 étapes
• 7 conseils pour améliorer son référencement naturel 
• 6 bonnes pratiques pour rédiger un titre web efficace

Article mis à jour le 10 janvier 2019.