Recommandations pour un design plus écologique
Fanny Serafini 7 avril 2021

Depuis quelque temps on entend de plus en plus parler d’éco-conception dans le numérique.

Mais l’éco-conception, c’est quoi ? Cette manière de concevoir se focalise sur une approche plus respectueuse de l’environnement, avec une vision plus globale du cycle de vie du produit. 🌱

Nombreux sont ceux à penser que le numérique ne pollue pas, bien que des informations contraires à cette idée circulent de plus en plus. Supports numériques fréquemment renouvelés, sur-équipement, usages vidéos et streaming en constante augmentation, serveurs cloud chargés, etc.

Tous ces éléments ont un fort impact sur l’environnement, c’est ce qu’on appelle la pollution numérique. 🖥️ ⚡

Illustration éco-conception
Source : Cienpies Design sur Shutterstock

À titre d’exemple : « Si le numérique était un pays, il aurait environ 2 à 3 fois l’empreinte environnementale de la France »

(Source : « Qu’est-ce qu’on fait?! »)


Listing de bonnes pratiques d’éco-conception numérique :

🎨 Logo / Identité visuelle

  • Privilégier un logo 100% typographique
  • Préférer un logo en aplat (sans dégradés) et avoir impérativement une déclinaison noir et blanc
  • Utiliser une font écologique : éco-font , Cambria, Times New Roman, Century Gothic, Ryman Eco
  • Optimisation manuelle ou automatique des fichiers SVG pour retirer tous les calques et commentaires, qui sont non nécessaires à son affichage sur un site. La réduction du poids du fichier peut atteindre 25% à 2% de moins que le poids original.

⌨️ Utilisation de la typographie

  • Utiliser le moins de typographies possible (et limiter au maximum les différentes graisses)
  • Il est recommandé d’utiliser des typos système (pour le contenu de vos pages par exemple)
  • Utiliser systématiquement des webfonts (bien que google ne soit pas le seul exemple), pour un meilleur chargement des pages, plutôt qu’une typographie custom
  • Prendre les formats .WOFF ou .WOFF2

📸 Images

  • Réduire le nombre d’images dans les pages : est-ce que l’image a une réelle valeur ajoutée ? Est-ce qu’elle transmet une information essentielle ?
  • Réduire leur taille et les compresser (ReSmush, Optimizilla, ImageOptim, TinyPNG, ShortPixel)
  • Privilégier le format WebP (attention compatibilité navigateur).Google recommande JPEG 2000, JPEG XR et WebP
  • Utiliser au max du .svg
  • Uploader les images à la bonne taille (ne pas les re-sizer via le CSS)

💡 UX / UI design

  • Privilégier la saisie assistée plutôt que l’auto-complétion, moins énergivore
  • Recycler les visuels (reprendre les mêmes images d’une page à l’autre)
  • Design minimaliste avec seulement le nécessaire
  • Ne mettre en place que les fonctionnalités indispensables à l’utilisation du site / application
  • Éviter les plugins natifs des boutons de partage de réseaux sociaux officiels
  • Éviter les animations (Et donc du .JS)
  • Éviter les sliders et carrousels
  • Ne pas mettre d’autoplay (et éviter de mettre des vidéos si ce n’est pas nécessaire)
  • Réfléchir à l’impact des pictos/icônes qui sont “décoratifs”. Si vous en mettez sur votre site : sont-ils indispensables ? Aident-ils réellement à la compréhension ?

💻 Développement web

  • Utiliser des PWA (progressive web app)
  • Éviter les CMS qui sont souvent très gourmands
  • Envoyer seulement les données nécessaires à l’affichage du site
  • Prendre un hébergement vert (PlanetHoster, Ikoula, Infomaniak)
  • Limiter le nombre de requêtes HTTP
  • Limiter les plugins
  • Privilégier le CSS dès que c’est possible au lieu des images (animations, icônes simples, etc)

👨‍💻 / 👩‍💻 Utilisation personnelle du numérique

On peut tous agir et faire des petits gestes responsables au quotidien.

  • Privilégier le wifi dès que c’est possible, plutôt que la 4G
  • Ne stocker sur le cloud que les choses essentielles
  • Trier vos mails toutes les semaines
  • Fermer un onglet dès que vous avez fini de consulter la page, et donc éviter de surcharger le navigateur d’onglets
  • Éviter de mettre trop de personnes en copie de vos mails
  • Éviter les PJ quand c’est possible
  • Ne pas acheter de matériel numérique sur un coup de tête : en ai-je vraiment besoin ? Mon ancien support n’est-il pas réparable ? Et éviter le sur-équipement
  • Trier vos anciens supports numériques (oui, garder ces cinq derniers téléphones au fond du placard n’est pas très éco-friendly)
  • Ne pas ajouter sa signature à chaque réponse mail et préférer le format brut au html

🔍 Quelques références


🌳 Pour conclure l’éco-conception numérique

Cependant, tous ces tips ne doivent pas endommager l’expérience utilisateur ni les parcours de votre futur service. Il faut trouver un bon compromis entre l’éco-conception et une bonne compréhension de vos utilisateurs. L’utilisation du dark mode – voir notre article précédent – peut être une alternative, les écrans noirs consommant moins d’énergie.

Vous n’êtes pas obligés de respecter toutes les recommandations, en prendre quelques unes en compte est déjà un bon premier geste pour la planète 🌎

Quelques informations supplémentaires sur la pollution numérique et ses conséquences.

👉 Pour garder un oeil sur ces bonnes pratiques, n’hésitez pas à télécharger notre “checklist éco-conception”

Fanny Serafini

Votre commentaire

Your email address will not be published. Required fields are marked *