Créer un guide de style

Les guides de style sont utilisés par les grandes entreprises pour assurer la cohérence de leur site et gagner en efficacité, mais tout designer exigeant peut s'inspirer de cette démarche.

Par

Il y a quelques années je travaillais sur une application complexe. C'était un projet qui avait déjà une longue histoire : de nombreux designers et intégrateurs étaient passés par là, chacun ajoutant une nouvelle portion à un projet qui grandissait. Lorsque je suis arrivée, le CSS était immense, les styles variés, et il m'a fallu beaucoup d'efforts pour comprendre ce qu'on pouvait réutiliser.

C'est à cette époque que j'ai découvert les guides de style (1) - une façon de contrôler le balisage et le CSS afin d'éviter qu'ils ne deviennent ingérables ou qu'ils n'enflent démesurément. Depuis lors, j'ai toujours constaté que les guides de style font gagner énormément de temps de développement, améliorent la communication entre les équipes, et la cohérence du code et du design sur l'ensemble du site. Ça a été une révélation et dans cet article je voudrais vous montrer comment on peut construire et maintenir un tel guide.

Qu'est-ce qu'un guide de style ?

Pour moi, un guide de style est un document vivant de code, qui détaille tous les éléments et les modules codés de votre site. Il sert d'une part à consolider le code des intégrateurs, d'autre part à documenter le langage visuel, comme le style des titres et les palettes de couleurs que vous utilisez pour créer le site. Au final, c'est le lieu où toute l'équipe se retrouve - depuis les propriétaires et producteurs du produit jusqu'aux designers et développeurs - une référence commune lorsqu'il s'agit de discuter de changements et d'itérations. Beaucoup de grandes sociétés ont même mis leur guide en ligne. Starbucks est la plus connue, mais il y en a d'autres.

Guide Starbucks
Le guide de style de Starbucks

Je devrais aussi mentionner le fait que ce que j'appelle guide de style (style guide) est désigné par d'autres comme bibliothèque de motifs (pattern library). De nombreux guides que je référencerai utilisent le terme guide de style, mais pattern library gagne actuellement en popularité.

Quand j'ai commencé à travailler pour Editorially, une des premières choses auxquelles je me suis attaquée a été le guide de style. La création de ce guide a été l'une des choses les plus utiles que j'aie jamais faites en m'installant dans un nouveau job. Elle m'a obligée à passer en revue chaque ligne de CSS, les lire, les digérer, comprendre comment elles était utilisées, puis les documenter pour moi-même et pour l'équipe. En plus de découvrir des incohérences et des erreurs en explorant le CSS, j'annotais le guide de questions, à chaque fois que je ne comprenais pas comment certaines parties du code étaient utilisées (et mes collègues me répondaient très aimablement).

Pourquoi utiliser un guide de style ?

À mesure que votre équipe s'agrandit et évolue avec le temps, votre guide de style vous aidera de diverses manières. Au départ, la création de ce guide vous prendra du temps, mais j'ai constaté que ce temps est largement compensé par la suite, lorsque vous ajoutez de nouvelles sections ou de nouvelles pages, car chaque participant peut se référer au guide pour savoir exactement quel style utiliser.

Guide South Tees Hospital
Si vous deviez construire une page d'information comme celle-ci à partir du guide du South Tees Hospital : un bouton de donation est fait en quelques secondes.

Ensuite, un guide nous permet de standardiser le CSS, d'assurer sa concision et donc sa performance. L'utilisation du guide comme inventaire de modules et de code permet aux designers et aux développeurs de se rendre compte très vite d'éventuels écarts par rapport aux normes et de décider s'il convient d'ajouter du code ou au contraire de réutiliser l'existant. En l'absence de guide, c'est impossible et mon expérience m'a montré que le résultat était du style ajouté au style, et au final un CSS enflé.

Un design cohérent est plus facile à maintenir, car les designers peuvent se référer aux composants du site et assurer une unité esthétique sur l'ensemble du site. C'est particulièrement utile lorsque vous avez des équipes entières travaillant sur un même projet. Et lorsque la cohérence du design est bien entretenue, le code reste concis.

Guide yelp
Yelp montre clairement comment les boutons sont utilisés, ce qui permet une cohérence de style sur l'ensemble du site.

