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

• Guide de contribution
• Fichier de configuration de TinyMCE sur GitHub

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

Bien que le modèle n’ait pas bougé, l’infographie a évolué pour être plus détaillée, mieux organisée (et avec des p’tites icônes aussi).

Ce modèle permet d’embrasser l’ensemble des attentes utilisateurs ainsi que de voir les secteurs qui peuvent y répondre. Il rappelle également que deux éléments sont essentiels : les contenus et les services. Tandis que visibilité, perception et technique sont là pour mettre en valeur les deux premiers.

Enfin, il rappelle que la qualité est donc une affaire transverse ; en expertises, mais au aussi dans la chronologie de l’expérience utilisateur.

• en PDF (40 Ko)
• en GIF
• en PNG

(1) Qualité Web – Les bonnes pratiques pour améliorer vos sites par Élie Sloïm, Laurent Denis, Muriel de Dona et Fabrice Bonny ; le modèle est détaillé dans la deuxième partie, chapitre « 1.3 – Un modèle pour la qualité web : VPTCS ».

(2) Voir Critères généraux d’évaluation de la qualité Web par Élie Sloïm et Éric Gateau, juin 2001

Article et infographie mis à jour le 10 avril 2015.

Préambule

Une liste de bonnes pratiques, telles que présentées dans ce livre, permet de mettre en place une démarche de gestion de la qualité viable. En effet, le fait de pouvoir contrôler et mesurer chaque bonne pratique permet de faire un suivi dans le temps de l’évolution d’un service, normalement son amélioration.

Contexte

Avant d’entrer dans le vif du sujet, la préface et l’introduction du livre donnent déjà des explications sur la raison d’exister de ce livre.

C’est le moment de la présentation des chiffres chocs de l’impact des TIC sur le climat. On apprend ainsi que 2% des émissions mondiales de CO₂ proviennent des TIC (ce qui équivaut aux émissions du trafic aérien mondial) et ce taux devrait doubler d’ici 2020. On apprend encore que tous les mois, 23 millions de gigaoctets de données sont chargés inutilement sur les sites web, soit 5 millions d’heures d’attente cumulées ! Et ces chiffres datent de 2010, autant dire qu’ils auront assez probablement gonflés depuis.

Un peu plus étonnant par contre, on découvre aussi que ce livre n’aurait sans doute pas vu le jour sans la volonté d’une entreprise privée, la Banque Cantonale de Fribourg (BCF) en Suisse, de réduire l’empreinte écologique de ses systèmes informatiques (parc informatique, serveurs mais aussi sites web). Grâce à cette démarche globale, la BCF a ainsi pu faire des économies substantielles. Par exemple, la virtualisation de leurs serveurs a permis de réduire par 10 le nombre de machines physiques. Ou encore, la suppression régulières de leurs données chaque année leur a permis de réduire de 40% l’espace de stockage.

Bref, voilà une preuve supplémentaire des bénéfices qu’une entreprise peut tirer en mettant en place une démarche d’éco-conception. Et plus globalement une démarche de gestion de la qualité web !

Bonnes pratiques

On passe ensuite assez vite aux bonnes pratiques qui concernent tous les domaines concernés par un service web. On y parle ainsi de serveurs, de bases de données, de design, d’intégration HTML, de polices, de développement, de CMS, d’e-mails, de production de contenus… tous les domaines sont traités. Si les sujets sont variés, il faut toutefois noter que la grande majorité des bonnes pratiques concernent des points techniques.

Chaque bonne pratique est expliquée brièvement et illustrée par un exemple.
En complément, plusieurs critères permettent d’aider à prioriser les actions à mettre en place :

• La priorité détermine si la bonne pratique a un fort potentiel de réduction de l’empreinte écologique, qu’elle est facile à mettre en œuvre ou s’il elle est nécessaire à l’application d’autres bonnes pratiques. Si elle est non prioritaire, la bonne pratique a un potentiel d’économie limité ou est difficile à mettre en œuvre.
• La mise en œuvre précise la facilité d’application de la bonne pratique, notamment si elle nécessite une expertise technique avancée ou pas.
• L’impact écologique précise si la bonne pratique a un impact écologique élevé ou s’il est au contraire minime.

En plus de ces trois critères, sur chaque bonne pratique sont précisées les ressources qu’elle permet d’économiser si on l’applique. On y trouve :

• Le processeur : économiser le processeur permet d’allonger sa durée de vie, donc par extension celle des machines.
• La mémoire vive : un site optimisé réduira la mémoire vive utile à son affichage et permet d’allonger la durée de vie des équipements.
• Le stockage : plus on économise de l’espace, plus grandes sont les économies (moins de serveurs, moins d’énergie consommée, etc).
• Le réseau : il s’agit ici essentiellement de la bande passante. Plus son usage est réduit, plus les économies sont grandes.
• Les requêtes : limiter le nombre de requêtes (HTTP, SQL…) permet de limiter les besoins en ressources physiques.

