gemini://lord.re/posts/197-les-designs-de-mon-blog-retour-en-arriere/index.gmi

-------------------------------------------------

[14/04/2020] - ~6mins - #meta #css #hugo

-------------------------------------------------

Voilà un ptit moment que ça me taraudait.

Je voulais *revoir les anciens design* du site.

Mon blog a pas mal évolué avec le temps.

Faut dire que je l'ai commencé il y a quinze ans même si j'en ai perdu la première version.

Il n'y a pas si longtemps ce n'était qu'un seul fichier html avec un seul fichier css.

Je le modifiais à la mimine direct en html avec vim.

Et malheureusement je n'ai pas conservé beaucoup de sauvegarde de cette époque.

Je n'ai que sa dernière itération.

Du coup il a fallu que je ruse : je suis passé par l'=> https://archive.org/web/ Internet Wayback Machine qui est un outil magnifique.

Ce site s'évertue à sauvegarder des pans entiers du web.

Il sauvegarde des pages web mais surtout les rend disponibles.

Du coup on peut voir à quoi ressemblait un site il y a quelques années.

C'est un vrai musée numérique moderne.

On peut aussi retrouver des sites qui n'existent plus.

C'est pas ultra rapide mais ça marche sacrément bien.

Vous pouvez (oui, *vous*) également demander à ce qu'il sauvegarde une page précise.

Bref, je m'égare, je suis allé récupérer les anciennes versions de mon blog sur leur site.

Et du coup je vous propose un ptit retour en arrière.

