WCEU : The life of a theme

Posted on 22 octobre 201313 novembre 2014 by Nicolas

Plus de 4 minutes 🙂

Cet article est la suite de ma retranscription des conférences du WordCamp Europe 2013. Cette fois encore elle fait partie des conférences LEARN, elle s’intitule The Life of a Theme et elle a été présentée par Tammie Lister ou @karmatosed.

Voici le lien vers sa conférence : https://speakerdeck.com/tammielis/the-life-of-a-theme

L’oratrice est, en fait, la designer de plusieurs WordCamp dont le WordCamp Europe !

La vie d’un thème

Un thème c’est un peu comme une personne, il passe par plusieurs stades, fait des erreurs, a des problèmes bref tout varie ! On fait donc évoluer le process au fur et à mesure que le thème avance.

Le début

C’est un peu la petite étincelles qui va mettre en marche le projet, pour l’oratrice ça demande beaucoup d’énergie car il faut arriver à se mettre en idées des choses alors que l’on a rien à ce moment là! Même si cette idée est fragile elle permet de lancer le process de création

Le planning

Le planning est essentiel, il peut être aussi petit qu’énorme. Dans tous les cas il en faut un pour pouvoir prendre du recul sur ce que l’on fait. Le planning permet de prendre en compte les tests utilisateurs. Prévoir aussi la mise en place du thème etc.

Les moodboard

Les moodboard est un peu un méli-mélo des envies, idées ou vues. En gros il sert à se donner une idée de la direction que veut prendre le designer. C’est le mashup de ce que l’on voudrait comme idée générale. Pour l’oratrice c’est la partie excitante et fun car elle laisse l’imagination vagabonder et n’a pas de limites, par d’internet explorer, pas de bug etc. Tout est beau et la motivation est là !

L’oratrice nous donne des outils de moodboard :

Styleguide

C’est un peu une charte graphique, elle va donner les différentes idées du style du site :

Couleurs
Menus
Formulaires
Textes
Typos
Styles dans le contenu

L’oratrice donne encore quelques outils :

https://github.com/bjankord/Style-Guide-Boilerplate
gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
Les variables less + mixins

Sketch

C’est en fait le mockup souvent fait à la main, c’est en fait le zoning du site sans information et il est créé très rapidement. On y inclus aucune couleur, aucune image juste les idées, juste un placement des choses pour avoir une vue d’ensemble et voir si ça fonctionne comme ça.

Quelques outils encore :

Penultimate
Evernote
Bamboo stylus
Ipad Mini

Wireframes

C’est un peu comme les sketch décris plus haut mais en fait ils sont plus complets et propres. Les couleurs et les emplacement des éléments dans la page sont bien définis, on peut cliquer sur les différents éléments dans la page et on peut un peu naviguer dans le site. C’est une partie un peu fun car on voit son travail « s’animer ».

Comme outil elle recommande balsamiq.com.

Build

C’est là que le fun s’arrête, on va commencer à construire et développer. L’oratrice utilise un starterkit de thème nommé _underscore. Il permet d’aller vite pour créer une base de thème propre et bien faite. Il y a aussi Skeleton qui peut servir de base. Même une base personnelle peut faire l’affaire, ne vous limitez pas mais tentez de partir toujours sur la même base pour que l’architecture soit pérenne et que lorsque l’on revient sur le projet on retrouve nos petits. Ne partez plus de kubrik !

Filter

Pour que tout soit développé au mieux, utilisez les coding standards de WordPress, il y a aussi le Theme Development Checklist qui permet de ne pas se perdre en cours de route de développement et proposer un thème qui va fonctionner dans presque tous les cas. Ils nous servent aussi à savoir où l’on en est dans le développement. Vous pouvez aussi utiliser WP fill me , il va donner plus ou moins tous les éléments qu’un utilisateur va pouvoir entrer dans l’éditeur de WordPress et donc prévoir tous les styles côté front-end.

Testing

C’est là où tout se corse, c’est un monde qui fait peur car des personnes extérieures au projet vont tester. Il va y avoir une seconde opinion sur le travail et vont donner leur avis. Cet avis extérieur va aussi permettre d’éviter des problèmes lors du passage sur wordpress.org. On va pouvoir tester sur des sites comme browserstacks.org (mobiles) mais il y aussi et surtout les machines virtuelles qui permettent de tester dans les conditions les plus proches des utilisateurs.

Launch

Le lancement peut être douloureux mais si on respecte toutes les étapes précédentes alors c’est beaucoup plus facile.

Refine

Le fait le lancer le projet ne veut pas dire qu’il est maintenant figé, ce n’est pas la fin. Il y a des bugs, des améliorations etc. Il faut prendre en compte les retours utilisateur, ils vont faire changer les choses, une fonctionnalité pensée lors d’une des étapes précédentes peut se retrouver totalement inutile au final.

Conclusion

L’oratrice nous a donné quelques trucs et quelques outils pour mener à bien la création de son thème, sa conférence a plutôt mis l’accent sur la création de thèmes pour le repository officiel mais ses conseils valent aussi bien pour un projet non open source. Ne pensez pas qu’un projet est fini dès lors qu’il est mis en production. Les clients ont toujours des envies et besoins différents. Si les étapes précédentes ont été respectées alors faire des évolutions ne posera pas plus de problèmes que ça car tout est bien organisé et réfléchis.

Faites des thèmes mais faites les biens et la qualité globale de WordPress augmentera de la même manière.