feat: add images, some text

pull/1/head
Nicolas Doby 2022-11-18 17:52:57 +01:00
parent 88db9befca
commit c8bff88163
6 changed files with 20 additions and 11 deletions

View File

@ -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 dexpé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 dexpé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. Lempreinte environnementale du parcours principal équivaut à 10 gCO2e et 15 cl deau selon les mesures effectuées
avec GreenIT Analysis.
3G moyenne. Lempreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
et 15 cl deau 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 lordinateur on économise donc de la bande passante tout en accélérant laffichage de la page.
@ -151,7 +160,7 @@ lapparence de la typographie dans le titre de lexposition.
### 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 limplé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 lexpérience, mais aussi afin dexpliquer le contexte et les limites du projet.
**Problèmes rencontrés :** Comme de nombreux projets entamant une démarche décoconception, il y a dun 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 daccessibilité.
![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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB