Avez-vous ouvert votre site sur un téléphone en trouvant quelque chose qui ne ressemble en rien à ce que vous avez construit ? Un site qui s'affiche mal sur mobile est l'une des plaintes les plus courantes des propriétaires de marque qui ont conçu leur site sur ordinateur sans jamais vérifier son comportement sur un écran plus petit. Cet article explique ce qui cause le problème, comment diagnostiquer ce qui touche votre site et comment le corriger.
Plus de la moitié du trafic web vient désormais d'appareils mobiles. Cette part augmente depuis des années et continue de grimper. Si un visiteur arrive sur votre site depuis un téléphone et tombe sur un texte trop petit pour être lu, des images qui débordent de l'écran ou un menu de navigation qui ne réagit pas au toucher, il y a peu de chances qu'il reste. Un taux de rebond élevé sur mobile est souvent le premier signe mesurable que quelque chose est cassé, et beaucoup de propriétaires de marque ne font le lien qu'en consultant leurs statistiques.
Le plus frustrant, c'est que les problèmes d'affichage mobile ne sont pas toujours visibles depuis la vue sur ordinateur que vous utilisez pour gérer votre site. Ils n'apparaissent qu'en regardant l'écran réel d'un téléphone, ce qui signifie qu'ils peuvent passer inaperçus pendant des semaines ou des mois, pendant que des visiteurs repartent en silence.
Pourquoi un site web s'affiche-t-il mal sur mobile ?
Il n'y a pas une seule cause à un site mal affiché sur mobile. Le problème vient en général de l'une de cinq causes, et parfois de plusieurs à la fois. Savoir laquelle touche votre site détermine la solution à appliquer.
Le site n'a pas été conçu avec un design adaptatif
Un site adaptatif (responsive) ajuste automatiquement sa mise en page selon la largeur de l'écran qui l'affiche. Sur un ordinateur, le contenu peut apparaître en trois colonnes. Sur une tablette, en deux. Sur un téléphone, en une seule colonne défilante. Cet ajustement passe par des règles CSS appelées media queries, qui indiquent au navigateur comment réorganiser le contenu selon la taille d'écran.
Si un site a été conçu sans design adaptatif, il présente la même mise en page fixe quelle que soit la taille de l'écran. Un site conçu pour un écran d'ordinateur de 1 440 pixels de large essaiera de s'afficher à cette largeur sur un écran de téléphone d'environ 390 pixels. Le résultat est une page réduite et dézoomée, où le texte est illisible et les boutons trop petits pour être touchés. Le contenu est techniquement là, mais il est inutilisable.
Les sites plus anciens, notamment ceux créés avec des éditeurs par glisser-déposer qui ne donnaient pas la priorité au mobile, ont souvent ce problème. Les sites codés sur mesure sans réflexion « mobile d'abord » peuvent aussi entrer dans cette catégorie.
Les images ne sont pas dimensionnées pour les écrans mobiles
Une image téléversée à 3 000 pixels de large et affichée sans contrainte essaiera de s'afficher à sa taille complète, où qu'elle soit consultée. Sur un ordinateur, le navigateur peut la réduire pour qu'elle tienne. Sur un appareil mobile sans règle de dimensionnement adaptatif, l'image peut dépasser le bord de l'écran et provoquer un défilement horizontal ou l'effondrement de la mise en page.
Même quand les images ne débordent pas, de grandes images non optimisées jouent sur l'importance de la vitesse d'un site web sur mobile. Une image qui charge lentement et empêche le reste de la page de s'afficher est une forme de dysfonctionnement, même quand la mise en page tient techniquement. Les visiteurs sur connexion mobile y sont particulièrement sensibles.
Des éléments de largeur fixe débordent de l'écran
Les éléments de largeur fixe sont des conteneurs, des div, des tableaux ou d'autres éléments HTML auxquels la feuille de style attribue une largeur précise en pixels plutôt qu'un pourcentage ou une unité flexible. Un conteneur réglé à 900 pixels de large s'affichera correctement sur un ordinateur mais débordera du bord d'un écran de téléphone, obligeant l'utilisateur à faire défiler horizontalement pour voir tout le contenu. Un défilement horizontal sur un site web est presque toujours le signe d'un problème de débordement d'élément de largeur fixe.
Les tableaux sont des coupables fréquents. Un tableau de tarifs ou un comparatif construit en HTML avec des colonnes fixes peut s'effondrer sur mobile, avec un texte qui s'empile de façon illisible. Il en va de même pour les barres latérales, les widgets intégrés et tout élément codé avec une largeur en pixels supérieure à l'espace disponible sur l'écran du téléphone.
Les tailles de police sont trop petites pour être lues sans zoom
Un texte qui se lit bien à 14 pixels sur un écran d'ordinateur peut devenir illisible sur un téléphone, surtout sur les écrans à haute densité où le nombre de pixels physiques est bien supérieur à la taille d'affichage logique. Si un visiteur doit pincer et zoomer pour lire votre contenu, l'expérience est cassée même si la mise en page est techniquement intacte.
La taille de police minimale recommandée pour le texte courant sur mobile est de 16 pixels. En dessous, la lisibilité risque d'échouer sur une part importante des appareils. Un texte plus petit signale aussi aux moteurs de recherche que la page n'est pas optimisée pour le mobile, ce qui peut influencer le classement et l'indexation du site.
La navigation s'affiche mal ou ne fonctionne pas au toucher
Les menus de navigation pour ordinateur sont souvent conçus comme des barres horizontales avec des éléments déroulants qui apparaissent au survol. Le survol n'existe pas sur un écran tactile. Un menu qui dépend du survol ne fonctionne tout simplement pas sur un téléphone. Les visiteurs touchent l'élément du menu et rien ne se passe, ou ils sont envoyés vers la mauvaise page parce que l'état de survol censé révéler un sous-menu ne s'active jamais.
Même une navigation qui fonctionne techniquement au toucher peut être défaillante en pratique si les zones à toucher sont trop petites ou trop rapprochées. La règle générale pour les zones tactiles mobiles est un minimum de 44 sur 44 pixels. Des zones plus petites entraînent des touches manquées, des navigations accidentelles et des visiteurs frustrés qui trouvent plus simple de partir que de chercher ce pour quoi ils étaient venus.
Comment vérifier que votre site web est adapté au mobile
La vérification la plus rapide est d'ouvrir votre site sur un vrai téléphone. Utilisez votre propre appareil et, si possible, un autre modèle d'une autre marque. Ce qui s'affiche bien sur un téléphone peut s'afficher différemment sur un autre, à cause de différences de résolution d'écran, de moteur de rendu du navigateur et de version du système d'exploitation.
Les outils de développement du navigateur proposent une simulation mobile intégrée. Dans la plupart des navigateurs pour ordinateur, appuyer sur F12 ouvre le panneau de développement. Une icône de barre d'appareils permet de simuler différentes tailles d'écran et types d'appareils. C'est utile pour des vérifications rapides, mais cela ne remplace pas complètement un test sur de vrais appareils, car les environnements simulés ne reproduisent ni le comportement tactile réel, ni le rendu des polices, ni les conditions du réseau.
Le test d'optimisation mobile de Google, disponible via Google Search Console, évalue vos pages et signale des problèmes précis de facilité d'utilisation sur mobile. Il repère des problèmes comme un texte trop petit pour être lu, des éléments cliquables trop rapprochés et un contenu qui ne tient pas dans la fenêtre d'affichage. Le rapport donne le détail page par page, pour identifier celles qui échouent et celles qui réussissent.
Consulter vos statistiques ajoute une couche comportementale à l'image technique. Si votre taux de rebond sur mobile est nettement supérieur à celui sur ordinateur, cet écart indique souvent un problème d'affichage ou de facilité d'utilisation sur téléphone. L'article sur le taux de rebond élevé sur mobile explique comment lire ces signaux et ce qui pousse les visiteurs à partir aussitôt sur de petits écrans.
Comment corriger un site web qui s'affiche mal sur mobile
La bonne solution dépend de la cause du problème. Chacune des cinq causes ci-dessus a sa solution.
Passer à une mise en page adaptative
Si le site n'est pas du tout adaptatif, la solution est soit de le reconstruire sur un framework adaptatif, soit de passer à une plateforme qui produit du HTML adaptatif par défaut. Ajouter un comportement adaptatif à un site qui ne l'est pas après coup est possible mais souvent plus laborieux que de reconstruire à partir d'une base adaptative. Si le site est sur une plateforme moderne qui prend en charge des thèmes ou des modèles adaptatifs, passer à un modèle adaptatif est généralement la voie la plus rapide.
Redimensionner et contraindre les images
Les images doivent être téléversées à la taille d'affichage réellement nécessaire, pas à leur résolution d'export d'origine. Pour la plupart des images de site, une largeur maximale de 1 200 pixels suffit pour les écrans à haute densité tout en gardant des fichiers de taille raisonnable. Des règles CSS qui appliquent max-width: 100% aux images garantissent qu'elles ne débordent jamais de leur conteneur, quelle que soit la largeur de l'écran. Cette seule règle résout la plupart des problèmes de débordement d'images sans redimensionner chaque image.
Remplacer les largeurs fixes par des unités flexibles
Les largeurs fixes en pixels sur les conteneurs, les tableaux et les autres éléments de mise en page doivent être remplacées par des largeurs en pourcentage ou par des unités CSS flexibles comme em, rem ou vw. Un conteneur réglé sur width: 90% au lieu de width: 900px s'adaptera correctement à chaque taille d'écran. Pour les tableaux, ajouter une règle CSS qui les rend défilables horizontalement dans leur conteneur évite qu'ils cassent la mise en page globale sur les écrans étroits.
Augmenter les tailles de police pour le mobile
Le texte courant sur mobile doit être réglé à au moins 16 pixels. Si la feuille de style pour ordinateur définit une taille plus petite, une media query ciblant les largeurs d'écran mobiles peut la remplacer. Les tailles des titres doivent aussi être revues : beaucoup de styles de titres qui paraissent proportionnés sur ordinateur deviennent excessivement grands sur téléphone et repoussent le reste du contenu sous la ligne de flottaison avant que le visiteur n'ait rien lu.
Remplacer la navigation au survol par un menu mobile
La solution standard pour la navigation mobile est un menu repliable, souvent appelé menu hamburger, déclenché par un toucher plutôt que par un survol. La plupart des frameworks adaptatifs et des créateurs de site incluent ce modèle par défaut. Si la navigation du site actuel n'a pas d'équivalent mobile, en ajouter un demande soit de modifier la feuille de style et le JavaScript, soit de passer à un thème qui inclut la navigation mobile en standard. La taille des zones tactiles doit aussi être revue pour que tous les éléments du menu respectent le minimum de 44 pixels.
Si votre site a des pages cassées en plus de problèmes d'affichage, corriger d'abord la mise en page visuelle facilite souvent la navigation vers chaque page et son test pendant l'audit.
Comment WEMASY gère le mobile
Le créateur de site web de WEMASY génère du HTML adaptatif sur chaque page sans configuration. Les mises en page se réorganisent automatiquement aux tailles d'écran mobiles, les images sont contenues dans leurs conteneurs, et la navigation passe à un menu adapté au toucher sur téléphones et tablettes. Les tailles de police, les zones tactiles et les espacements sont tous définis dans le système de design de la plateforme pour respecter les normes de facilité d'utilisation sur mobile : les marques qui se lancent sur WEMASY partent d'un site prêt pour le mobile au lieu de devoir l'adapter après coup.
Découvrez ce qui est inclus sur le créateur de site web WEMASY ou consultez les offres disponibles sur la page des tarifs.
Questions fréquentes
Pourquoi mon site s'affiche bien sur ordinateur mais mal sur mobile ?
Cela vient en général du fait que le site a été conçu surtout pour l'affichage sur ordinateur, sans règles CSS adaptatives qui ajustent la mise en page aux petits écrans. Le navigateur d'ordinateur a assez de largeur pour afficher la mise en page fixe comme prévu. Un écran de téléphone, non : les éléments débordent, se chevauchent ou rétrécissent jusqu'à devenir illisibles. Vérifier le site dans le mode de simulation mobile d'un navigateur ou sur un vrai appareil est le moyen le plus rapide de voir ce que vivent les visiteurs mobiles. Avec le créateur de site web de WEMASY, vous pouvez mettre cela en place directement sur votre site.
Une mise en page mobile cassée affecte-t-elle mon classement Google ?
Oui. Google utilise l'indexation mobile d'abord (mobile-first), ce qui signifie que la version mobile d'une page est ce que Google évalue principalement pour le classement. Un site avec des problèmes d'affichage mobile, un texte trop petit ou un contenu qui déborde de la fenêtre d'affichage obtiendra de moins bons scores de facilité d'utilisation, ce qui pèse sur les performances globales dans la recherche. Corriger les problèmes mobiles améliore à la fois l'expérience utilisateur et le SEO.
Qu'est-ce qui cause un défilement horizontal sur un site mobile ?
Un défilement horizontal sur mobile indique presque toujours un élément de largeur fixe en pixels qui dépasse la largeur de l'écran du téléphone. Parmi les coupables courants : les tableaux, les barres latérales, les contenus intégrés, les images sans contrainte de largeur et les conteneurs réglés sur une largeur précise en pixels plutôt qu'en pourcentage. Identifier l'élément qui déborde avec les outils de développement du navigateur, puis remplacer la largeur fixe par un pourcentage ou ajouter des contrôles de débordement à son conteneur parent, règle généralement le problème.
Comment tester si mon site web est adapté au mobile ?
Ouvrez le site sur un vrai téléphone et parcourez chaque page clé. Ouvrez-le ensuite dans les outils de développement d'un navigateur d'ordinateur et utilisez le mode de simulation d'appareil pour l'afficher à plusieurs largeurs d'écran. Pour un audit structuré, passez les pages dans le rapport d'ergonomie mobile de Google Search Console, qui signale des problèmes précis comme un texte trop petit, des éléments cliquables trop rapprochés et des soucis de configuration de la fenêtre d'affichage. Les deux approches ensemble donnent l'image la plus complète.
Puis-je réparer un site mobile cassé sans tout reconstruire ?
Cela dépend de la façon dont le site a été conçu à l'origine. Si le site tourne sur une plateforme qui prend en charge des thèmes adaptatifs, passer à un thème adaptatif est souvent la solution la plus rapide et ne demande pas de reconstruire le contenu de zéro. Si le site est codé sur mesure avec une mise en page non adaptative, des modifications CSS ciblées avec des media queries peuvent résoudre des problèmes précis sans reconstruction complète. En revanche, si la mise en page repose sur des tableaux ou sur des largeurs fixes partout, une reconstruction complète sur une base adaptative est généralement plus efficace que de rafistoler les problèmes un par un.
Pourquoi les visiteurs quittent-ils mon site après quelques secondes sur mobile ?
Quand des visiteurs arrivent sur une page avec des problèmes d'affichage, un texte illisible, une navigation cassée ou des images lentes à charger, ils partent vite car la page ne répond pas à leurs attentes de base en matière de facilité d'utilisation. Les visiteurs mobiles tolèrent moins les frictions que les visiteurs sur ordinateur. Si la mise en page est cassée ou lente, ils retournent aux résultats de recherche et cliquent sur le résultat d'un concurrent. L'article sur les visiteurs qui quittent votre site web passe en revue toutes les raisons pour lesquelles les gens partent vite et comment diagnostiquer celle qui touche votre site.