Bref, le lecteur dispose de tous les éléments nécessaires pour savoir quelles sont les bonnes pratiques les plus utiles à appliquer, en fonction de son contexte et de ses compétences.

Avis

Une fois la lecture terminée, on se rend compte du nombre incroyable de détails sur lesquels on peut agir pour réduire l’impact écologique de son site web. Et le livre a l’avantage d’être très court et très concis.
Mais cet avantage a un point noir : la plupart des bonnes pratiques sont expliquées assez sommairement. Comme il s’agit la plupart du temps de points techniques, l’application de certaines bonnes pratiques peut être rendue difficilement exploitable pour les non techniciens.

Ce livre est donc avant tout une boîte à outils qu’il sera bon de partager avec l’ensemble des acteurs intervenant sur un projet web.
Car on ne le rappellera jamais assez, qu’il s’agisse d’environnement ou de qualité web, la clé du succès réside dans la participation active de tous les acteurs !

Auteurs : Frédéric Bordage avec la contribution de Stéphane Bordage, Jérémy Chatard, Olivier Philippot
Éditeur : Eyrolles
Parution : 25 octobre 2012
Prix : 12 euros
Site web du livre

Résumé de ma conférence « Être bien pour produire bien » tenue à Paris Web 2013 le 10 octobre.

S’intéresser à l’humain dans le travail, c’est bien. Mais si on peut, en plus, faire le lien avec la productivité et la qualité de ce qui est produit – et donc argumenter pour investir dans le bien-être, c’est encore mieux ! Voyons comment faire.

Vous avez la possibiltié de vous intéresser au bien-être de chacun et ainsi d’améliorer la qualité du travail produit.
Attention, dommage collatéral : vos collaborateurs risquent d’être plus heureux.

Objectiver

Même si le fait que le bien-être à un impact positif sur le travail est communément admis, cela reste une idée reçue.
Un moyen d’objectiver ce ressenti est le sondage. Deux en l’occurrence :

• un commandité par l’ANACT (Agence Nationale pour l’Amélioration des Conditions de Travail) et fait sur un panel de 1001 personnes
• un fait par mes soins et relayé ici et dans le réseau de la communauté de Paris Web (donc représentatif de nous, lecteur)

Les sondages

Pour l’un des sondages, 37 items ont été proposés ; comme par exemple :

• Atteintes des objectifs projet
• Trajet
• Entente avec ses collègues
• Salaire, primes et avantages
• Éthique de l’entreprise
• etc.

Pour chacun d’eux, on demandait d’indiquer l’impact positif ou négatif qu’ils pouvaient avoir selon l’échelle suivante :

• impact très important
• impact important
• impact peu important
• pas du tout d’impact

Il est intéressant de constater que les 10 items de tête (qui sont estimés avoir le plus d’impact) sont quasiment les mêmes en positif comme en négatif (mais dans un ordre différent).

Ci-dessous, la liste des 10 items de tête (entre parenthèse, leur emplacement en positif puis en négatif)

1. Impression personnelle sur son travail (1 – 1)
2. Ambiance dans laquelle se déroule le projet (2 – 2)
3. Respect des personnes (3 – 5)
4. Entente avec ses collègues (4 – 6)
5. Cohésion et unité dans l’équipe (5 – 7)
6. Sentiment qu’on a ou non confiance en moi (6 – 4)
7. Possibilité ou non d’exprimer ses idées (7 – 3)
8. Qualité du travail global sur le projet (8 – 8)
   Acquisition de nouvelles compétences (hors classement – 10)
9. Qualité et adéquation du matériel de travail (9 – 9)
10. Perspective d’évolution (10 – hors classement)

Il est à noter qu’un item comme « Salaire, primes et avantages » arrive plutôt en bas de liste, à peu près en même temps que « Perspective d’évolution », « Horaires flexibles » et devant « Projet innovant », « Écologie / Développement durable ».
« Espaces de pause » est le dernier item (avec un impact positif important à 42 % ou encore un impact négatif peu important à 49 %)

NB : Vous avez la possibilité de consulter les résultats bruts du sondage.

Autres chiffres très intéressants : 95% du panel de 1001 personnes estiment que l’impact du bien-être sur la qualité du travail est fort à très fort. Et 91% estiment que l’impact sur la productivité est également fort à très fort.

Donc, si on en doutait encore ou si on pensait pouvoir passer au second plan le bien-être de ses collaborateurs, on peut voir que ça vaut la peine d’agir sur le bien-être pour gagner en qualité et en productivité.

Responsabiliser et agir

Que l’on soit dirigeant, responsable d’équipe ou salarié lambda, chacun doit déjà commencer par être attentif à son bien-être et à remonter les points qui le gênent et ceux qui l’aident.

N’oubliez pas qu’on ne peut pas se plaindre si on ne s’est jamais exprimé !

Mais on peut aussi aller plus loin en mettant en place un cycle d’amélioration (non sans avoir dû convaincre – grâce à des sondages notamment ^^ – sa direction de s’impliquer.

Une méthodologie

Comme toujours, je préconise l’amélioration continue, les petits-pas et les itérations.

C’est un excellent moyen d’assurer la démarche :

• étaler les coûts
• réajuster la démarche si besoin
• agir dans un contexte de production qui ne peut pas attendre

Amélioration continue, petits pas et itérations sont souvent les clés à avoir en tête pour arriver au résultat recherché.

Voici le cycle que cela pourrait donner :

1. Un premier sondage (1)
2. Analyser les résultats
   1. Les items qui ressortent sur le positif
   2. Les items qui ressortent sur le négatif
   3. Les items communs aux deux
3. Communiquer ces résultats
4. Réunir un groupe proche des salariés et mettre en place un plan d’action
5. Communiquer les intentions
6. Agir
   1. Gérer les points pouvant être réglés rapidement
   2. Entamer les points qui demandent un travail de fond
7. Faire un nouveau sondage dans un délai raisonnable (ne pas lasser !)
8. Et reprendre au point 2 : Analyse, communication, plan d’action, communication, action, re-sondage…

Sondage, communication des résultats, plan d’action et nouveau sondage avec analyse comparative.

(1 : Notez bien que vous pourriez utiliser les sondages présentés ici, mais vous perdriez la mesure et donc la possibilité de comparer entre deux itérations. Si vous voulez vraiment alléger le sondage, vous pouvez vous contenter d’une seule question et, pour vos plans d’action, visés les thématiques présentées ici.Votre seule et unique question serait alors : « Notez votre bien-être au travail entre 0 et 10 ».) – retour.

Focus sur 3 points influant fortement sur la qualité du travail

Pourquoi 3 points et pourquoi ceux-là ? Parce que ces items là ressortent fortement à la fois sur le positif et sur le négatif. On a donc tout intérêt à les soigner.

Impression personnelle de faire du bon travail

On a souvent peu de retours sur l’impression réelle qu’une personne a de son propre travail. Il y a ceux qui se sous-estiment, ceux qui se sur-estiment et ceux qui se sur-estiment …en apparence !

Le meilleur moyen de donner à quelqu’un l’impression qu’il fait du bon travail c’est …de lui dire à chaque fois que c’est le cas, lui signaler ses progrès également, même si ce n’est pas encore le niveau attendu.

Valorisez vos collègues, vos subalternes, vos supérieurs mêmes. « Valoriser » ne veut pas dire complimenter à tout-va, cela veut dire signaler tous les points positifs.

Ambiance dans laquelle se déroule le projet

L’ambiance se soigne en dosant le stress, la pression, les moments de détente. Il faut gérer les coups de fatigue, les désaccords voir l’enthousiasme débordant, la légèreté, etc.

La clé – s’il y en a une : objectiver, apaiser, relativiser, prendre en compte.

Dans la société où je travaille, les projets sont parfois suivis d’un bilan fait par le responsable qualité (transverse et non-impliqué dans le projet) où un questionnaire anonyme rempli par chaque participant permet aussi de récolter le ressenti. Cela peut faire partie des actions mises en place pour mieux savoir où les progrès sont à faire et où sont les points forts.

Respect des personnes

S’il y a une thématique sur laquelle il faut être exemplaire, c’est bien celle-là !

Cela passe par l’égalité de traitement quel que soit le niveau, le métier du salarié ; par le juste dosage de l’humour ; par la prise en compte du travail (gare au supérieur qui s’approprie le travail du subalterne !) ; ou encore par respecter le rythme de chacun et les moments de pause.

Pour ces trois thématiques comme pour beaucoup d’autres, si je devais donner une clé, ce serait celle-ci : la bienveillance. Abordez chaque problème humain avec bienveillance et cela ne peut pas mal se passer.

Annexes

Liens

• Le sondage « Bien-être et qualité du travail« 
• Les résultats bruts du sondage
• Le sondage « La qualité de vie au travail, pour vous c’est quoi ?« 
• La vidéo de la conférence
• Le diaporama de la conférence

Pour aller plus loin

• Mesurer ou évaluer la QVT ? (Qualité de Vie au Travail)

Remerciements

Je tiens encore à remercier les 149 personnes qui ont eu le courage de remplir mon sondage jusqu’au bout et sans qui je n’aurais pas eu des résultats, représentant spécifiquement notre communauté, à analyser et à présenter.

Merci à Mickaël Morier qui m’a autorisée à utiliser son sourire.

Merci à Jean-François Renauld pour ses photos.

Merci à Ekino et aux DFO en particulier.

Opquast Desktop = efficience

Cette extension permet de lancer, sur une page web, une panoplie de tests (450 pour être précis) sur plusieurs checklists d’Opquast Reporting dont :

• Opquast V2 (76 tests)
• RGAA 2 (96 tests)
• Accessiweb 2.1 déployé (167 tests)
• Opquast accessibility : 1st & 2nd step (81 & 49 tests)

L’énorme avantage de ce addon est de travailler en local et va donc de s’appuyer sur un moteur local (je le répète mais c’est important pour les performances), mephisto et par conséquent sans échange avec les serveurs d’Opquast. Il en résulte un gain de temps considérable puisque les 450 critères sont passés en revue en moins d’une minute (11,1 secondes sur ma machine pour la page d’accueil de w3qualité). L’affichage des tests passés et les filtres permettent une lecture facile et rapide des critères conformes ou non. L’extension offre aussi la possibilité d’effectuer une recherche sur les critères et d’exporter le résultat de l’analyse au format CSV.

Détail important qui permet de gagner un temps considérable : en dépliant un test non conforme, un lien est disponible et renvoie sur la partie incriminée du DOM en mettant la zone en avant. #a-la-firebug

Un gain de temps appréciable que tout le monde devrait utiliser pour contrôler son travail au fur et à mesure et gagner en productivité. Cette extension n’en est encore qu’à ses début mais est déjà très stable et plus que prometteuse.

A ma connaissance, il s’agit du premier outil permettant d’analyser une page et de tester automatiquement des critères propres à la qualité web. Certes, des toolbars existent pour certaines règles d’accessibilité mais elles sont principalement américaines, donc basées sur la section 508 ou au mieux les WCAG 2. On pourra peut-être regretter (pour les esprits tatillons) de ne pouvoir lancer une seule checklist à la fois : on lance tout ou rien. Je pense que ce sera dans la roadmap.

L’avenir d’Opquast Desktop passera par l’ajout d’autres checklists (SEO, webperf…), la possibilité d’écrire soit-même ses propres batteries de tests et d’envoyer le résultat sur Opquast Reporting. J’attends ces évolutions avec impatience

Temesis a une nouvelle fois bousculé l’écosystème de la qualité web et c’est tant mieux. Un grand merci à eux

L’extension Firefox : https://addons.mozilla.org/fr/firefox/addon/opquast-desktop/

via le blog de Temesis : Opquast Desktop : l’extension Open Source pour Firefox

Dans mon travail, je suis souvent amenée à créer des doc : vulgarisation, charte, support de communication, etc.) Lors de mes présentations du métier, ces documents me servent d’exemples concret de ce que peux faire le gestionnaire de la qualité. En général, ça plait beaucoup. On m’a même fortement demandé de les mettre à disposition.

Voici donc un exemple de charte d’intégration.

J’insiste sur plusieurs points :

• Il s’agit d’un exemple, donc ce n’est pas universel. Le but est de montrer à quoi une telle charte peut ressembler. L’émetteur y met ses propres choix stratégiques.
• Un tel document est vrai dans un contexte. Votre contexte sera peut-être différent.
• Certains points d’intégration de cette charte pourraient être discutés pendant des heures et ce serait passionnant (j’en ai eu un aperçu à la relecture du document par Vincent). Pourtant, ici, le but est plus de discuter de la forme (un support – parmi d’autres – pour la gestion de la qualité) que du fond.

Considérer les limites d’une charte

Il reste néanmoins que cela soulève aussi des questions sur la limite d’une charte, sur la part de « liberté » à laisser à l’équipe de développement ; ne pas oublier qu’il s’agit d’experts et non de simples exécutants.

Dans notre mise en place, nous nous débrouillions pour ne jamais envoyer la charte sans autre forme de contact. Nous « imposions » à l’équipe qui la mettrait en place ‐ l’équipe technique, donc, pas le chef de projet ! ‐ de nous rencontrer, physiquement, autour de la charte.
Le but était bel et bien de récolter leurs avis, les objections, les points qui poseraient problème (par rapport à leurs habitudes, leurs principes, le contexte… peu importe) et d’en discuter ensemble.

La charte est un support ‐ solide ‐ mais qui ne doit pas être considérée comme suffisante en elle-même.

Merci donc à Vincent pour sa relecture critique

Le doc

Charte d’intégration V.0 ‐ PDF 300 ko : charte-integration-v0