Mon site s’affiche mal sur mobile
La majorité des visites d’une boutique se fait aujourd’hui sur téléphone, et c’est là que les défauts d’affichage coûtent le plus cher. Bonne nouvelle : les causes sont peu nombreuses, elles se reconnaissent à l’œil, et la plupart se corrigent dans la feuille de style sans toucher au reste du site.
Quatre défauts, quatre causes
- La page se décale horizontalement et on peut la faire glisser sur le côté : un élément est plus large que l’écran, presque toujours un tableau, une image ou un bloc avec une largeur fixe en pixels.
- Le texte est minuscule et il faut zoomer : la balise de zone d’affichage est absente ou mal réglée dans le gabarit.
- Les boutons se touchent et on clique à côté : les zones tactiles sont trop petites, un défaut d’espacement plus que de mise en page.
- Le menu ne s’ouvre pas, ou s’ouvre et ne se ferme plus : c’est un problème de script, pas de style.
Le débordement horizontal, défaut numéro un
Un seul élément trop large suffit à décaler toute la page, et il est souvent invisible : une image de bannière importée à sa taille d’origine, un tableau de caractéristiques produit hérité d’une fiche copiée depuis un traitement de texte, une vidéo intégrée avec une largeur fixe, ou un bloc promotionnel ajouté par un module.
La méthode pour le trouver est simple et ne demande aucun outil payant : ouvrir la page sur un ordinateur, réduire la largeur de la fenêtre jusqu’à la taille d’un téléphone, et regarder à quel moment la barre de défilement horizontale apparaît. L’élément fautif est celui qui dépasse à ce moment précis. Sur une boutique, il s’agit neuf fois sur dix d’un contenu saisi en administration, pas du thème.
Mobile lent et mobile mal affiché sont deux sujets
On les confond souvent parce qu’ils se manifestent ensemble. Une image de deux mégaoctets affichée dans un cadre de trois cents pixels de large ne casse pas la mise en page, mais elle rend la page pénible sur une connexion mobile, et elle décale le contenu pendant le chargement — ce que les mesures d’expérience de page sanctionnent.
- Un défaut de mise en page se corrige dans la feuille de style : c’est un travail borné, mesurable en heures.
- Un défaut de performance mobile demande de retravailler les images, les scripts tiers et l’ordre de chargement : c’est un chantier distinct.
- Un défaut d’ergonomie tactile relève de choix de conception, pas de correction technique.
Continuer sur la bonne page
-
Bugs CSS et responsive après changement de thème
Si les défauts sont apparus avec un nouveau thème PrestaShop.
-
Constructeur de pages qui casse la mise en page
Le cas fréquent côté WordPress, quand la mise en page vient d’un éditeur visuel.
-
Optimiser les images produits
Si le problème est le poids des visuels plus que leur cadrage.
-
Les Core Web Vitals
Ce que mesurent réellement les indicateurs d’expérience de page sur mobile.
Décrivez votre besoin en 1 minute
Quelques questions ciblées pour que je vous réponde avec une estimation, pas avec un questionnaire de plus.