Éco-conception web : qu'est-ce que c'est ?

Un nombre infini d'aspects impactent le monde et l'environnement : le web, le marketing, le SEO et l'UX en font partie. Bien évidemment, il est impossible de changer toutes les habitudes et de changer le monde du jour au lendemain. Mais il est possible, avec une meilleure conscience du problème et en y consacrant un peu d'effort, de réduire l'impact sur la planète de ces activités en adoptant une éco-conception web.

L'informatique et le monde du digital sont des domaines où la consommation d'énergie augmente très rapidement. Les applications, les sites web et les bases de données deviennent de plus en plus lourds. Entre les images, les vidéos, les technologies utilisées, quantité d'éléments sont susceptibles d'entraîner une surconsommation d'énergie et une surproduction de CO2.

Les concepteurs ne s'obstinent donc plus à produire de belles expériences mais à trouver un juste milieu entre l'esthétique et la simplicité de consommation.

Sachant que tous les sites web consomment plus ou moins d'électricité pour faire tourner serveurs et bases de données, si les sites web optimisent leurs interfaces dès le départ, cela ne peut qu'amoindrir l'impact sur l'environnement.

Comment les appareils numériques nuisent-ils à l'environnement ?

Aujourd'hui, des milliards d'appareils numériques sont utilisés et consomment chacun une part d'énergie. Dans ces produits numériques, il faut bien évidemment compter le smartphone qui est un outil extrêmement gourmand. 

En effet, le coût de fabrication d'un smartphone représente 95 % des émissions de CO2 pendant deux années entières du téléphone. Cela est dû aux trajets qu'empruntent les smartphones pour arriver jusqu'à leurs acheteurs.

Aussi, les écrans de téléphone deviennent de plus en plus gros chaque année et ont donc une empreinte carbone bien pire que les smartphones avec de plus petits écrans. Cela est lié aux extractions de cobalt, d'or, d'aluminium, etc. nécessaires à la fabrication et au développement des smartphones.

La grande majorité des téléphones sont fabriqués à l'aide de matériaux, dont la plupart d'entre eux sont récoltés en causant des dommages importants à la planète. De plus, les smartphones sont jetables et non recyclés. D'autre part, d'après certains sondages, près de 50 % des utilisateurs affirment changer de téléphones tous les 2 ans. Or, fabriquer un nouveau téléphone consomme beaucoup plus d'énergie que d'utiliser un même téléphone pendant une longue période.

Internet est utilisé par plus de 4 milliards de personnes chaque jour. Avec autant d'utilisateurs, de données sollicitées et de technologies utilisées, la consommation se multiplie à grande vitesse. 

Environ 300 heures de vidéos YouTube, 500 commentaires Facebook et plus de 300 000 tweets sont générés chaque minute. Aussi, en 2010, il a été estimé que chaque tweet générait plus de 0,02 gramme de dioxyde de carbone, ce qui revient à 7 000 grammes en 1 minute, 420 000 grammes en une heure et 10 080 000 grammes par jour. 11 tonnes par jour sont comptabilisées aux États-Unis. À première vue, une petite action peut paraître ridicule en matière de consommation, mais à grande échelle, cela devient tout de suite plus impressionnant. 

Pour faire vivre et stocker toutes ces données, il faut des clouds numériques et des bases de données conséquentes. Là encore, ces serveurs sont alimentés en électricité. Chaque fichier stocké dans Google Drive, dans Gmail ou Dropbox a une influence sur l'empreinte carbone d'un individu ou d'une entreprise.

Le guide pour comprendre les langages HTML et CSS.

Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.

• Balises HTML à connaître
• Mettre à jour un fichier CSS
• Les écueils à éviter
• Ressources pédagogiques

Télécharger En savoir plus Télécharger

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

Comment appliquer l'éco-conception dans le domaine du web ? 

En réalité, une bonne expérience utilisateur est une expérience qui ne consomme pas beaucoup et qui est avant tout rapide. Un site web avec une bonne vitesse de chargement par exemple, est un site qui va limiter son nombre d'allers-retours. Tout est une question d'optimisation, technique ou non, sur la manière dont est construit le produit. 

Voici donc plusieurs points qui doivent être optimisés au niveau de l'expérience utilisateur pour avoir une approche Green UX.

Réduire les images

Pour optimiser la vitesse de chargement d'un site, réduire la taille des images et leur qualité vient immédiatement à l'esprit, car les images ont un impact énorme sur les performances d'un site web. Même si les machines, les ordinateurs et les téléphones deviennent de plus en plus puissants, le fait est que cela demande encore plus d'énergie, de connexion et de performance.

L'objectif ici est donc de réduire la taille des images utilisées et/ou même de ne plus utiliser d'images du tout. Beaucoup de sites web s'en sortent très bien sans images, ils jouent sur un design minimaliste et épuré. 

