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. 🖥️ ⚡
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
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 ?
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). Et si vous en ajouter, donner la possibilité à l’utilisateur de mettre en pause les animations / défilement / clignotement, afin de limiter l’usage de ressources non nécessaires
Éviter les sliders et carrousels
Ré-utiliser au maximum les composants natifs
Proposer des notifications uniquement si nécessaire, et laisser l’utilisateur les contrôler
Indiquer à l’utilisateur, avant le transfert, les poids et les formats de fichiers attendus : un type de fichier, une taille max. d’image, etc.
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 ?
Donner à l’utilisateur un moyen de contrôler ses contenus (choisir résolution des médias, désactiver leur affichage, etc)
Éviter le scroll infini
Matérialiser pour l’utilisateur les impacts environnementaux de ses actions (par un graphique, un chiffre-clé, etc)
Vérifier les formats attendus de la saisie de l’utilisateur avant soumission du formulaire et indiquer les erreurs de saisie (pour éviter les échanges client/serveur)
Permettre à l’utilisateur l’activation ou non d’un service tiers (exemple : cookies) pour limiter le chargement de services non nécessaires au fonctionnement du site.
💻 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
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
Éco-index (calculer l’émission carbone de votre site)
Website carbon (calculer l’émission carbone de votre site)
Low tech magazine (site qui tourne à l’énergie solaire et prend en compte de nombreuses recommandations d’éco-conception)
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 premiergeste pour la planète 🌎
On sait, ces bannières ne sont pas très agréables, mais on doit vous prévenir qu'on collecte quelques cookies pour améliorer notre site :) Voilà, c'est fait !OkNon merci !
7 avril 2021
Aucun commentaire
| Temps de lecture : 4 minutes
