Les coulisses du kit de survie du créatif
Nantes, le 29 novembre 2015.
Il y a quelques semaines, nous mettions en ligne une nouvelle version du kit de survie du créatif. De nombreux bénévoles signent cette nouvelle version, et j’en ai réalisé l’intégration et le développement.
Retour sur quelques détails techniques.
L’idée sur ce projet était de faire vite et bien :
- les maquettes de Christophe étaient dans l’esprit initial : simples, mais fortement marquées graphiquement ;
- le CMS Kirby semblait pouvoir répondre à la demande éditoriale avec des contributeurs multiples ;
- la précédente version n’étant plus à jour techniquement, il serait facile de faire plus moderne.
Bien, au travail !
Le front
Pas de parti-pris initial si ce n’est de faire les choses simplement : une structure HTML sémantique, un framework CSS maison pour la mise en page, et une volonté de ne pas s’embarrasser des vieux navigateurs. Les maquettes me sont fournies en grand format et j’ai toute latitude pour concevoir les versions plus petites.
Le résultat s’est montré convaincant à mes yeux. Je me suis appuyé sur une grille de mise en page de ce type, ainsi que sur un rythme vertical standard de 16px/24px. J’ai même pu mettre rapidement en place une double échelle typographique.
La majorité des propositions graphiques que j’ai été amené à faire ont été bien accueillies. Je revenais vers l’équipe pour faire valider mes choix de mises en pages réduites et lorsque je proposais des animations.
J’ai ensuite pris le temps de peaufiner quelques détails : défilement doux, animations sur les ancres, détails typographiques, sélection de textes, navigation au clavier, etc.
J’ai tenté de rendre la consultation des pages la plus agréable possible.
Ce n’est que vers la fin du projet que je me suis rendu compte qu’il ne me serait sans doute pas nécessaire d’ajouter une couche JS. Tout était fonctionnel, il n’était pas indispensable d’en rajouter.
J’ai donc eu envie de continuer dans cette voie, et de montrer qu’il était tout à fait possible de réaliser quelque chose de fonctionnel en adoptant l’enrichissement progressif. Pas de défi technique hors de portée pour autant, le seul écueil notable reste à mes yeux l’utilisation d’un élément de formulaire pour masquer un élément de l’interface.
Pour autant, le site n’est reste pas moins interactif.
Cerise sur le gâteau : aucun cookie non plus n’était nécessaire au bon fonctionnement du site. Exit donc le bandeau imposé par la CNIL.
Le back
Kirby (que j’ai déjà adopté pour mon site) propose de gérer l’intégralité de son contenu en s’appuyant sur des fichiers textes organisés en répertoires. Derrière cette approche rudimentaire, on découvre une organisation de travail agréable, modulaire et performante.
Pas de base de données, un framework PHP inspiré par les syntaxes de jQuery, une séparation stricte entre les contenus et la mise en page grâce au format Markdown et même une interface d’administration personnalisable qui vient en sur-couche de l’ensemble.
En voici quelques aperçus.
Gros point fort de Kirby : j’ai toute latitude pour produire le HTML que je souhaite : presque aucune contrainte. Les templates sont donc très rapidement fonctionnels.
À l’inverse, la reprise des contenus s’est avérée un peu fastidieuse, car il fallait tout passer au format Markdown. Mais c’était aussi l’occasion de relire l’ensemble des contenus et d’améliorer l’orthotypographie générale.
Il fallait également s’assurer que les contributions futures soient facilement réalisables, avec un niveau de qualité similaire. Smartypants fait correctement une partie du travail (une fois celui-ci configuré) mais j’ai cependant été amené à développer quelques petits plug-ins afin de faciliter le travail des contributeurs.
J’ai également veillé à mettre en place de la documentation et des exemples, ainsi qu’une procédure de mise en ligne rigoureuse.
Nul doute que c’est la richesse des contenus existants – et à venir – qui primera. Je suis néanmoins ravi d’avoir apporté ma pierre à l’édifice et j’espère que lecteurs et contributeurs y trouveront leur compte.
http://kitdesurvie.metiers-graphiques.fr
Vincent.
