71 % des Français sont équipés d'un smartphone, soient 34,1 millions de mobinautes selon la Mobile Marketing Association en juin 2016. 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 !
Rendre un site web adapté au mobile, c'est un mix d'optimisations techniques et d'améliorations éditoriales. 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 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 100 Ko chacune.
3. Accélérer le 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 Super Cache.
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 ! Une partie de la lenteur d'affichage est due à notre 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.
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.
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...
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.
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 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.
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 (0)5 53 24 82 5 ">+33 (0)5 53 24 82 50</a> pour qu'il s'affiche ainsi : +33 (0)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 !
Jeu de briques
Snake
Pacman
Bubble