Afin de réduire les impacts négatifs du service numérique de Réseau Transition Haut-de-France, nous avons mené une démarche de sobriété.
Le développement durable est inscrit au cœur des projets de Réseau Transition Haut-de-France, il est donc naturel pour l’association de prendre en compte les bonnes pratiques d’écoconception dans la création de son service numérique. Le site web cherche à respecter le plus haut niveau possible d’engagement pour un numérique écoresponsable et accessible.
L’écoconception consiste à prendre en compte « des aspects environnementaux dès la conception et le développement de produits (biens et services, systèmes) avec pour objectif la réduction des impacts environnementaux négatifs tout au long de leur cycle de vie à service rendu équivalent ou supérieur » (Norme NF X 30-264 Management environnemental – Aide à la mise en place d’une démarche d’éco-conception, 2013).
Cette approche nécessite d’être dans une logique d’amélioration continue et de mettre en place des bonnes pratiques de la conception, au développement et à l’hébergement.
Recommandations Fonctionnelles
Éliminer les fonctionnalités non essentielles
Il a d’abord été question lors des échanges de déterminer si un site internet était nécessaire. Nous avons donc lister les services numériques existants et le besoin auquel chaque service répond. Nous avons ainsi identifié : Facebook pour communiquer au grand public, Hum hub pour l’équipe coeur qui travaille au développement du Réseau, Mobilizon qui est utilisé par les membres du réseau pour partager des documents et publier des événements.
A la suite de cette analyse, il a été identifié qu’il manquait un service pour répondre à 3 cibles prioritaires : les collectivités qui veulent agir, les collectifs en création, les investisseurs.
Les unités fonctionnelles retenues sont donc :
- Découvrir le réseau et son accompagnement
- Se renseigner sur les initiatives du territoire hauts-de-france
- Soutenir le réseau transition
Dans le projet il a été décidé que le site s’appuiera sur :
- Mobilizon pour la gestion des événements et pour le partage de documents aux membres du réseau
- La cartographie des projets du Réseau Transition France
Optimiser le parcours utilisateur
L’enjeu ici est de faire en sorte de diminuer le temps passé par l’utilisateur. Pour cela nous avons travaillé à la hiérachie des contenus et avons fait des tests utilisateurs . Ce travail a permis entre autre de :
- distinguer des parcours selon le persona
- ajouter une sous navigation dans le menu
- ajouter la page formation en première page du menu
Favoriser un design simple, épuré, adapté au web
Dès la phase de conception les parties prenantes du projet ont été sensibilisées, afin que chacun puisse prendre en compte les contraintes de l’autre en compte.
Les échanges entre l’équipe coeur de Réseau Transition, la designeuse et le développeur ont permis le respect des bonnes pratiques d’écoconception web.
Il a par exemple était discuté collectivement de l’apport d’une image animée sur la page d’accueil. Des solutions techniques ont été envisagées pour éviter un GIF, puis il a été privilégié d’un commun accord de choisir une image statique.
Une attention particulière a également été apportée à ne pas utiliser de carrousel.
Privilégier une approche mobile first
L’ensemble des interfaces a été pensé dès le début en version mobile. En restreignant la taille de l’écran dès la conception, nous avons évité d’intégrer des contenus superflus et de faire des pages trop longues. Aucune fonctionnalité n’a été ajoutée pour la version ordinateur.
Le site est responsive et a été pensé et conçu pour fonctionner sur mobile, aussi bien que sur ordinateur.
Choisir une police standard
Pour des raisons d’écoconception, nous avons choisi de nous limiter à une police système. Ainsi aucune police personnalisée n’est téléchargée par les utilisateurs lors de l’affichage du site, ce qui évite d’alourdir la page et limite le nombre de requêtes.
Nous avons fait le choix d’utiliser la police Segoe UI avec des fallbacks vers Tahoma, Geneva et Verdana pour plusieurs raisons :
- Ces polices sont disponibles sur quasiment la totalité des appareils peu importe leur système d’exploitation.
- Ces polices sont plus accessibles que des typographies serif.
- Ces polices existent en plusieurs graisses.
Réduire le nombre d’image et leur poids
La présence de chaque image sur le site a été discutée, ainsi elles sont peu nombreuses et portent toutes un message.
L’image en page d’accueil a été optimisée, son poids initial en SVG été de 1,34Mo, nous avons privilégier le format .webp nous permettant d’avoir un poids final de 134 Ko.
Recommandations Éditoriales
Afin de simplifier la lecture et la compréhension, nous avons veillé à :
- ne pas avoir d’anglicisme
- avoir des titres court et avec un verbe
- avoir des liens explicites
- faire des phrases courtes
- bien hiérarchiser les titres
- privilégier des textes centrés à gauche
Recommandations Techniques
Afin de limiter les impacts environnementaux dû à l’utilisation du CMS WordPress, il a été demandé de réduire les impacts sur la partie front du site avec le développement sur mesure d’un thème et l’utilisation de l’éditeur de contenu natif (sans constructeur de page disponible en plugin). Pour limiter les appels à la base donnée, il a été préconisé de générer des versions HTML statiques des pages et une configuration fine du cache.
Le site étant administrable, la question de l’optimisation des nouveaux médias par les administrateurs s’est posée. Il a été convenu d’une première optimisation hors site afin d’éviter des calculs importants lors des conversions en format pertinent pour l’affichage des images en front mais également réduire le poids des fichiers présents sur le serveur mais qui ne seront jamais utilisés pour les visiteurs du site.
Il a été également proposé de mettre en place une optimisation au niveau du CMS pour servir les formats les plus adaptés (webp ou avif). En complément, il a été recommandé d’utiliser les fonctions natives de WordPress pour afficher les images pour servir les images adaptées aux résolutions des appareils se connectant au site.
Mesure des impacts environnementaux
Performance globale
Le site comporte 19 pages. Les données suivantes écartent les pages “Plan du site”, “Accessibilité”, “Écoconception” et “Mentions légales” afin de ne pas biaiser positivement les résultats par des pages de contenu exclusivement textuel, par essence très légères.
Les mesures ci-dessous ont été effectuées via le service numérique ecoindex.fr de l’association GreenIT, le 03/04/2023.
Sur les 15 pages de contenu du site, nous obtenons une note Ecoindex sur toutes les pages de A (note moyenne de 85/100).
- Nombre de requêtes moyen par page : 12,7. Le nombre de requêtes moyen d’une page web en 2022 est de 76 d’après HTTP Archive.
- Poids moyen des pages : 150,5 Ko Le poids moyen d’une page web en 2022 est de 2,3 Mo d’après HTTP Archive.
- Taille moyenne de DOM : 224. GreenIT recommande une taille de DOM par page en dessous de 600.
Nous avons ensuite fait l’analyse de 4 parcours principaux via l’outil GreenITAnalysis de l’association GreenIT. Ces analyses ont été faites avec Firefox le 03/04/2023.
Ces mesures sont des estimations et ne représentent pas une vision exacte de la réalité (Sous le capot de la mesure Ecoindex – OCTO Talks).
Parcours 1 : Découvrir le réseau
J’ai connu le reseau Transition Hauts-de-France via un événement et je souhaite me renseigner sur l’association. Mon parcours sur le site est le suivant :
- Arrivée sur la page d’accueil
- Puis Qui sommes-nous ?
- Puis Nos missions
- Puis Notre fonctionnement
- Puis L’équipage
Les mesures effectuées via GreenIT Analysis sous Firefox le 03/04/2023 donnent les impacts environnementaux suivants pour l’ensemble du parcours :
- 6,47 gCO2e
- 9,69 cl d’eau
Pour 1000 visites, cela représente 30 km en voiture thermique et 10,7 packs d’eau de 9L.
Parcours 2 : Se renseigner sur les accompagnements citoyens
Je suis citoyen et je lance un collectif de transition. Mon parcours sur le site est le suivant :
- Arrivée sur la page d’accueil
- Puis Je suis citoyen
- Puis Nos ressources
- Puis Nos formations
- Puis Agenda
Les mesures effectuées via GreenIT Analysis sous Firefox le 03/04/2023 donnent les impacts environnementaux suivants pour l’ensemble du parcours :
- 6,41 gCO2e
- 9,63 cl d’eau
Pour 1000 visites, cela représente 30 km en voiture thermique et 10,7 packs d’eau de 9L.
Parcours 3 : Se renseigner sur les initiatives du territoire
Je suis une collectivité et je veux me renseigner sur la dynamique de mon territoire et ce que je peux mettre en place. Mon parcours sur le site est le suivant :
- Arrivée sur la page d’accueil
- Puis je suis une collectivité
- Puis les intiatives
Les mesures effectuées via GreenIT Analysis sous Firefox le 03/04/2023 donnent les impacts environnementaux suivants pour l’ensemble du parcours :
- 3,87 gCO2e
- 5,82 cl d’eau
Pour 1000 visites, cela représente 18 km en voiture thermique et 6,5 packs d’eau de 9L.
Parcours 4 : Soutenir le réseau transition
- Arrivée sur la page d’accueil
- Puis Je veux soutenir le réseau transition
- Puis Contact
Les mesures effectuées via GreenIT Analysis sous Firefox le 03/04/2023 donnent les impacts environnementaux suivants pour l’ensemble du parcours :
- 3,83 gCO2e
- 5,76 cl d’eau
Pour 1000 visites, cela représente 17 km en voiture thermique et 6,4 packs d’eau de 9L.
L’écoconception est une démarche d’amélioration continue et nous sommes conscients que ce site présente encore des points d’amélioration.