Nicolas Juen

Menu

WCEU : The life of a theme

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 :

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.

4 thoughts on “WCEU : The life of a theme

  1. Ping : Part 010

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.