Quel avenir pour l’esthétique web éco-conçue ?

Éco-conception et papier recyclé

Mes premières notions d’éco-conception remontent à mon cursus d’étudiante en design, au début des lointaines années 2010. On nous parlait surtout d’impression, de typo à trou pour économiser l’encre, de format optimisé pour limiter les chutes à la découpe et bien entendu de papier recyclé pour sauver les arbres.

Le problème avec le papier recyclé, c’est qu’il est brun, trop rugueux, ou trop fin, en tout cas possède des caractéristiques différentes de celles que l’on attend d’un papier de qualité. On nous avait présenté une super solution : un papier recyclé, mais d’une blancheur parfaite, indiscernable d’un papier de qualité classique.

Pourtant, cette innovation n’avait pas trouvé son public. Pourquoi ? Les client·es choisissaient d’imprimer leur catalogue, emballage ou flyer sur du papier recyclé pour que ça se voie. L’objectif réel était de (dé)montrer leur engagement écoresponsable vis-à-vis de leur public. Un papier recyclé qui n’en a pas l’air, à quoi bon ?

C’était le marketing vert, déjà bien ancré commercialement, mais quasi-inexistant dans le monde du web.

J’y vois un parallèle avec mon expérience dans la conception, et surtout la vente, de sites web éco-conçus, en ce qui concerne l’esthétique de l’interface :

• Pourquoi rejette-t-on le papier recyclé ? Parce que c’est « moche », que ça fait « bas de gamme », parce que ça change de l’habitude, que ça pourrait rebuter l’usager. Ou parce qu’on ne s’est pas posé la question.
• Pourquoi rejette-t-on l’interface sobre ? Parce que c’est « moche », que ça fait « bas de gamme », parce que ça change de l’habitude, que ça pourrait rebuter l’usager. Ou parce qu’on ne s’est pas posé la question.

Impacts numériques

Aujourd’hui, la prise de conscience de l’impact écologique et social du numérique émerge lentement dans la conscience collective. Lorsque j’en parle en dehors du milieu de la tech — et parfois en dedans ! —, c’est peu dire que mes interlocuteurices rament pour raccrocher les wagons. Iels me parlent parfois d’hébergement « vert », ou de la trop grande consommation d’électricité des centres de données.

Mais la plupart des gens ne font pas le lien entre leur consommation de contenu, les heures passées sur les réseaux, et un éventuel impact environnemental ou social. Au contraire, le numérique porte souvent une aura écologique, car il remplace le papier et le papier tue les arbres, alors qu’Internet paraît magique et immatériel.

Dématérialisation accélérée, généralisation de l’intelligence artificielle, connexion permanente, popularité du format vidéo, résolution toujours plus poussée… la tendance est au contraire à l’explosion de notre consommation de données, au « toujours plus ».

Papier blanc


En conséquence, le client lambda arrive souvent avec une certaine vision de son site web idéal : il veut que ça bouge, que ça brille, que ça en jette.

C’est pour cela que dans notre pratique ¹ , on est plutôt team papier blanc innovant. On cherche à rendre invisible le travail d’éco-conception, à proposer une interface attractive et dans la norme.

S’il suffisait de connaître les bonnes pratiques de Green IT ou d’apprendre le RGESN par cœur pour réaliser des sites web à faible impact, ça se saurait. Le plus difficile n’est pas la technique, mais de convaincre les décisionnaires.

Négocier avec les boomers

Votre client·e est-il un boomer ? Parfois, oui. Au sens premier du terme. Nous travaillons avec des personnes nées avant le numérique, qui l’ont vu grandir et portent parfois une vision différente sur le progrès et la modernité.

Accueillir ce décalage est essentiel pour une négociation réussie, sans culpabilisation ni confrontation. Comprendre la vision du ou de la cliente, pour proposer des alternatives pertinentes.

Soyons honnêtes : chaque génération a ses difficultés avec la sobriété. Pour les plus jeunes, biberonnés au format vidéo, au défilement infini et à la stimulation permanente, il peut s’agir de la difficulté à se concentrer sur un contenu fixe et sans visuel, à lire un texte long ² .

C’est tout un bagage sociétal à déconstruire, notre héritage de l’illusion de la croissance infinie et de l’abondance, ainsi que les conséquences de décennies de captation d’attention de plus en plus agressive ³ , et ce combat concerne bien d’autres domaines que le numérique.


Papier brun

Cependant, récemment, une découverte surprenante m’a fait reconsidérer l’option papier recyclé rustique.

Le site d’une agence de communication « engagée » propose la création de sites « à faible impact carbone ». Le graphisme du site reprend consciencieusement les codes de la sobriété numérique :

• peu d’éléments par page ;
• typographie simple sur fond uni ;
• images rares et de petites tailles ;
• micro-animations discrètes.

Pourtant, le site est créé avec un CMS non optimisé et son éco-score est terriblement mauvais : E avec l’ÉcoIndex, G avec Website Carbone Calculator… Ignorance ? Manque de compétences techniques ? Indifférence ? Quoi qu’il en soit, ce n’est plus la « forme qui suit la fonction ».

La sobriété de cette interface n’a qu’une fonction sémantique, marketing, sans application pratique. Osera-t-on appeler cela un discours écologique de façade, plus connu sous le terme anglais greenwashing ? Absolument.

En effet, dans le guide anti greenwashing de l’ADEME ⁴ , le terme « représentation graphique » revient trente-quatre fois. On y apprend par exemple qu’un message est concerné par le greenwashing s’il contient [une] ou plusieurs des […] représentations visuelles suivantes — des éléments naturels tels que les océans, les forêts, les animaux, etc.

Et ce, dès lors que l’objectif de la communication serait de rendre un produit ou un service plus écologique […], moins « impactant » sur l’environnement ou encore de présenter la démarche de l’entreprise comme plus « responsable », sans lien avec des actions réelles et concrètes.


La reprise de l’esthétique de la sobriété pourrait être considérée comme une variante plus subtile, plus moderne, des dessins de feuilles vertes, de forêts luxuriantes ou d’insectes joyeux.

Nouveau départ pour la sobriété numérique ?

Mon sursaut d’indignation passé, j’ai pensé que l’arrivée de ce « sobre washing » était une excellente nouvelle pour l’éco-conception web.

Bien qu’un tel message ne soit pas encore perceptible par la majorité de la population (encore faudrait-il faire le test), l’existence d’un tel décalage entre le fond (technologie non-optimisée) et la forme (graphisme sobre) laisse à penser qu’une démocratisation de la sobriété est en cours.

En termes de performance, les résultats seront toujours meilleurs avec une interface minimale — et le papier recyclé plus blanc que blanc cachait sûrement un processus de fabrication moins vertueux.

Si la sobriété graphique dans le web se normalise et devient désirable, alors nous pourrons convaincre plus facilement de sa viabilité, aller plus loin et plus vite vers la généralisation d’un numérique responsable.

Rendre désirable

Pourquoi a-t-on moins envie de commander la pizza « végétarienne » de la carte ? Dans végétarienne, terme générique et sans saveur, on entend surtout sans la viande, ou bien par défaut, ou juste moins. En revanche, la pizza chèvre-miel-tomate confite, la pizza patate douce-oignons caramélisés ou encore la pizza pesto-courgette-pêche ne font-elles pas saliver ?

Il s’agit de donner de la valeur intrinsèque à l’éco-conception numérique. Par défaut, elle s’écrit en contraintes, en négatif, en creux. Moins de visuels, moins de pixels, moins d’éléments, moins de possibilités.

Apprenons à parler d’éco-conception en possibles et en relief : plus d’espace, plus de clarté, une meilleure UX, une vitesse de chargement imbattable !

De même sous l’angle du marketing : plus d’engagement et de fidélisations de l’usager, un meilleur SEO, une meilleure image de marque grâce à la RSE numérique, une audience élargie grâce à l’accessibilité et à la simplicité d’utilisation !

Valoriser et varier les possibilités, donner le choix. Parlera-t-on un jour des éco-conceptions ?

Au menu, nous avons, une interface brutaliste-sauce-Bahaus, un motion-design-alimenté-CSS, ou bien notre spécialité, l’illustration-vectorielle-interactive-faite-maison. Tout ceci labellisé A tout droit de notre ferme écoindex bien sûr.

Interface « minimaliste » ou « techno-solutionniste » ?

On pourrait déjà différencier deux « courants » en front-end éco-conçu : l’interface minimaliste d’une part, en rupture avec les tendances populaires et visant l’impact écologique minimal et, d’autre part, l’interface « techno-solutionniste » cherchant à se rapprocher des tendances populaires avec des techniques écoresponsables.

• D’un côté, on part du néant — l’absence de site, l’impact zéro — et l’on n’y ajoute que ce que l’on juge strictement nécessaire.

• De l’autre côté, on part d’un site « classique » et l’on cherche à supprimer ou à remplacer des éléments et technologies, pour réduire l’impact.

L’interface minimaliste a beaucoup d’avantages, à commencer par celui de l’efficacité en termes d’impact. Mais aussi : la clarté à l’utilisation, la baisse des coûts, l’accessibilité.

Cependant, elle ne répond pas à toutes les situations. Lorsqu’un site web a pour objectif de séduire son utilisateurice, de différencier une marque ou encore de créer de la valeur ajoutée par une esthétique forte, d’autres chemins doivent être empruntés.

Quelques pistes en design

Typographie : la base

À mon époque ⁵ , la formation de design graphique était bien plus portée sur le print que le web et lorsque l’on mettait un texte en page, c’était au millimètre près. Compter les caractères, réagencer les lignes pour un drapeau harmonieux, paramétrer minutieusement les options de justification, traquer sans pitié la veuve et l’orphelin.

En passant au web, j’ai dû accepter l’aléatoire, la flexibilité et l’imperfection. Lâcher prise, ne serait-ce que pour préserver la santé mentale de ma développeuse. Cependant, il me semble que beaucoup de sites web passent à côté de l’enjeu de la gestion du texte. Hiérarchie absente, interlignage serré, choix de police éclaté, ou lignes à rallonge.

