feat: add images, some text
|
@ -11,7 +11,10 @@ authors:
|
||||||
- Nicolas Doby
|
- Nicolas Doby
|
||||||
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 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 ;
|
* Illustrer ce qu'implique concrètement une démarche d'écoconception ;
|
||||||
* Diffuser des solutions sobres répondant à certaines problématiques client ou utilisateur ;
|
* 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.
|
* É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
|
**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
|
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
|
3G moyenne. L’empreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
|
||||||
avec GreenIT Analysis.
|
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
|
## Problématiques rencontrées
|
||||||
|
|
||||||
|
@ -62,7 +68,7 @@ Cet article vise avant tout à partager les problématiques de conception rencon
|
||||||
|
|
||||||
### Navigation
|
### 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.
|
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
|
**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
|
### 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
|
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.
|
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
|
### 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.
|
**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
|
### 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
|
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.
|
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
|
### 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.
|
nécessitent dans certains cas l’implémentation de JavaScript ou de certaines propriétés CSS à éviter.
|
||||||
|
|
||||||
**Problèmes rencontrés :**
|
**Problèmes rencontrés :**
|
||||||
|
@ -172,7 +181,7 @@ des réponses** en utilisant un simple code Javascript.
|
||||||
|
|
||||||
### Page Écoconception
|
### 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.
|
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é,
|
**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
|
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é.
|
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
|
### Techniques
|
||||||
|
|
||||||
|
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 137 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 84 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 18 KiB |