Pourquoi le design responsive d’un site créé avec l’IA se décale-t-il sur mobile ?

Une page qui s’affiche correctement sur ordinateur peut présenter un défilement horizontal sur mobile, des images qui recouvrent le texte ou un bouton de demande de renseignements qui sort de l’écran. En général, le problème ne vient pas du fait que « l’IA ne sait pas créer de design responsive », mais du maintien de largeurs fixes, d’un positionnement conçu pour ordinateur ou de dimensions inadaptées aux petits écrans dans la mise en page générée. Le design responsive d’un site créé par IA fournit une adaptation de départ, mais les règles initiales ne sont pas nécessairement toujours valables après le remplacement d’images, l’ajout de texte ou l’intégration de plugins.

Pour résoudre le problème, commencez par déterminer s’il s’agit d’une page entière trop large, d’un module mal aligné ou d’un déplacement après le chargement, puis vérifiez le conteneur, les points de rupture et les ressources concernés. Ne commencez pas par réduire toutes les tailles de police ou masquer le débordement : cela peut dissimuler le problème, tout en rendant les informations produit, le menu et les formulaires difficiles à utiliser et en nuisant aux demandes de renseignements depuis un appareil mobile.

À vérifier d’abord : le problème concerne-t-il l’aperçu ou la page publiée ?

Ouvrez la page publiée dans le navigateur d’un téléphone et comparez-la à l’aperçu mobile de l’éditeur. La zone d’aperçu peut être affectée par le zoom de l’éditeur et ne remplace pas un test sur un véritable appareil. Notez la page concernée, la version linguistique, l’orientation de l’écran et le moment où le décalage apparaît : à l’ouverture, ou après le chargement des images ou l’ouverture du menu.

• Défilement horizontal sur toutes les pages : vérifiez en priorité l’en-tête, le pied de page, le conteneur global et les paramètres de la fenêtre d’affichage.
• Un seul bloc présente un problème : vérifiez la largeur, les marges, le positionnement et le contenu interne du module.
• La page s’affiche correctement à l’ouverture, puis saute : recherchez en priorité les dimensions des images, le remplacement des polices et les composants chargés de manière asynchrone.

Avant toute modification, dupliquez la page ou conservez un historique des versions, et ne modifiez qu’un seul type de paramètre à la fois. Si l’affichage est correct dans l’éditeur, mais pas en ligne, vérifiez d’abord que la page a bien été publiée et actualisez le cache. Un problème de style persistant ne se résout pas en vidant le cache à répétition.

Si toute la page est trop large, repérez d’abord les éléments qui dépassent de l’écran

À l’aide des outils de développement, passez à une fenêtre d’affichage mobile et vérifiez les limites du conteneur extérieur et des modules concernés. Une cause fréquente est un conteneur configuré avec une largeur fixe en pixels ou une largeur minimale encore adaptée à l’ordinateur. Les tableaux, vidéos et cartes intégrés peuvent également avoir leur propre largeur, de sorte que leur contenu dépasse même après la réduction du conteneur parent.

Dans l’éditeur de création de site, configurez le conteneur principal pour qu’il s’adapte à l’espace disponible. Sur ordinateur, limitez la largeur maximale pour maîtriser la mise en page ; sur mobile, conservez des marges latérales suffisantes. Vérifiez aussi les sous-modules : des marges intérieures latérales combinées à une largeur fixe peuvent également dépasser de l’écran. Si vous utilisez des styles personnalisés, vérifiez le modèle de boîte afin d’éviter que les bordures et les marges intérieures ne s’ajoutent à la largeur définie.

Si, sur mobile, toute la page ressemble à une version réduite d’un site pour ordinateur, vérifiez que la page est configurée avec un viewport correct, afin que la fenêtre de mise en page corresponde à la largeur de l’appareil. Ne désactivez pas le zoom de l’utilisateur et ne masquez pas le problème en masquant globalement le débordement horizontal : les boutons rognés resteront impossibles à cliquer.

Si les cartes et les boutons sont trop serrés, le point de rupture ou le mode de mise en page est probablement inadapté

Les points de rupture ne servent pas simplement à distinguer « ordinateur » et « téléphone » : ils déterminent à quel moment le contenu doit être agencé différemment. Si trois colonnes de cartes produit sont conservées sur un écran étroit, les titres se retrouvent répartis sur de nombreuses lignes. De même, une navigation comportant de nombreux éléments peut devenir encombrée avant même que l’écran n’atteigne le point de rupture mobile.

