diff --git a/src/_pages/blog/article/ecoconception_web_exposition_celtique.md b/src/_pages/blog/article/ecoconception_web_exposition_celtique.md index ce113e5..a7214b1 100644 --- a/src/_pages/blog/article/ecoconception_web_exposition_celtique.md +++ b/src/_pages/blog/article/ecoconception_web_exposition_celtique.md @@ -11,7 +11,10 @@ authors: - 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 à : +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. @@ -51,10 +54,13 @@ La conception et le développement du site se sont déroulés de fin novembre 20 **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 gCO2e et 15 cl d’eau selon les mesures effectuées -avec GreenIT Analysis. +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'impact environnemental effectuées et leurs explications sur la page [Écoconception](https://www.exposition-celtique.bzh/ecoconception/). +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 @@ -62,7 +68,7 @@ Cet article vise avant tout à partager les problématiques de conception rencon ### Navigation -**En écoconception :** L'un des ressorts principaux de l'écoconception consiste à fluidifier au maximum le parcours +**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 @@ -86,7 +92,7 @@ NB : Certains utilisateurs, notamment les moins à l'aise avec le numérique, ne ### Photos -**En écoconception :** En 2022, les images d'une page web représentent en moyenne plus +**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. @@ -121,7 +127,10 @@ précédent / suivant est un caractère. ### Vidéos -**En écoconception :** Les vidéos représentent environ 80% des données transférées sur internet. Gourmand en énergie, le streaming a un impact environnemental considérable : 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. +**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. @@ -134,7 +143,7 @@ Les vidéos ont été incrustées en HTML5. Cela permet de ne pas avoir à tél ### Police -**En écoconception :** 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 standards, pré-installées sur l’ordinateur on économise donc de la bande passante tout en accélérant l’affichage de la page. @@ -151,7 +160,7 @@ l’apparence de la typographie dans le titre de l’exposition. ### Interactions -**En écoconception :** Certaines interactions et animations peuvent être coûteuses en termes de ressources car elles +**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 :** @@ -172,7 +181,7 @@ des réponses** en utilisant un simple code Javascript. ### Page Écoconception -**En écoconception :** Une des bonnes pratiques de l’écoconception consiste à documenter la démarche pour faire +**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é, @@ -185,7 +194,7 @@ vidéos sur une plateforme de type PeerTube ou les statistiques de fréquentatio 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_3.jpg "Bas de page contenant le lien vers la page écoconception") +![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 diff --git a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg index 0f96f9d..3b2ddb0 100644 Binary files a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg and b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg differ diff --git a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg index c2ee32f..e66b630 100644 Binary files a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg and b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg differ diff --git a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_3.jpg b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_3.jpg new file mode 100644 index 0000000..79ab753 Binary files /dev/null and b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_3.jpg differ diff --git a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_4.jpg b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_4.jpg new file mode 100644 index 0000000..87d883f Binary files /dev/null and b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_4.jpg differ diff --git a/src/blog_images/articles/ecoconception_web_exposition_celtique/image_5.jpg b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_5.jpg new file mode 100644 index 0000000..19e2c55 Binary files /dev/null and b/src/blog_images/articles/ecoconception_web_exposition_celtique/image_5.jpg differ