Faites-vous partie des 37,4 millions de Français qui naviguent chaque jour sur le web avec leur smartphone ?
De nos jours, tout le monde a un smartphone. Il se révèle utile dans toutes les situations du quotidien. Il est même indispensable ! En tant que professionnel, tenez-vous bien compte à 100 % de ce support ? 💪
Êtes-vous aussi de ceux qui pensent qu’il est le meilleur outil de communication de tous les temps ?
La recherche d’informations, les réseaux sociaux, sont autant d’activités quotidiennes pour lesquelles l’ensemble de la population consacre énormément de temps.
Alors, il est primordial que votre contenu web soit parfaitement adapté à la navigation mobile. C’est ce que l’on appelle le responsive web design.
Voyons ensemble quelles sont les 7 bonnes pratiques pour offrir un contenu web 100 % adapté au responsive.
Le Responsive Web Design : qu’est-ce que c’est ?
Revenons sur la définition du terme « responsive », ou site web adaptatif.
Il désigne les sites internet dont les pages s’adaptent automatiquement à tout type d’écran. Quel que soit le support avec lequel l’utilisateur consulte votre site (ordinateur, tablette, smartphone, télévision, etc.), sa navigation est parfaitement adaptée, fluide et confortable.
Votre site internet est-il adapté à l’affichage responsive mobile ?
Voici mes 7 conseils faciles à mettre en place, pour améliorer l’affichage de votre site web sur mobile.
1) Installez un thème responsive sur votre CMS
Vous utilisez un CMS, ou « système de gestion de contenu » ?
Si vous utilisez WordPress, par exemple, la première chose à faire est de vérifier si votre thème est bien adapté au responsive.
Comment ? Tout simplement en consultant chaque catégorie de page sur votre mobile me direz-vous… Oui mais… Votre mise en page est peut être réussie pour certains modèles de téléphones ou tablettes, et pas pour d’autres !
Testez votre site en utilisant l’outil Responsive Design Checker. Vous aurez ainsi un aperçu du rendu sur toutes tailles d’écrans.
La plupart des thèmes proposés aujourd’hui sont responsive. Si le vôtre est ancien, il est peut-être temps d’en changer !
Attention, je vous déconseille néanmoins de vous lancer tête baissée dans ce genre d’opération, au risque de casser votre site.
Effectuez des sauvegardes, renseignez-vous, ou faites appel à un professionnel pour vous aider.
Un thème adapté au responsive vous permet d’adapter facilement l’affichage de vos pages. Dans l’outil de personnalisation de thème, vous avez accès aux options de responsive design. Vous pouvez modifier votre contenu, avec un aperçu en direct du résultat sur ordinateur, tablette et smartphone.
2) Utilisez une police d’écriture adaptée
Vous arrive-t-il de devoir zoomer du texte, lorsque vous faites des recherches avec votre smartphone ?
Je ne sais pas vous, mais moi, je m’en passerais bien ! Cela se produit principalement sur des sites qui ne sont pas adaptés à la navigation mobile. C’est justement ce que vous pourrez éviter grâce à la lecture de cet article.
Mon conseil : Agrandissez les polices d’écriture de votre site, de sorte que vos visiteurs ne soient pas contraints de devoir zoomer.
Google recommande d’utiliser une police d’écriture d’au moins 16 pixels, soit 1 em. Souvent, on retrouve une police de 12 pixels, ce qui est bien trop petit pour être lisible.
Voici quelques conseils supplémentaires pour améliorer votre contenu textuel :
- Ajustez les interlignes à 1,2 em, pour une meilleure lisibilité ;
- Utilisez 2 ou 3 polices d’écritures maximum pour un résultat clair et cohérent ;
- Faites de même pour la taille de vos textes : 3 tailles différentes tout au plus ;
- Choisissez une police sans empattement, ou « Sans Serif », plus facile à lire.
3) Optimisez l’affichage des boutons d’appel à l’action
Dans la même logique que celle des polices d’écriture, veillez à ce que vos boutons d’appel à l’action soient visibles et faciles à utiliser.
Sur mobile, il est important qu’ils soient suffisamment grands. Imaginez-vous cliquer encore et encore sur un bouton, sans réussir à l’atteindre ? Il vous faut à tout prix éviter cela.
Faites donc en sorte que vos boutons aient une taille adaptée et qu’ils soient facilement cliquables.
Le saviez-vous ?
Selon une étude menée en 2019 par Bertrand Krug, Directeur du Département Internet de Médiamétrie : 37,4 millions de Français sont des mobinautes quotidiens, c’est 7 millions de plus qu’il y a deux ans et 4 internautes sur 10 utilisent exclusivement leur mobile pour surfer. 📱
4) Créez un menu ergonomique et responsive sur mobile
Si votre menu est long, il risque de mal s’afficher sur un petit écran, voire d’être illisible sur un écran de grande taille.
Avez-vous déjà remarqué l’icône en forme de « hamburger », sur certains sites web en version mobile ? Vous savez, cette icône de menu aux trois barres horizontales ?
Il permet simplement d’optimiser son affichage sur smartphone. Son rendu est clair, facilement identifiable, et permet un accès efficace aux différentes pages de votre site web responsive.
Vous pouvez placer cette icône de menu là ou bon vous semble. Le principal, c’est que l’internaute retrouve tous les éléments dont il a besoin pour une navigation optimale.
5) Proposez un contenu identique autant sur ordinateur que sur mobile
Vous a-t-on déjà conseillé de masquer certains éléments « gênants » ; dont vous avez du mal à trouver une solution d’affichage responsive ?
J’ai souvent entendu ce type de conseil. Pourtant…
Je vous déconseille d’avoir recours à ce genre de pratique. Pourquoi ?
Si les robots Google, et surtout vos visiteurs, s’aperçoivent qu’il manque des informations en navigation mobile, vous en subirez les conséquences :
- Baisse de trafic ;
- Réduction de votre positionnement dans les résultats de recherche ;
- Déception des lecteurs à qui l’information va manquer, etc.
Vous l’aurez compris, il est important d’offrir un contenu identique autant sur ordinateur, que sur mobile.
À savoir : Google indexe globalement votre site web en fonction des pages affichées sur mobile. Je vous conseille donc de ne pas masquer volontairement du contenu en mode responsive.
6) Aérez le texte pour une lecture fluide et agréable sur mobile
Saviez-vous qu’il existe des standards, indiquant précisément comment rendre votre texte parfaitement lisible ?
Voici quelques exemples :
- Une ligne peut contenir entre 8 et 12 mots ;
- Les paragraphes sont courts. En effet, 4 lignes en affichage desktop, peuvent en afficher 12 sur mobile.
Concrètement, un bloc de texte peut décourager votre lecteur, surtout s’il consulte votre contenu web sur mobile.
Faites-en sorte de proposer aux internautes des textes, faciles à lire et aérés. (Notez comme mes articles ici font de fréquents retours à la ligne! 😉)
Si les informations que vous proposez sont intéressantes, vos lecteurs prendront plaisir à vous lire, qu’ils soient sur ordinateur ou sur smartphone.
7) Optimisez les images pour un site web responsive rapide
Illustrer votre contenu avec des images et du contenu multimédia est très important.
Cependant, vos images peuvent se révéler être très volumineuses, et donc, ralentir votre site.
Si la vitesse de chargement de vos pages est trop longue, il y a de grande chance pour que vos visiteurs fassent demi-tour.
Selon Neil Patel, ancien directeur marketing chez Kiss Metrics ; si votre site web ne met pas moins de 3 secondes à charger, vous perdez jusqu’à 40 % de vos visiteurs…
Pour créer des images adaptées aux méthodes d’affichage adaptatif sur mobile, je vous propose ces quelques recommandations :
- Utilisez le format JPG pour vos images photographiques.
- Optez pour un format SVG ou PNG pour intégrer votre logo ;
- Préférez le format PNG au GIF, car celui-ci autorise davantage de couleurs et offre de meilleurs taux de compression.
Vous pouvez utiliser des outils en ligne pour compresser vos images avant de les publier. Il en existe de toute sorte. Vous avez également la possibilité d’utiliser une extension proposée par votre CMS, qui s’en charge automatiquement.
Voulez-vous savoir si votre site web s’adapte correctement à l’affichage mobile ?
Je vous conseille d’utiliser l’outil intégré à la Google Search Console. Il teste votre contenu via l’URL de votre site, et vous indique les potentielles erreurs à corriger.
Notez d’ailleurs que, dès septembre 2020, Google indexera en priorité les sites adaptés aux mobiles (Index Mobile First). Donc, n’attendez plus : à vous de jouer !
