chore: update article

src/_pages/blog/article/ecoconception_web_exposition_celtique.md

@@ -1,7 +1,7 @@
 ---
 title: "Écoconception d'un site de contenu pour le Musée de Bretagne"
 description: "Retour d'expérience sur le site « Celtique ? L'expo »."
-date: 2022-11-01
+date: 2022-11-15
 tags:
   - écoconception
   - retour d'expérience
@@ -10,8 +10,10 @@ authors:
   - Aurélie Baton
   - Nicolas Doby
 draft: false
+toc: true
 layout: article.njk
 ---
+
 En 2022, nous avons conçu et développé le site ["Celtique ? L'expo"](https://www.exposition-celtique.bzh) dans une
 démarche d’écoconception, afin d'accompagner l'exposition éponyme du Musée de Bretagne. L'écoconception étant un sujet
 récent, nous avons dû expérimenter et faire certains arbitrages pour trouver les meilleures solutions. Nous souhaitons
@@ -142,16 +144,44 @@ notre méthode de compression des images voir : [https://www.exposition-celtiqu
 
 Les vidéos ont été incrustées en HTML5. Cela permet de ne pas avoir à télécharger un nouveau lecteur réduisant fortement le nombre de requêtes.
 
+### Graphisme
+
+**En écoconception de services numériques :** Les chartes graphiques des organisations sont rarement pensées pour le
+web, et encore moins pour la sobriété et l'accessibilité. Elles présentent souvent des logos non adaptés au mobile, des
+couleurs au contraste insuffisant, des typographies personnalisées aux nombreuses variations qui viennent alourdir
+le site…
+Le préjugé selon lequel un site appliquant une démarche d'écoconception sera laid ou austère a encore la peau dure. Il
+existe pourtant différentes astuces ([liste d'exemples disponible ici](https://eco-conception.designersethiques.org/guide/fr/content/10-ressources.html)) pour créer un site avenant et différenciant tout
+en étant sobre.
+
+**Problèmes rencontrés :** Le site Celtique ? devait être immersif, donner envie de lire le contenu, mettre en
+avant les collections, mais sans alourdir inutilement les pages. Les éléments de charte partagés, conçus pour
+l'exposition physique, s'adaptaient mal à un contexte web (problèmes de lisibilité, poids des médias…).
+
+**Solutions :** Il existe plusieurs recours en écoconception pour apporter du dynamisme et de l'identité
+sans surpoids : utiliser la couleur, recourir à des formes SVG, créer des glyphes, faire varier les formes.
+- Ainsi nous avons repris les couleurs marquées de l'exposition (turquoise, orange, rose vif…) en les modifiant parfois légèrement pour s'assurer que les contrastes étaient accessibles.
+- Nous avons utilisé les triskells créés pour l'exposition en filigrane : en format SVG, ils ne pesaient chacun que 2 à 5 Ko.
+- Nous avons créé de nouvelles formes SVG pour casser le côté austère et apporter de la fantaisie : des vagues, des blobs (voir forme orange ci-dessous)...
+- Le tiret orange en vague devant le titre a été intégré en glyphe (voir ci-dessous).
+
+![Illustration du tiret orange devant un titre, et de différentes formes](/blog_images/articles/ecoconception_web_exposition_celtique/image-6.jpg)
+
+- Enfin la feuille de styles (CSS) permet de faire de nombreuses variations sans recourir à des surcouches. Par
+exemple jouer sur les arrondis, les contours, les ombres…(voir exemple du sommaire ci-dessous)
+
+![Sommaire montrant des arrondis réalisés en CSS](/blog_images/articles/ecoconception_web_exposition_celtique/image-7.jpg)
+
 ### Police
 
 **En écoconception de services numériques :** Même si les polices ne sont pas l'élément le plus impactant, elles contribuent à accroître
 le poids de la page et les transferts nécessaires à leur téléchargement. En utilisant des polices
 standards, pré-installées sur l’ordinateur on économise donc de la bande passante tout en accélérant l’affichage de la page.
 
-**Problèmes rencontrés :** Comme de nombreux évènement culturels, l’exposition “Celtique ?” a une forte identité
-et la typographie choisie pour l’exposition physique est très marquée et rappelle le caractère celtique. Cependant, cette
-typographie n’est pas utile pour le texte de la page et télécharger une police de caractère simplement pour appliquer à un
-titre n’est pas un choix pertinent.
+**Problèmes rencontrés :** Comme de nombreux évènement culturels, l’exposition "Celtique ?" a une forte identité
+et la typographie choisie pour l’exposition physique est très marquée et rappelle le caractère celtique. La typographie
+créée pour l'exposition "Celtique ?" n'était pas accessible et alourdissait le site (93 Ko par variation de police qui
+seront téléchargés par tous les utilisateurs lors de leur première visite).
 
 **Solutions :** Pour répondre à l’objectif d'écoconception tout en gardant l’identité de l’exposition, nous avons utilisé la
 police **Arial** pour le contenu des pages (titres, sous-titres, texte), mais nous avons choisi une **image SVG** pour conserver
@@ -211,3 +241,122 @@ Ce changement a induit de former les équipes non-techniques sur ces aspects tec
 
 Une fois les modifications réalisées, les équipes techniques peuvent générer et re-déployer une version de production.
 
+## Le retour d'expérience du musée de Bretagne
+
+L'idée de développer un site web en complément d'une exposition temporaire n'est pas nouvelle pour le Musée de Bretagne
+aux Champs Libres. Plusieurs expositions présentées depuis 2006 ont donné lieu à la création de mini-sites dédiés, sans
+compter les projets menés avec des partenaires. L'objectif d'alors est double : promotionnel et documentaire. La mise en
+ligne du portail des collections du musée en 2017 a également permis d'affirmer l'engagement du musée vers une mise à
+disposition croissante de ressources culturelles en ligne, et cela avec une démarche volontariste d'ouverture des
+contenus, dans la philosophie de l'open content portée notamment par Wikimédia. **Considérant le développement d'un site
+portail des Champs Libres et la mise en ligne de parcours thématiques sur le portail des collections, le musée de
+Bretagne ne s'était plus engagé dans la création d'un véritable site dédié depuis 2012.**
+
+### Les motivations du projet
+
+<i>Pourquoi avoir choisi de s'engager dans un nouveau projet de site web dédié à l'exposition Celtique ?[[1]](#ref-1) avec une
+ambition écoresponsable ?</i>
+
+Le contexte "global" d'abord. **La crise sanitaire et ses conséquences sur les établissements culturels (fermeture,
+ouverture partielle…) ont amené ceux-ci à se poser la question du renforcement de leur présence en ligne**, pour "garder
+le lien" avec leur public. Le musée de Bretagne souhaitait aussi expérimenter des liens entre le in situ et le online,
+le visiteur de l'exposition pouvant ouvrir des fenêtres "numériques" au cours de sa visite. Néanmoins, force est de
+constater la difficulté à obtenir des données stabilisées sur les véritables bénéfices/coûts (temps investi, notoriété,
+impacts sur la fréquentation insitu) de tels projets pour les établissements concernés.
+
+La seconde motivation est liée à la **stratégie globale de l'établissement**, celle des Champs Libres comme celle du Musée
+de Bretagne. S'inscrivant dans la dynamique de la mise en ligne du portail des collections en 2017, l'amplification des
+projets de diffusion numérique reste un enjeu fort porté par le musée[[2]](#ref-1). Dans le même temps, la réflexion en cours aux
+Champs Libres vers un nouvel écosystème web, avec comme orientation principale **"une stratégie pour un numérique
+soutenable"**, prend de l'ampleur. Le projet web Celtique ? s'oriente alors vers une ambition d'écoresponsabilité plus
+marquée. L'idée est d'avoir un projet pilote sur lequel le musée peut s'appuyer, voire réutiliser des briques, pour des
+projets à venir. Pour autant, il ne s'agit pas de systématiser, voire d'industrialiser, la production de site à chaque
+exposition. L'équipe du musée convient que l'opportunité d'une production web doit être questionnée à chaque fois au
+même titre que les autres composantes du projet : médiation, programmation, édition…
+
+**Le Musée de Bretagne s'engage donc dans ce projet avec l'approche d'une démarche quasi-innovante car encore peu
+expérimentée et documentée jusqu'alors.**
+
+<span id="ref-1">[1] Présentée au musée de Bretagne du 17 mars au 4 décembre 2022</span>
+<span id="ref-2">[2] Inscrit dans son projet scientifique et culturel depuis 2015</span>
+
+### Une organisation dédiée
+
+Pour répondre aux enjeux précisés en amont, le choix retenu a été celui d'un **co-pilotage interne innovation/production**. L'expertise web du musée se situe du côté du chargé de mission prospective et innovation, qui se trouve également
+être le référent musée au sein du groupe projet écosystème web des Champs Libres. Côté pôle production, la cellule
+production des expositions se voit légitimement attribuer le co-pilotage du projet (via la cheffe de projet de
+l'exposition, puis la chargée de productions audiovisuelles), par sa capacité à faire le lien avec les contenus et à
+organiser la production en cohérence, de calendrier et de ressources, avec les autres composantes du projet
+d'exposition.
+
+### L'adaptation continue du projet
+
+Le projet web Celtique ? s'inscrit, dès son amorce, dans un plan de charge contraint. Ayant à l'esprit la règle du
+"moyen constant", le projet va progressivement évoluer dans ses intentions. D'un projet qui devait permettre l'accès à
+des ressources complémentaires, voire inédites (qui demande un surcroît de production et de coordination éditoriale), il
+devient un espace "relai" de l'exposition où l'on retrouve les ressources présentées dans une organisation plus propice
+à la consultation en ligne en amont ou à la sortie de sa visite.
+
+**L'enjeux d'un site le plus écoresponsable possible dans un budget contraint a également amené l'équipe du musée à revoir
+certaines orientations liées à l'aspect interactif et l'attractivité visuelle du site, ainsi que sur l'utilisation
+raisonnée des médias.** L'un des enseignements retenus par les équipes du musée est alors de considérer qu'un site plus
+écoresponsable n'en n'est pas moins coûteux qu'un site classique, voire un peu plus. Mais il s'agit ici de penser à
+plus long terme : un projet moins coûteux pour l'environnement, avec des briques réutilisables qui en assurent une
+certaine reproductibilité…
+
+Ces adaptations ont pu être intégrées de manière assez fluide grâce à **l'agilité et la régularité des échanges entre le
+prestataire et les équipes du musée, fonctionnant sur le principe de l'itération**. Une méthodologie nécessaire dans le
+cadre de tel projet.
+
+### Quelques questions spécifiques soulevées au cours de la mise en œuvre de ce projet
+
+#### Sur quelle base fixe-t-on le niveau d'écoresponsabilité ?
+
+Pour s’engager dans un projet écoresponsable, il importe de se fixer des objectifs chiffrés, et pour **cela il faut des
+indicateurs précis à atteindre**. Aujourd’hui, ces données sont encore difficiles à trouver. Pour le musée de Bretagne,
+s'engager dans le projet web Celtique ? visait donc aussi à capitaliser sur un retour d'expérience, et agréger des
+données possiblement réutilisables sur des projets futurs, tout en s'appuyant sur l'expertise d'un prestataire
+expérimenté et soucieux de partager ces connaissances notamment
+ici : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/)
+
+#### À qui destine-t-on cette offre ?
+
+Répondre clairement à cette question avant de s'engager dans le projet permet de mieux définir les critères d'arbitrage
+en cours de réalisation. **Un site écoresponsable est surtout un site qui répond à ses objectifs initiaux, sans éléments
+superficiels ou autre effet "waouh!"**. Dans le cas présent, le site web remplit sa mission d’ouverture et de liens vers
+des contenus complémentaires sans toutefois proposer sur le site beaucoup plus de ressources que celles de l’exposition.
+Il est à destination de personnes qui ne pourraient peut-être pas visiter l'exposition mais souhaitent pouvoir
+approfondir le sujet, sans pour autant devenir expert.
+
+#### À quel niveau peut-on se connecter aux ressources présentes chez nos partenaires ?
+
+Proposer un écosystème documentaire enrichi est certainement l'ambition de la plupart des sites web d'exposition. Pour
+autant, la fluidité du parcours du visiteur ne doit jamais être affectée par le souhait d'une trop grande serendipité
+des contenus. En somme, le visiteur doit pouvoir flâner sans jamais se perdre. Les cheminements entre les pages ont été
+mis en évidence et testés pour viser cet objectif (voir la partie [Navigation](#navigation) plus haut). **De même, la valeur
+écoresponsable d'un site peut être réduite si celui-ci propose des renvois trop systématiques vers des univers web
+éloignés de ces enjeux.** C'est ainsi que le musée de Bretagne, en s'associant à Bécédia, a choisi un partenaire culturel
+sensible à ces enjeux.
+
+### Perspectives
+
+L'ensemble des enseignements recueillis lors de ce projet, tant du point de vue technique que méthodologique, vient
+aujourd'hui nourrir les évolutions en cours de notre écosystème web.
+
+L'un des prochains chantiers est celui de la refonte de notre portail des collections en ligne. Le cahier des charges en
+cours de rédaction s'inspire déjà en partie des leçons retenues pour viser le maximum d'écoresponsabilité. L'enjeu est
+élevé puisqu'il concerne une base de données qui comporte aujourd'hui 350 000 notices et images associées, avec le souci
+d'équilibrer le projet entre sobriété du design et qualité des contenus diffusés.
+
+## Notre façon de collaborer
+
+Tout au long du projet, nous avons travaillé de manière itérative et régulière entre l’équipe de conception du site et
+l’équipe du Musée de Bretagne pour trouver les meilleurs compromis. Cela est passé par des points hebdomadaires de
+revue des maquettes, des échanges de mails et l'utilisation de [Figma](https://www.figma.com/). Cet outil a permis au
+Musée de Bretagne et au développeur de commenter au fur et à mesure les interfaces en cours de réalisation pour partager
+les textes définitifs, les comportements interactifs ou encore les hyperliens de destination sans se surcharger d'emails.
+
+Les limites de cette démarche d'un point de vue écoconception sont le manque de sobriété de ces outils
+(visioconférences, Figma…). Idéalement, l'écoconception consisterait aussi à limiter l'impact environnemental pendant
+la co-création. Si [PenPot](https://penpot.app/) semble être une alternative Open Source intéressante à Figma, nous n'avons pas trouvé de
+façon plus efficiente de collaborer sobrement.