Vous n’avez plus le choix, votre site web doit être optimisé pour les appareils mobiles, c’est-à-dire « mobile-friendly » comme on dit dans la belle langue de Shakespeare.
Pourquoi ? La raison est simple et vous l’avez surement déjà sur le bout de la langue : 80% des personnes qui utilisent internet ont un smartphone et plus de la moitié du trafic provient d’appareils mobiles. En clair, quand un visiteur arrive sur votre site web, il y a plus de chances qu’il soit derrière son écran de smartphone que devant son ordinateur.
D’où l’importance et même la nécessité de proposer une navigation mobile optimale sur votre site web.
Si vous avez un site internet qui s’affiche mal sur mobile, vous êtes sûr de passer à côté d’une partie importante de votre trafic et de finir par en perdre.
Sans compter que Google utilise le critère « mobile-friendly » pour classer les pages web dans les pages de résultats. En clair, optimiser son site web pour le mobile a un impact fort sur le fameux SEO ou référencement naturel. Raison de plus !
Nous allons voir en détail comment créer un site web mobile-friendly et, plus globalement, comment optimiser son site pour qu’il s’adapte le mieux possible à la taille des écrans mobiles.
En guise d’amuse-bouche : Une définition rapide des notions de « mobile-friendly » et de « responsive design »
Avant d’entrer dans le vif du sujet et vous donner nos meilleurs conseils pour améliorer l’affichage de votre site internet sur mobile, rappelons ce à quoi renvoie la notion de mobile-friendly. Si vous savez déjà parfaitement de quoi il s’agit, vous pouvez sauter directement à la section suivante. Sinon, vous pouvez lire ce qui suit, ce ne sera pas très long.
Comme son nom l’indique, un site web mobile-friendly veut simplement désigner un site web qui s’affiche bien non seulement sur les ordinateurs, mais aussi sur les appareils mobiles, avec leurs écrans plus petits. Sur un site web mobile-friendly, le texte est facile à lire, les liens et le menu sont facilement cliquables…Voici ce qu’est un site web mobile-friendly (à droite) et son contraire :
Et votre site web, est-il mobile-friendly justement ? Il est important de savoir d’où l’on part avant de se lancer dans un projet d’optimisation. Si votre site internet est déjà largement mobile-friendly, vous n’aurez peut-être pas besoin d’appliquer tous nos conseils.
Il existe plusieurs outils pour savoir si son site est mobile-friendly. L’un des meilleurs est celui proposé par Google. Pour le trouver, c’est simple, il suffit de taper « mobile-friendly » dans la barre de recherche de votre moteur de recherche favori : Google met son outil maison en avant – normal.
Une fois que vous avez renseigné l’URL de votre site web (ou de votre page web si vous voulez tester l’affichage d’une page en particulier de votre site), Google se met au travail et vous indique si votre site répond bien aux critères de la mobile-friendlité. Nous avons fait le test et avons l’honneur de vous annoncer que La Fabrique du Net est quasiment (cf. la zone pixelisée) parfaitement mobile-friendly :
Un petit mot sur la distinction entre mobile-friendly et responsive design. On confond souvent ces deux notions. Techniquement, il y a pourtant une différence. Il existe plusieurs approches pour créer un site web « mobile-friendly ». L’utilisation du « responsive » en est une parmi d’autre. Un site web responsive design, c’est un site web dont le contenu s’ajuste automatiquement en fonction de la taille de l’écran pour s’afficher correctement.
Il existe d’autres techniques pour rendre son site web mobile-friendly, l’une d’entre elles consistant tout simplement à éditer une version mobile de son site. Wix par exemple permet d’éditer indépendamment les versions desktop et mobile :
Mais bon, la méthode la plus simple pour créer un site web mobile-friendly, c’est d’utiliser un design responsive. D’ailleurs, la plupart des conseils que nous allons vous donner partent de l’hypothèse que vous allez utiliser l’option « responsive design ».
100% gratuit - 3 min
14 conseils pour obtenir un site web mobile-friendly
Après cette petite entrée en matière, voici venu le temps des conseils concrets et pratiques. Nous en avons extrait 14 de notre besace. La plupart devrait vous intéresser, en tous cas nous l’espérons.
#1 Installer un thème responsive
Si vous avez un site web pas du tout adapté pour le mobile et que vous voulez y remédier rapidement, la meilleure solution est sans doute de changer complètement votre thème graphique. Si vous avez un site déjà bien installé, qui tourne bien, ce n’est peut-être pas la meilleure option. Mais si vous avez un faible trafic ou que vous vous lancez (a fortiori), installer un thème responsive est la meilleure chose que vous ayez à faire. Si vous utilisez WordPress, changer de thème est très simple. Il suffit d’aller dans Apparences > Thèmes et d’activer un nouveau thème. Vous pouvez taper « responsive » dans la barre de recherche pour trouver un thème responsive.
Certains website builders, comme Strikingly ou Weebly, permettent de changer de thème en un clic (mais tous leurs thèmes sont responsive a priori, donc le problème ne se pose pas).
Une fois que vous avez votre thème responsive, assurez-vous de respecter les conseils suivants pour maintenir la qualité de l’affichage de votre site web sur mobile.
#2 Simplifier les menus de votre site
On ne vous apprendra rien en vous disant que les écrans mobiles sont significativement plus petits que les écrans d’ordinateur. Vous devez toujours garder à l’esprit cette évidence lorsque vous créez vos menus. Le menu de la version desktop de votre site peut être plus étendu et proposer plus d’options. Sur mobile, les choses se compliquent. Vous devez être concis et respecter les contraintes de dimensions associées à l’affichage mobile. Vous devez simplifier les menus pour ne pas obliger vos utilisateurs à scroller et zoomer pour naviguer sur votre site (il y a des chances qu’ils ne s’embêtent pas et aillent voir ailleurs) :
Sauf dans de rares cas et situations, il est conseillé de retirer aussi le sidebar sur la version mobile.
#3 Créer des formulaires aussi courts que possible
Non seulement les formulaires longs convertissent moins bien (toutes choses égales par ailleurs), mais ils réduisent la qualité de l’expérience utilisateur sur mobile. Sur un ordinateur, si un formulaire ne s’affiche pas entièrement sur l’écran, ce n’est pas très grave, la navigation est assez simple, il suffit d’utiliser la molette de la souris. Mais sur un mobile, c’est plus compliqué là encore. Par conséquent, passez en revue tous vos formulaires et essayez de réduire leur taille s’ils sont trop longs, en supprimant les champs non nécessaires. Sur un formulaire d’inscription à la newsletter par exemple, vous n’avez pas besoin de demander l’adresse postale et le numéro des contacts.
Découvrez notre comparatif des meilleurs outils de création de formulaires.
#4 Afficher clairement vos CTAs
Les boutons CTAs doivent être mis en valeur et facilement cliquables. Il faut à tout prix éviter que plusieurs boutons s’affichent en même temps sur l’écran. Vos CTAs doivent être focalisés sur l’objectif principal de votre page.
Soignez la manière dont ils s’affichent – cela a un impact clé sur vos taux de conversion. Une étude a montré que sur plus de la moitié des sites web, les internautes mettaient plus de 3 secondes à identifier les CTAs. C’est beaucoup trop, vous pouvez faire mieux.
#5 Intégrer un moteur de recherche interne
Ce conseil fait écho à ce que l’on disait tout à l’heure concernant les menus. A l’instant où ces lignes sont écrites, il y a peut-être certains d’entre vous qui ont plus de 20 ou 30 entrées dans leurs menus. Il est difficile de simplifier un menu de 30 entrées pour tout faire tenir sur un écran mobile. Dans ce cas, l’option c’est d’intégrer une barre de recherche pour que l’internaute puisse plus rapidement accéder aux contenus qu’il recherche. Cela évite de se retrouver avec un menu trop gros.
Si vous avez un site e-commerce, le moteur de recherche interne est clairement une feature incontournable. Surtout quand on a un catalogue avec plus de 12 millions de produits comme Amazon !
Pour naviguer à travers 12 millions de produits, un menu n’est pas suffisant, vous avez besoin d’un moteur de recherche interne.
#6 Faciliter l’accès au service client
Peu importe le temps que vous passerez à améliorer la version mobile de votre site web, il y aura toujours des gens qui rencontreront des problèmes dans leur navigation et chercheront à vous poser des questions. Votre objectif est de faire en sorte que vos visiteurs solutionnent rapidement et efficacement leurs problèmes. Pour cela, assurez-vous que vos informations de contact sont facilement accessible. Donnez un numéro de téléphone, une adresse email, les liens vers vos réseaux sociaux.
#7 La taille, ça compte…
Naviguer sur un site web depuis un ordinateur c’est facile, c’est simple. Vous contrôlez tout grâce avec le curseur de votre souris ou votre keypad. Mais naviguer avec des pouces sur un écran 4 pouces, ce n’est pas la même chose. Ne perdez jamais de vue cette réalité lorsque vous créez les différents éléments de votre site web mobile. Les boutons doivent être suffisamment gros pour être cliquables avec un doigt. L’écart entre les boutons / liens doit être suffisant pour ne pas que l’internaute clique sur un mauvais bouton. Vous devez toujours garder à l’esprit les zones cliquables sur un écran. Cette illustration montre les zones les plus facilement cliquables :
75% des utilisateurs naviguent sur leur mobile avec leur pouce. Évitez d’intégrer des boutons dans les angles et tout en haut de l’écran : ce sont les endroits les moins accessibles pour le pouce. Quelle que soit la taille du téléphone, les éléments doivent idéalement être placés vers le milieu de l’écran.
#8 Supprimer les pop-ups
Essayez de retirer les popups de votre site mobile. Déjà, en soi, les gens apprécient peu ce format. Sur mobile, elles dégradent encore plus l’expérience utilisateur car elles sont souvent difficiles à fermer. Vous avez surement déjà fait cette expérience : depuis votre mobile, vous atterrissez sur un site web, une popup s’affiche, impossible de la fermer, vous quittez la page. Parfois la croix n’est pas visible à l’écran…ce qui est problématique. D’autant qu’il n’est pas toujours possible de dé-zoomer correctement une popup. Disons-le : il y a des fois où il est carrément impossible de fermer la popup et donc d’accéder au contenu du site web.
Si vous ne pouvez pas vous permettre de supprimer les pop-ups, testez bien leur affichage sur mobile, essayez de les simplifier et ne les affichez que sur les visiteurs qui ont déjà cliqué sur votre site web ou qui sont sur votre site depuis plus de quelques secondes…
#9 Eviter les gros blocs de texte
Vous devez réduire la quantité de textes affiché sur votre site web mobile. Bien sûr, vous avez besoin de communiquer à vos visiteurs, vous avez donc besoin de textes, de mots. Mais choisissez des phrases courtes, raccourcissez les paragraphes si vous voulez que vos contenus soient lus. Ne l’oubliez pas : si un paragraphe fait 4 lignes sur la version desktop, il peut très bien en faire 12 sur la version mobile !
#10 Choisir la bonne police de caractères
Continuons à parler du texte. Le choix de la police de caractères est une décision importante. Vous devez opter pour une police claire et facile à lire. Vous pouvez aussi jouer sur les polices de caractères pour mettre en avant un paragraphe ou une section de la page. Utilisez le gras et les majuscules pour structurer le contenu.
#11 Optimiser la vitesse de chargement de votre site web
Peu importe les changements que vous décidez d’implémenter sur votre site web mobile, vous devez toujours garder en tête la question de la rapidité. Des études ont montré que les gens quittent le site internet lorsque le chargement des pages est supérieur à 3 secondes…Moins le site web est rapide, plus le taux de rebond sera élevé. Pour optimiser la vitesse de chargement, simplifiez le design de votre site mobile, optimisez les images, supprimez les images inutiles…
Découvrez pourquoi et comment optimiser la vitesse de chargement de votre site web.
#12 Créer des Pages Mobiles Accélérées (AMP)
Les pages mobiles accélérées (AMP) sont des pages HTML utilisant un format spécifique. Google gère ce format. Les pages qui sont au format AMP sont mises en avant par Google sur mobile dans les résultats de recherche.
L’intérêt des AMP, c’est leur vitesse chargement, beaucoup plus rapide que les pages classiques. C’est pour cette raison que Google les privilégie. Si vous utilisez WordPress, sachez que créer des pages mobiles accélérées est très simple : il existe un plugin pour. Pour en savoir plus sur ce format spécial, je vous invite à découvrir le guide complet que nous avions conçu sur le sujet.
Découvrez notre guide complet sur les Pages mobiles Accélérées (AMP).
Conclusion
Si vous ne cherchez pas à améliorer l’affichage de votre site web sur mobile, vous ratez le train de l’histoire et passez à côté d’une partie de votre trafic (pire : vous allez finir par perdre une partie de votre trafic actuel, de plus en plus « mobile »). Nous avons vu les différentes actions à entreprendre pour rendre votre site mobile-friendly : simplifier les menus, raccourcir les formulaires, bien afficher vos boutons, vous limiter à un bouton par page, ajouter une barre de recherche pour faciliter la navigation et libérer de l’espace sur l’écran, améliorer la vitesse de chargement de votre site, etc. En suivant ces recommandations et bonnes pratiques, votre trafic et vos conversions ont des chances de progresser…A vous de jouer !