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 : La grande majorité des internautes accèdent désormais au web via un smartphone, et une part significative du trafic mondial provient des 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 vérifier si son site est mobile-friendly. Google propose par exemple l’outil Test d’optimisation mobile, mais des solutions plus complètes comme PageSpeed Insights ou WebPageTest sont de plus en plus adoptées pour analyser à la fois l’affichage mobile et la performance globale.
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 ».
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.
La plupart des website builders modernes (comme Wix, Webflow ou Squarespace) proposent désormais des thèmes entièrement responsive par défaut, ce qui simplifie grandement la création de sites adaptés au mobile.
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. L’utilisation du menu « hamburger » est désormais une pratique standard sur mobile pour regrouper les options de navigation de façon compacte et intuitive :
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. Pensez également à activer l’autocomplétion et à utiliser les bons types de champs (email, téléphone, date) pour faciliter la saisie sur mobile. 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
Limitez l’utilisation des popups sur mobile, ou privilégiez les formats non intrusifs comme les bannières ou les notifications discrètes (par exemple, les snackbars ou toasts). Les popups classiques sont de moins en moins recommandées car elles dégradent l’expérience utilisateur et peuvent être pénalisées par les moteurs de recherche. 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. Les polices variables (variable fonts) sont de plus en plus utilisées car elles s’adaptent dynamiquement à la taille de l’écran et améliorent la performance de chargement. 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 (formats WebP ou AVIF), activez le lazy loading, et surveillez les indicateurs Core Web Vitals (LCP, FID, CLS) qui sont devenus des références pour mesurer la performance et l’expérience utilisateur sur mobile.
Découvrez pourquoi et comment optimiser la vitesse de chargement de votre site web.
#12 Optimiser la performance mobile sans AMP
Le format AMP (Accelerated Mobile Pages) a longtemps été utilisé pour accélérer le chargement des pages sur mobile. Cependant, il tend à être remplacé par des pratiques d’optimisation plus universelles, comme l’utilisation de technologies modernes (HTML5, CSS Grid, images adaptatives, lazy loading) et l’amélioration des Core Web Vitals, désormais au cœur des critères de performance mobile selon Google.
Il est donc recommandé de se concentrer sur l’optimisation globale de la performance mobile de votre site, plutôt que sur la création de pages AMP spécifiques.
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 !
Questions fréquentes
Quels sont les principaux obstacles rencontrés lors de la création d’un site web mobile-friendly ?
Quand on accompagne des entreprises dans la création de sites web mobile-friendly, on se rend compte que l’un des plus gros obstacles reste la gestion des contenus et des médias. Les équipes marketing ont souvent tendance à privilégier des images lourdes ou des sliders complexes qui nuisent considérablement à la rapidité d’affichage sur mobile. Un cas récent chez un client du retail m’a montré que, malgré une refonte graphique réussie sur desktop, le score PageSpeed mobile restait en dessous de 50 tant que les images n’étaient pas optimisées. Autre difficulté fréquente : harmoniser l’expérience utilisateur sur différents appareils. On croit souvent qu’un simple responsive suffit, mais il faut parfois repenser le parcours client, revoir les menus, supprimer des fonctionnalités superflues. Enfin, le manque de tests réels sur appareils physiques est un vrai frein ; certains bogues CSS ou problèmes de tap targets ne remontent qu’en conditions réelles, pas sur simulateur. Seule une démarche de test utilisateur sur le terrain permet d’identifier ces points de friction.
Quels sont les bénéfices tangibles à rendre son site web mobile-friendly, d’après votre expérience ?
Chez plusieurs clients, l’impact concret d’un site mobile-friendly se mesure très vite sur les indicateurs business. J’ai vu une PME B2C doubler son taux de conversion mobile après avoir retravaillé la hiérarchie des boutons d’action et fluidifié le tunnel d’achat sur smartphone. Le taux de rebond mobile a chuté de 60% à 35% simplement en améliorant le temps de chargement de la page d’accueil. Autre bénéfice constaté : une meilleure visibilité naturelle sur Google. Sur un site média revu pour le mobile, on a observé un bond de 25% du trafic SEO en quelques semaines suite à la validation mobile-friendly par la Search Console. Enfin, les équipes support notent souvent une baisse des retours ou des tickets d’incident liés à la navigation mobile, ce qui libère du temps pour des missions à plus forte valeur ajoutée.
Faut-il privilégier le responsive design ou une version mobile dédiée ?
D’après ce qu’on a vécu sur de nombreux projets, le responsive design s’impose dans la plupart des cas pour sa flexibilité et sa maintenance simplifiée. Une version mobile dédiée nécessite de gérer deux bases de code, ce qui double le temps de mise à jour et le risque d’incohérences. Néanmoins, pour certains secteurs très spécifiques – j’ai vu cela dans le e-commerce de luxe et l’événementiel – une version mobile dédiée peut se justifier afin d’offrir des fonctionnalités exclusives ou des interfaces ultra-personnalisées. Attention toutefois, Google privilégie désormais le mobile-first indexing : un site responsive est souvent mieux compris par les moteurs de recherche. Sur le terrain, on constate qu’opter pour le responsive design permet de mutualiser les tests, d’accélérer les déploiements et d’assurer une expérience homogène sur tous les terminaux.
Quelles erreurs sont régulièrement commises lors de l’optimisation mobile des sites web ?
Quand on audite des sites web pour l’optimisation mobile, certaines erreurs reviennent systématiquement. Par exemple, beaucoup d’équipes oublient de revoir la taille et l’espacement des boutons, rendant la navigation difficile avec le pouce. On a déjà vu des formulaires avec 10 champs continus sur mobile, décourageant l’utilisateur en mobilité. Autre piège classique : charger tous les scripts desktop sur mobile, ce qui ralentit significativement l’affichage. Un responsable digital m’a confié que leur taux d’abandon sur mobile avait chuté après la suppression d’un carrousel JS non essentiel. Enfin, négliger le test sur différents OS (Android/iOS) engendre des bugs non détectés, notamment sur les navigateurs natifs. Le retour terrain montre que la vigilance sur ces détails fait la différence sur l’engagement des utilisateurs.
Quels outils ou indicateurs recommandez-vous pour mesurer la performance mobile d’un site ?
Dans la pratique, on privilégie à la fois des outils de mesure externes et des KPIs d’engagement. Google PageSpeed Insights est un incontournable pour diagnostiquer les ralentissements et obtenir des recommandations concrètes. Mais il ne faut pas négliger l’analyse de sessions réelles avec Hotjar ou des outils de session replay, qui permettent de visualiser les parcours sur mobile et de détecter les points de friction. L’un de nos clients du secteur assurance a réduit de 40% le temps passé sur son formulaire mobile en s’appuyant sur ces analyses. Par ailleurs, on suit de près le taux de rebond mobile, le taux de conversion, et le pourcentage de pages vues sur mobile. Ces métriques, combinées aux tests utilisateurs, donnent une vision fine de la performance et orientent les priorités d’optimisation.