Par ailleurs, la communication est bien plus claire. Il m'est arrivé de construire un projet à très grande échelle et lorsque j'ai construit les pages et les ai transmises au designer, celui-ci s'est servi du langage utilisé dans le guide pour me demander des changements. Du coup, aucune confusion n'était possible ni d'un côté ni de l'autre, nous parlions le même langage, et cela a grandement accéléré le processus de révision. Toute l'équipe avait à disposition un vocabulaire partagé pour discuter le design une fois celui-ci codé.

Enfin, le dernier bénéfice de cette méthode est que vous pouvez utiliser votre guide pour faire une session de tests rapides. Le guide n'est pas identique aux pages que vous construirez au final, mais il peut faire ressortir les problèmes de compatibilité navigateurs par exemple. En les traitant en amont, vous éviterez de longs tests à la fin.

Étapes de construction d'un guide

Je vais maintenant vous accompagner dans la construction de votre guide de style, à partir de l'expérience de mes premières semaines avec Editorially (parce que quand je travaille sur un projet sans guide, je ne pense qu'à ça — demandez à mes collègues).

Assemblez les bases

Commencez votre guide avec quelques éléments de base de votre site, les fondamentaux. Cela peut inclure la palette de couleurs, la grille de mise en page, les styles de polices de caracères pour vos titres et le corps de texte — tout ce que vous considérez comme essentiel. Pour Editorially, le plus important était le guide de couleurs, j'ai donc commencé par là. J'ai créé un document HTML, lié au CSS de l'application, de façon à ce que toute modification de CSS soit automatiquement reflétée dans le guide de style.

Quand vous regardez le guide de style créé par Yelp, vous pouvez voir la façon dont il commence par les bases : typographie, grille et couleurs, en ajoutant ensuite d'autres patterns.

Guide Yelp
Yelp

Ajoutez des patterns

Un pattern est un ensemble de balises et de styles qui constituent un objet de base, comme un bouton ou la façon dont vous listez des liens horizontalement. Chez Editorially, j'ai documenté toutes les variations possibles et le balisage exact de chaque élément.

Par exemple, pour un bouton j'ai simplement mis :

<label for="btn" class="btn" href="#">.btn <input type="submit" name="btn" value=".btn" /></label>

Et parce que nous utilisons le même lien vers CSS que l'application elle-même, le CSS est correct dans le guide de style. Si nous changions le style .btn, le guide de style changerait également.

Continuez à avancer dans votre site et ajoutez des patterns à mesure que vous les rencontrez; vous utiliserez sans doute des patterns de mise en page, ou le pattern d'un objet media ou d'une liste verticale. Ci-dessous voici un autre exemple du South Tees Hospital, qui montre certains patterns pour ce qu'ils ont appelé des blocs de fonctions. Regardez si vous n'avez pas quelque chose de similaire sur votre site, de façon à le documenter dans votre guide.

Guide South Tees Hospital
South Tees Hospital

C'est aussi le bon moment pour demander à votre équipe quelle autre information pourrait les aider dans le guide. Partagez le, laissez l'équipe y jeter un coup d'oeil et avec un peu de chance chacun vous aidera à ajouter les patterns et modules nécessaires. N'oubliez pas de faire participer toute l'équipe car cette ressource concerne tout le monde.

Interactivité du document

Si possible, ajoutez les élément interactifs utilisés par votre site, les dropdowns, les tooltips (de petits textes informatifs qui apparaissent quand vous passez la souris sur un élément), etc. De cette façon, l'équipe verra non seulement le site statique mais aussi les animations. En regardant votre guide, et en passant la souris ou en cliquant, ils agiront de la même manière que s'ils étaient sur le site.

Guide Editorially
Tooltips dans le guide d'Editorially

Facilitez la maintenance

Si la mise à jour de votre guide de style à chaque modification du site se transforme en travail supplémentaire, il est plus que probable que votre guide finira par ne plus être à jour. C'est la raison pour laquelle, comme je l'ai dit, nous avons lié le guide d'Editorially au CSS de l'application de façon à ne pas avoir à le mettre à jour. S'il peut s'avérer difficile de faire de la mise à jour du guide une priorité, sa maintenance est néanmoins absolument critique. Selon la rapidité avec laquelle vous faites évoluer votre site ou votre application, une vérification toutes les semaines ou tous les mois est impérative. Considérez la mise à jour comme partie intégrante du workflow.

