Votre site internet n’est pas encore adapté pour mobile ? Ou quelques éléments sur vos pages web ne sont pas optimisés pour les petites tailles d’écran ?
Hormis le fait que votre contenu ne doit pas dépasser la largeur d’un écran de téléphone, vous découvrirez sur cet article quelques critères fondamentaux pour réaliser un site adapté pour mobile.
SOMMAIRE
Optimiser les polices d’écriture
Afin d’apporter à vos lecteurs un contenu qui se lit facilement, je vous conseille de sélectionner une taille supérieure à 16px pour afficher vos textes.
Cette taille est idéale pour les paragraphes ou les listes à puces.
Vous pouvez lire également un article sur la lisibilité d’un site soigné. Pour les phrases plus « accrocheuses », ou bien les sous-titres d’un article, vous pouvez par exemple augmenter la taille à 35px ou 45px. Cela permet de différencier très clairement les éléments textuels de vos pages, et améliorera la lisibilité de contenu.
Vous pouvez jouer avec cette technique en graphisme, pour centraliser le regard de vos visiteurs, et apporter votre message.
En effet, en dessous d’une certaines valeurs (16px), Google Search Console vous avertira d’un problème de lecture et de lisibilité de votre contenu. En conséquence, vous pourriez freiner le positionnement de vos pages sur le moteur de recherche. Il s’agit là d’améliorer le pilier «technique» de votre SEO.
Toutes les polices n’ont pas les mêmes tailles ou les mêmes graisses, il vous faudra donc adapter en fonction de la lisibilité de vos textes.
De plus, certains thèmes sont configurés avec des polices entièrement responsives (la taille se réduit en fonction de l’écran).
Pour améliorer la lisibilité de votre contenu sur votre page web, veilliez bien à :
- Tester chaque page de votre site sur votre propre appareil mobile
- Tester l’outil fourni par Google : https://search.google.com/test/mobile-friendly?hl=FR
- Utiliser la fenêtre modulable dans l’outil d’inspection de Google Chrome
- Utiliser LightHouse sur Google Chrome.
Cet outil vous permet de visualiser vos problèmes d’ergonomie ou de lisibilité (outil spécifique à votre référencement).
Développer un menu responsive
Une navigation facile est un atout essentiel pour une expérience utilisateur réussie.
Il est important de faciliter un menu de navigation et de l’optimiser pour les appareils mobiles. Comment… ? Vous avez plusieurs possibilités pour son développement, mais voici quelques solutions :
- Utiliser un thème préconçu : La quasi-totalité des thèmes disponibles sur Themeforest est responsive (mais vous devriez toutefois le vérifier avant de l’acheter)
- Créer son propre menu responsive : Développez une navigation avec la création de votre menu uniquement en HTML et CSS.
- Vous pouvez également développer votre menu en vous servant d’un Framework (tel que Bootstrap ou Tailwind…)
Optimiser les liens
Lors du développement de votre site web, vous devrez également penser à l’expérience des clics de l’internaute. Mon conseil : Veillez à bien espacer les boutons et les liens. Également, vous devez penser à leurs tailles afin qu’ils soient facilement cliquable.
D’ailleurs, LightHouse vous prévient si vous avez un problème comme celui cité ci-dessus.
Les bonnes pratiques en développement web
Par le biais d’un CMS comme WordPress ou d’un développement sur-mesure, vous aurez besoin de créer un site web rapide à charger. Il est important d’optimiser son code (HTML, CSS, JS) afin que les fichiers ne soient pas lourds.
Cela permettra d’optimiser la vitesse de votre site, au biais d’un code léger comme une plume…
Veillez à ne pas télécharger des librairies inutiles à votre développement. Si vous utilisez Bootstrap et que vous avez seulement besoin d’utiliser un système de grille en CSS, alors inutile de télécharger d’autres ressources (tels que le style des boutons, ou les polices d’écriture intégrés par défaut…).
