Éco-conception : 12 exemples de sites et applis “verts”

Faire aussi bien voire mieux avec moins, c’est l’équation que cherchent à résoudre les tenants de l’éco-conception.

Dans le numérique, ce qui pèse le plus, évidemment, c’est la fabrication des infrastructures et des objets qui servent à diffuser et consulter les sites. Mais en rendant ces derniers moins énergivores, il est possible d’agir en tant que concepteur d’expériences web pour un web plus propre. Et de démontrer qu’un site éco-conçu n’est pas moche, plus cher ou moins performant qu’un autre.

Pour s’en convaincre, voici 12 exemples de sites éco-friendly, tendances et efficaces.

> Si vous avez des doutes sur la capacité de l’éco-conception à limiter l’impact environnemental d’Internet, (re)lisez cette interview de Manuel Taraud sur le sujet

1. Sustainable web design

Ce site porte bien son nom. Reprenant la définition du web design durable, il se veut propre, efficace, ouvert, honnête, régénérateur et résilient. Un modèle du genre. Il utilise une éco-typographie, c’est-à-dire que la police d’écriture – ou la fonte – est plus écologique que la moyenne. En favorisant des polices standards et en limitant le nombre de polices d’écriture, il est possible de réduire le temps de chargement d’un site.

Notons également le menu déroulant, en haut à droite, qui permet de régler les paramètres d’accessibilité  du site ainsi que la mention « This website emits 0,49g of CO2 » quand la moyenne se situe à 1,76g de CO2.

2. La Ruche Biocoop

La Ruche Biocoop est le nom de 4 magasins parisiens membres du réseau Biocoop. Ce réseau, que vous avez déjà dû croiser dans toute la France, est en fait une coopérative de magasins bio, de producteurs dans la bio ainsi que de consom’acteurs.

La Ruche Biocoop a décidé d’étendre son implication environnementale au-delà de ses magasins, en limitant l’impact écologique de son site internet. Il obtient 72/100 à l’ÉcoIndex, soit un score de B. Quant à la page d’accueil, elle n’émet que 0.35g de CO2.

Pour autant, ils n’ont pas lésiné sur le design, qui est frais et pertinent.

En effet, on peut noter que le contenu est principalement illustré et textuel. Dans la mesure où les illustrations sont plutôt simples, et au format SVG, cela permet des visuels très légers. Le site ne comporte aucune vidéo ou animation particulière, ce qui aide à un chargement très efficace.

3. Yuba

En plus d’égayer votre visite sur le site, Yuba enrichit votre carnet de bonnes adresses. En effet, Yuba est un répertoire en ligne de restaurants, de caves ou encore de boulangeries éco-responsables. On serait presque déçus que ce site ne soit dédié qu’à des lieux parisiens.

Quand on parle d’éco-conception, une rumeur dit qu’il est interdit de mettre des photos. Il ne manquerait plus que ça ! Il faut surtout retenir qu’il est essentiel d’utiliser des images adaptées, aussi bien en termes de taille que de compression. C’est l’une des recettes magiques et faciles pour faire perdre du poids à vos pages web.

Et mine de rien, sur le site de Yuba, ça ressort très bien. La preuve, la page d’accueil n’émet que 0,6g de CO2. Tout le site possède d’ailleurs une structure très simple, avec uniquement 160 éléments, ce qui permet aux terminaux des utilisateurs de ne pas utiliser beaucoup de puissance de calcul.

À ça, on ajoute un bon choix de typographie, une mise en page aérée et cohérente avec les bons contenus et voilà ce qu’on appelle du web léger, joli et réfléchi. Cela se ressent tout de suite auprès de l’ÉcoIndex : 83/100 soit A.

4. Guide marque de Rennes Ville et Métropole

L’avantage avec le sujet de l’éco-conception, c’est que même si l’on place l’un des sites que nous avons conçus parmi les exemples, on ne pourra pas dire que nous ne sommes pas objectifs. Les scores parlent pour nous.

Chez LunaWeb, nous développons de plus en plus de sites éco-conçus pour nos clients avertis. En 2023, nous avons réalisé un guide de marque en ligne pour Rennes Ville et Métropole. L’équipe client visait en priorité un site accessible mais souhaitait que l’on se rapproche au maximum du concept de sobriété numérique.

