Éditeur personnalisé et guide de contribution

L’un des premiers éléments qui fait la qualité d’un site web est son contenu. Pour certains types de site (actualités, information), le contenu est d’ailleurs le cœur même du site !

Et ce contenu, il n’arrive pas comme ça sur le site : il doit être rédigé d’une part, puis intégré dans le site d’autre part.
Dans cet article, je parlerai essentiellement de cette deuxième partie : comment l’intégration peut contribuer à la qualité éditoriale d’un site et comment, en travaillant un éditeur et proposant un guide de contribution j’ai tenté d’optimiser l’édition sur l’un de mes projets personnels.

Analysons l’existant

Le projet dont je parle était un site d’actualités et de critiques de films sur le support Blu-ray, il avait donc une grosse composante éditoriale.
L’équipe du site était composée de bénévoles passionnés de cinéma : de nombreux rédacteurs créaient et inséraient du contenu.

Parmi les rédacteurs, certains pouvaient appliquer des mises en formes toutes personnelles, avec pour résultat un manque d’homogénéité dans le rendu des différents articles et contenus, visuel voire sémantique.
Il y avait une raison flagrante à ce manque de cohérence : un éditeur de texte bien trop complexe et complet, qui avait le défaut de proposer aux rédacteurs trop de possibilités. Plus il y a de possibilités, plus il y a de façons différentes de faire les choses.

Améliorons : rationalisons

Mon premier objectif était de rationaliser et d’uniformiser le rendu des articles. Au-delà de l’aspect visuel, il s’agissait aussi d’améliorer la qualité sémantique des contenus.
J’ai donc travaillé sur une simplification de l’éditeur pour limiter les fonctionnalités au strict minimum, tout en répondant aux besoins de mises en forme de l’équipe.

Mais comme vous le savez, un outil a beau être merveilleux, il faut encore savoir comment l’utiliser. J’ai donc travaillé en parallèle sur la mise en place d’un guide de contribution permettant aux rédacteurs de savoir comment utiliser correctement l’éditeur.

Personnalisons l’éditeur

Dans le cadre du projet, nous travaillions avec l’éditeur TinyMCE pour fournir l’éditeur de texte aux contributeurs. TinyMCE est très répandu (c’est notamment l’éditeur de texte par défaut de WordPress) et a l’avantage d’être très facilement personnalisable.
J’ai donc profité des possibilités de personnalisation de l’éditeur pour proposer aux rédacteurs et contributeurs des fonctionnalités sur mesure.

Je me suis notamment arrêté sur les quelques points suivants :

J’ai limité l’éditeur aux fonctions sémantiques essentielles (listes ordonnées et non ordonnées par exemple) et supprimé tous les boutons de mise en forme « risqués » pour le rendu (couleur de texte, couleur de fond, police…) et potentiellement pour l’accessibilité des contenus. D’un point de vue sémantique, ces fonctions ne sont pas très dangereuses car elles s’appuient sur des styles en ligne. Cependant, d’un point de vue visuel, elles peuvent facilement mettre en péril la cohérence visuelle des contenus.
En remplacement des boutons de mise en forme supprimés, j’ai demandé à l’équipe de me dire quelles mises en forme ils souhaitaient pouvoir appliquer sur leurs contenus. Une fois leurs besoins recueillis, je me suis attelé à mettre en place des raccourcis pour reproduire ces mises en forme dans l’éditeur. Il s’agit de l’option « Formats » de TinyMCE, permettant d’ajouter aux contenus une class CSS spécifique par exemple. Ajouter une simple class plutôt que des styles en ligne garantit ainsi de pouvoir facilement faire évoluer le rendu des contenus dans le temps !
Pour les mises en forme un peu plus exotiques, j’ai été jusqu’à créer des modèles de contenu permettant aux rédacteurs d’être libérés de toute la mise en forme et de se consacrer entièrement aux contenus. Pour ce faire, je me suis appuyé sur l’extension « Templates » de TinyMCE permettant d’importer dans son contenu un modèle HTML qu’il ne reste plus qu’à remplir.
Enfin, j’ai ajouté un certain nombre de raccourcis pour les caractères spéciaux très couramment utilisés et aussi très souvent malmenés car absents des claviers. C’est le cas notamment des majuscules accentuées ou des caractères de ponctuation comme les points de suspension, l’apostrophe ou encore les guillemets français. Les rédacteurs n’ont ainsi pas besoin d’apprendre par cœur tout un tas de raccourcis clavier échappant à toute logique.

Et voilà, avec ces quelques points d’attention, on est déjà en mesure de proposer un éditeur texte qui donne toutes les cartes en main aux contributeurs pour qu’ils mettent en ligne des contenus d’une qualité technique suffisante, sans effort démesuré.
Oui mais voilà, un bon outil c’est bien, mais il faut encore savoir l’utiliser…

Rédigeons le guide de contribution

Une fois l’éditeur personnalisé, je me suis donc attelé à rédiger un guide de contribution à destination des contributeurs.

Ce guide avait plusieurs objectifs :

Définir et clarifier les règles éditoriales propres au site. Il s’agit essentiellement ici de définir les règles liées au vocabulaire intrinsèque du ou des sujets traités sur le site.
Définir (si ce n’est rappeler) les grandes règles de typographie. Il s’agit là de donner un contenu pédagogique sur le rôle et l’utilisation des éléments typographique couramment utilisés : paragraphes, listes, gras, italique… Expliquer le rôle sémantique de chacun de ces éléments permet de limiter l’usage abusif de ces derniers.
Et enfin expliquer comment utiliser chacune des fonctions de l’éditeur. Il fallait notamment expliquer comment utiliser les différents modèles de contenu et autres options de mises en forme qui avaient été développés sur mesure pour le site.

Comme il ne sert à rien de palabrer des heures là dessus, je vous laisse plutôt consulter vous-même le guide complet ainsi rédigé.

Utilisons tout ça

Les changements de l’éditeur et le fait de les accompagner d’un guide d’utilisation a été très bien reçus par les contributeurs. Expliquer et sensibiliser sur les bonnes (ou les mauvaises) pratiques de contribution leur permet d’améliorer leur travail sur le site : le rédacteur est content et l’intégrateur est content !
Au delà de l’aspect pédagogique, les rédacteurs avaient particulièrement apprécié tous les changements leur permettant d’être plus efficaces. Par exemple, les modèles leur ont permis de mettre en forme très simplement des contenus qu’ils publiaient de manière récurrente « à la main », comme les plannings.

Ressources

Dans l’ordre, illustrations tirées des films Reservoir Dogs, Pacific Rim et Kill Bill.