/*
 * Accueil; tout; à propos + @ + FAQ;
 * => Lire cette page via gemini (gemini?);
 */

Les différents aspects de ce site

Après m'être bien amusé dernièrement à ENCORE optimiser la taille de mes pages et écrit un outil pour publier par différents moyens (http et gemini et + si j'ai un jour envie de gopher et de mailinglist), il est temps de faire un petit point sur ce que j'ai pu apprendre.

Le CSS

Alors que je me vantais de ne plus mettre du tout de CSS sur la version html, je suis revenu sur cette décision.

En effet, l'argument "pour réduire la largeur, il suffit de réduire la fenêtre" est tout de même exagéré, d'autant plus qu'il est rare de n'ouvrir qu'un seul onglet. Redimensionner le navigateur à chaque fois est pénible et peu ergonomique.

Je propose d'utiliser le mode "lecture" du navigateur, qui permet à chacun de contrôler l'apparence du site qu'il visite (essayer ;)).

C'est idéal, cependant, tous les navigateurs ne proposent pas ce mode.

Pourtant, je pense qu'il est moins fatiguant de lire un texte à la largeur fixe. Il e va de même pour une petite marge et l'interligne.

J'ai donc fait le choix d'utiliser cette toute petite ligne pour laisser un maximum de champ libre au lecteur :

<style>body{line-height:1.5; margin:1.5em; max-width:75ch}</style>

La favicon en svg

C'est en consultant la liste du 512kb club que je me suis aperçu que mon site pouvait prétendre à une mise à jour. En effet, la page d'accueil ne fait que 2.36KB. Mais c'est sans compter le chargement de la favicon qui faisait environ 800B, ce qui est ridicule, mais demandait une nouvelle requête dont la taille est comparable à celle de la favicon.

https://512kb.club/

Qui plus est, la qualité était médiocre, pour ne représenter finalement que des formes géométriques!

Puisque j'ai patché httpd pour avoir le support httpd, j'ai pensé utiliser le format svg à la place, qui pourrait profiter de cette compression et semblait finalement tout adapté pour mon favicon.

En ouvrant le fichier svg, j'ai découvert tout un tas de commentaires et cochonneries laissées par inkscape, sans compter les valeurs ultra précises avec tout un tas de décimales.

J'ai donc réécrit la favicon avec mes petits doigts : un cercle par ci, un hexagone par là, et hop :)

<svg width='320' height='320' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<polygon points='150,10 280,85 280,235 150,310 20,235 20,85' fill='none' stroke='black' stroke-width='4'/>
<circle cx='150' cy='160' r='90' stroke='black' stroke-width='6' fill='none'/>
<circle cx='150' cy='70' r='10' fill='black'/>
<circle cx='150' cy='160' r='20' fill='black'/>
</svg>

Finalement, les tailles sont ridicules pour une qualité optimale :

$ ls -lh favicon.svg*
-rw-r--r--  1 prx  prx   368B Nov 23 09:24 favicon.svg
-rw-r--r--  1 prx  prx   206B Nov 23 09:56 favicon.svg.gz

Et les navigateurs ne supportant pas le SVG me direz-vous? Il y a toujours la vieille "favicon.ico", qui pèse 1,15KB !

Bon, restait à intégrer cette favicon SVG dans mes pages. Pour cela, je voulais éviter une nouvelle requete qui serait plus grosse que le fichier SVG lui même.

J'ai donc "inliné" cette favicon dans l'entête :

<link rel="icon" href="data:image/svg+xml;utf8,<svg width='320' height='320' version='1.1' xmlns='http://www.w3.org/2000/svg'><polygon points='150,10 280,85 280,235 150,310 20,235 20,85' fill='none' stroke='black' stroke-width='4'/><circle cx='150' cy='160' r='90' stroke='black' stroke-width='6' fill='none'/><circle cx='150' cy='70' r='10' fill='black'/><circle cx='150' cy='160' r='20' fill='black'/></svg>">

EDIT:

Bien que ça soit compris par les navigateurs, le validateur w3 se plaîgnait. J'ai donc passé le svg en base64.

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIHBvaW50cz0iMTUwLDEwIDI4MCw4NSAyODAsMjM1IDE1MCwzMTAgMjAsMjM1IDIwLDg1IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNjAiIHI9IjkwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjYiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSI3MCIgcj0iMTAiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMTUwIiBjeT0iMTYwIiByPSIyMCIgZmlsbD0iYmxhY2siLz48L3N2Zz4KCg==">

Comparaison des divers aspects

En consultant les différentes versions, je suis content de voir que la version la plus jolie c'est celle avec le navigateur "lynx" juste derrière "amfora".

Je vous laisse vous faire un avis ;)

Avec Firefox (http)   Avec Firefox (http)
Avec Netsurf (http)   Avec Netsurf (http)
Avec lynx (http cli)   Avec lynx (http cli)
Avec Lagrange (gemini)   Avec Lagrange (gemini)
Avec Amfora (gemini cli)   Avec Amfora (gemini cli)
Avec bombadillo (gemini cli)   Avec bombadillo (gemini cli)

Une réaction?

Envoyez votre commentaire par mail.
Mode d'emploi de la liste de diffusion pour recevoir les réponses.