Éco-conception web – Le design

Dans cet article nous allons parler de bons réflexes à adopter lorsque vous souhaitez réaliser un design de site web, application, logiciel ou tout simplement des contenus web éco-responsable.

Pour ce qui est du graphisme destiné à l’édition, les bonnes pratiques éco-responsables sont différentes, ce sera peut-être l’objet d’un prochain article 🙂.

Revenons-en au web : qui dit éco-responsabilité, dit légèreté … et donc se diriger vers plus de minimalisme et de sobriété.

Pour cela, on peut travailler sur 4 grands axes :

La couleur

Quand on nous évoque le design minimaliste, on aurait tendance à imaginer du texte noir sur fond blanc et c’est tout. Pourtant ce n’est pas ni la seule solution, ni forcément la meilleure d’ailleurs 😉.

Commençons par le fond blanc : plus un pixel affiché est de couleur claire, plus cela va demander en ressources au niveau énergie. Seul le noir pur ne consomme pas d’énergie. Et donc en toute logique à l’opposé, le blanc pur est le plus énergivore.

Les fonds

Si vous souhaitez rester sur un fond clair, optez pour une teinte proche du blanc mais pas blanc pur, ce sera toujours une amélioration !

Vous pouvez également placer des sections avec des fonds plus sombres dans vos pages, pour mettre en avant certains contenus par le contraste, et réduire la consommation d’énergie par la même occasion.

Restez de préférence sur des teintes monochromes, les fonds de type dégradés sont légèrement plus gourmands. Les images pleine largeur sont également à éviter, on en reparlera un peu plus loin.

Proposez un thème sombre ou thème “nuit”

Si vous avez peur que cela perturbe votre audience, vous pouvez le proposer de façon optionnelle avec un petit message invitant la personne à faire un geste éco-responsable simple.

Ce type de thème a tout de même un coût en termes de temps de design et de développement, je vous invite donc à peser le pour et le contre selon votre secteur d’activité, et surtout à bien prévoir ce type de fonctionnalité dès la conception.

Vous pouvez également mettre en place des tests AB pour voir comment réagissent vos utilisateur-ices lorsque le thème sombre est en place.

Enfin, thème sombre ne veut pas forcément dire un fond noir, de la finesse dans le choix des teintes apportera du confort visuel et de l’originalité.

See the Pen Theme switch by Yellowazo (@TessQuietP) on CodePen.

Pensez à vérifier les niveaux de contrastes pour que vos contenus soient accessibles à tous-tes. Vous pouvez utiliser divers outils en ligne tels que contrast-finder, ou colourcontrast

La typographie

Plus on va utiliser de polices de texte différentes et de graisses différentes, plus le résultat sera demandeur en ressources.

Voici donc 3 lignes directrices à suivre :

  • Limiter le nombre de polices de texte différentes : si possible une seule sera le mieux !
  • Limiter le nombre de graisses utilisées : peut-être que vous n’avez pas réellement besoin d’avoir du thin, du light, du medium du semi-bold et de l’extrabold en plus du regular 😊.
  • Utiliser des webfont c’est à dire des polices optimisées pour le web et utilisables à distance, plutôt que des fonts qu’il faut héberger et charger sur votre site.

Vous pouvez bien entendu mixer ces 3 conseils : si vous avez besoin de 2 types de typographies pour un style graphique très marqué, alors utilisez seulement 1 à 2 graisses.

Petit + : vous pouvez même utiliser les polices standard d’origine (Helvetica, Arial, Verdana…), plus besoin de charger de police, vous gagnez encore en sobriété et en performance par la même occasion ! D’ailleurs plusieurs des plus gros réseaux sociaux en utilisent, preuve qu’il n’y a pas forcément besoin de chercher loin pour garder un design efficace !

Si vous souhaitez styliser juste quelques mots, utilisez plutôt du svg au lieu de charger une police de texte spécifique.

Là encore je vous invite à créer un univers graphique accessible au plus grand nombre. Et pour le choix de vos polices, @bleurenard_studio a de superbes posts sur le sujet pour vous aider à y voir plus clair.

Les images

Vous pouvez utiliser des images avec des fonds unis ou avec des éléments simples : plus l’image sera détaillée, avec un fond complexe, plus elle sera lourde.

Le format vectoriel

See the Pen Avatar svg animation by Yellowazo (@TessQuietP) on CodePen.

Utilisez du format vectoriel ou du code CSS lorsque c’est possible : que ce soit pour un texte avec un effet graphique, ou pour des pictogrammes, exportez au format svg, ou donnez les indications nécessaires aux développeurs.

Toujours sur le sujet du format vectoriel : nettoyez et compressez vos images. Voici une liste d’outils spécifiques à l’optimisation de SVG. Pour la compression des formats « classiques » types jpg/png etc, voir dans le sujet « compression » un peu plus loin.

Le format Webp

Le format Webp a été créé par google pour compresser les différents formats d’images standard : jpeg, jpg, png, gif, tiff… La compression peut être paramétrée avec ou sans perte, jusqu’à 30%. Le gain de poids reste important même sans perte.

