coastdigitalgroup/coastai-skills

Système de Mise en Page d'Articles

Objectif

Le Système de Mise en Page d'Articles fournit une méthodologie pour concevoir « l'expérience de lecture » — la disposition spécifique du texte et des médias d'accompagnement pour du contenu long comme les blogs, la documentation, les livres blancs et les études de cas. Alors que le section-composition-system gère le flux au niveau de la page, ce système se concentre sur la lisibilité, la longueur de ligne (mesure), le rythme vertical et la relation spatiale entre le texte et les éléments éditoriaux (images, citations, blocs de code). Il garantit que les utilisateurs peuvent absorber de grandes quantités d'informations sans fatigue visuelle.

Cas d'Utilisation

• Concevoir des modèles de billets de blog et des pages d'articles.
• Structurer la documentation technique et les bases de connaissances.
• Créer du contenu éditorial long ou des magazines numériques.
• Développer des « Modes de Lecture » ou des vues de texte axées sur l'accessibilité.
• Organiser du contenu éducatif où la rétention d'information est primordiale.

Quand NE PAS Utiliser

• Pages d'Atterrissage à Fort Impact : Lorsque l'objectif est de scanner les avantages et les appels à l'action rapides ; utilisez section-composition-system.
• Tableaux de Bord : Lorsque la densité des données et la comparaison sont prioritaires sur la lecture linéaire ; utilisez data-table-ui-system.
• Formulaires et Vues à Saisie Intensive : Utilisez form-design-system.
• Vues « App » à Fenêtre Unique : Lorsque le contenu est secondaire par rapport aux outils fonctionnels.

Entrées

1. Archétype de Contenu : S'agit-il d'un tutoriel technique (riche en code), d'une histoire narrative (riche en images), ou d'un livre blanc formel ?
2. Système Typographique : Les tailles de police de base et les échelles définies dans fluid-typography-system.
3. Environnement de Lecture : Ce contenu sera-t-il lu principalement sur mobile (sans distraction) ou sur ordinateur (contexte multi-colonnes) ?
4. Carte Hiérarchique : La structure logique du contenu (H1, H2, H3, Corps, Légendes).

Sorties

1. Le Spécificatif du « Conteneur Doré » : Les largeurs maximales définies pour le texte afin de garantir une longueur de ligne optimale.
2. La Carte du Rythme Vertical : Un système de marges et de rembourrages qui crée un espacement prévisible entre les paragraphes et les titres.
3. Le Plan des Composants Éditoriaux : Des règles visuelles pour les citations en exergue, les apartés, les encarts médias et la table des matières.
4. La Carte de Lecture Responsive : Comment les tailles de police et les hauteurs de ligne s'ajustent pour maintenir la lisibilité sur différentes largeurs d'écran.

Flux de Travail

1. Définir le « Conteneur Doré » (La Mesure)

Le facteur le plus critique pour la lisibilité est le nombre de caractères par ligne :

• Plage Optimale : 45 à 75 caractères (espaces compris).
• Implémentation Desktop : Se traduit généralement par une max-width entre 600px et 800px, ou simplement max-width: 75ch — l'unité ch suit la largeur réelle des caractères de la police, elle reste donc correcte lors des changements de police.
• Dimensionnement Fluide : Utilisez clamp() pour les titres et le texte du corps (par exemple, font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)) afin que la typographie s'adapte à la fenêtre d'affichage sans sauter aux points de rupture.
• Centrage : Centrez le conteneur pour réduire la fatigue oculaire due aux mouvements amples de la tête.

2. Établir l'Interlignage et le Rythme Vertical

La hauteur de ligne (interlignage) et l'espacement entre les blocs créent une « marge de respiration » :

• Interlignage de Base : Visez 1,5 à 1,6 pour le texte du corps. Augmentez-le pour les polices plus petites ou plus complexes.
• Le « Ratio d'Espacement » : Utilisez un système d'espacement cohérent (par exemple, 2x ou 3x la marge de base) pour les écarts avant les titres, et un écart plus petit (par exemple, 1x) après les titres.
• Espacement des Paragraphes : Utilisez des marges inférieures (margin-bottom) plutôt que des retraits pour séparer les paragraphes dans les mises en page web.

3. Concevoir des « Pauses » Éditoriales

