feat/integration_mdb (#1)

Reviewed-on: #1

src/_pages/blog/article/ecoconception_web_exposition_celtique.md

@@ -0,0 +1,212 @@
+---
+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
+tags:
+  - écoconception
+  - retour d'expérience
+authors:
+  - Anne Faubry
+  - Aurélie Baton
+  - Nicolas Doby
+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
+partager ce retour d’expérience dans cet article et nous espérons que ce retour d'expérience pourra servir à :
+* Illustrer ce qu'implique concrètement une démarche d'écoconception ;
+* Diffuser des solutions sobres répondant à certaines problématiques client ou utilisateur ;
+* Éviter à d'autres concepteurs de commettre les mêmes erreurs et de passer par les mêmes tâtonnements que nous dans leurs projets.
+
+## Contexte du projet
+
+### Objectifs du site
+
+Le [Musée de Bretagne](https://www.musee-bretagne.fr/) a lancé du 18 mars au 4 décembre 2022 l'exposition "Celtique ?", qui interroge l'identité celte de la Bretagne contemporaine. Pour accompagner cette exposition physique, le Musée de Bretagne a souhaité lancer un site internet répondant à deux objectifs principaux :
+* Rendre les contenus de l'exposition accessibles au plus grand nombre, notamment pour les personnes éloignées géographiquement ainsi qu'une fois l'exposition finie ;
+* Permettre aux visiteurs de poursuivre leur expérience en ligne via des ressources complémentaires.
+
+Le site reprend donc les contenus de l'exposition en les adaptant à un contexte web et en les enrichissant d'autres ressources disponibles en ligne.
+
+### Cahier des charges du site
+
+En cohérence avec ses valeurs de démocratisation de la culture et de rôle civique des institutions publiques, le cahier des charges émis imposait que le site soit :
+* accessible (le plus possible)
+* éco-conçu (le plus sobre possible)
+* open-source (utilisant des solutions libres et partageant son code source)
+* cookie-free (ne collectant aucune donnée personnelle des utilisateurs).
+
+### Équipe
+
+L'équipe ayant réalisé ce projet était composée de :
+* [Hélène Maître-Marchois](https://www.linkedin.com/in/h%C3%A9l%C3%A8ne-ma%C3%AEtre-marchois-56758259/) de [Fairness](https://fairness.coop/), interlocutrice commerciale
+* [Nicolas Doby](https://www.linkedin.com/in/nicolas-doby-a4a96b96/) de [IT's on Us](https://www.itsonus.fr/), développeur
+* [Aurélie Baton](https://www.linkedin.com/in/aureliebaton/) et [Anne Faubry](https://www.linkedin.com/in/anne-faubry-3b2b8390/), UX/UI Designers
+
+Côté Musée de Bretagne, les interlocuteurs privilégiés avec lesquels l'équipe de développement a co-créé le site final étaient :
+* [Manuel Moreau](https://www.linkedin.com/in/manuel-moreau-44b66214a/), Prospective et Innovation
+* [Sarah Lemiale](https://www.linkedin.com/in/sarah-lemiale/), Cheffe de projet d'exposition
+
+### Résultat
+
+La conception et le développement du site se sont déroulés de fin novembre 2021 à mars 2022. Le site a été publié le 13 juin 2022.
+
+**Les 15 pages de contenu du site sont toutes notées A ou B par ecoindex.** Le nombre moyen de requêtes est de 15, **le poids
+moyen des pages est de 658 Ko** et la taille moyenne du DOM est de 310. Le site se charge en 2,5 secondes avec une connexion
+3G moyenne. L’empreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
+et 15 cl d’eau selon les mesures effectuées avec GreenIT Analysis.
+
+Retrouvez le détail des mesures d'impacts environnementaux effectuées et leurs explications sur la page [Écoconception](https://www.exposition-celtique.bzh/ecoconception/).
+
+L'écoconception de services numériques a permis de minimiser les impacts environnementaux du service web tout en
+améliorant la performance d'usage pour le visiteur du site.
+
+## Problématiques rencontrées
+
+Cet article vise avant tout à partager les problématiques de conception rencontrées ainsi que les solutions adoptées.
+
+### Navigation
+
+**En écoconception de services numériques :** L'un des ressorts principaux de l'écoconception consiste à fluidifier au maximum le parcours
+utilisateur. Une navigation complexe entraîne des allers-retours et des chargements de pages superflus.
+
+**Problèmes rencontrés :** L'arborescence initialement prévue correspondait à l'architecture de l'exposition et au
+parcours physique des visiteurs. Or, elle était beaucoup trop complexe pour une architecture de site web. Les tests menés
+nous ont en effet révélé que les utilisateurs ne parvenaient pas à savoir où ils se trouvaient sur le site ou à retrouver
+une page sur laquelle ils étaient allés auparavant.
+
+Par ailleurs le cahier des charges indiquait que le site devait répondre à deux usages de navigation distincts :
+- Navigation linéaire : lecture des contenus dans l'ordre chronologique, celui des chapitres
+- Navigation transverse : lecture des contenus selon les sujets abordés, en sautant des parties, dans le désordre
+
+**Solutions :** Les 4 niveaux de profondeur de l'arborescence ont été réduits à 3. Les longueurs de chaque partie ont été harmonisées afin de se retrouver avec 2 parties de 3 et 5 chapitres au lieu de 4 parties de 1 à 4 chapitres. Cela a nécessité des réécritures et des coupes dans le texte, choisies avec le Musée de Bretagne.
+Deux palettes de couleurs distinctes ont également été retenues pour aider les utilisateurs à identifier où ils se trouvaient.
+Dans les parties les plus riches, nous avons ajouté un sommaire sous l'introduction et un chemin de fer cliquable en haut de page, permettant des navigations transverses selon les centres d'intérêt de l'internaute. Des boutons "précédent" et "suivant" ont également été travaillés pour les usages de navigation plus linéaires.
+
+![Différentes navigations : chemin de fer cliquable, boutons précédent/suivant](/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg "Différentes navigations : chemin de fer cliquable, boutons précédent/suivant")
+
+Ces modes de navigation devaient être également accessibles sur mobile. Le chemin de fer a dû être simplifié.
+
+NB : Certains utilisateurs, notamment les moins à l'aise avec le numérique, ne pensent pas nécessairement à cliquer sur le logo pour revenir à l'accueil. Il est important de prévoir une entrée "Accueil" dans le menu pour ces personnes.
+
+### Photos
+
+**En écoconception de services numériques :** En 2022, les images d'une page web représentent en moyenne plus
+de 1 Mo ([HTTP Archive](https://httparchive.org/reports/page-weight)). Or GreenIT.fr recommande de rester sous
+la barre de 1 Mo pour le poids d'une page.
+
+**Problèmes rencontrés :** Le site “Celtique ?” est un site de contenu, présentant des photos de collections de
+musées. Plusieurs pages intègrent une dizaine d'images de bonne qualité. Certains utilisateurs, comme des enseignants
+et des chercheurs, peuvent avoir besoin d'accéder aux images en haute définition. Certaines photos des œuvres transmises
+étaient d'excellente qualité à des fins de conservation, et pesaient à l'origine plus de 50 Mo.
+
+**Solutions :** Comme toujours en écoconception, il s'agit tout d'abord d'interroger le besoin. Ici, il est
+double : accompagner les textes explicatifs et s'immerger dans les collections. Certaines images superflues ont ainsi
+été écartées pour réduire leur nombre à 10 par page de contenu au maximum.
+
+Deuxièmement, nous nous sommes interrogés sur la définition nécessaire pour les images. Nous avons choisi de les
+afficher en taille moyenne pour la plupart (entre 300 et 800 pixels de large) avec une **option "Voir en résolution
+maximale"** pour accéder à la haute définition.
+
+![Figure suivi d'un lien pour voir la version haute résolution](/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg "Figure suivi d'un lien pour voir la version haute résolution")
+
+Les photos ont été fortement optimisées. Ainsi, même en haute définition, les images ne font pas plus de 1024 pixels
+de large et conservent un poids inférieur à 2 Mo. Les images de taille moyenne font quant à elles généralement
+entre 50 et 200 Ko.
+
+Pour accéder à notre méthode de compression des
+images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
+
+Pour les images vectorielles, nous avons privilégié le format SVG qui est généralement plus léger que le JPEG,
+sauf pour les images vectorielles complexes telles que la "Carte des flux de populations et échanges économiques et
+culturels au haut Moyen  ge" qui était plus lourde au format SVG.
+
+Lorsque possible, certaines images vectorielles ont été remplacées par des glyphes : par exemple la flèche
+précédent / suivant est un caractère.
+
+### Vidéos
+
+**En écoconception de services numériques :** Les vidéos représentent environ 80% des données transférées sur
+internet. Gourmand en énergie, le streaming a des impacts environnementaux considérables : obsolescence accélérée du
+matériel, renouvellement des infrastructures générant un effet rebond, exigences élevées en stockage, transfert de
+données… Il s'agit de les réduire au maximum.
+
+**Problèmes rencontrés :** La vidéo est un média populaire, efficace en communication. Les expositions sont souvent présentées par une vidéo, généralement positionnées haut sur la page d'accueil pour inciter au visionnage. Plusieurs interviews et vidéos explicatives font également partie de l'exposition, pesant 200 Mo à 500 Mo chacune. Par ailleurs, le plugin Youtube, souvent utilisé pour incruster les vidéos dans la page pèse à lui seul 2,5 Mo et nécessite de nombreuses requêtes.
+
+**Solutions :** Certaines vidéos ont été placées plus bas sur les pages, voire en lien externe vers Youtube pour ne pas trop inciter à les visionner lorsqu’elles n’étaient pas essentielles à la compréhension.
+
+Elles ont été **compressées à 720p et fortement optimisées**, permettant souvent de diviser leur poids par 15. Pour accéder à
+notre méthode de compression des images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
+
+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.
+
+### 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.
+
+**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
+l’apparence de la typographie dans le titre de l’exposition.
+
+![Titre du site utilisant une typographie celtique](/blog_images/articles/ecoconception_web_exposition_celtique/image_3.jpg "Titre du site utilisant une typographie \"celtique\"")
+
+### Interactions
+
+**En écoconception de services numériques :** Certaines interactions et animations peuvent être coûteuses en termes de ressources car elles
+nécessitent dans certains cas l’implémentation de JavaScript ou de certaines propriétés CSS à éviter.
+
+**Problèmes rencontrés :**
+Pour rendre l’exposition interactive et accessible au plus grand nombre, le Musée de Bretagne avait prévu un test (quiz) pour que chacun puisse découvrir son “profil celte”. L’idée était donc de conserver ce questionnaire pour la version en ligne de l’exposition. Mais comment rendre un test suffisamment interactif tout en limitant l’utilisation de ressources ?
+
+Les questions du questionnaire étaient au départ au nombre de 12. Nous avions envisagé une barre de progression afin que l’utilisateur ait une indication visuelle de sa progression dans le questionnaire.
+
+**Solutions :**
+Après plusieurs tests utilisateurs sur les maquettes il est finalement devenu apparent qu’il y avait trop de questions. Nous
+avons donc proposé de passer à 9 questions au lieu de 12. Les tests utilisateurs ont été concluants et la barre de
+progression était finalement superflue. Nous avons finalement décidé d’éliminer la barre de progression ce qui
+nécessitait également moins de développement.
+
+Cependant, afin que l’utilisateur ait un retour clair avant validation, nous avons conservé un **simple décompte
+des réponses** en utilisant un simple code Javascript.
+
+![Décompte des réponses restantes](/blog_images/articles/ecoconception_web_exposition_celtique/image_4.jpg "Décompte des réponses restantes")
+
+### Page Écoconception
+
+**En écoconception de services numériques :** Une des bonnes pratiques de l’écoconception consiste à documenter la démarche pour faire
+avancer le sujet et partager l’expérience, mais aussi afin d’expliquer le contexte et les limites du projet.
+
+**Problèmes rencontrés :** Comme de nombreux projets entamant une démarche d’écoconception, il y a d’un côté,
+l’objectif à atteindre, et de l’autre, les limites auxquelles nous sommes confrontés. Nous avons pu mettre
+en place une grande partie des bonnes pratiques d’écoconception, mais certaines n’ont pas pu être mises en place
+pour le moment car elles touchent à l’écosystème plus global des Champs Libres (par exemple l’hébergement des
+vidéos sur une plateforme de type PeerTube ou les statistiques de fréquentation du site sur un outil tel que Matomo).
+
+**Solutions :** Plutôt que d’afficher un score EcoIndex en bas de page ou bien une estimation de l’empreinte
+environnementale, nous avons préféré (après discussion avec l’équipe du musée) documenter notre **intention
+d’écoconception dans une page** disponible dans le pied de page du site, au même titre que la déclaration d’accessibilité.
+
+![Bas de page contenant le lien vers la page écoconception](/blog_images/articles/ecoconception_web_exposition_celtique/image_5.jpg "Bas de page contenant le lien vers la page écoconception")
+
+### Techniques
+
+La particularité de ce projet est qu’il ne nécessite aucune modification graphique, aucun ajout de page ou de contenu. Seules des corrections textuelles mineures seront réalisées sur ce site. De ce fait, un générateur de site statique répond amplement au besoin. Ceci permettant de générer une seule fois les ressources statiques (HTML, CSS, JS) lors de l’installation contrairement à des sites dynamiques qui génèrent les pages à la volée, à chaque visite du site web. Ce choix soulage la charge serveur, le transformant en simple fournisseur de fichiers et non un calculateur récurrent.
+
+Le générateur de [sites statiques 11ty](https://www.11ty.dev/) a été retenu en utilisant pour la plupart des pages un format Markdown et un template global pour la mise en forme. Le format Markdown, étant lisible sans avoir de connaissance technique, il est aisé d’apporter des corrections sur le fond sans “casser” la forme.
+
+Au fur et à mesure des avancées des maquettes, il s’est avéré que chacune des pages étaient différentes. Le Markdown perdant son avantage d’être lisible, il a été décidé de passer sur un format Nunjunk ; permettant d’avoir plus de souplesse dans le développement.
+
+Ce changement a induit de former les équipes non-techniques sur ces aspects techniques :
+* l’architecture technique du projet : savoir à quel endroit se trouve les textes à modifier,
+* comment modifier des fichiers sources Nunjunk en respectant un format contraignant.
+
+Une fois les modifications réalisées, les équipes techniques peuvent générer et re-déployer une version de production.
+

src/blog_assets/css/index.scss

@@ -130,6 +130,13 @@ h2 {
   margin: 3rem 0 2rem;
 }
 
+h3 {
+  color: var(--text-color-secondary);
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 700;
+}
+
 p, li {
   font-size: 1.125rem;
   line-height: 1.5rem;