Créer un site écoconçu, par Pikselkraft
Publié lePour être en accord avec ses valeurs et afin de proposer plus de contenus, The Green Room a décidé en 2020 d’effectuer une refonte de son site internet en mettant en avant l’inclusion numérique et l’écoconception. Cet objectif est une réponse aux problèmes liés aux questions de pollution numérique et d’accessibilité. Internet est un facteur de pollution et d’exclusion trop souvent oublié dans nos sociétés alors qu’il s’avère être de plus en plus présent.
Il est encore peu admis qu’un site internet et que le numérique sont une source de pollution. Pourtant, ce dernier émet aujourd’hui 4 % des gaz à effet de serre au niveau mondial et sa consommation énergétique croît de 9 % par an (voir le rapport du Shift Project).
La réalisation du site écoconçu pour The Green Room avait pour objectif de réduire l'impact carbone du site tout en proposant des contenus plus variés (ressources, listes spécifiques, actualités, etc.). L’ancien site mélangeait les contenus anglais et français ; pour amener plus de clarté, le passage à un site multilingue a été décidé. Ces changements ont entrainé une augmentation du nombre de pages. Il a donc fallu organiser un site plus dense tout en réduisant sa consommation énergétique. L’avantage de l’écoconception est que cette réflexion va de pair avec l’inclusion numérique. Un site plus léger et simple dans sa structure permet à tous les visiteurs d’y accéder sans contrainte technique (réseau lent, appareil peu puissant, etc.). L’écoconception est donc un excellent moyen d’éviter l’obsolescence technique et d’augmenter la durée de vie des appareils électroniques.
Pour rappel, l’écoconception peut être résumée en quatre points :
- Offrir des services accessibles peu importe la puissance des appareils et la vitesse du réseau
- Limitant le temps nécessaire pour trouver l'information
- Utiliser le moins de ressources possible, et ainsi limiter le poids et la puissance informatique requise
- Réduire le temps de navigation
La phase de recherche
Après plusieurs rendez-vous et la conceptualisation des besoins, nous avons conçu sur l'arborescence du site. Les objectifs définis du site étaient : informer sur les actualités et les services de The Green Room, sensibiliser sur le changement environnemental et sociétal dans le secteur de la musique, et permettre de contacter l’association.
Les contenus sont divisés en différentes catégories :
- Des pages de contenus (la partie présentation)
- Des listes de ressources (liens ou événements)
- Des listes de contenus ou sous-pages (projets et services)
Cette division nous a permis de déterminer clairement l’ergonomie des pages et le rôle de chaque élément au sein de celles-ci. En partant de cette analyse, il a été plus simple de prévoir la structure du site internet. C’est une étape indispensable pour obtenir une ergonomie permettant de rendre le contenu accessible.
Une étude comparative des sites du secteur de la musique, nous a permis de développer une vision qui a abouti à un compromis entre la forte créativité des sites des festivals et des sites d’informations plus classiques qui ont une navigation plus ergonomique et un impact énergétique moindre. En se basant sur les contenus et nos recherches, nous avons pu avoir une arborescence simple qui mettant en avant un contenu segmenté. L’organisation et la disposition du contenu a été le premier levier pour limiter l’impact énergétique du site internet.
L’ancien site internet utilisait un système de gestion de contenu appelé WordPress, un logiciel très populaire, mais qui a un poids et des fonctionnalités intégrées qui ne sont pas nécessaires au vu de notre objectif. Une étude des besoins et des objectifs du site nous a permis de trouver une solution plus adaptée, qui nous donne plus de liberté pour développer une ergonomie et un design réduisant le poids des pages.
Nous avons choisi Kirby comme système de gestion du contenu. Ce logiciel n’utilise pas de base de données et il intègre peu de fonctionnalités, contrairement à WordPress. Le thème graphique est créé de zéro ce qui permet d’éviter le superflu d’outils, ce qui facilite également la création du thème au détriment du poids. Kirby nous a aussi permis de concevoir une administration personnalisée pour s'adapter à la navigation du site et l’optimiser le site en utilisant toujours un nombre de ressources limités.
Le processus d’écoconception
Ces conclusions nous ont permis de construire des maquettes fil de fer (wireframes) pour tester l'ergonomie du site, ainsi qu’une planche de tendances pour travailler un style graphique. Après une première validation des wireframes, un prototype de test a été mis en place pour tester les hypothèses directement en ligne et sur différents supports.
Nous avons choisi de proposer une navigation simple en découpant le contenu pour limiter la profondeur du site. Le design se base sur les couleurs vives de l'association pour rappeler le thème du monde du spectacle et garder un esprit positif malgré le thème de la crise écologique. Des illustrations et des formes géométriques pures accompagnent le contenu. La simplicité des formes choisies, nous permet d’avoir des visuels très légers (de 4 à 7 ko). Les formes géométriques sont codées directement, elles ont donc un poids dérisoire.
D’autres choix permettent de réduire l’impact du site. Nous avons ainsi limité l’utilisation d’images sur le site. Le choix de privilégier les images pour les projets qui sont des actions concrètes a été une façon de faire une sélection. Les images ont aussi été compressées pour réduire leurs poids. Nous n’avons pas ajouté de police de caractères spécifiques, nous utilisons les polices installées de base sur les appareils des utilisateurs. Le design des polices peut varier faiblement entre différents systèmes d'exploitation, mais cela nous permet d’éviter un poids supplémentaire sur le site.
Pour résumer notre processus :
- Conceptualiser le projet et les besoins
- Analyse des contenus et des sites du secteur
- Travail sur l'arborescence et la segmentation des contenus
- Réalisation de maquettes fil de fer et d’une planche tendance (style graphique et illustrations)
- Validation et prototypage en ligne
- Test sur le prototype et mise à jour en fonction des résultats
- Finalisation des illustrations et finalisation du prototype
- Rédaction d’un guide pour la prise en main de Kirby
- Mise aux normes pour le référencement et mise en ligne
- Suivi et maintenance
Résultats et suivi
Cette structure présente un autre avantage : faciliter la maintenance. Ce site est plus simple à installer sur un serveur et ne nécessite pas de configuration particulière. La sécurité est aussi facilitée, car il est plus simple de sauvegarder et de restaurer le site. Nous avons ainsi pu facilement choisir un hébergement vert (Infomaniak). Nous avons fait ce choix en raison de la politique environnementale et sociétale de cet hébergeur. C’est un partenaire en accord avec les valeurs de The Green Room.
En moyenne en 2020, une page internet avait un poids de 2000 kb (moyenne de http archive). Nous obtenons des pages 8 fois moins lourdes par rapport au poids moyen des pages internet en 2020. Nous avons une moyenne de 247.40 kb. En excluant la page qui contient une vidéo Youtube, nous obtenons une médiane pour le poids des pages de 73,6 kb. Nous n’avons pas le contrôle sur cette vidéo qui est une interview, il n’a donc pas été possible de trouver une alternative pour son hébergement. Dans tous les cas, une vidéo aurait un impact négatif sur notre moyenne, mais cela reste marginal par rapport aux résultats obtenus.
Un rapide tour d’horizon des outils de mesure les plus populaires permet de voir l’effet de l’écoconception. Le site internet atteint les meilleurs scores sur ces outils.
À noter que le fait de ne pas utiliser d’outils de suivi du trafic permet non seulement de respecter la vie privée des utilisateurs et évite de consommer des ressources. L’écoconception a permis de créer un site internet accessible sans demander un temps de développement plus long en plus d’être plus facilement indexable par les moteurs de recherche.
Nous allons encore éprouver l’ergonomie du site dans les prochains mois et nous effectuerons un suivi pour maintenir le site internet et améliorer l'ergonomie grâce aux retours des utilisateurs.
Nous remercions l’équipe de The Green Room pour leur confiance et d’avoir fait le choix audacieux de se tourner vers l’écoconception. Nous sommes très heureux du résultat car cela permet de montrer la pertinence des choix d’usage et des choix de design dans la conception de sites web à faible impact.
L’équipe de Pikselkraft