Guide pratique · IA & interfaces
5 min de lecture
Mis à jour le
Adapter une page aux petits écrans
Adapte une page au téléphone et au zoom du navigateur en gardant ses contenus et actions accessibles.
Réponse directe
Une page responsive réorganise son contenu quand l’espace change. Pars d’une colonne utilisable, puis ajoute des colonnes là où elles aident. Garde la même tâche réalisable en largeur réduite ; une capture de bureau rétrécie ne constitue pas une mise en page responsive.
01
1. Pars de la tâche pour choisir la disposition
Pour une page de formation, écris d’abord l’ordre de lecture : titre, explication, prix, action d’inscription, puis détails complémentaires. Dessine cet ordre sur une colonne avant de placer le prix à côté de l’explication sur grand écran. C’est un exercice original de préparation, pas une disposition imposée à tous les produits.
Choisis une disposition responsive quand les mêmes informations doivent rester utilisables dans différentes tailles de fenêtre. Une application mobile distincte peut servir d’autres tâches, mais masquer ici le prix ou l’inscription pour gagner de la place change l’utilité de la page. Décide explicitement où va chaque élément déplacé.
02
2. Laisse le contenu révéler le point de rupture
Utilise un réglage de viewport qui suit la largeur de l’appareil et autorise le zoom. Préfère des dimensions souples à une surface de bureau fixe. Place un point de rupture quand le contenu devient serré, plutôt qu’en fonction de la largeur d’un modèle de téléphone.
Dans l’exemple, teste le titre français le plus long, une description de prix sur deux lignes et un libellé d’inscription qui revient à la ligne. Réduis progressivement la fenêtre. Quand les deux colonnes gênent la lecture, place le panneau de prix après l’explication. Note cette transition et teste juste avant et après : deux captures aux extrêmes peuvent manquer une largeur intermédiaire cassée.
03
3. Vérifie le parcours d’inscription complet
Ouvre une formation au titre long, déplie ses prérequis, suis l’action d’inscription puis reviens. Recommence avec le prix sous l’explication. Vérifie que l’action conserve son libellé et sa destination, que les prérequis restent accessibles et que le focus suit un ordre compréhensible. Sépare les résultats attendus des observations.
Ajoute une illustration lente à charger et un texte inhabituellement long à cet exercice. Fais tenir le média dans son conteneur en conservant des proportions utiles. Si une chaîne déborde encore, examine cet élément au lieu de couper toute la page. Le masquage peut cacher le symptôme tout en laissant une action inaccessible.
- Les prérequis dépliés restent accessibles après déplacement du prix.
- Le libellé et la destination d’inscription restent cohérents entre dispositions.
- Le retour depuis l’inscription retrouve une page utilisable, sans panneau coupé.
04
4. Distingue réorganisation et agrandissement
Le critère Reflow de WCAG 2.2, niveau AA, vise une présentation à 320 pixels CSS de large pour un contenu à défilement vertical, sans perte d’information ou de fonction ni lecture nécessitant deux axes de défilement. Un viewport de 1280 pixels CSS à 400 % de zoom navigateur permet notamment d’atteindre cette largeur. Un grossissement par pincement ne l’établit pas.
Un contenu dont le sens nécessite deux dimensions, comme un tableau de données, peut bénéficier d’une exception. Elle ne couvre pas son titre, son explication ou ses commandes. Contiens le défilement du tableau et documente l’exception.
05
5. Sépare preuve de disposition et accessibilité
Teste la page à la largeur réduite mesurée puis à une largeur intermédiaire, et parcours l’inscription au clavier. Revérifie tout en-tête fixe ou bouton en bas qui peut recouvrir du contenu. En cas d’échec, note la version, le viewport, le zoom, le navigateur et l’étape devenue inaccessible.
Ce guide décrit une démarche de mise en page ; il ne modifie pas ton site et ne certifie pas son accessibilité. Une page responsive ne prouve pas la qualité des labels, du contraste, du focus ou des performances. Un viewport mobile simulé ne prouve pas non plus l’usage sur un vrai téléphone. Poursuis avec le guide de vérification de l’interface.
À conserver
Vérifie le résultat
- 01Les versions EN et FR longues gardent l’explication, le prix et l’action disponibles.
- 02La disposition fonctionne autour de chaque rupture, pas seulement sur deux captures.
- 03Le contrôle à 320 pixels CSS mesurés précise les exceptions justifiées.
- 04Le parcours clavier atteint la même destination d’inscription.
- 05Les observations indiquent version, navigateur et viewport testés.
- 06En-têtes fixes et actions en bas laissent le contrôle focalisé visible pendant le parcours.
Sources primaires
Les affirmations techniques de ce guide sont reliées aux spécifications et documentations first-party.
- Responsive web design basics (nouvel onglet)Google web.dev · Référence primaire des vérifications concernées ; l’exemple est original et ne certifie pas la conformité.
- Understanding SC 1.4.10: Reflow (nouvel onglet)W3C WAI · Référence primaire des vérifications concernées ; l’exemple est original et ne certifie pas la conformité.
Continuer
Guides et outils associés
Comprendre → Reconnaître → Choisir → Comparer
Pack pour ton agent
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
Implémenter correctement
Applique « Adapter une page aux petits écrans » pas à pas
# Applique le guide « Adapter une page aux petits écrans » dans ton agent ## Objectif Une page responsive réorganise son contenu quand l’espace change. Pars d’une colonne utilisable, puis ajoute des colonnes là où elles aident. Garde la même tâche réalisable en largeur réduite ; une capture de bureau rétrécie ne constitue pas une mise en page responsive. ## Prérequis - Inspecte le dépôt, la documentation et les conventions existantes. - Confirme que le besoin correspond au périmètre du guide : Adapte une page au téléphone et au zoom du navigateur en gardant ses contenus et actions accessibles. - Préserve les décisions correctes déjà en place. ## Étapes du guide - 1. 1. Pars de la tâche pour choisir la disposition — Pour une page de formation, écris d’abord l’ordre de lecture : titre, explication, prix, action d’inscription, puis détails complémentaires. Dessine cet ordre sur une colonne avant de placer le prix à côté de l’explication sur grand écran. C’est un exercice original de préparation, pas une disposition imposée à tous les produits. - 2. 2. Laisse le contenu révéler le point de rupture — Utilise un réglage de viewport qui suit la largeur de l’appareil et autorise le zoom. Préfère des dimensions souples à une surface de bureau fixe. Place un point de rupture quand le contenu devient serré, plutôt qu’en fonction de la largeur d’un modèle de téléphone. - 3. 3. Vérifie le parcours d’inscription complet — Ouvre une formation au titre long, déplie ses prérequis, suis l’action d’inscription puis reviens. Recommence avec le prix sous l’explication. Vérifie que l’action conserve son libellé et sa destination, que les prérequis restent accessibles et que le focus suit un ordre compréhensible. Sépare les résultats attendus des observations. - 4. 4. Distingue réorganisation et agrandissement — Le critère Reflow de WCAG 2.2, niveau AA, vise une présentation à 320 pixels CSS de large pour un contenu à défilement vertical, sans perte d’information ou de fonction ni lecture nécessitant deux axes de défilement. Un viewport de 1280 pixels CSS à 400 % de zoom navigateur permet notamment d’atteindre cette largeur. Un grossissement par pincement ne l’établit pas. - 5. 5. Sépare preuve de disposition et accessibilité — Teste la page à la largeur réduite mesurée puis à une largeur intermédiaire, et parcours l’inscription au clavier. Revérifie tout en-tête fixe ou bouton en bas qui peut recouvrir du contenu. En cas d’échec, note la version, le viewport, le zoom, le navigateur et l’étape devenue inaccessible. ## Critères d’acceptation — Vérifie le résultat - Les versions EN et FR longues gardent l’explication, le prix et l’action disponibles. - La disposition fonctionne autour de chaque rupture, pas seulement sur deux captures. - Le contrôle à 320 pixels CSS mesurés précise les exceptions justifiées. - Le parcours clavier atteint la même destination d’inscription. - Les observations indiquent version, navigateur et viewport testés. - En-têtes fixes et actions en bas laissent le contrôle focalisé visible pendant le parcours. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Les étapes viennent d’un guide publié et sourcé, pas d’une improvisation.
- La checklist transforme le conseil en critères vérifiables.
- Le périmètre déclaré évite d’étendre le guide au-delà de ses preuves.
À essayer ensuite
Ancre le guide dans le projet
# Ancre le guide dans le projet ## Objectif Transforme les étapes appliquées en conventions durables du dépôt. ## Contrôles - Relie chaque décision prise à l’étape du guide qui la justifie. - Ajoute la checklist aux revues concernées. - Note les cas hors périmètre pour les guides voisins. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:6a8ab845f6c12066421c4147c775386c7fa25c3411f01be5f217bd868d657bef
Diagnostiquer un problème
Diagnostique un écart au guide « Adapter une page aux petits écrans »
# Diagnostique une application ratée du guide « Adapter une page aux petits écrans » ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Rejoue les étapes dans l’ordre et note la première qui diverge : - 1. 1. Pars de la tâche pour choisir la disposition — Pour une page de formation, écris d’abord l’ordre de lecture : titre, explication, prix, action d’inscription, puis détails complémentaires. Dessine cet ordre sur une colonne avant de placer le prix à côté de l’explication sur grand écran. C’est un exercice original de préparation, pas une disposition imposée à tous les produits. - 2. 2. Laisse le contenu révéler le point de rupture — Utilise un réglage de viewport qui suit la largeur de l’appareil et autorise le zoom. Préfère des dimensions souples à une surface de bureau fixe. Place un point de rupture quand le contenu devient serré, plutôt qu’en fonction de la largeur d’un modèle de téléphone. - 3. 3. Vérifie le parcours d’inscription complet — Ouvre une formation au titre long, déplie ses prérequis, suis l’action d’inscription puis reviens. Recommence avec le prix sous l’explication. Vérifie que l’action conserve son libellé et sa destination, que les prérequis restent accessibles et que le focus suit un ordre compréhensible. Sépare les résultats attendus des observations. - 4. 4. Distingue réorganisation et agrandissement — Le critère Reflow de WCAG 2.2, niveau AA, vise une présentation à 320 pixels CSS de large pour un contenu à défilement vertical, sans perte d’information ou de fonction ni lecture nécessitant deux axes de défilement. Un viewport de 1280 pixels CSS à 400 % de zoom navigateur permet notamment d’atteindre cette largeur. Un grossissement par pincement ne l’établit pas. - 5. 5. Sépare preuve de disposition et accessibilité — Teste la page à la largeur réduite mesurée puis à une largeur intermédiaire, et parcours l’inscription au clavier. Revérifie tout en-tête fixe ou bouton en bas qui peut recouvrir du contenu. En cas d’échec, note la version, le viewport, le zoom, le navigateur et l’étape devenue inaccessible. ## Causes possibles - Une étape a été sautée ou exécutée hors ordre. - Le besoin réel sort du périmètre du guide. - Un critère de la checklist n’a jamais été vérifié. ## Corrections bornées - Reprends uniquement l’étape divergente et ce qui en dépend. - Documente l’écart si le périmètre du guide ne couvre pas le besoin. ## Vérification finale — Vérifie le résultat - Les versions EN et FR longues gardent l’explication, le prix et l’action disponibles. - La disposition fonctionne autour de chaque rupture, pas seulement sur deux captures. - Le contrôle à 320 pixels CSS mesurés précise les exceptions justifiées. - Le parcours clavier atteint la même destination d’inscription. - Les observations indiquent version, navigateur et viewport testés. - En-têtes fixes et actions en bas laissent le contrôle focalisé visible pendant le parcours. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Le diagnostic rejoue des étapes ordonnées au lieu de chercher au hasard.
- Les corrections restent bornées à la première divergence réelle.
- La checklist sert de vérification finale reproductible.
À essayer ensuite
Préviens la prochaine dérive
# Préviens la prochaine dérive ## Objectif Fais de la première étape divergente un contrôle explicite du projet. ## Contrôles - Ajoute un contrôle ciblé sur l’étape qui a divergé. - Vérifie la checklist sur un second cas réel. - Documente la limite de périmètre rencontrée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:30465923c0efaf896920d77dffb0990c25352c8518f8ae6c564c0da6a4cb8760
Digest du Pack: sha256:c9a785c1ddb290df08edd35e62e59a03363469daaf6e43ff2dfab3a5a382eaba