Mise en page (Layout)
La position, l'espacement et l'alignement transportent la hiérarchie avant qu'un mot ne soit lu. Ce skill construit cette structure et la met à l'épreuve : redimensionnez-la, traduisez-la, reflétez-la pour RTL.
Écrivez chaque correctif dans le système de style du projet. Les nombres ci-dessous sont des points de départ pour les interfaces sans système de densité établi, et là où un tel système s'applique, utilisez-le tel qu'écrit plutôt qu'un substitut familier. Conservez délibérément le chrome de la plateforme, les outils professionnels compacts et les jetons du projet là où ils réussissent encore les tests de résistance.
Les zones de clic et le comportement de focus appartiennent à hr-better-accessibility. Le rayon, les ombres et l'animation sont en dehors de ce skill. La longueur de ligne et l'espacement du texte appartiennent à hr-better-typography.
Grouper avec l'espace, pas avec des lignes
L'espace groupe en premier, les formes d'arrière-plan en second, les lignes de séparation en dernier et seulement là où l'espace seul ne peut pas porter la structure. L'écart entre les groupes doit être au moins 2× l'écart au sein d'un groupe (8px intra-groupe à 16px+ inter-groupe), sinon le regroupement se lit comme du bruit. Les bords d'alignement et l'ordre d'importance se trouvent dans grouping-and-alignment.md.
Garder les contrôles distincts du contenu
Donnez à chaque élément interactif une forme d'arrière-plan, une bordure ou une zone de placement cohérente. Un contrôle stylisé comme le texte statique à côté de lui ne se lit pas comme un contrôle.
Aligner sur des bords partagés
Choisissez des bords d'alignement et tenez-vous-y ; chaque bord déviant se lit comme du bruit. Utilisez un pas d'espacement du projet par niveau de subordination, où 16px est un défaut utile.
Utilisez des propriétés logiques pour la mise en page dépendante de la direction : padding-inline-start, margin-inline-end. Réservez les left et right physiques pour la géométrie vraiment physique.
Ordonner par importance
Le contenu le plus important se trouve près du haut et du bord principal (leading edge). L'ordre de lecture va de haut en bas, du bord principal au bord terminal (leading-to-trailing). Pensez en termes de leading et trailing, pas de left et right.
Suggérer le contenu caché
La divulgation progressive (progressive disclosure) nécessite un indicateur visible. Utilisez le signal établi du projet, ou laissez l'élément suivant dépasser de 16–32px du bord de défilement, ou affichez un contrôle de divulgation. Un contenu caché sans aucun signal pourrait tout aussi bien ne pas exister.
Espace de respiration entre les cibles
Sans système de densité établi, commencez par 12px entre les contrôles bordés ou remplis adjacents et 24px autour des contrôles sans bordure (texte seul ou icône seule). Les mises en page compactes peuvent utiliser moins, tant que les zones de clic de hr-better-accessibility ne se chevauchent pas et que les contrôles restent distincts. Les marges de mise en page et les recettes de points de rupture se trouvent dans spacing-and-adaptivity.md.
Insérer les boutons depuis les bords
Dans les mises en page de contenu, gardez les boutons pleine largeur à l'intérieur des marges de mise en page avec un rayon visible, en commençant près de 16px en ligne sur mobile. Les actions bord à bord fonctionnent lorsqu'elles suivent le chrome de plateforme établi, tiennent compte des zones de sécurité (safe areas) et restent distinguables de l'interface système.
Le contenu déborde, les contrôles flottent
Les arrière-plans et les médias s'étendent jusqu'aux bords de la fenêtre d'affichage (viewport). Les contrôles et le texte restent à l'intérieur des marges de mise en page et des zones de sécurité (env(safe-area-inset-*)). Le chrome collant (sticky) flotte au-dessus de la couche de contenu plutôt que de la bloquer.
Maintenir la structure jusqu'à ce qu'elle casse
Les points de rupture (breakpoints) proviennent du contenu, pas de gabarits d'appareils. Gardez la mise en page élargie tant qu'elle tient vraiment et réduisez tard. Préférez les requêtes de conteneur (container queries) pour l'adaptation au niveau du composant, et testez d'abord les tailles les plus petites et les plus grandes.
Planifier la croissance et le rognage
Les chaînes traduites s'allongent, et les chaînes courtes s'allongent proportionnellement plus, donc une étiquette de bouton d'un seul mot est l'élément le plus risqué à l'écran. Ne mettez pas de largeur ou hauteur fixe sur un conteneur de texte, et laissez les lignes se renvoyer à la ligne. Testez avec une pseudo-localisation et une locale représentative plutôt que de budgétiser un pourcentage.
Ne placez jamais une action critique là où le redimensionnement ou le défilement la rognerait. Gardez-la dans le flux normal, ou dans un chrome stable adapté au produit.
Avant de terminer
| Erreur | Correctif |
|---|---|
margin-left / padding-right dans une mise en page localisable | margin-inline-start / padding-inline-end |
| Bouton de mise en page de contenu touche le bord de la fenêtre | Insérer à l'intérieur des marges du projet ; conserver le chrome de plateforme intentionnel |
| Points de rupture à 768/1024 parce que ce sont les valeurs par défaut | Casser là où le contenu ne tient vraiment plus |
| Conteneur de texte à largeur fixe dimensionné pour une seule langue | max-width et renvoi à la ligne ; tester avec une pseudo-localisation |
| Action primaire en bas d'un panneau, sujet au rognage | Positionnement collant (sticky) ou chrome stable avec padding safe-area |
Shell d'application ou héros en 100vh sur mobile | 100dvh pour un shell qui suit le chrome du navigateur, 100svh pour un premier écran |
| Texte long pousse l'action de fin de ligne hors écran ou écrase son avatar | min-width: 0 sur la colonne de texte, flex-shrink: 0 sur les éléments de taille fixe |
Rapports
Sévérité. HIGH bloque le contenu ou une action à une fenêtre d'affichage prise en charge. MEDIUM nuit à la hiérarchie, à l'ordre de lecture ou à l'adaptabilité. LOW est un polissage isolé d'alignement ou d'espacement.
Vérification. Sans navigateur : propriétés logiques à la place des propriétés physiques, requêtes conteneur et média par rapport à la liste des fenêtres d'affichage prises en charge, et ordre DOM par rapport à l'ordre de lecture prévu. Avec un navigateur : chaque largeur prise en charge, zoom à 200% et le miroir RTL. Signalez chaque vérification que vous n'avez pas pu effectuer comme Non vérifié.
Format. Regroupez les résultats sous le principe que chacun viole, ordonnés par sévérité, une ligne par cause racine listant chaque emplacement où elle apparaît :
| Sévérité | Emplacement | Avant | Après | Pourquoi |
|---|
Emplacement est chemin/vers/fichier:ligne. Pourquoi nomme le principe et l'impact utilisateur.
Signalez Bloquer quand un HIGH subsiste, Approuver sinon, et laissez le reste dans le tableau comme travail à faire. N'approuvez jamais une couverture que vous n'avez pas inspectée. Sans rien à signaler, indiquez "Aucun résultat de mise en page exploitable" et rapportez la vérification.