Et si vous devez absolument utiliser des images, alors compressez-les, vous verrez que souvent, la différence entre une image en HD et une image de qualité moyenne n'est pas évidente. En plus de réduire la qualité des images, vous pouvez aussi réduire la quantité d'images présentes sur votre site. S'il existe des images sur votre interface qui n'ont pas beaucoup d'utilité, alors n'hésitez pas, que ce soit en faveur d'une vitesse de chargement meilleure ou d'un web design écologique.

Enfin, orientez-vous vers des formats d'image spécialisés pour le web comme les SVG. Par exemple, pour des icônes simples de type "panier" ou "utilisateur" n'utilisez pas des icônes en format PNG mais bien en SVG.

Optimiser les vidéos 

Si même les images sont lourdes à télécharger, vous imaginez donc l'impact de la consommation de vidéo sur l'écologie. Pour mettre en place un système de lecture vidéo optimisé sur son site, cela demande des connaissances techniques et une intégration dynamique bien réalisée. Or, c'est très rare. Il est donc fréquent de retrouver des vidéos de haute qualité avec des tailles beaucoup trop élevées pour un simple serveur. 

Comme les images donc, optimisez et réduisez vos vidéos. Compressez-les de sorte que la qualité ne serve pas à rien. Aussi, l'erreur serait de lancer la vidéo automatiquement alors que l'utilisateur n'en a pas décidé ainsi. Laisser l'utilisateur choisir s'il veut lire ou non la vidéo, cela évitera l'utilisation inutile de ressources.

Utilisez un hébergement adapté

L'impact peut être énorme ici, le fait de passer à un hébergement "vert" peut avoir un impact environnemental vraiment intéressant. Faire appel à un hébergement orienté green UX, c'est faire appel à un hébergement se basant sur un hôte alimenté par des sources d'énergie durable tel que l'énergie hydroélectrique par exemple. Vous trouverez sans problème des hébergements orientés green UX sur le web. Néanmoins, il peut être difficile d'en trouver un qui stocke vos données dans votre propre pays. 

Minimiser le nombre de polices de caractères

Là encore, il est souvent possible de minimiser le nombre de polices que vous utilisez. Bien sûr, les polices sont importantes en matière de design et d'image de marque mais rien ne sert d'en abuser. À quoi bon en utiliser plus de 3 ou 4 ? Par exemple, si vous utilisez Roboto, Regular et bold, rien ne sert d'inclure le Roboto Light. 

Aussi, basez-vous sur un design system clair. Fixez-vous une variable de taille de police et de typographie pour les H1, une variable de taille et de typographie pour les H2, etc. Réduisez donc votre nombre d'utilisations différentes, basez-vous sur des styles définis au préalable et évitez d'en utiliser de nouveau. Concentrez-vous sur le principe "less is more".

Optimiser le responsive 

Cela fait maintenant de nombreuses années que le trafic mobile augmente. Le trafic venant des ordinateurs n'est plus aussi important qu'avant. Si un mobile charge une interface qui n'est pas faite pour les smartphones, son chargement consomme plus qu'une interface optimisée pour les plus petits écrans.

De plus, un site web responsive est un site web qui s'adapte automatiquement à tous les formats d'écrans, y compris les tablettes. Et puis, ça va de pair avec la vitesse de chargement, de nombreux vieux sites qui ne sont pas à jour prennent plus de 7 secondes à charger sur mobile, et ça n'est pas une bonne chose pour la consommation. 

Faciliter la navigation et l'accessibilité 

UX rime avec facilité, efficacité et utilisabilité. Et ces aspects sont aussi très importants pour le green UX. En ayant une navigation efficace et en donnant rapidement aux utilisateurs les informations qu'ils cherchent, vous diminuez le temps passé et le nombre de pages chargées et consultées. Lorsque les utilisateurs passent moins de temps sur votre site, ils dépensent forcément moins d'énergie, c'est donc un bon point. 

Le menu par exemple joue un rôle important dans l'accessibilité. Si le menu de navigation est intuitif et comprend toutes les informations nécessaires. 

Tous ces éléments se rapportent à l'UX car elles touchent à des aspects liés au confort de navigation, à l'utilisabilité, à l'accessibilité et au design de manière générale. Mais d'autres domaines comme le SEO, le développement web ou la rédaction ont aussi leur rôle à jouer. 

La chose à retenir pour s'orienter vers l'éco-conception web, c'est de jouer sur la simplicité, le minimalisme et l'efficacité concernant la navigation. Cela peut être contre-intuitif pour les designers voulant innover et laisser parler leur créativité. Mais dans un contexte comme celui-ci, il vaut mieux ne pas prendre de risque et proposer une expérience utilisateur la plus qualitative possible, quitte à mettre de côté "joli" notamment avec des vidéos en HD, des images de grosse qualité et des animations. Le green UX, c'est limiter la consommation d'énergie tout en améliorant l'expérience utilisateur. 

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil Website Grader ; ou découvrez les modèles de site web gratuits de HubSpot.