Pensez Web design écologique, ou encore éco-conception dans vos projets.

L’informatique et le monde du digital sont des domaines où la consommation d’énergie augmente très rapidement.
En respectant certains principes du web design écologique, il est possible de réaliser un site à faible consommation sans perdre en qualité d’expérience utilisateur. Digiwin peut vous accompagner dans votre démarche d’éco-conception. A travers cet article, nous allons découvrir comment le numérique nuit à l’environnement et quels leviers peuvent être mis en place pour réduire l’impact écologique d’internet dans un futur proche.

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

L’éco-conception web, représente le fait d’orienter la conception de site web vers des actions plus responsables écologiquement. Les UX/UI designer peuvent agir pour réduire cette consommation en concevant des sites Web énergétiquement plus économes en se focalisant sur les performances et la consommation des interfaces.

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

Aujourd’hui, 22 milliards d’appareils numériques sont utilisés et consomment chacun une part d’énergie ; internet est lui utilisé par plus de 4,5 milliards d’internautes connectés chaque jour. Avec autant d’utilisateurs, de données sollicitées et de technologies utilisées, la consommation se multiplie à grande vitesse. 

Il faut des clouds numériques et des bases de données conséquentes pour faire vivre et stocker toute cette donnée que nous consommons tous quotidiennement. Là encore, ces serveurs sont alimentés en électricité. Chaque fichier stocké a une influence sur l’empreinte carbone d’un individu ou d’une entreprise.

Pourquoi faire du web design écologique ?

Dans une époque où l’humain cherche à réduire son empreinte sur la planète, le web a son importance car chaque octet consomme de l’énergie, du stockage. C’est aussi le cas pour les terminaux (smartphone, ordinateur, tablette…) qui se dégradent avec le temps.

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 CO².

Lors de la conception de sites web, on pense forcément à l’UX, au produit, à l’UI, aux fonctionnalités… mais rarement aux conséquences écologiques de la conception que l’on réalise. Or, si chaque interface web applique des grands principes, il est possible de réduire considérablement l’impact écologique du web.

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

#1 Limiter l’utilisation des images, optimiser et réduire les vidéos

• Les images sont omniprésentes dans tous les sites que nous consultons quotidiennement.
  Cependant, leur accumulation représente une quantité colossale de données. Le premier objectif pour optimiser un site et le rendre plus économique et écologique sera de réduire la taille des visuels en minimisant leur poids et leur utilisation. Une image peut être présente à plusieurs endroits d’un site tout en étant traitée différemment, avec l’utilisation de filtres CSS par exemple.

• Les vidéos aussi se sont largement répandues à travers la toile.
  Il faudra aussi veiller à vérifier la réelle utilité de ce type de média très gourmand en ressources et s’assurer qu’elles soient brèves, en basse résolution et compressée au maximum. Les vidéos qui se lancent automatiquement sont également à proscrire. Il faut laisser le choix à l’internaute de visualiser ou non le média pour ne pas ajouter un chargement inutile.

#2 Utiliser le lazy loading pour le chargement vos images et médias

Une autre astuce peut être l’utilisation du lazy loading. Cette solution permet de charger en différé vos visuels en fonction des besoins de l’utilisateur.

En effet, seuls les médias visibles à l’écran sont chargés par le navigateur, les autres apparaissent quand l’utilisateur scroll vers le bas de la page. Avec le lazy loading, vos médias ne sont pas sollicités inutilement. Le chargement différé permet d’économiser de l’énergie et accélère le temps de chargement de votre site internet.

#3 Utiliser une solution d’hébergement écologique

Un hébergement « vert » peut avoir un impact important pour rendre votre site internet orienté « Green ». Rapprochez-vous d’hôtes qui utilisent des sources d’énergies durables (géothermie, énergie hydroélectrique, …). Cela réduira considérablement votre impact environnemental.

#4 Penser à recycler vos éléments

Pour optimiser le temps de chargement, la conception de votre UX / UI devra être pensée avec une vision « design system ». L’utilisation de composants que l’on peut intégrer à plusieurs endroits du site internet permet de réduire le code CSS en utilisant des blocs types, des styles prédéfinis en amont pour ne pas réécrire un nouveau code pour chaque page et ainsi réduire le poids du fichier de style design.

On utilise du code « minifié » pour gagner de l’espace en poids de fichiers, technique que l’on peut utiliser pour le CSS et le JS. Pour le code Javascript, on peut travailler avec Vanilla JS par exemple, qui n’est pas un framework mais veut simplement dire « à nu », c’est du JavaScript sans bibliothèque, beaucoup plus léger que JQuery.

On utilise le principe « less is more », principe que Digiwin a mis en place pour le Département de la Loire-Atlantique avec un Design system appliqué sur 5 sites web et intranet.

#5 Minimiser le nombre de polices de caractères

Cela peut paraître un détail mais la multiplication des polices d’écriture a également un impact sur la consommation de données, et par le même biais, le temps de chargement de votre page. Limitez-vous à deux ou trois polices maximum. Aussi, n’importez pas toute la famille si vous n’utilisez que le regular et le bold par exemple. Fixez-vous une variable de taille pour vos titres H1, H2 etc et intégrez-les à votre design system pour une meilleure transversalité et partage de votre éco-conception graphique.

#6 Penser « responsive » 

Depuis plusieurs années, l’utilisation de nos mobiles est omniprésente dans nos quotidiens. Le trafic venant des ordinateurs n’est plus aussi important qu’avant. Il faut penser obligatoirement les sites de façon responsive, ces derniers doivent s’adapter au format de l’écran.

Une solution qui permet de réduire le temps de chargement est d’aller plus loin en créant un site « mobile first ». Le site internet est alors pensé et étudié pour le format mobile en premier, les éléments graphiques sont allégés, la navigation est claire et fluide. Il est découle un temps de chargement optimisé et donc moins de ressources utilisées.

#7 Faciliter la navigation et l’accessibilité 

• Penser à une navigation efficace et simple.
  Avoir une navigation complexe est extrêmement néfaste pour l’expérience utilisateurs. Plus une personne passe du temps à chercher l’information souhaitée, plus elle navigue sur de nombreuses pages inutiles. Une ergonomie claire et fluide permet de limiter le nombre de pages chargées et augmente la satisfaction utilisateur. La chose à retenir pour s’orienter vers l’éco-conception web, c’est de jouer sur la simplicité, le minimalisme et l’efficacité.

• Concevoir en prenant en compte l’accessibilité.
  Un code propre et adapté aux logiciel d’adaptation aux handicaps permettra au site d’être accessible à tous. Digiwin, avec ses experts accessibilité certifiés par Accessiweb, accompagne ses clients dans leurs mises en conformité RGAA depuis de très nombreuses années. L’objectif d’un site conforme RGAA 4 est d’offrir des plateformes utilisables de façon optimale par toutes catégories de public, que ce soit par des personnes handicapées ou par des populations moins familiarisées avec les outils numériques.

La conception écologique n’est encore qu’à ces débuts mais le facteur environnemental est amené à prendre une place de plus en plus importante et entre déjà dans les consciences collectives. L’éco-conception est à prendre en compte en amont d’un projet. Et bien évidement, il faudra y allouer des ressources et une réflexion adéquate lors de la phase de développement UX. Pour aller plus loin, vous pouvez lire « Ecoconception web : les 115 bonnes pratiques » de Frédéric Bordage, un référentiel introduisant les concepts de l’éco-conception web.

De l’image à la navigation, le Webdesign écologique propose une réflexion afin de réduire l’impact énergétique et environnemental de nos sites internet et intranet.