Vous avez conçu votre site web sur un ordinateur de bureau. Il avait fière allure — photos nettes, mise en page propre, tout était parfaitement aligné sur votre moniteur de 24 pouces. Puis vous l'avez ouvert sur votre téléphone et vous vous êtes demandé ce qui s'était passé. Le texte était minuscule. Les images étaient trop larges. Vous deviez pincer et zoomer pour lire quoi que ce soit. Les boutons étaient impossibles à toucher.
Vous n'imaginez pas des choses. Votre site web a vraiment l'air différent sur différents appareils, et comprendre pourquoi — et quoi faire à ce sujet — est essentiel pour votre entreprise.
L'explication technique (simplifiée)
Un moniteur de bureau mesure généralement 1920 pixels de large. Un écran de téléphone mesure environ 390 pixels de large. C'est près de 5 fois la différence. Si votre site web a été construit avec une largeur fixe conçue pour un écran de bureau, un téléphone ne peut tout simplement pas l'afficher correctement.
Il existe trois approches pour gérer cela :
1. Conception à largeur fixe (L'ancienne méthode)
Les sites web construits avant environ 2012 étaient généralement conçus avec une largeur fixe — habituellement 960 ou 1024 pixels. Sur un ordinateur de bureau, ils avaient l'air bien. Sur un téléphone, le navigateur essaie d'adapter toute la mise en page de 960 pixels sur un écran de 390 pixels. Le résultat est que tout rétrécit à environ 40% de sa taille prévue. D'où le pincement, le zoom et la frustration.
Si votre site web a été construit il y a plus de 8 à 10 ans et n'a jamais été redessiné, c'est presque certainement ce qui se passe.
2. Conception réactive (La norme moderne)
La conception réactive utilise le CSS (le code qui contrôle l'apparence d'un site web) pour ajuster la mise en page en fonction de la taille de l'écran. Au lieu d'une seule mise en page fixe, le site web a des instructions pour plusieurs tailles d'écran :
- Ordinateur de bureau (1200px+) : Mise en page complète, conception multi-colonnes, grandes images
- Tablette (768-1199px) : Mise en page légèrement simplifiée, espacement ajusté
- Téléphone (moins de 768px) : Mise en page à colonne unique, cibles de clic plus grandes, navigation simplifiée
Le même site web, le même contenu — mais réorganisé et redimensionné pour bien fonctionner sur chaque appareil. C'est la norme minimale pour tout site web d'entreprise aujourd'hui.
3. Conception axée sur le mobile (La meilleure approche)
La conception axée sur le mobile pousse plus loin la conception adaptative. Au lieu de concevoir pour les ordinateurs de bureau et ensuite d'adapter pour les téléphones, vous concevez d'abord pour les téléphones, puis vous adaptez pour les écrans plus grands. Cela garantit que l'expérience mobile — où se trouve la majorité de vos visiteurs — reçoit la priorité.
Pourquoi c'est important pour votre entreprise
Selon Statista, les appareils mobiles représentaient environ 58,99 % du trafic mondial des sites web au premier trimestre de 2022. Pour les recherches de services locaux spécifiquement, BrightLocal rapporte que 64 % des consommateurs utilisent leurs téléphones intelligents.
Si votre site web ne fonctionne pas correctement sur un téléphone, vous offrez une mauvaise expérience à la majorité de vos visiteurs. Et une « mauvaise expérience » se traduit directement par des « clients perdus ».
Mais cela va plus loin que l'expérience utilisateur. Depuis mars 2021, Google utilise l'indexation axée sur le mobile pour tous les sites web. Google évalue principalement la version mobile de votre site pour décider de votre classement. Si votre site mobile présente des problèmes — mises en page brisées, texte minuscule, éléments trop rapprochés — Google vous pénalise dans les classements de recherche pour tous les appareils.
Problèmes mobiles courants et leurs causes
Texte trop petit pour être lu
Sur un site à largeur fixe affiché sur un téléphone, le texte de corps qui est un confortable 16px sur un ordinateur de bureau apparaît à effectivement 6-7px. Google signale spécifiquement le texte plus petit que 16px comme un problème d'utilisabilité mobile dans Search Console. La solution est un dimensionnement de police adaptatif qui s'ajuste en fonction de la largeur de l'écran.
Cibles de clic trop rapprochées
Les liens de navigation, les boutons et les éléments cliquables nécessitent un espacement adéquat sur les écrans tactiles. Google recommande que les cibles de clic mesurent au moins 48x48 pixels CSS avec au moins 8 pixels d'espace entre elles. Lorsque les liens sont trop rapprochés, les utilisateurs tapent accidentellement le mauvais — ou abandonnent complètement.
Défilement horizontal
Si vous devez faire défiler latéralement pour voir le contenu de votre site web sur un téléphone, quelque chose ne va pas. Cela est généralement causé par des images ou des éléments avec des largeurs fixes qui dépassent la largeur de l'écran. Le CSS moderne utilise des unités relatives (pourcentages, largeurs de fenêtre d'affichage) au lieu de largeurs en pixels fixes pour éviter cela.
Contenu caché ou manquant sur mobile
Certaines anciennes conceptions adaptatives cachent simplement du contenu sur mobile pour que tout rentre. C'est une mauvaise pratique. Si le contenu est suffisamment important pour être sur le site de bureau, il devrait également être accessible sur mobile — simplement réorganisé pour s'adapter à l'écran plus petit.
Chargement lent sur les connexions mobiles
Même si un site semble correct sur mobile, il pourrait prendre trop de temps à charger via une connexion cellulaire. Les sites optimisés pour le mobile servent des images de taille appropriée, minimisent le JavaScript et utilisent le chargement paresseux (lazy loading) pour assurer une performance rapide même sur des connexions plus lentes.
Comment vérifier votre expérience mobile
Il existe plusieurs façons d'évaluer votre expérience mobile :
- Utilisez simplement votre téléphone. Ouvrez votre site web sur votre téléphone et essayez de l'utiliser. Pouvez-vous lire le texte sans zoomer ? Pouvez-vous appuyer facilement sur les boutons ? Se charge-t-il rapidement ? Pouvez-vous trouver votre numéro de téléphone et appeler en un seul clic ?
- Test de compatibilité mobile de Google : Visitez search.google.com/test/mobile-friendly et entrez votre URL. Google vous dira si votre page répond à leurs critères de convivialité mobile et signalera tout problème.
- PageSpeed Insights : Visitez pagespeed.web.dev et entrez votre URL. Sélectionnez l'onglet « Mobile ». Vous obtiendrez un score de performance détaillé et une liste de problèmes mobiles spécifiques.
- Outils de développement Chrome : Dans Google Chrome sur votre ordinateur de bureau, appuyez sur F12 pour ouvrir les outils de développement. Cliquez sur l'icône de l'appareil pour basculer vers une fenêtre d'affichage de taille téléphone et voir comment votre site s'affiche sur différents appareils.
Le prix à payer pour ignorer le mobile
Voici ce qu'une mauvaise expérience mobile vous coûte réellement :
- Visiteurs perdus : 61 % des visiteurs mobiles sont peu susceptibles de revenir sur un site auquel ils ont eu du mal à accéder, selon une étude Google/Ipsos.
- Confiance perdue : 48 % des utilisateurs affirment que si un site ne fonctionne pas bien sur mobile, ils y voient un signe que l'entreprise ne s'en soucie pas, selon la même étude Google/Ipsos.
- Classements perdus : Google classe explicitement les sites non adaptés aux mobiles plus bas dans les résultats de recherche.
- Prospects perdus : Si votre numéro de téléphone n'est pas cliquable sur mobile, vous comptez sur les clients pour taper manuellement votre numéro dans leur composeur. La plupart ne prendront pas la peine — ils appelleront le résultat suivant.
À quoi ressemble une bonne expérience mobile
Lorsqu'un client potentiel visite votre site web sur son téléphone, voici à quoi l'expérience devrait ressembler :
- La page se charge en moins de 2 secondes
- Ils voient immédiatement le nom de votre entreprise, ce que vous faites et comment vous contacter
- Le texte est grand et facile à lire sans zoomer
- Un bouton « Appeler maintenant » est visible sans défiler
- Ils peuvent faire défiler vos services, voir vos avis et consulter vos photos de travail
- Tout est à portée de pouce — pas de pincement, de zoom ou de recherche
- Un formulaire de contact est facile à remplir avec un clavier de téléphone
C'est à cela que devraient ressembler les sites web de vos concurrents, et c'est à cela que votre site web doit ressembler. Si ce n'est pas le cas, vous perdez des clients au profit d'entrepreneurs qui ont compris cela.
La bonne nouvelle : obtenir un site web adapté aux mobiles est plus facile et moins cher que jamais. La mauvaise nouvelle : chaque jour d'attente est un jour de plus de prospects perdus. Vos clients sont sur leur téléphone en ce moment même, à la recherche des services que vous offrez. Assurez-vous que ce qu'ils trouvent en vaut la peine.