C’est assez récent mais le format WebP est aujourd’hui supporté par la quasi-totalité des navigateurs. C’est donc un format intéressant à utiliser, notamment si vous avez de nombreuses images, en e-commerce par exemple.

L’expérience utilisateur sera améliorée grâce au chargement rapide, notamment pour les personnes ayant une connexion limitée, le tout en réduisant grandement la sollicitation serveur.

Google met à disposition des outils pour mettre en place ce format, mais plutôt destinés à des profils techniques. Il y a également des outils en ligne si vous avez juste quelques images à convertir comme webp-converter.

Dimensions adaptatives

Listez les dimensions dont vous avez réellement besoin pour chacune de vos images, en prenant en compte toutes les résolutions et types d’écrans sur lesquelles elles seront affichées, et ne dépassez pas la taille maximale nécessaire.

En complément, vous pouvez mettre en place les attributs “srcset” sur les images au niveau du code ce qui permet au navigateur de choisir tout seul parmi les tailles proposées celle qui convient le mieux. C’est très utile notamment pour les images prévues pour le rétina (en x2).

<picture>
  <source media="(min-width:1500px)" srcset="image-extralarge.jpg">
  <source media="(min-width:1200px)" srcset="image-large.jpg">
  <source media="(min-width:650px)" srcset="image-medium.jpg">
  <source media="(min-width:465px)" srcset="image-small.jpg">
  <img src="image.jpg" alt="Mon image" style="width:auto;">
</picture>

Dans cet exemple, le navigateur pourra aller choisir l’image “small” pour un affichage sur mobile, ou l’image en 1500 pour desktop.

Le seul inconvénient est qu’il faut généralement utiliser un plugin, car sinon cela devient un travail colossal à faire manuellement, avec un risque d’erreurs non négligeable.

Compression

Même en ayant bien dimensionné vos images, la compression reste importante à faire et vous permettra entre autres de gagner en temps de chargement. Il existe plétore d’outils gratuits en ligne pour cela comme https://compressor.io/ 

Lazy laoding

La technique du Lazy Loading, ou « Chargement Paresseux » permet de charger les images au fur et à mesure du scroll dans page. Les images en dessous de la ligne de flottaison (bas de l’écran) ne sont alors chargées que lorsque cela devient nécessaire. D’une part cela améliore le temps de chargement initial de la page. D’autre part, on évite des chargements inutiles de médias si l’utilisateur-ice ne consulte pas la page en entier.

Cette fonctionnalité peut être développée sur mesure, ou de nombreux plugins existent pour les site CMS ou Saas ( cf éco-conception pour le web – choix des fonctionnalités).

Les autres types de médias

Que ce soit pour la vidéo ou pour l’audio, je ne suis pas encore suffisamment formée sur ces formats pour vous partager des connaissances. Je préfère donc attendre d’avoir des informations de qualité pour développer ce point, mais ça viendra car ce sont des formats que je souhaite expérimenter 😉.

Les animations

Priviliégiez au maximum les animations en CSS plutôt que via des plugins en javascript.

Cela nécessite donc d’être pensé lors de la phase de design, notamment pour les effets au survol d’éléments.

Les effets d’apparition au chargement de la page sont plutôt à éviter totalement (je dois moi-même appliquer ce conseil car il en reste quelques-uns sur mon site 😅, le cordonnier le plus mal chaussé tout ça).

Cela ne veut pas dire que votre site sera complètement statique, il s’agit plutôt de choisir soigneusement quelques animations qui apportent vraiment de la valeur ajoutée, ou comme pour le choix des fonctionnalités, chercher des alternatives plus sobres.

C’est l’occasion d’explorer les animations svg, les fonds de couleur animés en css, et attirer l’attention de vos utilisateur-ices sur les point importants.

On consomme de plus de plus de vidéos et autres contenus avec du mouvement constant, donc un peu plus de calme par moments fait le plus grand bien !

Aller plus loin : créez vos interfaces avec un design system !

Notamment s’il s’agit d’un projet d’envergure ou amené à beaucoup évoluer au fil du temps. La mise en place d’un design system va permettre une standardisation des éléments sous forme de composants. Grâce à cela on évite des couches de code custom, et votre site sera moins solliciteur de ressources.

Pour aller plus loin sur ce sujet, je vous invite à aller lire l’article dédié :

Échangeons sur le sujet 🤗

Nous pouvons travailler ensemble sur l’éco-conception de votre site internet, app, logiciel.

Sources & Ressources complémentaires :

https://www.webdesignfortheplanet.com/eco-conception-web-3-exemples-de-pros/ (Et globalement tous les articles de Webdesignfortheplanet)

Un guide assez complet pour les bonnes pratiques d’éco-conception / éco-design https://eco-conception.designersethiques.org/guide/fr/

Et pour ceux qui sont à l’aise en anglais : https://sustainablewebdesign.org/category/design/

Dans le domaine de la conception durable et accessible :

Image de couverture modifiée par mes soins : Tima Miroshnichenko

Comments are closed

© 2021 Yellowazo