Réduisez progressivement la largeur de la fenêtre d’affichage à partir d’une largeur importante et repérez le premier endroit où les éléments se chevauchent, puis ajustez les règles de mise en page pour cette plage. Les listes de produits peuvent passer progressivement à deux colonnes, puis à une seule ; les modules combinant texte et image côte à côte peuvent être réorganisés verticalement. Les groupes de boutons doivent pouvoir passer à la ligne, plutôt que de simplement réduire la taille de leur texte.

Dans certains cas, l’option « déplacer » de l’éditeur correspond à un positionnement absolu. Cette méthode convient aux éléments décoratifs localisés, mais pas au texte principal, qui varie selon la langue et la taille de l’écran. Si un bouton est recouvert lorsque le titre s’allonge, replacez d’abord le texte et le bouton dans le flux normal du document, contrôlez leur disposition avec une mise en page flexible ou en grille, puis vérifiez les éventuelles restrictions de hauteur fixe.

Traitez séparément les images déformées et le texte tronqué

Dimensions et recadrage des images

Les images de contenu doivent généralement être limitées à la largeur du conteneur tout en conservant leurs proportions d’origine. Si la largeur diminue avec celle de l’écran, mais que la hauteur reste fixe, l’image risque d’être déformée. Pour afficher un produit dans son intégralité, choisissez un mode d’ajustement qui conserve l’image complète. Pour couvrir une bannière, vous pouvez la recadrer, mais ajustez son point focal afin que le sujet ne soit pas coupé sur mobile.

Une image d’arrière-plan ne détermine pas la hauteur du conteneur. Une bannière pour ordinateur utilisée telle quelle sur mobile peut comprimer le texte ou créer de vastes zones vides. Il peut être nécessaire d’ajuster séparément la hauteur et la position de l’arrière-plan. Réserver un espace en fonction des proportions de l’image ou définir explicitement ses dimensions permet également de réduire les déplacements soudains du contenu situé en dessous lors du chargement.

Contenu multilingue et textes longs

Un titre traduit, une référence de produit ou une adresse e-mail peuvent être plus longs que dans le texte d’origine. Vérifiez que le texte peut passer à la ligne et que la largeur minimale des éléments de texte dans une mise en page flexible ne les contraint pas. Définissez des règles de retour à la ligne adaptées aux liens longs et aux suites de caractères continues. Ne fixez pas la hauteur de tout un bloc pour aligner un seul titre.

Les tableaux doivent être placés dans un conteneur indépendant à défilement horizontal, afin d’éviter que toute la page ne défile horizontalement. Les paramètres importants peuvent également être présentés verticalement, mais il faut conserver la correspondance entre chaque nom et sa valeur ; ne masquez pas simplement des colonnes pour obtenir une présentation plus ordonnée.

Pour les boutons flottants et les composants tiers, vérifiez leur état une fois ouverts

Le bouton de chat en ligne, le bouton flottant de demande de renseignements et la bannière relative aux cookies peuvent se chevaucher en bas de l’écran sur mobile. Lors des tests, ne vous contentez pas de vérifier l’état initial de la page : ouvrez le menu et la fenêtre de chat, appuyez sur le champ de saisie et vérifiez que le bouton d’envoi reste accessible lorsque le clavier virtuel apparaît.

Commencez par ajuster les dimensions et la position des composants, puis vérifiez leur ordre d’empilement. Augmenter uniquement le niveau d’empilement peut amener la fenêtre de chat à recouvrir le menu. Une barre d’action fixée en bas de l’écran doit également tenir compte de la zone de sécurité de l’appareil. Si un formulaire ou une vidéo tiers ne peut être utilisé qu’avec des dimensions fixes, recherchez ses paramètres mobiles et, si nécessaire, choisissez une autre méthode d’intégration.

Après la correction, vérifiez le site en suivant un véritable parcours de navigation

Effectuez des tests sur un écran étroit, sur un téléphone à écran plus large et en mode paysage, puis vérifiez le résultat sur de véritables appareils avec différents navigateurs. Après l’actualisation, observez le chargement, puis accédez à la page produit depuis la page d’accueil, ouvrez le menu, remplissez le formulaire et soumettez-le. Vérifiez que le contenu n’est pas rogné, que les boutons sont cliquables et que la page ne défile pas horizontalement de manière inattendue.

Sur les pages multilingues, vérifiez des titres longs et des produits comportant de nombreux paramètres ; ne testez pas uniquement la langue par défaut. Si le décalage provient de styles verrouillés dans le modèle, de code personnalisé écrasé lors de la génération automatique ou d’un composant intégré impossible à modifier, transmettez à l’équipe de maintenance l’adresse de la page, l’environnement de l’appareil, les étapes permettant de reproduire le problème et des captures d’écran. Précisez l’étendue des modifications afin d’éviter qu’une correction locale ne perturbe d’autres pages.