Creative / Ethical Design Studio

Écoconception web : pour des WordPress plus durables



L’impact environnemental des activités humaines est un enjeu majeur de notre époque. Le numérique a sa part de responsabilité. Afin de compter parmi les solutions, plutôt que les causes, je me suis positionné dans la communication responsable, notamment à travers la création de sites web éco-conçus, toujours sur WordPress, leader sur le marché. Après 18 mois d’apprentissage autodidacte, j’ai validé en octobre 2024 mes certifications UX / UI et développement de sites internet éco-conçus conformes RGESN, auprès de Temesis1. Cette approche allie responsabilité écologique et éthique, mais aussi performance et esthétique.

Table des matières

Pourquoi adopter une démarche d’écoconception pour son site web ?

Less is more : faire mieux avec moins

L’écoconception numérique vise à réduire l’empreinte environnementale des services en ligne. Pour un site web, on a tendance à évoquer différentes optimisations techniques et autres mesures de score, mais l’éco-conception est, comme son nom l’indique, avant tout une question de conception : analyses, réflexions, ajustements, et décisions raisonnées.

Environ 45% des fonctionnalités demandées ne sont jamais utilisées, et 70% ne sont pas essentielles2. Il s’agit donc de répondre en priorité aux réels besoins des utilisateurs du service (et non pas de faire plaisir au marketing qui trouve que ce serait génial d’avoir une vidéo en arrière-plan dans le hero header de la home page). Je vais me tirer une balle dans le pied, mais la réponse peut parfaitement être : « Le site internet est inutile, voici les solutions qui correspondent… ». Je le répète assez souvent : le meilleur déchet est celui qu’on ne produit pas.

Sites statiques ou dynamiques : un impact systémique

Dans un second temps, si un site statique (HTML + CSS + JS) ou dynamique (PHP + Base de données comme avec WordPress par exemple) répond au besoin et se justifie, alors, des actions techniques sont nécessaires pour réduire la consommation d’énergie et maximiser la durabilité des écosystèmes numériques. Oui, même pour un site internet, il s’agit d’écosystèmes logiciels et matériels qui sont impactés :

  • les serveurs (hébergement, bases de données, caches, proxy, pare-feu…),
  • les infrastructures réseau (câbles, fibre, antennes xG ou Wi-Fi…),
  • les appareils « clients » (ordinateurs, tablettes, et/ou téléphones des usagers).

Les bénéfices d’un site éco-conçus

Il y a le stéréotype d’une expérience dégradée avec l’éco-conception. Hors, entre la demande initiale et la réalisation, les compromis trouvés allient toujours qualité, performance, et même esthétisme ! Concrètement, éco-concevoir son site internet offre plusieurs résultats tangibles :

  • Des temps de chargement optimisés sur tous les supports (grâce à des mises en page réfléchies, des compressions des images et des scripts, ainsi que la mise en place de différents caches)
  • Un site qui demeure esthétique, accessible, respectueux de la vie privée, offrant par conséquent une meilleure expérience utilisateur (il ne lui est proposé que ce dont il a besoin)
  • Un taux de conversion optimisé (ayant répondu à l’intention de recherche de l’utilisateur, sans distraction ou « parasitage », celui-ci est plus enclin à suivre le parcours qui lui est défini, et finalement adhérer aux offres)

De plus, l’écoconception permet de :

  • Appréhender les réglementations en France mais aussi à l’international (lois REEN, AGEC, CSRD), et suivre les meilleures pratiques RGESN / WSG
  • Anticiper les futures réglementations
  • Faciliter les expériences de TOUS les utilisateurs : visiteurs (CX), contributeurs (AX), et développeurs (DX)3
  • Réduire vos coûts d’hébergement et de maintenance
  • Aligner votre image de marque à vos valeurs
  • Contribuer à la préservation de la planète

Performance environnementale ≠ Performance technique

Attention : il ne faut pas confondre la performance environnementale (qui se veut respectueuse des ressources) et la performance technique (où l’on se contente souvent d’augmenter les ressources serveurs pour accélérer les rendus, sans optimisations pourtant évidentes…). C’est bien cette seconde approche un peu fainéante qui pousse à acheter fréquemment du matériel récent, toujours plus performant, mais surtout créant des déchets mal recyclés et perpétuant des cycles de fabrication polluants… alors que ce sont les services numériques qui sont injustement plus gourmands et mal réalisés… #Obésiciel #ObsolescenceProgrammée

Il est possible d’avoir un site performant et répondant à des besoins formulés, sans qu’il soit éco-conçu. À contrario, un site éco-conçu est forcément performant et répond toujours aux vrais besoins.

