Eco-conception web: 3 exemples de pros

Aujourd’hui, je vous propose un article un peu récré où on fait une pause dans l’apprentissage pour regarder les autres jouer 🏈

De fil en aiguille, à force de lecture et de sauts d’un site à un autre, je commence à voir quelques bonnes pratiques en action et je me suis dit qu’un peu de pratique ne nous ferait pas de mal ! J’espère que ce programme vous convient.

J’ai donc sélectionné trois pros du sujet et analysé rapidement leur page d’accueil pour identifier les bonnes pratiques qu’ils utilisaient. 

C’est aussi l’occasion de vous faire découvrir d’autres sites traitant du green design.

Sustainable Web Design

Sustainable Web Design est le tout premier site que j’ai découvert lorsque j’ai commencé à rechercher des bonnes pratiques design pour l’éco-conception de sites web. Il a été conçu par deux agences digitales, Wholegrain Digital à Londres et Mightybytes à Chicago. Toutes les deux mettent l’éco-conception au cœur de leur approche.

Sustainable Web Design est un peu devenu ma bible. Le livre de Tom Greenwood, le fondateur de l’agence londonienne, a d’ailleurs grandement contribué à ma prise de conscience sur l’empreinte environnementale des sites web que nous créons.

Mais revenons-en à nos moutons 🐑

Voici la page d’accueil de leur site:

exemple éco-conception web par  Sustainable Web Design

Vous avez peut-être remarqué l’usage de couleurs monochromes. C’est une des bonnes pratiques que nous avions évoqué dans l’article Quelles couleurs choisir pour un site web écolo ? Mais ce n’est pas tout.

En haut à droite de leur site, on trouve un menu déroulant qui nous permet de régler certains paramètres d’UI, la “cosmétique” du site. Nous pouvons par exemple changer le contraste de la page, utiliser une palette de gris en remplacement des couleurs, passer en mode sombre ou bien enlever certains éléments de design.

Voici le résultat si on applique tous les éléments: 

exemple éco-conception web par Sustainable Web Design

J’aime beaucoup l’approche ludique et éducative qu’ils ont de manière générale. Ils affichent aussi le volume d’émissions CO2 du site en bas à droite qui, même sans notion de ce qui est acceptable ou non, permet à mon sens d’éveiller les consciences sur le sujet.

Ethics by Design

Ethics by Design est un événement annuel porté par le collectif français des Designers Éthiques. L’événement a pour but d’échanger sur la conception responsable – du web mais aussi de manière plus globale – avec des intervenant.es.

Le site de l’événement met en place les bonnes pratiques de l’éco-conception comme par exemple:

  • Pas d’utilisation du blanc
  • Photos en noir et blanc
  • Photos “dégradées”, façon impression dans le journal
  • Utilisation de ”system fonts” uniquement, autrement dit, des typos qui sont déjà installées sur votre appareil
exemple éco-conception web par Ethics by Design

Comme pour Sustainable Web Design, Ethics by Design affiche aussi le volume d’émissions carbone en haut à droite. On voit d’ailleurs qu’il est beaucoup plus élevé que pour Sustainable Web Design, j’imagine que c’est à cause du nombre de photos utilisées sur la page. 

Low-tech lab

Low-tech lab est un site français s’intéressant à tout ce qui touche à la low-tech. Pour la petite définition, on parle de “low-tech” pour toute initiative visant à répondre à un besoin de manière accessible (par le plus grand nombre) et durable (pour la planète).

exemple éco-conception web par Low Tech Lab

Sur leur blog, ils ont carrément pris le parti de ne pas afficher les images. Nous – utilisateurs – avons la possibilité d’activer l’option à droite pour voir les images mais par défaut elles ne sont pas visibles.

Le petit paragraphe en haut de page permet de comprendre rapidement l’approche et contribue là aussi à éveiller les consciences. 

J’aimerai proposer régulièrement des articles “exemples” comme celui-ci. N’hésitez pas à me dire en commentaires si ce type d’articles vous inspire et vous aide à voir comment appliquer les principes de l’éco-conception web. Et également si vous connaissez d’autres sites que je pourrai analyser pour un prochain article. 

Vous pouvez contribuer à créer un web plus respectueux de la planète en partageant cet article pour éveiller les consciences :)
  •  
  •  
  •  

3 commentaires

  1. Article toujours aussi intéressant.
    Par contre c’est dommage que sur le site “Sustainable Web Design” il ne met pas à jour le rejet de CO2 en fonction des options que tu coches/décoches.

  2. Je suis en train de me demander quelle sera la nouvelle couleur de mon blog… Moi qui ai découvert la technique du moodbar et pris un soin infini à en régler les détails, me voici un brin déconfite.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *