Vers un webdesign écoresponsable !

Internet consommerait à lui seul 10% de l’électricité mondiale et serait responsable de 4 % des émissions de gaz à effet de serre ! Dans ce contexte, l’éco conception des sites internet n’est plus une option. Les UX designers et UI designers ont un rôle clé dans cette démarche et peuvent agir à leur niveau !

Voici 4 pistes pour un webdesign éco conçu et créatif 

Limiter le nombre de polices

Le chargement des fonts sur un site internet est très énergivore. Veillez à limiter le nombre de typographies. L’idéal est d’en utiliser qu’une seule, deux maximum, une pour le titre et une pour les textes !

Le choix est également important. Il est préférable d’utiliser des typographies standards et éviter à l’utilisateur son chargement car les polices web ajoutent du poids au site. Or le choix de polices système réduit l’usage de la bande passante. Parmi les polices par default les plus utilisées on peut citer la Georgia, Arial, Lucida Sans, etc…

Penser minimalisme

Rendre votre site moins énergivore implique un design simple, épuré qui va à l’essentiel. C’est la tendance ! Cela ne veut pas dire de se passer d’un design riche et d’une identité graphique forte mais plutôt qu’il ne faut pas surcharger votre interface en médias (illustrations, photos, vidéos). Privilégiez toujours les illustrations simples au format SVG plutôt que des images et éviter l’usage de vidéos quand cela n’est pas nécessaire pour diminuer le poids du site et donc son temps de chargement.

Selon Google, les images représenteraient 60 % des octets transmis sur la toile, il est conseillé d’utiliser le format Webp pour la compression. L’image compressée est au final de meilleure qualité avec un poids réduit d’environ 40 % par rapport aux formats traditionnels tel que JPG et PNG. 

Limiter également les animations et les effets « wow » qui n’apportent rien à l’expérience utilisateur (et qui ont tendance à mal vieillir) et garder uniquement ce qui est vraiment utile.

Globalement plus votre site est sobre plus il sera éco conçu.

Un design en css

Pour aller encore plus loin dans cette idée de minimalisme, penser css ! Un design réalisable uniquement en HTML/CSS sera évidemment encore plus léger et réduira considérablement le nombre de requêtes car la feuille de style génère une seule requête http alors que chaque image génère également une requête http (10 images = 10 requêtes).

Par exemple au lieu d’utiliser une image pour le fond d’un bloc, favorisez des formes simples. De même pour les animations privilégiez celles qui sont faisable intégralement en CSS

Passer en mode sombre

Les sites sur fond noir ou foncé dit en « Dark Mode » ne sont pas seulement intéressant pour réduire la fatigue oculaire et offrir plus de confort visuel à l’utilisateur.

Ce type de design s’avère très pertinent si l’on souhaite économiser de l’électricité, en effet les couleurs sombres utilisent moins de pixels lumineux et donc moins de lumière contrairement aux couleurs claire comme le blanc. Cela réduit directement la consommation énergétique de tous les terminaux.

Le mode sombre est par conséquent une option à considérer pour rendre votre site plus écologique.

Less is more

L’écoconception des interfaces web prend en compte de nombreux paramètres allant du design aux paramètres serveur en passant par la qualité du code source. Le binôme UX/UI est central dans cette démarche. C’est lui qui, en appliquant des principes de simplicité au design tout en mettant en scène une somme de petites optimisations, peut initier un cercle vertueux de l’écoconception.

Retour