Exemple un peu « extrême » pour bien imager ce problème d’obésité morbide des logiciels : on a envoyé des hommes sur la Lune avec 70 Ko. Ainsi, voir les internets pulluler de landing pages de 10 Mo, qui convertissent à peine, on peut affirmer qu’elles posent plusieurs problèmes : mauvaise conception, pas d’optimisations…

Une méthodologie en amélioration continue pour des sites WordPress éco-conçus

Comment appliquer l’éco-conception à WordPress ?

Alors qu’il est juste de dire qu’un site statique est généralement plus éco-conçu qu’un site WordPress, je décide de rester spécialiste du CMS qui propulse plus de 43% du web. Mon expertise acquise depuis 2012 est valorisable, et se veut dorénavant au service des communautés WP : utilisateurs comme développeurs. En participant au projet Open Source, au sein de la Team Sustainability, nous avons l’espoir et l’ambition d’impacter positivement les millions de sites créés avec WordPress.

Les sujets actuels sont globaux et les contributeurs échangent ou travaillent sur :

Comme pour l’éco-conception, c’est une question systémique et pas uniquement technique. Il n’est pas obligatoire de coder pour contribuer. Vous pouvez suivre les discussions sur Github et Slack. N’hésitez pas à rejoindre la communauté ! 😉

Combien coûte un site WordPress éco-conçu ?

Outre mon investissement au coeur du CMS, j’ai éprouvé des performances notables sur mes dernières productions. Créer ou refondre un site web de manière écoresponsable est relativement facile, mais peut prendre du temps et nécessite d’autres efforts, notamment un travail de conception plus poussé, un suivi et des mesures dans la durée.

Les principales étapes sont les suivantes et restent proches d’un projet web classique (en gras, les phases nécessitant plus d’efforts) :

  • Analyse des besoins et de l’existant
  • Conception concertée et rationalisée4
  • UX / UI optimisées
  • Développement sobre et efficace
  • Choix d’un hébergement vert
  • Mesure et amélioration continue

Il est possible d’ajuster le curseur de l’éco-conception selon vos objectifs et votre budget. Est-ce moins cher ? Pas forcément. C’est donc plus cher ? Pas forcément non plus. Le coût lié à l’éco-conception est généralement équivalent à l’économie réalisée par la suppression de développements de fonctions inutilisées, l’usage d’un écosystème rationalisé, et le temps gagné avec une maintenance plus efficace.

Comme tout projet de création ou de refonte de site internet, son coût est variable selon son envergure.

Optez pour un site WordPress plus durable

