Comment j'ai conçu ce blog

Début octobre. D'un côté, j'essaie de terminer mes vidéos, de l'autre je repense de zéro ma présence sur les réseaux sociaux. Ce blog est né au milieu de cette agitation.

Je veux que mon portfolio reste une vitrine. Peu de projets, de bons projets, pas de longues explications. Seulement, quand je travaille, je cherche et j'essaie des choses sans arrêt, et parfois j'abandonne en cours de route. Jusqu'ici, cette partie-là n'avait sa place nulle part. Si je la mets en vitrine, la vitrine s'abîme, et si je ne la mets pas, elle se perd. Si bien que j'ai décidé de séparer les deux.

Mais à quoi ressemble un blog qu'on lit vraiment ? Ce qui me vient d'abord à l'esprit, on le connaît par cœur. Des grilles de cartes… de grandes images de couverture… des textes qui apparaissent au défilement… Lequel de ces éléments aide à lire, franchement, je n'en savais rien. J'ai commencé par là.

Les gens ne lisent pas, ils balaient

Le Nielsen Norman Group mène depuis des années des études d'oculométrie, et le résultat ne bouge guère : ceux qui lisent un texte à l'écran mot à mot sont minoritaires, la plupart d'entre nous le balaient du regard.¹ (Moi aussi, je l'avoue.) Le mode de balayage le plus efficace, ils l'appellent le « gâteau à étages ». L'œil saute d'intertitre en intertitre et, si une partie l'intéresse, il y entre.²

Ce que j'en retiens est simple : quelqu'un qui ne lit que les intertitres doit quand même comprendre ce que dit l'article. C'est pour ça que chaque article commence par un résumé d'une phrase. Sur la page d'accueil, il n'y a rien d'autre que la date, le titre et une ligne. Je voulais qu'on puisse voir de quoi je m'occupe et comment je pense sans ouvrir un seul article.

Il y a une autre décision, qui en surprendra peut-être certains. Ici, pas d'étiquettes « brouillon » ou « idée en cours ». Même une recherche restée à moitié, si je l'écris, je l'écris comme un texte achevé. Car je ne vois pas l'intérêt de publier quelque chose qui n'a pas l'air sérieux aux yeux de celui qui le lit.

Quelle longueur pour une ligne

D'après les études compilées par Baymard, une ligne se lit confortablement entre 50 et 75 caractères.³ La norme d'accessibilité WCAG, elle, fixe la limite haute à 80 caractères.⁴

Je voulais voir ces chiffres de mes propres yeux. J'ai ouvert 14 blogs connus pour leur confort de lecture et j'ai mesuré un par un la taille du texte, l'interlignage et la largeur de la colonne. Ceux qui se lisent bien tombaient toujours dans la même fourchette. Chez Craig Mod, le texte fait 20 pixels et la colonne 746. Chez Medium, 20 pour 680. Chez Every, 20 pour 736.

Le site de Dan Luu, lui, est un exemple édifiant. Sur un grand écran, une ligne grimpe à 224 caractères, et quand l'œil revient de la fin d'une ligne au début de la suivante, il perd son chemin. À mon sens, c'est le cas le plus net d'un bon texte gâché par une mauvaise page.

Ici, le texte fait 20 pixels sur ordinateur et 17 sur téléphone. L'interlignage vaut 1,55 fois la taille du texte, la colonne mesure 680 pixels. Sur la version turque du blog, où j'ai fait la mesure, cela donne entre 65 et 70 caractères par ligne. Les mots turcs sont longs, on le sait, et les lignes se cassent un peu plus tôt que dans un texte anglais. On reste malgré tout dans la fourchette.

Pas de cartes, une liste

Ce que je vois le plus souvent sur les pages d'accueil de blogs, c'est la grille de cartes. Une boîte par article, une image par boîte. D'après NN/g, les cartes conviennent pour juxtaposer des contenus différents, mais pour des choses qui se ressemblent, comme des articles de blog, elles se balaient moins bien qu'une liste et prennent plus de place.⁵ Il y a aussi le côté visuel. Quand on s'impose de trouver une image pour chaque article, on finit tôt ou tard par mettre des images sans rapport.

J'ai choisi la liste. Regroupée par année, avec sur chaque ligne la date, le titre et une phrase.

La vitrine est sombre, ici c'est clair

Mon portfolio est sombre, ce blog est clair. La raison vient d'un constat de NN/g : chez les personnes à la vue normale, un fond clair donne de meilleurs résultats en lecture, et l'écart se creuse à mesure que le texte rapetisse.⁶ Pour un endroit où l'on lit des textes longs, ça m'a suffi. Si ton téléphone ou ton ordinateur est en mode sombre, le site s'ouvre en sombre, et tu peux basculer quand tu veux avec le bouton en haut à droite.

Ce qu'il n'y a pas, et une porte laissée ouverte

Pas de pop-up, pas d'encart pour une newsletter, pas de commentaires, pas de publicité. Pas de cookies non plus, donc pas de bandeau de cookies. Même les polices ne viennent pas d'un autre serveur.

Sur les sites que j'ai mesurés, j'ai bien vu à quel point tout ça fatigue. Sur une page d'article d'Every, il y avait cinq couches fixes en même temps : la barre du haut, le bandeau de cookies, la fenêtre d'inscription et deux encarts dans les coins. Sur un article Substack, on m'a demandé quatre fois de m'abonner. La page de Linear chargeait 217 scripts différents. Et rien de tout ça ne rend le texte plus lisible.

En revanche, il y a une porte que j'ai laissée ouverte : les robots d'IA. Ceux qui font des recherches comme ceux qui parcourent les sites pour entraîner des modèles peuvent entrer ici. Si l'utilisation de mes articles pour entraîner un modèle peut me servir, je ne vois pas pourquoi je fermerais cette porte.

Pourquoi une adresse à part

J'ai d'abord pensé à un nom de domaine complètement séparé, du genre burakreis.blog. Ça coûte 20 dollars par an, et pour l'instant je n'avais pas envie de les dépenser. Puis j'ai appris que Google permet aussi de donner un nom de site distinct à un sous-domaine.⁷ Le blog vit donc à l'adresse blog.designedbyburak.com. Le menu du portfolio n'a pas de lien vers ici, pour que la vitrine reste sobre. Mais le nom de l'auteur figure sur chaque page, et les deux sites se connaissent.

Si quelque chose te gêne, une ligne trop longue, un texte trop petit, écris-moi : hello@designedbyburak.com

P.-S. En écrivant cet article, j'ai aussi ouvert le blog sur un écran très étroit, et le menu du haut débordait de la page. Je l'ai corrigé. N'empêche, c'est assez drôle que le premier bug soit apparu justement pendant que j'écrivais ce texte.