Après de nombreuses heures passées enfermé dans mon bureau, attaché à mon PC, à boire du café et manger des tranquillisants, la nouvelle version du Barbablog est enfin live. La question qui vous brûle les lèvres, je la connais déjà : quoi de neuf dans cette v2 ?

Design

Je voulais depuis un bout temps réaliser un design en polices serif, la grande mode en ce moment sur le web. Ni une ni deux, j’opte pour ma police du moment: Georgia (en plus, j’adore la chanson) . Histoire de ne pas faire trop propre (le Georgia est une police qui fait sérieux) et pour garder le côté un peu punk du précédent thème, je me suis lancé dans un design grunge: tâches, textures, et contrastes forcés.

Pour la palette de couleur, je suis passé en monochromatique avec comme une unique couleur le jaune. J’aurais presque fait un design en noir et blanc à la subtraction.com mais vu mon nom de domaine, j’étais obligé de garder le jaune. Donc adieu vert et rose fluos. Retour à la sobriété punk.

CSS

Pour mettre en place ce design, j’ai utilisé le framework css blueprint. L’utilisation d’un framework permet de démarrer un projet très vite. Petit inconvénient: il faut parfois se plier à la logique du framework et accepter de ne pas donner de noms sémantique à toutes ses classes [1]. Mais au final, c’est pas bien grave. En plus blueprint fournit une mise en page en colonne bullet proof, qui passe sur tous les navigateurs. Alors pourquoi se priver.

Le nouveau thème du barbablog n’utilise que 6 images. J’ai pu limiter le nombre d’images grâce à une technique soufflée par Kevin de Gamekult, la techniques des sprites css. J’ai réduit le nombre de feuilles de style, passant de 4 à 2. On l’oublie souvent, ce n’est pas forcément le poids des fichiers externes qui ralentit un site, c’est surtout le nombre de requêtes réalisées par chaque page. Désormais ce blog devrait s’afficher comme une fusée.

Javascript

Côté javascript, j’ai purement et simplement dégagé mootools. J’aime toujours autant cette librairie, mais un an après l’avoir installée force est de constater que cette librairie est un peu sur-dimensionnée pour un simple blog. C’est le cas de mootools, c’est aussi le cas de tous les autres frameworks javascript que j’ai pu tester. L’utilisation d’un framework javascript est à restreindre aux applications en ligne ou aux sites de services type flickr, Netvibes ou autre.

En plus, en ce moment, je suis un peu gavé par tous les effets (dont par ailleurs j’ai usé et abusé ici ou là) de glissando, de fading et de toggling que l’on peut voir sur pas mal de sites. Je convaincu que l’utilisation de gadgets visuels pseudo-interactifs est plus confusant pour l’utilisateur qu’autre chose. On a trop souvent l’illusion qu’on peut présenter plus de contenu et de façon plus claire grâce à ce genre de gadgets visuels. C’est faux. Je reste convaincu que la meilleure façon de présenter du contenu c’est de le mettre en gros et en haut de la page (pour faire simple) plutôt que dans des petits onglets qui glissent et qui apparaissent quand on clique dessus.

Au final, je n’ai plus qu’un seul fichier js avec le strict minimum dedans. Moins de requêtes, moins de kilooctets, retour à l’essentiel. J’abandonne aussi l’effet lightbox pour afficher les images, effet certes très joli, mais pas très efficace. Je préfère agrandir le canevas et afficher les images directement plein pot.

Navigation

Wordpress gère les tags en natifs depuis sa version 2.3 . Lorsque je suis passé en version 2.3, j’ai supprimé les catégories au profit des tags. Problème, l’ancien thème du barbablog n’avait pas été pensé pour une navigation par tags. Dans ce nouveau thème, j’ai spécialement réservé un espace pour une liste de tags longue comme le bras. Sur chaque billet, les tags sont désormais mieux mis en évidence. Pour l’utilisateur, c’est un système de navigation qui a du sens. Enfin pour ce dernier point, je m’en remets à vous et à vos remarques

J’ai également musclé la navigation chronologique par archives, qui était quasi-inexistante dans le précédent thème. Grâce à ces nouvelles pages de liste, j’espère interpeler google un peu plus que je ne le faisais jusqu’à présent.

SEO

J’ai profité de cette refonte pour faire mes emplettes parmi les plugins wordpress. Grâce à ces nouveaux plugins, j’ai pu mettre en place :

J’ai également activé un robts.txt pour éviter le duplicate content entre la version normal du site et la version iphone (laquelle est interdite de moteurs).

Et c’est pas fini

Prochainement, je rajouterai une vraie page de résultats de recherche (ça tombe bien c’est mon projet pro du moment) et une page 404 intelligente.

Après avoir dit tout ça, je n’ai rien dit. Le seul vrai retour lors d’une refonte de site, c’est celui des utilisateurs et des lecteurs. Donc ne vous gênez pas pour commenter cette nouvelle version !

  1. Pour plus de détails sur l’utilisation de blueprint, c’est dans ce billet : blueprint, un framework pour webdesigner

Sur le même sujet