---
lastModified: 2026-10-10
type: feature
title: "Tests de site responsive pour les boutiques"
description: "Vérifiez la boutique avec Runner AI sur ordinateur, tablette et téléphone. Décrivez les défauts de mise en page et contrôlez les corrections avant publication."
category: ai-websites
h1: "Tests de site responsive avant de publier votre boutique"
keyword: "tests de site responsive"
legacyKind: structured
---

Les **tests de site responsive** dans Runner AI partent de votre boutique actuelle et d'une tâche client précise. Passez entre les aperçus ordinateur, tablette et téléphone, examinez la même page et décrivez le défaut avec son chemin et le résultat attendu. Vous obtenez une correction vérifiable du projet, pas la garantie qu'un format d'aperçu couvre tous les navigateurs ou parcours d'achat.

## Commencer les tests de site responsive par une tâche

Choisissez un chemin et une action que le client doit pouvoir effectuer. Sur une fiche produit, il peut s'agir de choisir une variante disponible puis d'accéder au panier. Sur une collection, vérifiez qu'un filtre ne masque pas les résultats. Utilisez le catalogue réel et les contenus approuvés afin de tester les textes et les images que les clients verront.

Avant de commencer, notez le résultat attendu et les parties qui doivent rester inchangées. Précisez le contrôle concerné et le format où apparaît le problème. Ne remplacez pas les titres longs par des exemples courts pour faire tenir la page. Le [créateur de boutiques mobiles avec IA](/fr/ai-ecommerce-mobile-store-builder) traite la conception initiale. Cette page concerne la vérification d'une boutique existante.

## Comparer les aperçus ordinateur, tablette et téléphone

L'aperçu de boutique de Runner AI propose trois formats. L'ordinateur utilise l'espace disponible, tandis que tablette et téléphone ont des cadres fixes. Changer de cadre modifie l'espace de l'aperçu sans créer un autre projet de boutique. Vous pouvez donc comparer le même contenu lorsque la mise en page se resserre.

Parcourez la page du titre jusqu'à l'action finale. Cherchez les textes coupés, les images qui masquent le produit, les boutons superposés et le défilement horizontal. Ouvrez les menus et utilisez les commandes : un bouton visible ne prouve pas que l'état suivant fonctionne. Répétez la même tâche dans chaque format. Ces cadres constituent une première vérification, pas un simulateur physique ni une couverture exhaustive des navigateurs. Testez séparément d'autres largeurs et de vrais appareils lorsque le tactile, le clavier mobile ou les paiements comptent.

## Transformer un défaut en correction ciblée

Un signalement reproductible comprend le chemin, le format, l'état initial, l'action et les résultats attendu et observé. Une capture peut montrer un chevauchement, mais expliquez aussi quelle action client est bloquée. Indiquez par exemple que la liste des variantes masque Ajouter au panier sur téléphone, plutôt que de demander une refonte complète de la fiche.

Transmettez ce périmètre à Runner AI avec les données catalogue vérifiées, les textes approuvés et les règles de marque. Demandez de préserver les sections sans rapport et de rendre les modifications du code consultables. L'[éditeur de site web avec IA](/fr/ai-website-editor) décrit ce parcours et les demandes portant sur un élément lorsque Design Mode est disponible. Après l'enregistrement et le chargement de l'aperçu actualisé, rejouez le défaut d'origine puis les deux autres formats. Une correction mobile peut modifier les espacements sur ordinateur ou tablette.

## Vérifier le résultat avant publication

Un aperçu satisfaisant apporte une preuve pour le scénario testé. Confirmez que la bonne page s'affiche, que les informations importantes restent présentes et que l'action atteint l'état attendu. Examinez la version actuelle, pas une ancienne capture. Si la page dépend du stock, de la recherche ou du panier, vérifiez les données dans le système qui en est responsable.

La publication reste une décision distincte. Une mise en page correcte ne confirme ni paiements, ni livraison, ni taxes, ni suivi analytique. Utilisez un environnement de test autorisé pour les achats et un vrai téléphone pour les interactions mobiles à risque. Le [design web moderne](/fr/modern-website-design) couvre les changements plus larges de navigation et de structure. Gardez les défauts non résolus visibles et répétez la tâche après chaque correction.

## Questions fréquentes

### Que fournir à Runner AI pour corriger une mise en page ?

Fournissez la boutique, le chemin, le format, l'état initial, l'action et le résultat attendu. Décrivez le défaut observé et joignez une capture si elle aide. Ajoutez les données vérifiées et les sections à préserver. Les tests de site responsive nécessitent un critère de réussite observable, pas une simple demande d'améliorer le design.

### L'aperçu téléphone remplace-t-il un vrai téléphone ?

Non. Le cadre permet d'examiner la mise en page, mais ne reproduit pas chaque appareil ou navigateur mobile. Vérifiez les tâches prioritaires sur de vrais appareils lorsque le tactile, le clavier, l'orientation, l'interface du navigateur ou les paiements sont importants. L'aperçu ne certifie pas les appareils et ne mesure pas leurs performances.

### La vérification de l'aperçu publie-t-elle mes changements ?

Non. Vérifier et publier sont deux étapes séparées. Examinez la correction enregistrée sur ordinateur, tablette et téléphone, puis vérifiez la tâche client et les systèmes connectés. Une mise en page réussie confirme seulement le scénario observé, pas toutes les pages ni toutes les conditions d'achat.

[Découvrir toutes les fonctionnalités de Runner AI](/fr)
