Nouvelle version du barbablog

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 ?

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 ) 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

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. OH MY GOD ! Il a passé live la nouvelle version ! Et en plus je suis le premier commentaire 🙂 Yoohoo ! J’adore, bravo !

  2. C’est trash 🙂

    Welcome au nouveau thème.

  3. Trés réussi, bravo !

  4. Je constate que tu as finalement cédé à l’argent facile (col droite « Faut bien manger ») 😀

  5. Punk Attitude pour cette nouvelle version, kiffante !
    Bisous. Ruuuh !

  6. Pour info en 1024 par 768, le « propos » de « à propos » passe à la ligne.

  7. Ha j’adore le design Grunge!!!

    Tout à fait un truc de ma génération ça 🙂
    Mais je le répète, j’adhère pour les tâches et le papier froissé! En tous cas merci pour la démonsration clair! (Un point quand même, je ne suis pas du tout à l’aise avec blue print.. tu as essayé yaml? J’ai vraiment préféré, et je prévois de refaire mon site avec, à cause de bugs entre ie et ff etc..)

  8. Et tu n’as toujours pas réactivé le formulaire /contact ?

  9. Merci pour vos réactions ! En vrac :

    pistill >> je n’ai pas réactivé de formulaire de contact. En fait il faudrait que je l’active tout court. Je n’en ai encore jamais mis sur ce blog. Prochainement.

    Mustapha >> et oui… j’ai craqué, j’ai mis des adsens. Si tout va bien ça me fera un demi mentos par mois.

    neg >> merci pour le debug. C’est réparé 😉

  10. Waouh, très chouette le design punk version jaune.
    Pour le reste j’ai pas tout compris à part qu’il faut qu’on clique sur les liens Adsense c’est ça ??

  11. Très beau. J’aime beaucoup l’ambiance que cela donne. Très très bien !

    Bravo !

  12. neg >> merci pour le debug. C’est réparé 😉
    Pourtant j’ai le même problème ce matin (FF, en 1024 x 768)
    Autre chose : quand je suis dans le formulaire de commantaire, curseur dans le champ « Nom », je tabule : e-mail, je tabule : site web, je tabule : paf, haut de page. Au lieu du champs « commentaire ». C’est assez pénible (et totalement anti-accessible ;-).
    Sinon, bravo pour le nouveau design, c’est sympa !

  13. J’aime bien moi, la police ça change, je sais pas ce que ça change mais ça change.

  14. […] ce n’est pas vraiment Bob mais plutôt BarbaBlog dont le design et les fonctionnalités viennent d’être changés. A base de WordPress 2.3, le […]

  15. C’est péchu, j’aime beaucoup 😉

  16. J’a-dore. Et en plus il a l’Asus EEE. Respect et révérence ! Longue Vie a Barbablog « deux-points-zéro-grunge-punkie ». A la ciao !

  17. Bon et bha merci à tous pour ces réactions plutôt positives 🙂

    Le design: « ça, c’est fait ». Maintenant, il ne me reste plus qu’à faire le plus important : produire du contenu (et de qualité si possible). Ca tombe bien, il se passe pas mal de choses en ce moment dans la blogo interneto sphero webdesigno journalistico sphère.

    (P.S. pour Muriel : l’eee pc, malheureusement, ce n’est pas le mien…)

  18. […] type jquery, prototype ou mootools sur ce blog car comme je l’ai déjà écrit dans un billet sur la refonte de ce blog, je les trouve assez lourde et surtout surdimensionnée pour un site de ce type. A la place, […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *