Sémantique et mise en forme (2) : consolider les fondations
2021-12-01
Simplifier l’écriture et améliorer la structure : chronique de l’évolution d’un site web fabriqué avec Pandoc.
Il y a un peu plus d’un an, j’ai remanié mon processus de fabrication pour ce site. Vous pouvez retrouver les explications dans ce billet. En résumé, l’idée était de simplifier à la fois l’outillage en coulisses et la présentation du contenu en façade : le site serait désormais entièrement généré avec Pandoc (le convertisseur qui me permet de rédiger dans un format texte avec des fonctionnalités scientifiques comme les citations) et serait organisé autour d’une page d’accueil unique renvoyant vers toutes les autres pages du site.
Cette semaine, j’ai procédé à quelques améliorations sur le site. Et comme précédemment, je voudrais les commenter brièvement à travers un billet de blog. Bricolage, puis retour d’expérience écrit : c’est désormais un rendez-vous annuel, la visite guidée épisodique de ma querencia éditoriale, dans les mots de Marc Jahjah. Et pour cette nouvelle livraison, j’ai décidé de reprendre le titre d’un vieux billet2018, pour moi, c’est il y a une éternité, surtout à l’échelle du blog (qui périme vite, comme je l’ai écrit ici).
qui parlait déjà de Pandoc, d’Edward Tufte et de technologies du Web.
Le diable est dans l’élément details
Il y a quelques mois, j’ai commencé à partager mon activité de veille. Dans le billet qui présente cette nouveauté, j’explique que la veille a sa propre page, ce qui est une entorse au principe d’une page d’accueil unique pointant vers toutes les autres. Sur le moment, c’est une solution que j’estimais inévitable. En effet, dès le lancement, la liste des entrées de veille était déjà beaucoup plus longue que celle des articles et des billets de blog. Or je ne voulais pas déséquilibrer la page d’accueil. J’ai donc décidé de n’y afficher que les cinq dernières entrées de veille, et de lister l’intégralité des entrées sur une page dédiée.
Malheureusement, ce fonctionnement s’est avéré un peu pénible. En effet, et contrairement à un générateur de site clé en main (comme Jekyll, Hugo ou Eleventy), mon processus de fabrication n’inclut pas la génération automatique de listes de contenus. Les seules étapes complètement automatisées sont la conversion en HTML et le traitement des citations ; tout le reste, des listes d’articles au flux RSS, est fait à la main. Par conséquent, pour les entrées de veille, je devais créer manuellement les mêmes liens sur deux pages différentes. C’est une petite redondance, mais qui a fini par me lasserIl faut dire aussi que l’intégration d’une entrée de veille sur le site n’est pas moins longue que celle d’un billet ou d’un article, quand bien même ces derniers seraient dix fois plus volumineux. Donc toute perte de temps est ressentie de manière plus aigüe.
.
Dans le cadre du développement de Cosma, Guillaume Brioudes m’a fait découvrir l’élément HTML details
. Cet élément permet de créer une section dont le contenu est masqué et qu’on peut révéler en cliquant sur un bouton. Dans Cosma, nous nous en servons pour créer des sections repliables dans la barre d’outils. Lorsque j’ai entrepris la réécriture de ma page d’accueil, j’ai pensé à details
pour résoudre mon problème de veille. Et voici la façon dont je l’utilise :
# Veille
- [Quarto](quarto.html)
- [Tree-query : prémices d’une évolution ?](tree-query.html)
- [Treeverse : le fil, l'arbre et le réseau](treeverse.html)
<details>
<summary>Voir les entrées précédentes</summary>
- [Ordinateurs et créativité](veille/ordinateurs-et-creativite.html)
- …
</details>
Ceci me permet de n’afficher qu’une partie des liens, sans avoir de page séparée à maintenir et de copier-coller à faire. Un gain de temps modeste, mais un gain de temps tout de même.
Rapatrier ma veille en page d’accueil me permet aussi de mieux la valoriser. La nouvelle mise en page, en trois colonnes, donne un meilleur aperçu des rythmes d’écriture qui coexistent sur ce site – articles longs, billets plus compacts, entrées de veille très courtes – tout en soulignant une continuité éditoriale.
La qualité des défauts
Si vous vous promenez un peu sur ce site, et notamment que vous faites défiler un article jusqu’à la section Références, vous constaterez vite mon affection pour le retrait négatif (en anglais hanging indent). C’est l’inverse de l’alinéa : on renfonce tout le paragraphe, sauf la première ligne. Visuellement, on peut dire que cela fonctionne comme une liste à puces, sauf qu’il y a du texte à la place de la puce.
Le retrait négatif, c’est un peu l’équivalent typographique des onglets dans un agenda papier, un classeur, ou même un navigateur internet. Cela remplit exactement la même fonction. Dans une liste dense mais ordonnée, comme une bibliographie classée par ordre alphabétique, mettre un retrait négatif c’est créer une petite affordance qui facilite la recherche d’information.
J’aime beaucoup cette façon de présenter les listes de contenus, à tel point que je l’avais appliquée à ma page d’accueil : présentation bibliographique pour mes articles, et retrait négatif partout, y compris pour la liste des billets et celle des entrées de veille. Mais en revisitant cette page d’accueil, j’ai réalisé que ces choix n’étaient pas très judicieux.
D’abord, pour les articles, donner toutes les informations bibliographiques alourdit la liste ; c’est aussi redondant, car j’indique déjà ces informations sur la page de chaque article. Donc j’ai allégé la liste des articles en ne laissant que le titre et l’année, ainsi que les co-auteurs pour les articles écrits à plusieurs.
Et ensuite, de manière générale, le retrait négatif fonctionne mal pour cette page d’accueil, car elle est faite de paragraphes courts dans des colonnes étroites. Dans ce contexte, le retrait négatif provoque des retours à la ligne fréquents pour très peu de mots, ce qui crée une trop grande irrégularité visuelle.
J’ai donc supprimé les lignes de CSS qui appliquaient un retrait négatif à ces listes, et c’est là que j’ai redécouvert les vertus de la liste à puces. C’est la forme que prend par défaut l’élément HTML ul
dans la plupart des navigateurs, et le fait que ce choix par défaut fonctionne bien m’a surpris.
Il faut dire que j’ai une certaine méfiance pour les listes à puces, qui remonte à ma lecture d’un pamphlet d’Edward Tufte sur PowerPointTufte, The Cognitive Style of PowerPoint, 2003.
. Selon Tufte, PowerPoint nous pousse à sectionner le propos via des listes à puces, alors qu’elles ont souvent le défaut de gommer l’enchaînement entre différentes étapes d’un raisonnement. C’est un argument qui m’a marqué.
Par ailleurs, j’ai aussi un préjugé contre les réglages par défaut, qui remonte lui à mon apprentissage du format EPUB. Comme le disait alors Jiminy Panoz, l’enfer, c’est les autres… feuilles de styles : le code CSS embarqué dans les systèmes de lecture (liseuses, applications) est parfois un véritable obstacle à la conception d’une bonne expérience de lecture. Dans la même logique, sur le Web, il est courant de voir un fichier CSS dont les premières lignes sont consacrées à un reset – le fait d’écraser préventivement les réglages du navigateur pour repartir sur des bases de design saines.
D’où ma surprise lorsque j’ai constaté que, pour une fois, c’était bien un réglage par défaut qui fonctionnait le mieux, de surcroît quand ce choix par défaut était celui d’une liste à puces. Mais quant des choses basiques s’avèrent appropriées et efficaces, il n’y a pas forcément besoin d’aller chercher la complexité. Et au passage, c’est un aspect de moins à régler manuellement.
J’ai toujours aimé passer du temps sur des détails mais j’ai de moins en moins la possibilité de le faire. Alors, des options miraculeuses de Pandoc aux nouveaux éléments HTML5, en passant par les feuilles de styles par défaut des navigateurs, j’apprécie tout ce qui peut me faire gagner du temps quand j’ai une nouvelle idée d’édition.
Le site ayant eu droit à sa révision annuelle, il est temps pour moi de retourner écrire – principalement ma thèse, mais aussi, périodiquement, quelques textes qui viendront allonger petit à petit les trois colonnes de ma nouvelle page d’accueil.