Des micro-fonctionnalités que j’aime sur les blogs et sites web personnels

• Présentation de micro-fonctionnalités qui améliorent l’expérience utilisateur d’un blog

Notes latérales

• Une fonctionnalité qui fournit des informations supplémentaires sans perturber le corps principal du texte
• Elle permet aux lecteurs de consulter facilement des détails additionnels ou les sources
• L’usage des notes latérales par Gwern est particulièrement impressionnant. Ses articles en utilisent énormément et apportent des informations supplémentaires sans casser le flux du contenu principal.
• Avec les notes latérales, on peut consulter facilement les annotations sans faire défiler la page jusqu’en bas.
• On peut voir différentes approches inspirées de Tufte CSS.

Table des matières

• Une table des matières permet de voir d’un coup d’œil les principaux sujets d’un article et de naviguer facilement vers la section voulue.
• Les générateurs de sites statiques (par ex. Hugo) peuvent générer automatiquement une table des matières.
• Le site de Lars Hupel propose une table des matières au sein d’une série, ce qui facilite la navigation.

Bonus : indicateur de progression de la page

• Une barre de progression de page montre visuellement au lecteur où il se trouve dans la page.
• On peut voir cette fonctionnalité sur Quanta Magazine.
• Le tutoriel de CSS Tricks permet d’apprendre à l’implémenter.

Titres faciles à lier

• Il est possible de créer un lien vers une section précise d’une page en utilisant l’ID d’un élément HTML.
• Comme cela n’est pas visible pour l’utilisateur, on peut transformer chaque élément en lien afin de le référencer facilement.
• On peut voir cette fonctionnalité dans la documentation de Hugo.

Regrouper les articles en série

• Quand on veut écrire longuement sur plusieurs sujets, publier sous forme de série permet de transmettre plus facilement le contenu aux lecteurs.
• On peut ajouter automatiquement des boutons « suivant » et « précédent » ou créer un hub de navigation.
• On peut voir cette fonctionnalité sur le blog du langage Chapel.

Articles conversationnels

• Les articles au format conversationnel rendent la lecture plus intéressante et plus facile à comprendre en posant des questions du point de vue du lecteur et en exprimant les inquiétudes d’une perspective moins expérimentée.
• Le site de Xe Iaso et Faster than Lime utilisent souvent ce format.

Indication de la source dans les blocs de code

• Lorsqu’on écrit du code, afficher le nom du fichier et les numéros de ligne dans les blocs de code aide les lecteurs à mieux comprendre.
• Exemple : Crafting Interpreters

Bonus : blocs de code avec liens cliquables

• Le langage de programmation Agda génère des blocs de code HTML qui relient chaque symbole à l’endroit où il est défini.
• On peut voir cette fonctionnalité dans Programming Languages Foundations in Agda.

Indication des liens externes

• Les liens vers des domaines externes sont signalés par une petite icône.
• On peut voir cette fonctionnalité sur James’ Coffee Blog ☕.

Bonus : des marqueurs différents selon la destination

• Le site de Gwern change d’icône selon la destination du lien.
• Par exemple : les liens vers Wikipedia affichent un « W », ceux vers Haskell.org un symbole lambda.

Bonus : aperçu des liens

• En affichant un aperçu de la page au survol d’un lien, on peut voir son contenu avant de cliquer.
• On peut voir cette fonctionnalité sur le site de Gwern.

Flux RSS

• RSS est un standard de flux qui permet à un site de publier ses mises à jour.
• Il permet aux lecteurs de recevoir les nouveautés sans devoir visiter directement le site.

Liens vers d’autres sites

• Inclure des liens vers des articles d’autres blogs ou sites permet de mettre en avant du contenu connexe.
• On peut voir cette fonctionnalité sur le blog de Drew DeVault.

Conclusion

• Ces micro-fonctionnalités peuvent rendre un site plus utile et plus attrayant
• Intégrer ce type de fonctionnalités à son propre site semble être une bonne idée

[tsboard]

Justement, j’étais en train de créer mon propre blog, donc merci pour cette info utile haha

[GN⁺]

Avis Hacker News

• Certaines propositions sont bonnes, mais la barre de progression est trop distrayante et inutile. Il y a déjà une barre de défilement, donc une barre supplémentaire n’est pas nécessaire.
• Les décorations de liens ne sont pas nécessaires. Le navigateur indique déjà très bien où mène un lien. Les pop-ups d’aperçu sont aussi des éléments perturbateurs inutiles.
• Il est préférable d’implémenter sur un blog une page d’index unique de tous les billets. On peut voir les titres d’un coup d’œil et la recherche est facilitée.
• Heureux de voir le sujet du blogging arriver sur Hacker News. Le service de blogging en cours de développement met l’accent sur le minimalisme. Souhaite résoudre le problème d’affichage incorrect de l’art ASCII sur Android.
• Plusieurs « micro-fonctionnalités » plaisent. Préférence pour les fonctions qui ne nécessitent pas JavaScript. Diverses micro-fonctionnalités sont en cours d’implémentation sur le blog.
• Préférence pour l’inclusion de la date complète dans les billets. Pour les contenus techniques, il est important de savoir à quel moment ils ont été rédigés.
• N’aime pas les explications sous forme de dialogue. Il vaut mieux expliquer cela dans des paragraphes séparés.
• Désaccord avec la fonction d’aperçu des liens. Pour des raisons de confidentialité, préférence pour vérifier l’URL avant de cliquer sur un lien.
• RSS ne devrait pas être une fonctionnalité « micro », mais une fonctionnalité essentielle.
• Le site web de Gwern essaie d’avoir trop de fonctionnalités, ce qui ralentit le navigateur. Le problème est particulièrement grave sur mobile.
• La fonction de table des matières devrait être implémentée dans le navigateur web. La progression dans la page, les titres avec lien, les aperçus de liens, etc. devraient aussi être gérés par le navigateur. L’auteur du document n’a pas besoin de définir les polices ni les couleurs.