chore: update article

pull/6/head
Nicolas Doby 2022-12-04 19:50:39 +01:00
parent 33fe1c722f
commit 56fbb26827
3 changed files with 154 additions and 5 deletions

View File

@ -1,7 +1,7 @@
--- ---
title: "Écoconception d'un site de contenu pour le Musée de Bretagne" title: "Écoconception d'un site de contenu pour le Musée de Bretagne"
description: "Retour d'expérience sur le site « Celtique ? L'expo »." description: "Retour d'expérience sur le site « Celtique ? L'expo »."
date: 2022-11-01 date: 2022-11-15
tags: tags:
- écoconception - écoconception
- retour d'expérience - retour d'expérience
@ -10,8 +10,10 @@ authors:
- Aurélie Baton - Aurélie Baton
- Nicolas Doby - Nicolas Doby
draft: false draft: false
toc: true
layout: article.njk layout: article.njk
--- ---
En 2022, nous avons conçu et développé le site ["Celtique ? L'expo"](https://www.exposition-celtique.bzh) dans une 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 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 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. 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 ### 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 **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 le poids de la page et les transferts nécessaires à leur téléchargement. En utilisant des polices
standards, pré-installées sur lordinateur on économise donc de la bande passante tout en accélérant laffichage de la page. standards, pré-installées sur lordinateur on économise donc de la bande passante tout en accélérant laffichage de la page.
**Problèmes rencontrés :** Comme de nombreux évènement culturels, lexposition “Celtique ?” a une forte identité **Problèmes rencontrés :** Comme de nombreux évènement culturels, lexposition "Celtique ?" a une forte identité
et la typographie choisie pour lexposition physique est très marquée et rappelle le caractère celtique. Cependant, cette et la typographie choisie pour lexposition physique est très marquée et rappelle le caractère celtique. La typographie
typographie nest pas utile pour le texte de la page et télécharger une police de caractère simplement pour appliquer à un créée pour l'exposition "Celtique ?" n'était pas accessible et alourdissait le site (93 Ko par variation de police qui
titre nest pas un choix pertinent. seront téléchargés par tous les utilisateurs lors de leur première visite).
**Solutions :** Pour répondre à lobjectif d'écoconception tout en gardant lidentité de lexposition, nous avons utilisé la **Solutions :** Pour répondre à lobjectif d'écoconception tout en gardant lidentité de lexposition, nous avons utilisé la
police **Arial** pour le contenu des pages (titres, sous-titres, texte), mais nous avons choisi une **image SVG** pour conserver 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. 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 sengager dans un projet écoresponsable, il importe de se fixer des objectifs chiffrés, et pour **cela il faut des
indicateurs précis à atteindre**. Aujourdhui, 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 douverture et de liens vers
des contenus complémentaires sans toutefois proposer sur le site beaucoup plus de ressources que celles de lexposition.
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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB