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

Aperçu de la page d’accueil.

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.

Version tablette du site.

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.

Un détail typographique sur le titre du site : les lettres viennent s’épouser grâce à une ombre CSS. Les textes sélectionnés sont mis en forme. Démonstration du défilement doux et de l’animation sur les ancres actives. Navigation au clavier et liens d’accès direct aux contenus.

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.

Le texte d’introduction se déplie et se replie sur mobile. Au survol d’un lien vers un document, un aperçu du document est affiché. Le logo du site est animé au survol.

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.

L’administration de la page d’erreur. La page d’erreur.
L’administration d’un article. Un article.

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.

De l’aide contextuelle dans l’interface d’administration. Un exemple des syntaxes supplémentaires possible pour enrichir les contenus. La mise en ligne se fait après avoir validé différents aspects de la publication.

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


Le site affiché sous IE 6 en mode dégradé.

Vincent.

3 commentaires.

  • Gaël Poupard , le 7 décembre 2015.

    Très chouette article, et bien joué la capture sous IE6 :D

  • Marie Guillaumet , le 7 décembre 2015.

    Super boulot, Vincent ! Merci pour ce making-of.

    J’apprécie ta démarche sans JS et sans cookie, ainsi que les petits effets graphiques, discrets mais qui participent néanmoins à la personnalité du site. Celui-ci charge suuuper vite en plus, c’est très agréable.

    Ça donne envie de tester Kirby…

    (…mais pas de rouvrir IE6 ! :-P)

  • Vallée , le 7 décembre 2015.

    Tip, top !

Laisser un commentaire