Améliorez continuellement votre guide

Une fois le gros des composants de votre site listés dans le guide, il existe tout un tas d'outils pour les rendre encore plus pratiques. Par exemple X-rayHTML, créé par le groupe Filament, est une petite bibliothèque JavaScript qui vous aide à construire votre documentation. X-rayHTML prend chaque objet de votre page et génère un petit bloc de code formaté, sans que vous ayez rien à saisir. Vous pouvez aussi ajouter prism.js pour la coloration syntaxique (syntax highlighting) qui ajoute des couleurs à votre code pour une meilleure lisibilité.

Guide Editorially
Le guide d'Editorially avec X-rayHTML en action

Si l'automatisation vous intéresse, il existe d'autres outils qui peuvent faciliter encore la création du guide, en particulier KSS et Hologram. Tous les deux utilisent des commentaires ou bien YAML dans vos feuilles de styles en lien avec quelque chose comme Ruby, pour générer automatiquement votre guide de style. Si vous voulez adapter un guide préexistant à ces outils, cela pourra prendre du temps, mais à long terme cela vous en fera gagner car la maintenance est grandement facilitée. Par ailleurs, A List Apart a mis en ligne sa bibliothèque de patterns sur GitHub et un article de son blog détaille sa création, qui montre encore une autre façon de construire un guide de style. Les possibilités sont bien plus étendues que ce que j'ai esquissé ici. Le mieux est de regarder à droite et à gauche pour voir ce qui vous sera le plus utile.

Utiliser le guide

Phewww... Vous avez fait tout ce boulot, vous avez créé le guide, et maintenant ? Comment les gens l'utilisent-ils ? La première étape, c'est d'en parler. Si l'équipe intègre un petit nouveau, présentez-lui le guide pour l'aider à trouver ses repères dans le site.

Aussi longtemps que votre site ou votre application évoluera, votre guide de style continuera à vivre. Le fait d'avoir créé un document suffisamment tôt dans le processus, de l'avoir montré à l'équipe, d'avoir reçu un feedback, tout cela est d'un grand secours. L'implication de toute l'équipe en fait le guide de tout le monde - et chacun s'investit dans sa mise à jour.

Nous avons publié le guide de style d'Editorially sur GitHub et en ligne. Il s'agissait encore d'un work in progress (2) et d'un document de travail interne, vous y trouverez des notes, des patterns et un peu de désordre, mais l'intérêt de le rendre public est de souligner le fait qu'un guide de style n'a pas besoin d'être parfait pour être utile. Malgré le désordre, tout cela a été incroyablement utile pour moi et pour toute l'équipe pendant notre travail.

Alors, êtes-vous convaincus ? Vous voulez construire un guide de style pour votre site ou votre application ? L'effort en vaudra la peine : prenez le temps, embarquez votre équipe, commencez à construire - et votre récompense sera un document qui accélèrera vos discussions et le développement de votre site


(1) NdT : on trouve parfois l'expression “guide de rédaction” pour traduire Style Guide mais elle est plus appropriée pour les guides de rédaction de cahiers des charges et autres documents administratifs. L'expression “guide de style” est plus adaptée à notre propos qui concerne le design et le code.   ↩︎

(2) NdT : Editorially fermera définitivement son site le 30 mai. Ce superbe projet éditorial fondé par Mandy Brown, Jason Santa Maria, David Yee et Ethan Marcotte n'a semble-t-il pas trouvé son business model.   ↩︎


Liens vers quelques guides de style

(en anglais)

Pour commencer, et avant tous les autres, styleguides.io, the référence, une mine !

Vous pouvez aussi vous référer à la liste de références compilées par Jeremy Keith sur son site Adactio ou à la liste d'Anna Debenham.


Intéressé par CSS, la typographie, le design ? Sur la Cascade, retrouvez des articles et ressources.


original paru le dans A List Apart.

Sur l'auteur : est tombée amoureuse du code en 2005 et a écrit avec bonheur en HTML et en CSS depuis lors. À l'aise avec des équipes de toutes tailles, elle aime travailler avec des designers et des développeurs qui codent des applications ambitieuses, belles et accessibles. Elle a récemment travaillé avec l'équipe d'Editorially et est actuellement freelance. On peut la suivre sur Twitter et sur son site.

Traduit avec la permission de A List Apart et de l'auteur.