Déclaration d’éco-conception

Nous avons réalisé un sondage auprès de nos lecteurs·rices, entre juillet et octobre 2024. Au total, nous avons obtenu 64 réponses.

Nous avons par exemple mesuré leur intérêt pour un média sur le numérique responsable, et sur le type de contenu à y lire (réponses mutliples).

• 70 % ont indiqué leur intérêt pour lire des articles d'actualité
• 69 % des décryptages
• 59 % des bonnes pratiques (ex : 5 astuces pour réduire la consommation d'électricité de ses appareils numériques...)
• 58 % des interviews d'acteurs•rices engagées dans ce domaine
• 44 % des récits d'expériences

Le service numérique proposé répond également aux Objectifs de Développement Durable suivants :

• ODD 4 : Veiller à ce que tous·tes puissent suivre une éducation de qualité dans des conditions d’équité et promouvoir les possibilités d’apprentissage tout au long de la vie
• ODD 9 : Mettre en place une infrastructure résiliente, promouvoir une industrialisation durable qui profite à tous et encourager l’innovation
• ODD 12 : Établir des modes de consommation et de production durables
• ODD 13 : Prendre d’urgence des mesures pour lutter contre les changements climatiques et leurs répercussions
• ODD 16 : Promouvoir l’avènement de sociétés pacifiques et ouvertes aux fins du développement durable

Cécile Rouyer, membre des e-novateurs et designeuse graphique engagée pour un numérique plus accessible, a participé à redéfinir la charte graphique du média.

Ce faisant, elle nous a accompagné dans la réalisation du sondage, pour déterminer les cibles utilisatrices et leurs attentes comme leurs besoins.

Sa synthèse est consultable en ligne.

Le référent est Jérémy Pastouret, développeur web attentif aux questions d'éco-conception.

Il a contribué à la nouvelle édition d'Ecoconception Web : les 115 bonnes pratiques (association Green IT) ainsi qu'au référentiel de l'IA frugale (AFNOR - Commissariat Général au Développement Durable).

Les revues sont faites par des tests automatisés avant chaque mise en production uniquement.

• Des tests avec Playwright (vidéo mp4 - 1Mo) sont effectués pour s'assurer que les pages principales ainsi que les nouvelles fonctionnent bien.
• Vérification du score EcoIndex, en utilisant également Playwright : la page d'accueil, le nouvel article et/ou la nouvelle brève, la liste des articles sont revus et doivent obtenir un score supérieur à 50.
  

Nous avons pour objectif de réduire la taille de nos images de couvertures car elles sont surdimensionnées. Un script est en cours de développement et des tests à réaliser.

Nous souhaitons aussi trouver un hébergeur pour nos vidéos avec PeerTube, afin d'éviter de les héberger localement et permettre une meilleure diffusion.

Le service numérique collecte uniquement des données de visites via Matomo, installé sur le même serveur.

L'adresse e-mail est collectée avec le consentement de l'utilisateur·ice, uniquement dans le but de lui envoyer la newsletter mensuelle.

Le site est disponible uniquement en HTTPS : de ce fait, les données sont encryptées lors de l'envoi d'informations.

Le code source est disponible sur GitHub mais de manière privée. Un nettoyage des clés API, de l'historique Git et un travail du README doit être effectué pour le rendre public.

Aucune technologie fermée n'est utilisée au sein de l'association, ni du média. Nous utilisons Next.JS / TailwindCSS et une API en Slim PHP.

Le service ne repose pas sur un objet connecté ou un périphérique matériel.

Le service numérique fonctionne sur ordinateur, tablette et smartphone avec un accès à Internet opérationnel. La gestion de Javascript est recommandée pour un confort d'utilisation, mais non nécessaire pour accéder au contenu.

Des tests ont été réalisés pour vérifier que le site marche sur un Samsung J3 de 2017 fonctionnant sous Android 7, ainsi que sur un Samsung Galaxy S5 sous Android 6.0.1.

La vidéo de test sous Samsung Galaxy S5 est consultable (vidéo mp4 - 6Mo).

Le service fonctionne également sur des ordinateurs sous Windows XP, 7 et 10.

Les tests ont été réalisés pour XP avec un émulateur sous Mac Os M1 avec UTM. La machine utilisée possède 512Mb de RAM et un CPU de 1GHz. Les tests sont également consultable (vidéo - 14.8Mo).

Le service est opérationnel sur d'anciens terminaux, mais il est à noter que le confort d'utilisation est dégradé. Les emojis sont non interprétés et l'accessibilité est dégradé par le fait que le texte ne s'adapte pas parfaitement sur d'anciens navigateurs.

Testé sous Firefox en vidant le cache au préalable et en paramétrant le niveau de connexion dans le navigateur à 2G Regular. Grâce à NextJS et la technologie PWA, celui-ci télécharge les contenus au fur et à mesure.

Le texte, restant prioritaire se charge assez rapidement, puis les images avec le lazy loading. Un système de cache également présent permet d'utiliser le service même en hors connexion (ce qui est pratique dans le train par exemple).

Des tests ont été réalisés en extérieur en prenant le train, en passant dans des tunnels ou lorsque des coupures réseaux surviennent : le contenu déjà chargé en cache fonctionne correctement.

Les tests sous Firefox sont aussi consultables au format vidéo (vidéo mp4 - 5.7Mo).

Le test réalisé en 2.2 valide aussi ce critère, car le service a été testé sur la version 45 de Firefox sous Windows XP, ainsi que sur une ancienne version de Chrome sous Android.

Testé avec Firefox en utilisant les différents types d'écran suivants :

• Ecran TV LG M2362DP - 23 pouces, capture d'écran (614kb) de la page d'accueil
• Iphone 5SE avec une résolution de 320x568, capture d'écran (167kb)
• Ipad sous iOs 14.7 avec une résolution de 1080x810, capture d'écran (235kb)
• Mac Pro M1 - 13 pouces, capture d'écran (596kb)

Par défaut, nous eco-conçevons chaque fonctionnalité mais nous n'avons pas de revue humaine externe dédiée pour chaque ajout.

Le service ne possède pas d'environnement de QA, test... seulement des environnements de développement locaux et plusieurs repositories GitHub, pour le moment privés.

La stratégie de décommissionnement est assez simple car il suffit de passer le projet sur GitHub en Open Source, et d'arrêter le seul serveur de production que nous avons.

Concernant la maintenance, le service possède un système de redémarrage automatique et de signalement si la plateforme n'est plus accessible.

L'hébergeur Ikoula mène aussi régulièrement des opérations de maintenance et de surveillance des VPS, notamment grâce à des agents Zabbix.

Le service utilise TailwindCSS pour gérer le design du site. Celui-ci permet d'optimiser et compresser le code des classes utilisées. Les composants s'appuient sur TailwindCSS et sont développés pour être réutilisés.

Lorsqu'un possible ajout de composant (lié à un manque) survient, des recherches sont menées pour vérifier s'il existe un composant déjà existant pour remplir ce besoin.

Cette approche permet aussi de conserver un code propre, et de ne pas se perdre parmi des composants devenus inutiles.

Il y a uniquement deux services tiers sur le média :

• Matomo : installé sur notre propre serveur, avec l'option d'archivage d'activée pour éviter toute surcharge du côté de la base de données.
• Mailchimp : outil de gestion de newsletter. Nous réalisons un appel API à chaque fois qu'un·e visiteur·se y ajoute son adresse e-mail.

Le service repose sur NextJs et nous l'utilisons de manière à commpiler toutes les pages du sites en amont. Le service fonctionne sur le principe du SSR (Server side render), les pages ne sont donc pas généré à chaque demande utilisateurs et le contenu est optimisé.

Nous utilisons un VPS fournit par Ikoula et nous effectuons les mises à jour de Debian.

Le choix du matériel et de leur compatibilité revient à Ikoula. Concernant le système d'exploitation, il est connu, utilisé par un grand nombre d'entreprise et la communauté derrière ce système est importante.

A l'heure actuelle, il n'y a rien qui puissent laisser penser que le service ne suivra pas de nouveau protocole.

Nous sommes un service web, nous suivons les mises à jour de framework et nous ne sommes pas à liée à des configurations d'OS mobile ou PC.

Un service web avec donc des mises à jour en direct à partir du moment où on se connecte au site. Si des bugs sont trouvés, nous réalisons des corrections au plus vite.

Au moment du build (compilation) du site, NextJs compare les pages présents dans le code avec ceux déjà généré. Si c'est une nouvelle page, ou modifié, il construit la page.

Nous considerons que ce critère ne s'adresse pas à un service web. Mais nous y apportons des éléments de réponse complémentaire.

Nos développement se font localement sur nos machines physiques. Nos tests sont fait localement, la mise à jour des fichiers sur le serveur se fait sobrement avec un git pull et on compile directement sur le serveur.

Il est assez rare de trouver des animations/vidéos/sons sur le média mais lorsque cela est fait, la lecture automatique est bien désactivée.

Aucune page ne propose de défilement infini, lorsque cela s&apoos;y prête, nous avons un système de pagination.

Le service web apporte de l'information, nous avons peu de fonctionnalité principale et leur fonctionnement est clairement indiqué.

Pour Matomo, si l'option Do Not Track est activé ou qu'une extension du type AdBlocker est utilisé, le service est automatiquement désactivé

Pour Mailchimp, l'appel à l'API est utilisé uniquement si l'utilisateur décide d'y renseigner son email et d'appuyer sur le bouton d'envoi de l'information.

Nous utilisons les standards du web et n'avons même pas ajouté de polices de caractères personnalisées.

La vidéo est un autre format d'accès à l'information. La majorité de nos contenus sont au format texte avec des images d'illustrations du propos. Les quelques vidéos présentent sont issues d'interview réalisés par nos soins ou des vidéos utiles d'illustration de l'article.

Le texte reste prioritaire sur le média, il y a une image de couverture par article et brève pour respecter les codes de la presse. Sinon les autres images illustre un propos utile, il y a par exemple très peu d'image sans contenu alternative pour l'accessibilité car la plupart des images sont utiles.

Concernant les infographies, nous mettons un point d'honneur a ce qu'elle soient le plus accessible possible. Nous les développons en combinant HTML et CSS et quand cela n'est pas possible, nous utilisons du vectoriel avec SVG.

Pour éviter aussi de nombreuses captures d'écran de ChatGPT pour démontrer un fait, nous avons développé un composant reprenant les codes visuels afin d'avoir un contenu plus léger qu'une image et mieux intégrable.

Nous utilisons uniquement des polices standard, nous n'en avons pas de personnalisé.

Sur le média, on retrouve un champ pour s'inscrire à la newsletter dont le format est affiché et contrôlé par le navigateur.

Nous avons pris l'habitude d'indiquer le poids et le format de l'ensemble des fichiers qui pourrait être téléchargé par l'utilisateur.

N'ayant pas de fonctionnalités ayant des impacts environnementaux importants, ce critère est non applicable.

Nous n'avons pas de système de notification

Nous avons pas connaissance de designs douteux sur le média. Nous pouvons à certaines période de l'année, être plus insistant sur la transmission d'information important pour l'association comme les campagnes de dons. Mais nous n'avons pas de système poussant les utilisateurs•rices a faire une action qui ne souhaiterais pas faire.

Un badge d'eco-index est disponible dans le pied de page du site, la page d'eco-conception est aussi en libre accès.

Nous mettons à disposition gratuitement une extension navigateur pour Firefox/Chrome (présentation sur le site Les Bases de l'ANCT) et même Firefox Android afin d'afficher le badge ecoIndex sur n'importe quel site web consulté.

Nos images sont toutes compressées au format webp.

Le composant Image de NextJS fonctionne très bien pour s'adapter au viewport de l'appareil cible avec un niveau de compression adaptés. Mon hack ou tutoriel explique le fonctionnement du module Image.

Nous avons deux types de vidéos, celle embarqué provenant de Youtube pour lequel on minimalise la résolution offrant l'utilisateur d'aller sur Youtube pour l'adapter à son usage.

Pour l'autre type de vidéo, elles sont stockés sur notre serveur sous deux format pour optimiser la compatibilité et avec la plupart du temps des sous-titres.

Ce dernier type de vidéo est compressé et mis à disposition en basse qualité pour des raisons de stockage mais aussi environnemental.

Comme indiqué précédemment, les vidéos sont soient compressés par défaut, soit géré par Youtube mais embarqué en base résolution.

Nos interviews vidéos sont aussi disponible au format podcast mais nous n'avons pas intégré visuellement cette possibilité sur le média.

Nous intervenons manuellement à la suppression de contenu non-utile, en nous basant sur le nombre de vue des pages ou si celui-ci n'est plus maintenu. Concernant les articles, il est rare que nous les supprimons car il est primordiale pour un média de conserver sa mémoire historique d'évènement décrit dans le passé.

Nous nous basons sur les valeurs remontées par EcoIndex ou avec un contrôle visuel dans la console de développement.

Avec l'aide du framework NextJS et PWA, nous avons mis en place un système de cache des contenus du média.

C'est une fonctionnalité proposé par défaut avec NextJS

Le contenu est affiché au fur et à mesure. Cela repose sur le système de lazy loading présent dans le module de NextJS.

Nous ne faisons pas appel à l'API du navigateur pour obtenir la position géolocalisé d'un utilisateur ou toute autre fonction utilisant les capteurs du terminal.

Toutes les ressources sont présentes sur le même domaine les-enovateurs.com et sécurisé avec le protocole HTTPS

Le site étant compilé, nous pouvons considéré que le cache est généré à chaque nouvelle version de site.

Nous n'avons pas de traitement long fonctionnant en arrière-plan.

Le service n'intègre pas de système de type blockchain.

Ikoula présente sur son site une démarche de réduction de son emmpreinte environnementale.

Ikoula est certifié ISO 27001 et ISO 50001. Ils sont aussi référencé dans l'annuaire des hébergeurs verts (The Green Hosting Directory)

Ikoula possède l'ISO 50001 dédié à un management plus responsable de l'énergie. Leur infrastructure est décrite avec précision. Cependant aucun PUE n'a été trouvé sur leur site.

Même problématique que pour le critère précédent.

Ils indiquent sur leur site web "nous agissons de manière éco-responsable en diminuant la consommation d'énergie dans nos data centers et en les alimentant à 100% d’énergie renouvelable."

Le datacenter est à Reims.