Cela tombait bien, l’accessibilité numérique et l’éco-conception web sont deux enjeux très liés et complémentaires.

Résultat : le site obtient un score de 86/100 à l’ÉcoIndex et rejette 0.1g d’équivalent CO2 par page. Et il est sympa en plus, vous ne trouvez pas ?

→ Évaluez l’impact environnemental de votre site internet en moins de 5 minutes

5. Solar low tech magazine

Encore un site engagé. Déjà, ce site fonctionne à l’énergie solaire. Ensuite, le choix des visuels avec des images extrêmement compressées pour les rendre les moins lourdes possibles à télécharger. Cela pourrait être kitsch et pourtant l’esthétique n’est pas douteuse, au contraire. Évidemment, il n’y a pas d’effet wahou, mais faut-il s’en plaindre ?

Leur dernier article concerne la construction d’un générateur et d’un contrôleur à pédale à utiliser chez soi comme source d’énergie et machine d’exercice et qu’il est possible d’intégrer dans un système solaire photovoltaïque. Un aperçu de notre futur face à la flambée des prix de l’énergie ?

6. Low tech lab

Là encore, un site bien de son temps et qui met à l’honneur la low-tech, soit le fait de penser la technologie comme devant être utile, accessible et durable. Pas d’esbroufe donc ici encore mais un design épuré qui doit servir le message : livrer des solutions pérennes dans le temps et pensées pour tous. De là à dire que de nombreux sites ne servent à rien…

Ici, la direction artistique joue astucieusement avec des images basses définition (qui comptent peu de pixels donc moins lourdes à charger notamment) pour un rendu soigné. La position des titres, du chapeau, les couleurs utilisées, la manière dont sont présentées les informations. Le design est soigné et fait totalement oublier que le site est éco-conçu.

7. EcoIndex.fr

Dans le cas du site de l’ÉcoIndex, autant vous dire que nous sommes loin du dicton “les cordonniers sont les plus mal chaussés”.

Pour atteindre ce niveau d’éco-conception, ce site résulte de beaucoup de choix. On peut par exemple mentionner le fait qu’il y ait uniquement des pictogrammes, implémentés à différents endroits. Afin de ne pas charger de multiples images, les pictogrammes sont référencés au sein d’un même fichier SVG, via des <symbol> mais celui-ci est aussi directement inclus dans le HTML du site pour ne pas effectuer une requête superflu auprès du serveur.

Son propre score à l’ÉcoIndex est de 88/100, soit A. 0.03g, 88/100 (A). L’usage de sa fonctionnalité n’en reste pas moins fluide et agréable. Que dire de plus !

> Moches, inefficaces, onéreux… les sites éco-conçus n’ont pas très bonne presse. À tort ? Lire notre article.

8. Commown

Commown, c’est la coopérative de l’électronique sobre et engagée. Autant dire que leur site est à l’image de leur devise. En bas de page il est même indiqué “Ce site internet est un site basse consommation. Le poids des pages est 12 fois moins important que sur la moyenne des sites web.” Comptez 0,13g d’émission de CO2 pour la page d’accueil.

Ils y proposent de louer un Fairphone, le smartphone le plus responsable du marché, ou encore des PC ou du matériel audio. Le tout équivaut à un score de B, avec une note de 74/100.  Une e-boutique y est rattachée.

Le matériel proposé nécessite une présentation en photo, mais on ne trouve des visuels que là où c’est indispensable. Au-delà de cela, le site de Commown rassemble beaucoup de qualités d’un site éco-conçu, sans perdre de son efficacité. Par exemple, la page d’accueil fournit exactement ce qu’on attend d’elle : diriger vers les différents contenus du site sans s’étaler. On croise bien trop souvent des pages d’accueil “mastodontes” ou surchargées. Ce site mise également beaucoup sur la réutilisation d’une même mise en page et de styles d’éléments. Cela permet d’avoir un fichier CSS très léger, en plus de sa compression gzip qui n’est que de 11,4Ko.

9. Grenoble Métropole