Je crois qu’en faisant un petit effort, en revoyant nos classiques, simplement avec du texte, on pourrait améliorer le confort de lecture, l’ergonomie, l’esthétique de nos interfaces… et éviter à ma prof de graphisme de se retourner dans sa tombe — d'autant plus qu’elle est encore bien vivante.

S’inspirer de courants artistiques

Le style graphique suisse, développé dans les années cinquante, vise la fonctionnalité et une certaine rigueur. La mise en page s’appuie sur l’asymétrie, sur des typographies sans sérif (on peut utiliser des web fonts), des formes géométriques (coucou le SVG super léger) et des grilles de mise en page. Une récente mise à jour de Figma a intégré les grilles à l’auto-layout, ce qui rend son utilisation plus aisée dans les maquettes.

De Stijl, « le style » en néerlandais, est né dans les années vingt : des lignes droites, des rectangles, des couleurs primaires et beaucoup d’espace blanc. Ce style partage la rigueur géométrique et la recherche de clarté du style suisse, mais expérimente davantage avec la typographie, la traitant parfois comme élément plastique au même titre que les formes colorées.

Les livres anciens agrémentaient leur mise en page d’ornements plus ou moins tombés en désuétude aujourd’hui : feuille aldine, lettrine, filet ; frises florales réalistes ou stylisées et typographies manuscrites. C’est souvent un peu chargé, mais en passant tout ça à la moulinette du modernisme, on peut arriver à des résultats très intéressants. Le CSS permet d’intégrer des lettrines et on trouve des polices de caractères ornementales, comme la Bodoni Ornament.

Devenir un peu développeureuse

Connaître les possibilités offertes par les langages HTML et CSS, en parler avec les développeureuses, permet de se lancer dans une création low-tech. Les translations ou rotations pour de la micro-animation, l’effet de parallaxe pour donner du relief lors du défilement, ou encore des filtres de couleur, de flou, de bruit… à appliquer aux fonds ou aux images.

Quelques pistes en développement ⁷

Les fonctionnalités natives

HTML et CSS sont des langages qui ont beaucoup évolué ces dernières années. En éco-conception, les fonctions natives sont cruciales. Elles sont optimisées par le navigateur, elles économisent le CPU, elles sont moins lourdes.

Le HTML permet par exemple de différer le chargement des images avec le lazy-loading, de gérer les différentes tailles d’images grâce aux balises <picture> et <source>, de signaler le contenu critique pour qu’il soit priorisé avec fetchpriority = high, de créer des boîtes de dialogue avec la balise <dialog>, le tout sans recourir à des bibliothèques JavaScript tierces.

Le CSS permet de faire des animations variées — accélérées par le GPU — et par étapes grâce a @keyframes ; currentColor permet de récupérer la couleur du texte pour l’utiliser sur des bordures, des fonds ou du SVG ; les pseudo-classes :has() ou :is() simplifient la logique.

Avant d’ajouter une dépendance externe, il est conseillé de vérifier si une solution native existe. Elle sera souvent plus légère, plus rapide et plus durable.

Bien intégrer les fichiers SVG

Les SVG peuvent être intégrés de plusieurs manières : avec la balise <img>, en inline en copiant directement le code du SVG dans le HTML, ou regroupés dans un sprite SVG (un fichier unique contenant plusieurs SVG) qui va être pré-chargé et auquel on va pouvoir se référer grâce aux identifiants de chaque SVG dans le sprite.

Le sprite est particulièrement intéressant en éco-conception, car il n’y a qu’un fichier à télécharger, avec une mise en cache optimale et une possibilité de styliser différemment chaque instance d’un même SVG lors de son importation dans le code.

Mes conseils sont de privilégier le sprite pour la plupart des SVG, de réserver l’inline aux contenus critiques (au-dessus de la ligne de flottaison) et d’utiliser la balise <img> en cas de SVG lourd pour que la mise en cache soit isolée.

La collaboration design-dev

Au-delà des compétences respectives au design graphique et au développement, ce sont les capacités de collaboration entre les deux métiers qui permettront d’avancer.

On peut limiter les données chargées avec les images, mais il faut communiquer sur la re-dimension, les points de rupture et le rôle de chacun·e dans le projet. On peut créer du motion design low-tech avec du SVG et du CSS, mais cela requiert une maîtrise du graphisme autant que du code et des possibilités qu’il offre.

Profils hybrides ou bidouilles en duo, créons plus de ponts entre ces deux métiers.

Mettre les mains dans le cambouis

Je crois surtout que, designer comme développeureuse, il est urgent d’apprendre (ou réapprendre ?) à mettre les mains dans le cambouis. Laissons l’IA de côté un moment, revenons aux bases.

En développement, requestionner ses choix techniques, l’utilité d’une librairie, la pertinence de chaque dépendance et redécouvir ce que HTML et CSS savent déjà faire. En design, revenir au vectoriel, aux grilles de mise en page, à la maîtrise typographique, à l’histoire de l’art.

L’esthétique de l’éco-conception web a besoin d’innovation, de low-tech, de débrouille et de créativité. Tout est encore à écrire !

---