Guide pour débutants en matière de conventions de style dans le développement Web

    Si une équipe de développement Web ne dispose pas de conventions de dénomination et de style, des incohérences surviendront dans le codage, les utilisateurs seront frustrés et le projet en pâtira. Nos conseils à ce sujet faciliteront le travail des développeurs et des gestionnaires de contenus.

    Abonnez-vous à notre blog

    Aujourd'hui, les expériences digitales sont le fruit d'une collaboration entre de grosses équipes composées de propriétaires de produits, de stratèges, d'analystes commerciaux et fonctionnels, de rédacteurs, de gestionnaires de projet, de concepteurs et de développeurs, et même de gestionnaires d'application, de contributeurs de contenus et de testeurs. Chacun d'eux contribue largement au produit final.

    Bien que la plupart des projets de développement Web suivent une trajectoire linéaire tout au long de leur développement (planification, ateliers, wireframing, conception, développement, test, assistance, etc.), il est rare que tous leurs contributeurs participent activement à chacune des phases. Ce décalage entre les phases de développement et les différents acteurs concernés crée une certaine confusion : une idée est traduite en un design, lui-même converti en code au sein d'un système de gestion de contenu Web (WCM), où il peut être présenté à un créateur de contenus sous une forme (et une dénomination) complètement différente à celle de départ.

    Cet effet indésirable est malheureusement trop récurrent et peut être source de confusion, de frustration, voire entraîner le chaos total. Même les plus petites divergences peuvent rapidement devenir des incohérences majeures et diviser les membres d'équipe, là où idéalement ils devraient être impliqués, connectés et avoir un sentiment d'appropriation du produit final. Mais comment permettre à l'ensemble des contributeurs de parler la même langue ? Je suis convaincu que la conception peut jouer un rôle important dans la résolution de ce problème.

    Découvrez les avantages qu'offre un guide de style de codage et des directives fondamentales en faveur d'un langage commun et d'un codebase plus gérable.

    Utiliser des définitions claires et sans ambiguïté

    Si l'on devait confier à un développeur la gestion du nom des composants de notre site Internet, on pourrait se retrouver avec des créations telles que « le gros bouton bleu », « le texte » ou « actions utilisateur dans le coin supérieur » – un cas de figure peu idéal. Heureusement, certains concepts de l'interface utilisateur sont désormais bien connus, comme en-tête, pied de page, bouton, lien, image, etc. Les interfaces utilisateur ou cadres front-end tels que Bootstrap ou Material Design ont introduit différents concepts, notamment un système de grille, les menus, les cartes, les menus déroulants, les menus en accordéon, qui contribuent grandement à un langage commun entre les équipes Web.

    Privilégier une certaine cohérence

    Le développement Web moderne donne lieu à l'émergence d'une tendance en faveur d'une approche reposant sur des composants. Un site Web est divisé en petites parties, chacune possédant une fonctionnalité très spécifique, qui peuvent être rassemblées et classées en configurations plus importantes, selon la préférence du créateur de contenus. Dans le domaine de la conception, cette approche est appelée « système de design ». Le créateur d'un tel système, conscient de la nature atomique des composants de l'interface utilisateur, s'efforce de créer une représentation visuelle reflétant l'interconnexion de ses éléments. Le respect d'un ensemble de règles strictes en matière de conception est bénéfique à l'identité visuelle et à la cohérence du résultat final - tout semble interrelié. Mais cette cohérence a un effet tout aussi important sur le code : moins il y a de code à écrire, moins il y a de code à gérer. C'est là que l'usage de conventions de dénomination, pour donner l'appellation adéquate à un composant, devient essentiel.

    Appliquer les conventions de dénomination à toutes les étapes du projet de site Internet

    Si un nom spécifique et reconnaissable a été donné à un composant lors de la phase de conception, ce nom doit se refléter dans le code (au moyen de noms de classe CSS ou d'éléments HTML personnalisés) et dans l'interface de rédaction du WCM. En cas de problème sur l'une des pages du site Web, il serait beaucoup plus facile que n'importe quel acteur concerné (développeurs, testeurs ou gestionnaires de contenus) identifie les composants responsables de l'erreur à l'aide de la fonction d'inspection du navigateur.

    Exploiter les propriétés personnalisées du CSS

    Beaucoup d'autres propriétés visuelles sont susceptibles de bénéficier elles aussi d'une approche codifiée. Les couleurs utilisées dans une application digitale devraient se voir attribuer des noms lisibles, afin de pouvoir les reconnaître sans avoir à déchiffrer leur valeur hexadécimale. Les systèmes de conception modernes accentuent l'importance d'une couleur primaire et secondaire, sur laquelle repose la palette complète de l'application. Comme c'est le cas avec les composants, les développeurs devraient se référer à ces concepts lorsqu'ils établissent des conventions de dénomination à utiliser à l'intérieur du code (par exemple, à l'aide de propriétés CSS personnalisées au lieu de valeurs de couleur hexadécimales).

    Ne pas oublier les styles de texte

    Les mêmes recommandations s'appliquent aux styles de texte : un concepteur doit définir et créer des noms clairs et reconnaissables pour chaque style de texte qui sera utilisé à l'intérieur du système visuel. Le respect d'une liste de convention de dénomination prédéfinie pourrait profiter à d'autres propriétés visuelles comme les marges ou les bordures, pour n'en citer que quelques-unes.

    S'assurer d'un consensus autour des normes

    Les concepteurs d'interfaces utilisateurs modernes devraient, outre se montrer créatifs, se renseigner sur la manière dont leur travail sera techniquement appliqué et articulé autour des éléments qui constituent leur création et pourquoi ils sont conçus de cette manière. La conception devrait être la référence ultime tout au long du processus de développement complet.

    Compléter le guide de style au fur et à mesure

    Idéalement, dès qu'un nouveau composant est développé, il devrait être ajouté à une liste complète de conventions en matière de dénomination comportant tous les éléments visuels qui peuvent être utilisés dans l'application. Étant donné que le développement est un domaine en constante évolution et que certains éléments de la conception peuvent être modifiés ultérieurement (au grand dam d'autres développeurs et de moi-même), ce guide de style doit être dynamique et refléter l'état actuel du code du projet. Il incombe également au concepteur de vérifier la bonne mise en œuvre de son travail dans ce guide de style, afin de déceler les problèmes le plus tôt possible.

    Par conséquent, le fait de réfléchir à ce que l'on est en train de créer rendra le travail plus efficace et la collaboration bien plus productive. Mettez à contribution votre équipe dans son intégralité pour définir des accords solides et détaillés ; cela permettra de résoudre de nombreux problèmes plus tard et de tenir tout le monde au courant. Bien que cela puisse être un long processus, les guides de style de codage devraient être mis en œuvre le plus tôt possible pour éviter toute confusion à un moment ultérieur. Pour ma part, je ne peux que recommander l'utilisation de concepts de dénomination solides dans tous les projets d'expérience digitale.

    Votre équipe dispose-t-elle d'un guide de style de développement Web ou de conventions de dénomination normalisées ? Faites-nous part de votre expérience.

    Publié sur    Dernière mise à jour le 26/09/2019

    #Développement Web

    À propos de l'auteur

    Mathijs Provoost is a Front-end Web Developer at Amplexor, based in Belgium. He’s responsible for writing and maintaining well designed, testable, efficient code for our clients’ public facing web-sites, web applications and lines of IT infrastructures. Mathijs also works closely with designers, developers, QA testers and support services teams to set the direction of our front-end technologies and lead their implementation.

    SUBSCRIBE TO OUR BLOG