Layout & max-width
Comment structurer une page et, surtout, comment maîtriser la largeur du contenu pour garantir une lecture confortable sur tous les écrans. C’est l’une des fondations les plus importantes du design system.
Anatomie d’une page — zone par zone
Le shell applicatif s’organise toujours selon les mêmes zones. Ce schéma rend chacune repérable sur les composants réels (GSSidebar + GSSpaceContent) : il dit où placer quoi quand on conçoit une page.
Enquêtes
Collecte · 12 établissements
Satisfaction post-séjour
31 réponses · FR · 5 mars 2026
Satisfaction post-séjour
31 réponses · FR · 5 mars 2026
Satisfaction post-séjour
31 réponses · FR · 5 mars 2026
Satisfaction post-séjour
31 réponses · FR · 5 mars 2026
Légende des zones
- 1
Rail de navigation
Sidebar gauche, largeur fixe (220px → rail 64px → drawer sur petit écran) : logo, navigation principale en accordéon, bloc bas (aide, alertes) puis profil en pied.
- 2
En-tête de page
Titre + sous-titre à gauche, actions principales (CTAs) à droite. Reste collé en haut de la zone de contenu (sticky) sur fond blanc --ui-bg.
- 3
Barre de filtres
Recherche, filtres, tri — juste sous l’en-tête. Optionnelle : présente sur les listes / dashboards, absente sur un formulaire ou un article.
- 4
Contenu principal
La zone de travail : grille de cartes, tableau, formulaire ou texte. Bornée en largeur de lecture (max-w) et centrée pour le confort.
--ui-bg-surface, cloud) porte tout le shell ; GSSpaceContent pose par-dessus la carte blanche (--ui-bg) qui héberge l’en-tête, les filtres et le contenu. Largeur de lecture (max-width)
Au-delà d’une certaine largeur, le texte devient pénible à lire : l’œil peine à retrouver le début de la ligne suivante, et l’effort augmente fortement avec la longueur. À l’inverse, une colonne trop étroite multiplie les retours à la ligne et casse le rythme. La bonne pratique consiste à borner la largeur des blocs de texte indépendamment de la largeur de l’écran.
- Bringhurst (The Elements of Typographic Style) recommande 45–75 caractères par ligne, avec un optimum autour de 66 pour un texte continu.
- Baymard Institute situe la zone de confort entre 50 et 75 caractères par ligne pour la lecture sur écran.
- La difficulté de lecture croît fortement au-delà de ~90 caractères : le coût du retour à la ligne devient disproportionné.
Repère pratique : la classe Tailwind max-w-prose ≈ 65ch, pile dans la cible.
Comparateur de longueur de ligne
Le même paragraphe, rendu à trois largeurs différentes. Comparez l’effort de lecture.
Guest Suite aide les entreprises à collecter, diffuser et analyser les avis de leurs clients. Une interface claire repose autant sur ce qu’elle montre que sur la façon dont le regard la parcourt : une ligne trop longue fatigue, une ligne trop courte hache la lecture.
Guest Suite aide les entreprises à collecter, diffuser et analyser les avis de leurs clients. Une interface claire repose autant sur ce qu’elle montre que sur la façon dont le regard la parcourt : une ligne trop longue fatigue, une ligne trop courte hache la lecture.
Guest Suite aide les entreprises à collecter, diffuser et analyser les avis de leurs clients. Une interface claire repose autant sur ce qu’elle montre que sur la façon dont le regard la parcourt : une ligne trop longue fatigue, une ligne trop courte hache la lecture.
Règles pratiques
| Type de contenu | Largeur max recommandée | Classe / token |
|---|---|---|
| Texte courant / paragraphes | ≈ 65ch (45–75) | max-w-prose |
| Formulaires | 480–640px | max-w-md / max-w-xl |
| Dashboards / grilles de cartes | Pleine largeur, en colonnes | @container + grid |
| Tableaux de données | Pleine largeur, scroll horizontal | overflow-x-auto |
Layouts adaptatifs
Une page ne se contente pas de rétrécir : elle se réorganise selon la largeur disponible. On suit les canonical layouts — des patterns d’agencement éprouvés qui ajoutent, retirent ou repositionnent des zones selon la place, popularisés par Material 3 et les layouts adaptatifs Android.
Volet d’appui (supporting pane)
Sur grand écran, un volet latéral secondaire — sommaire « Sur cette page », filtres, métadonnées — habille la page sans étirer le contenu principal. Il disparaît dès que la place manque. Cette page en est un exemple : le sommaire à droite (sur grand écran).
Centrage à la largeur max
Un bloc borné (formulaire, texte) qui vit dans une zone plus large que lui se centre (mx-auto) plutôt que de rester collé à gauche avec un grand vide à droite.
Playground — largeur de contenu
Redimensionnez le cadre (poignée en bas à droite) ou utilisez un preset : le contenu reflow via container queries — selon la largeur du conteneur, pas de la fenêtre.
Playground — largeur de contenu
Choisis un scénario, tire la poignée en bas à droite du cadre (ou utilise un preset), et observe le reflow via container queries — selon la largeur du conteneur, pas de la fenêtre. En pleine largeur, clique Agrandir pour sortir de la colonne de doc.
Réputation
Note moyenne
Avis collectés
Taux de réponse
Score e-réputation
Derniers avis
Accueil impeccable, chambre spacieuse et très propre. Le petit-déjeuner était varié et copieux. Je recommande sans hésiter !
Très bon séjour dans l’ensemble. Personnel disponible. Seul bémol : le wifi un peu lent dans les étages.
Personnel aux petits soins, emplacement idéal en centre-ville. On reviendra avec plaisir.
Correct sans plus. Le rapport qualité-prix reste moyen pour la prestation proposée.
Sidebar : <512px drawer plein écran via le burger () · 512–768px rail forcé · ≥768px pli/dépli manuel via le bouton dans l'en-tête de la sidebar (icône ). Header et contenu bornés à max-w-[1280px] et centrés sur le même axe (gouttière + bordure pleine largeur). Article : volet « Sur cette page » dès que le conteneur est large. Formulaire : centré au-delà de sa largeur max.
À faire / À éviter
- Borner les paragraphes avec
max-w-prose. - Laisser les dashboards occuper la largeur disponible, en colonnes.
- Faire reflow le contenu via container queries.
- Centrer les blocs de texte dans une zone large.
- Laisser un paragraphe s’étirer sur 1200px.
- Forcer une largeur fixe en px qui casse sur mobile.
- Empiler du texte pleine largeur sans respiration.
- Se baser sur la largeur de la fenêtre plutôt que du conteneur.