Chaque image vous emmènera sur la version html du site que vous pourrez naviguer normalement (à l'exception des liens pétés volontairement ou non).

{{< img src="2010.png" link="index.2010" alt="Un simple logo en ascii art, un menu qui menait à mes différents services et voilà" title="Rudimentaire, brutaliste, efficace" >}}

C'était vraiment très léger.

Je n'utilisais quasiment aucun formattage.

Le rendu était d'ailleurs quasi identique dans un navigateur texte que dans un navigateur graphique.

Le contenu était vraiment pauvre avec du recul et je ne stockais pas les dates des articles ce que j'ai regretté bien plus tard.

Je regrette également de ne pas avoir contraint le texte à la largeur du logo, c'était assez cool.

J'en viens à hésiter à recréer un design similaire sur le blog actuel.

J'ai maintenant un peu honte du contenu mais bon, c'est pas bien grave, faut bien commencer quelque part.

Sans plus tarder le screenshot qui sert de lien :

{{< img src="2011.png" link="index.2011" alt="Le design est absolument pas accessible, il faut passer la souris sur les titres pour afficher les articles, c'est tout gris et gris et blanc et un peu de rondeurs." title="La quintessence du CSS en 2011, des ombres, des arrondis, de l'alternance de couleurs et ça réagit au survol.">}}

Je sais pas me demandez pas.

C'est _VRAIMENT_ pas pratique.

D'aucun dirait que c'est de la merde, mais vous savez quoi ?

Non, mais sous prétexte de faire mumuse avec un peu tous les ptits trucs fifous du CSS de l'époque j'ai pondu un truc vraiment inutilisable et qui gâche du coup le contenu.

Mais j'aime encore maintenant l'aspect visuel du menu en haut quand on le survole.

Tiens c'est marrant j'avais déjà terminé ma dégooglisation en 2011 (coucou Frama).

{{< img src="2013.png" link="index.2013" alt="un design qui a adopté les couleurs actuelles à peu près, avec des colonnes. Bien plus sobre." title="J'aime beaucoup ces couleurs et d'ailleurs ça n'a que peu varié depuis" >}}

2013 (ouai j'ai pas de nom de design), c'est un design qui me plaît encore pas mal et qui ne fait pas vraiment daté je trouve.

C'est sobre, avec des couleurs qui me plaisent beaucoup, assez pastel mais c'est vrai assez peu contrastées.

Je suis allé à fond dans la colonne ce coup-ci, plus le navigateur est large plus c'est chiant à lire.

Sur un article court ça ne pose pas de souci mais un article long où il faut scroller verticalement ça veut dire monter et descendre autant de fois qu'il y a de colonnes.

Mais ça donne un aspect journal appréciable.

En dehors des colonnes, la seule petite folie c'est l'affichage des dates au survol.

Ça y est, en septembre j'ai adopté Hugo et je dis aurevoir à ma ptite page écrite à la main.

{{< img src="2017.png" link="index.2017" alt="On a un design très proche de l'actuelle avec une colonne de présentation à gauche et le contenu à droite avec chaque article bien défini avec ses métadonnées et un lien pour lire en entier" title="Je pense que certains d'entres-vous l'ont vu en vrai celui-là." >}}

Avant cette itération, je n'avais à peu près aucun lecteur.

Là, j'ai commencé à écrire beaucoup plus de contenu et surtout à chaque fois des articles un peu plus longs qu'avant.

Ça commençait à être nécessaire d'avoir des pages dédiées pour chaque article.

On reconnait bien le design actuel qui n'a été que de simple itération depuis cette base.

J'ai d'ailleurs donné un petit nom au design *NeoDark*.

Je sais pas trop pourquoi, me demandez pas.

Toujours aucune image de tout le site.

J'avais pas encore les différents types d'articles, du coup le code couleur n'était pas encore posé.

Après un an de Hugo, je suis complètement conquis et je ne pense plus le lâcher de si-tôt.

{{< img src="2018.png" link="index.2018" alt="Très semblable au précédent, il y a désormais les icônes en SVG dans le menu de gauche et quelques couleurs supplémentaires sur les articles" title="Quelques petites mutations par-ci par-là." >}}

C'est pas la révolution mais de légères évolutions éparses.

J'aimais pas du tout le rendu dans le coin des articles mais je me sentais obligé de le mettre alors qu'au final on s'en fout un peu du type d'article.

Surtout que les frontières se brouillent rapidement.

C'est l'arrivé des SVG dans la sidebar, j'ose enfin inclure des images.

Je commence à avoir mon lectorat qui se constitue mine de rien.

Chaque article avec des images (même petites et optimisées) ça commence à représenter pas mal de trafic.

Et d'ailleurs j'ai également réduit drastiquement le RSS qui représente la plus grosse part de la bande passante.

J'inclus donc bien moins d'articles.

Je tente de pousser au max l'utilisation du cache mais pas mal de logiciels (nextcloud surtout) ne savent pas se comporter correctement mais on ne peut rien y faire.

Et nous voilà en bout de périple.

{{< img src="2020.png" link="index.2020" alt="Le design actuel" title="Exit le pastel et bonjour les couleurs" >}}

Je sais que certains n'aiment pas, mais je me suis lâché sur les couleurs.

J'aime beaucoup cet effet un peu néon, avec les ombres colorés qui poussent les couleurs un peu plus loin sur le fond.

Et le footer des articles avec son gris plus sombre ça fait plus classe.

C'est le retour des arrondis aussi avec la bordure haute des articles plus épaisse.

J'ai aussi retravaillé la sidebar pour ajouter un texte visible à chacune des icones.

Faut avouer que les icônes en elle-même n'était pas forcément très explicite.

Pendant un moment l'icône et le texte pour le Fediverse était animé mais ça bouffait pas mal de CPU pour que dalle.

C'est aussi l'arrivée du *blogroll* à droite pour promouvoir d'autres blogs francophones.

Bon ça se voit pas sur la capture d'écran mais c'est aussi l'arrivée des commentaires (enfin en fin 2018).

Et je poste aussi mes réactions à chaud de visionnages de films pour diversifier un peu plus le contenu.

Voilà, ainsi s'achève ce petit retour en arrière sur près de quinze ans de bloggage.

------------------------------------

[14/04/2020] [meta css hugo]

------------------------------------

L'allure de mon blog à travers les âges

2007

2011

2013

2017

2018

2020