Même si le travail distanciel s’est largement démocratisé, si vous êtes lyonnais, restons locaux, c’est plus éco-responsable ! ツ En choisissant DZGND.studio pour votre projet web, vous optez pour une expertise reconnue en écoconception et WordPress. Après, le local fonctionne aussi à l’échelle nationale, donc Paris, Nantes, Bordeaux, Marseille ou même Marly-Gomont, nous pouvons travailler ensemble et contribuer à un web plus durable ! (Vous pouvez aussi déménager à Lyon pour éviter longs déplacements ou visio-conférences à répétition ! C’est une super ville ! 😛 #Chauvin #Forceur)

Questions / Réponses

Qu’est-ce qu’un Design Studio éthique ?

Chez DZGND, on ne réduit pas le design à l’esthétique. Le design évoque la réflexion et la réalisation de moyens pertinents d’atteindre un ou plusieurs objectifs. Imaginer et mettre en oeuvre un concept afin qu’il réalise parfaitement la fonction pour laquelle il est destiné, voilà notre définition du design.

Un « design studio éthique » rassemble ainsi des talents créatifs et responsables. Les actions et les productions visent le meilleur compromis entre les résultats attendus par le client, une expérience utilisateur aboutie, et la soutenabilité de notre planète.

Les valeurs prônées sont : Respect, Confiance, Honnêteté, Intégrité, et Durabilité.

Nous ne prétendons pas à l’exemplarité. Nous ne souhaitons pas donner des leçons. Nous nous efforçons simplement de faire de notre mieux. Partager notre démarche représente un pas vers une sensibilisation plus large.

Qu’est-ce que l’éco-conception ?

Nous définissons l’éco-conception comme l’ensemble des méthodes et techniques qui visent à créer, développer et maintenir des solutions durables, économes en énergie et en ressources.

La dimension humaine est également prise en compte via des expériences utilisateurs optimales, accessibles et inclusives.

Les termes durabilité ou soutenabilité sont également utilisés. En anglais, « sustainability » peut être abrégé « s12y ».

Qu’est-ce que l’accessibilité ?

L’accessibilité, souvent abrégée « a11y », désigne la conception et la création de produits, services et environnements de manière à ce qu’ils soient faciles à utiliser et compréhensibles par tous, y compris les personnes ayant des besoins spécifiques ou des handicaps temporaires ou permanents. Cela permet à chacun, quel que soit son mode de perception, de navigation ou d’interaction, de profiter pleinement des contenus numériques et physiques, sans rencontrer de barrières inutiles.

Qu’est-ce que le design déceptif ?

Le design déceptif, ou « deceptive design », souvent appelé « dark pattern », implique des pratiques de conception intentionnelles qui manipulent les utilisateurs pour qu’ils prennent des actions allant à l’encontre de leurs intérêts. Cela peut comprendre des stratégies visuelles ou interactives qui incitent les utilisateurs à faire des choix contraires à leur intention initiale.

Les dark patterns et le design déceptif sont étroitement liés, mais pas identiques :

  • les dark patterns sont un sous-ensemble du design déceptif, spécifique aux interfaces numériques. Ils englobent des tactiques sournoises, comme des cases pré-cochées pour inciter les utilisateurs à s’abonner involontairement, ou des options d’annulation délibérément complexes pour les décourager. C’est le côté obscur de l’UX Design. L’UX Design améliore l’expérience utilisateur, alors que les dark patterns en détournent ses principes pour servir des intérêts commerciaux au détriment de l’utilisateur.
  • le design déceptif est un concept plus large et peut également s’appliquer à des éléments physiques ou hors ligne.
Qu’est-ce que le « Giving Back » ?

Le « Giving Back », littéralement « rendre à la communauté », est un concept philanthropique qui implique de redonner aux communautés ou aux causes qui nous tiennent à cœur. Cela va au-delà de la simple charité et englobe des efforts visant à apporter un impact positif et durable à la vie des autres, et contribuant ainsi à la construction d’une société meilleure et plus solidaire. Le #GivingBack peut se manifester de diverses manières, allant des dons financiers aux actions bénévoles en passant par le partage de connaissances et de compétences. Il incarne l’idée que ceux qui ont la possibilité d’aider ont aussi la responsabilité de le faire.

Exemples de #GivingBack :

[X] Dons financiers : Contribuer financièrement à des organismes de bienfaisance, des associations locales, ou des projets à vocation sociale.
[X] Bénévolat : Offrir son temps et ses compétences pour aider des organisations à but non-lucratif, des refuges, des initiatives communautaires, etc.
[X] Mentorat : Partager son expertise et ses expériences pour aider les jeunes générations à se développer personnellement et professionnellement.
[X] Partage de compétences : Offrir des compétences professionnelles, telles que la formation, la consultance ou l’assistance technique, pour soutenir des projets à impact social.
[X] Événements de collecte de fonds : Organiser des événements pour collecter des fonds en faveur d’organismes caritatifs ou d’initiatives locales.
[-] Projet communautaire : Mettre en place des projets pour améliorer l’infrastructure locale, comme la construction d’aires de jeux, la rénovation d’écoles, etc.
[X] Sensibilisation et plaidoyer : Utiliser sa voix pour sensibiliser à des problèmes sociaux, environnementaux ou de santé publique, et influencer les politiques publiques.
[X] Dons matériels : Fournir des biens matériels tels que vêtements, nourriture, ou matériel scolaire aux personnes dans le besoin.
[X] Soutien éducatif : Fournir des opportunités éducatives à ceux qui en ont besoin, comme des bourses d’études ou des programmes de tutorat.
[-] Actions environnementales : Participer à des initiatives de nettoyage, de reforestation ou de protection de l’environnement.

[X] Actions déjà réalisées par DZGND
[-] Actions à réaliser par DZGND

  1. Christophe Clouzeau et Julien Wilhelm, les formateurs Temesis ont activement participé à la rédaction du RGESN, du « Guide d’écoconception des Designers Éthiques », des « 115 Bonnes Pratiques d’écoconception web » ou à l’évolution d’outils comme EcoIndex de GreenIT.fr ↩︎
  2. Sources : Designers Éthiques et Ecoconception web : Les 115 bonnes pratiques. ↩︎
  3. Le service numérique a forcément différents utilisateurs et des expériences spécifiques à chacun qu’il faut optimiser :
    – UX, User eXperience : englobe toutes les expériences des différents types d’utilisateurs.
    – CX, Customer eXperience : expérience des utilisateurs finaux.
    – AX, Admin eXperience : expérience des administrateur / gestionnaires / contributeurs.
    – DX, Developer eXperience : expérience des développeurs. ↩︎
  4. Lors d’un atelier de co-conception, nous priorisons les besoins et les fonctionnalités grâce à la méthode MoSCoW. Nous déterminons ainsi ce qui est indispensable (M: Must have), important (S: Should have), optionnel (C: Could have ou Nice to have), ou non-nécessaire à date (W: Won’t have). ↩︎
Avatar de Dareth NHANG

#JeDizzÇaJeDisRien, et vous ?

Laisser un commentaire

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