Nouvelle version du barbablog : rightcols are so 90’s

Ami lecteur, comme tu peux le constater si tu es un habitué de ce blog (ce qui m’étonnerait vu la fréquence de publication de billets ces derniers temps), le barbablog a changé de tête. « Mais pourquoi ? Comment ? Quelles sont les raisons métaphysiques qui t’ont poussé à changer de design ? » me demanderas-tu plein d’espoirs et de craintes à la fois. Calme ton impatience de jeune cheval fougueux dopé à la kétamine, je t’explique.

C’est une révolte ? Non Sire, c’est une rÉvolution

C’est un principe de base lors d’une refonte : de trop grands changements risquent de déstabiliser les visiteurs. Une refonte pour un site web, c’est un peu comme un renouvellement de mandat pour un président de Ve la république : le changement dans la continuité. Pour parler un peu moins de politique et un peu plus de design, je reprendrai les mots de Garret Dimon parce que j’ai la flemme d’en écrire d’autres et que lui le dit très bien :

Change itself might be inevitable, but we are in direct control of the amount and speed of those changes. Resist the urge to get carried away and completely redesign everything with every opportunity. Large overhauls can potentially alienate regular visitors, and also introduce unnecessary variables and risks. Evolution is almost always better than revolution. Fortunately, we’re all starting to realize that these frequent small changes are much safer and more valuable than infrequent and total overhauls.

Minimaliste (feignasse)

Peu de blabla graphique, pas de fioritures, du texte et peu d’images, la nouvelle version de ce blog est minimaliste. Je dis minimaliste, d’autres diraient pauvre ou tu t’es pas cassé ou encore t’es vraiment qu’une feignasse. J’assume. Je voulais que ce blog change de tête mais surtout  que le site soit adapté aux nouveaux modes de consultation du web…

Web mobile

… Parce que ami lecteur qui parcourt ce site sur ton téléphone portable, tu le sais mieux que personne, la consultation des sites web sur le bon vieux PC à la papa, c’est fini ! (et si tu ne consulte pas ce blog sur ton portable, poses toi des question ami jeune). De grands et sérieux cabinets de conseils prévoient qu’en 2014 les plate-formes mobiles auront supplanté les machines de bureaux pour la consultation des sites internet. Le barbablog anticipe cette tendance et s’adapte : cette nouvelle mise en page en une colonne unique qui peut paraître basique en mode desktop est clairement optimisée pour une consultation sur tablette ou téléphone portable [1].

Un blog, un bête blog

Cette mise en page basique est également la traduction d’un retour aux bases : ce site n’est qu’un blog et l’élément fort de structuration d’un journal personnel en ligne, c’est la chronologie. Finie la navigation par tag (même s’ils sont toujours là, pour des histoires de référencement) et retour à une organisation rétro-chronologique qui est celle qui sied le mieux à ce type de contenu. Adieu colonne de droite, je ne vous polluerai plus avec des éléments secondaires dont j’imagine qu’ils pourraient vous intéresser alors qu’on sait tous très bien qu’en tant qu’adultes majeurs et vaccinés lorsque vous arrivez sur un article de ce blog ce n’est pas parce que vous avez cliqué sur un lien que je vous aurais proposé mais bien parce que vous avez choisi d’arriver sur cet article tout seul comme un grand soit à partir d’un moteur de recherche soit à partir d’un gros referer type twitter ou facebook. Par ailleurs, on va pas se mentir, les colonnes de droites ne servent à rien d’autre qu’à afficher de la pub. Ici, pas de pub donc pas de colonne débile de droite. En plus, je sais si vous avez remarqué, mais la droite, ce n’est plus à l’ordre du jour.

Responsive

Si le site est orienté multi plate-formes de par sa mise en une colonne unique, il y a quand même quelques trucs et astuces techniques qui facilitent l’adaptation de ce site à toutes les plate formes et à toutes les tailles d’écran. Lors de cette nouvelle mouture du barbablog, j’ai appliqué les principes du responsive webdesign, une expression que l’on voit souvent depuis la publication de l’article de Ethan Marcotte il y a maintenant presque 2 ans. En deux mots et pour reprendre ceux de Jeffrey Zeldman le responsive webdesign :

c’est ce qu’on appelait la mise en page liquide dans les années 1990 sauf que ça ne craint pas.

Jeffrey Zeldman, Responsive design is the new black

Voilà pour le concept. Pour la mise en oeuvre, après avoir testé plusieurs framework CSS orientés responsive webdesign, j’ai choisi d’utiliser Less framework (à ne pas confondre avec Less Css, un système de CSS dynamique, intéressant également). De tous les frameworks testés Less framework était de loin le moins contraignant. Il propose une grille qui s’adapte à 4 résolutions différentes : Desktop (992px de large), tablette (768px), portable format portrait (320px) et portable format paysage (480px). Less framework n’impose pas d’utiliser des classes périphériques et extrêmement verbeuses type div class="col1 last push-3 et respecte ainsi la séparation entre structure et présentation.

Une tendance de fond

Je me suis lancé dans le redesign ce blog après avoir lu le billet de Jeffrey Zeldman sur le récent redesign de son blog. Zeldman est un évangéliste, il pousse ses principes à outrance pour les besoins de sa démonstration, d’où ses typos énormes et ses titres ultra graissés. Je ne suis pas évangéliste, je ne suis même plus webdesigner. Cette refonte je l’ai fait pour mettre valeur le contenu de ce site : je suis en effet persuadé que Zeldman a 100% raison et que nous allons voir fleurir ces prochaines années des sites avec des grosses typo, sans colonne de droite et  optimisés mobile avant d’avoir été pensés desktop. Content first comme dirait l’autre. On en reparle dans un an  ?

L’aspect graphique du barbablog est donc très inspiré de Zeldman.com.

  1. C’est pas pour me vanter mais, en 2010, lors de l’arrivée de l’Ipad, j’avais publié un billet, Flash Ipad et les standards, dans lequel j’écrivais : Au delà du gadget, ce qui est intéressant avec la nouvelle machine d’Apple, c’est que nous – webdesigners et autre concepteurs webmestres – allons devoir repenser la façon de construire nos sites. [2]
  2. C’est pas pour me flageller, mais j’aurais bien mis 2 ans à faire un design pour ce blog adapté aux tablettes et autres terminaux mobiles.

Laisser un commentaire

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