Boris Forconi — Webdesigner et co-gérant de Stéréosuper 

Dernier article détaillant le making-of de mes nouveaux outils de communication, ce qui commence à faire de la lecture — sur le choix des couleurs, sur la genèse du logotype, sur la naissance de ce site et sur la mise en oeuvre technique. Nous avons vu dans l'article précédent le procéssus qui m’a mené à la production de maquettes. Je vais ici revenir sur les choix techniques que j’ai effectué, et sur les outils que j’ai employé pour mettre en oeuvre ce site.

Ce sera donc l’article le plus technique de ce sujet “Making-of”. À bon entendeur…

Intégration

On appelle intégration l’étape entre le design et le développement. Il s’agit de partir de la maquette image, pour produire un prototype web (HTML/CSS) fonctionnel.

Mon choix d’avoir réalisé ma maquette avec une grille structurelle apporte ici ses avantages. En effet, il existe plusieurs framework CSS basés sur des grilles de mise en forme, qui vont me simplifier grandement la tâche — d’autant que sur mes projets clients, je laisse généralement cette étape à des experts en la matière.

J’ai choisi pour ce site Blueprint CSS, avec lequel j’avais déjà travaillé. J’aurais pu opter pour d’autres (excellentes) solutions comme 960 Grid System, que je connais moins. L’avantage de ces frameworks est d’apporter une base simple, solide, compatible et évolutive à vos projets web. On peut leur reprocher un poids sensiblement supérieur (pas toujours), l’apport de nommages non sémantiques, et la surcharge d’éléments div. Selon moi, de bien moindres meaux comparé aux bienfaits d’un tel système : un webdesign plus structuré en amont, et une intégration au cordeau.

Pour le logiciel utilisé, j’intégre avec le sacro-saint Textmate, même si je recommande chaudement CSSEdit à ceux qui tiennent à un minimum de WYSWIG.

Enfin, j’ai utilisé sIFR 3, bien qu’un peu long à charger je trouve, pour avoir mes titres en Alternate Gothic.

Me voici donc avec mes différents gabarits intégrés avec Blueprint CSS. Quelques tests et corrections sous Internet Explorer plus tard, me voici prêt à passer à l’étape suivante.

Développement

J’ai conçue la navigation et l’arborescence du site sur un principe proche du blog — une page d’accueil présentant directement des billets classés par date d’ajout, qui peuvent être filtrés par catégorie. Il me fallait donc un CMS adapté à ce type de site.

J’ai hésité entre trois outils, Drupal, WordPress & Kiubi.

Comme vous l’avez constaté, c’est WordPress qui a emporté la mise. Vous le savez peut-être, mais je ne code pas (plus) pour mes projets clients, tout simplement parce que ce n’est pas là que se trouve ma valeur ajoutée. Après avoir fait la création graphique, je laisse le développement à des gens plus expérimentés et plus doués que moi, et m’occupe plutôt du suivi de production. Il me fallait donc un CMS relativement simple et bien documenté.

Drupal est un excellent outil, robuste et souple, un peu plus ardu peut-être à mettre en place. Peut-être à tord, je l’ai donc écarté rapidement, plus familier à wordpress — j’interviens sur Rhooo, basé sur cet outil.

Kiubi m’a fait une excellente impression lors d’une conférence à l'AFD, confirmée par un rapport client irréprochable et réactif. Grâce à un espace dédié, qu’ils m’ont gracieusement mis à disposition, j’ai pu effectuer des tests qui se sont révélés, eux-aussi, plus que convaincants — malgré quelques légertés ergonomiques de jeunesse sur la gestion des erreurs des formulaires. Les plus grands avantages de Kiubi étaient pour moi la simplicité de mise en oeuvre et de maintenance, ainsi que sa gestion pointue du référencement.

J’ai pourtant choisi WordPress, pour les raisons suivantes :

• Je me sers beaucoup de mon serveur en ligne pour héberger toute sorte de choses (comme mon vieux labo, fever, mint, etc…) et je souhaitais le laisser en place. Or Kiubi est une solution hébergée.
• Parce que le système de widget de Kiubi se prête moins à Blueprint CSS
• Parce qu’il existe un bundle Textmate pour WordPress
• Parce que je suis tout simplement fou amoureux du plugin wp-typography

J’ai donc choisi wordpress, malgré quelques défauts comme son honteuse gestion d’erreur lors de l’ajout de commentaires. Quelques longues journées de développement plus tard, vous visitez le résultat.

J’ai conclu ce projet par une longue phase de remplissage des contenus, de la sélection de mes travaux à ces quatres — bien trop longs — articles du making-of.

Je pense à terme intégrer une recherche par mots clés au sein du portfolio, une liste des articles les plus populaires du blog, et peut-être aussi un jour, quand je serais lassé, repasser à un fond blanc…