Prévenez la fatigue du « Mur de Texte » en introduisant une variété visuelle :

• Citations en Exergue : Texte plus grand et stylisé qui met en évidence les idées clés.
• Apartés/Encarts : Boîtes distinctement stylisées (souvent avec un fond clair ou une bordure) pour des informations secondaires.
• Images/Médias : Définissez des règles pour les médias « Contenus » (en ligne) vs « Larges » (sortant de la largeur du conteneur) vs « à Fond Perdu ».
• Habillage des Titres : Appliquez text-wrap: balance aux titres et aux citations en exergue (avec une solution de repli pour les navigateurs non pris en charge) pour éviter les mots orphelins sur la dernière ligne.

4. Construire la Navigation et l'Orientation

Aidez les utilisateurs à gérer le contenu long :

• Table des Matières (TdM) : Pour les articles de plus de 1 000 mots, fournissez une TdM collante sur ordinateur ou une TdM repliable sur mobile.
• Indicateur de Progression : Une barre discrète ou un indicateur de pourcentage pour montrer la quantité de contenu restant.
• Temps de Lecture : Fournissez une estimation « X min de lecture » en haut pour définir les attentes des utilisateurs.

5. Planifier les Changements Typographiques Responsives

Maintenez la lisibilité lorsque l'écran rétrécit :

• Confort Mobile : Sur les petits écrans, réduisez le rembourrage horizontal mais gardez la longueur de ligne confortable.
• Vérification du Contraste : Assurez-vous que les encarts avec fond coloré ou les commutateurs de mode sombre maintiennent le contraste AA des WCAG.

Règles de Décision

• La Règle des Caractères : Si une ligne de texte dépasse 80 caractères, elle est trop large. Si elle est inférieure à 40, elle est trop étroite. Ajustez le conteneur.
• Proximité du Titre : Un titre doit toujours être plus proche du contenu qu'il introduit que du contenu qui le précède (Principe de Proximité).
• Logique de Largeur des Médias : Utilisez des images « Contenues » pour les détails techniques et des images « Larges » ou « à Fond Perdu » pour les changements atmosphériques ou narratifs.
• Le « Test du Plissement des Yeux » pour le Rythme : Plissez les yeux en regardant la page ; vous devriez voir des « blocs » distincts de texte séparés par des espaces blancs clairs et cohérents.

Contraintes

• Accessibilité : Le texte doit respecter le contraste AA des WCAG (4,5:1). La taille de police ne doit jamais être inférieure à 16px (1rem) pour le texte du corps.
• Responsivité : Les conteneurs doivent être fluides (utilisez max-width au lieu d'une width fixe). Pour les composants à l'intérieur de l'article (encarts, médias intégrés) qui doivent s'adapter à leur propre conteneur plutôt qu'à la fenêtre d'affichage, utilisez les requêtes de conteneur (@container).
• Hiérarchie : Le H1 doit être le plus proéminent, mais le texte du corps doit être le plus confortable à lire.

Modes d'Échec Courants

• « L'Océan Desktop » : Texte qui s'étend sur toute la largeur d'un moniteur 24 pouces, rendant impossible pour l'œil de trouver la ligne suivante.
• Texte Asphyxiant : Hauteur de ligne trop serrée (par exemple, 1,1 ou 1,2), provoquant un chevauchement des ascendantes et des descendantes.
• Titres Flottants : Titres avec un espacement égal au-dessus et en dessous, rendant flou le groupe auquel ils appartiennent.
• Médias Incohérents : Mélange d'images centrées, alignées à gauche et larges sans système logique clair.
• « Le Défilement Infini » : Absence d'orientation ou d'indicateurs de progression dans un article de 5 000 mots, entraînant l'abandon de l'utilisateur.

Critères de Validation

• La longueur de ligne (mesure) est comprise entre 45 et 75 caractères sur ordinateur.
• La hauteur de ligne (interlignage) est d'au moins 1,5 pour le texte du corps.
• Le rythme vertical regroupe clairement les titres avec leur contenu suivant.
• Les éléments éditoriaux (citations, encarts) sont visuellement distincts du texte du corps.
• Une table des matières ou un moyen d'orientation est présent pour le contenu long.
• L'expérience de lecture est testée et optimisée pour les écrans mobiles.
• Les ratios de contraste pour tout le texte répondent aux normes AA des WCAG.