Place à la Métropole de Grenoble, qui propose à sa population un site fonctionnel et attrayant. On note d’ailleurs qu’il est indiqué comme étant complètement accessible.

Il est intéressant de préciser que le site de Grenoble Métropole obtenait, fin 2022, le meilleur score à l’ÉcoIndex, avec 64/100 soit C, de 22 sites de Métropoles françaises. En effet, malgré la contrainte d’une arborescence dense, ce site se démarque par une gestion maline de ses contenus. Les pages sont assez courtes et se contentent d’aller à l’essentiel de leur sujet. La page d’accueil n’émet que 0,51g de CO2 par exemple.

La Métropole grenobloise n’est pas tombée dans le piège des pages à rallonges et des liens croisés qui invitent les internautes à s’éterniser inutilement. Ici, il a bien été compris que l’éco-conception c’est, avant tout, produire une interface directe et efficace à l’usage.

> Si vous cherchez à concevoir votre site selon les règles de l’éco-conception, la méthode C.O.E.U.R est imparable pour faire dans le tri entre le nécessaire et le superflu.

10. Emploa

Emploa est une plateforme encore en bêta-test de la région Nouvelle-Aquitaine. Comme le suggère son nom, elle est dédiée à l’emploi, et plus précisément, l’emploi dans l’action sociale.

Les autres sites mentionnés sur cet article montrent bien que faire de l’éco-design, ça n’est pas oublier de proposer des rendus graphiquement attrayants et cohérents. Et le site d’Emploa n’y déroge pas non plus. En jouant avec des formes simples, chaleureuses et répétées, le résultat est au rendez-vous, tout en restant sobre. Le score à l’ÉcoIndex est tout aussi intéressant puisque Emploa obtient la note de 79/100, soit B. Sa page d’accueil n’émet que 0,2g de CO2.

11. Mountain Riders

On change radicalement d’activité en vous montrant un site appartenant à Mountain Riders, qui se définit comme “une association d’éducation à la transition écologique”. Ils sont basés dans les hauteurs de Chambéry et mènent, par exemple, des actions de ramassage de déchets dans les montagnes.

Ils ont su créer un site à la fois attractif, dans l’air du temps et léger : avec un ÉcoIndex de C, il obtient une note de 67/100.

Pour son iconographie, Moutain Riders a opté pour du contenu photo. En jouant sur la dimension des images, le poids de la page se voit bien allégé d’un média lourd par nature.

Même les animations élégantes au survol des liens fléchés n’alourdissent que peu le poids de la page puisqu’ils sont intégralement réalisés en CSS.

12. Wikipédia

Et un dernier pour la route. Nous avons encore d’autres inspirations en stock, mais nous les gardons pour une deuxième édition.

On termine en beauté avec le meilleur ami des rédacteurs mais pas que : Wikipédia. Là clairement, il sera difficile d’en faire un modèle à copier pour des sites marchands, mais son empreinte carbone est tellement faible qu’il fallait le citer. Il a aussi toute sa place dans cet article car il prouve que ce n’est pas uniquement l’apparence qui fait le succès d’un site mais bel et bien son contenu.

Pour atténuer notre propos : le succès du site fait qu’il est aussi lu par des millions de personnes à travers le monde, multipliant les requêtes serveur et donc son empreinte. Difficile d’être parfait…

Ici, l’article éco-conception pèse 0,23g émis de CO2.

Pour rédiger cet article, nous avons fouillé Internet à la recherche de sites « verts ». Trop souvent, des plateformes qui auraient dû être propres, car elles vendent des objets qui se veulent écolos (gourdes, brosses-à-dents en bambous, vêtements éco-conçus, etc.) sont loin d’être vertueuses. C’est dommage.

Sans cynisme, il nous semble nécessaire d’être en accord avec ces discours, l‘éco-conception est un argument auquel les utilisateurs sont et seront de plus en plus sensibles.

L’empreinte carbone des sites correspond à chaque fois à celle de leur page d’accueil selon l’extension Website footprint, sauf pour la page de Wikipédia qui a été calculée sur l’article éco-conception.

> Pour information, voici quelques règles pour réussir à concevoir un site éco-conçu