À l'heure où les effets du changement climatique, la transformation des océans et la perte de biodiversité se font de plus en plus sentir, de nombreuses questions se posent quant à l'empreinte environnementale des technologies numériques.

À défaut de réduire notre consommation d’énergie générale, la digitalisation massive de nos vies et des processus de production n’ont fait qu'accélérer la production de gaz à effet de serre. 

Ainsi entre en jeu la Low-Tech, cette tendance qui se caractérise par la mise en œuvre de technologies simples, rapides, peu onéreuses, accessibles à tous et faisant appel à des moyens courants et locaux. Elle permet de promouvoir des techniques et des technologies ouvertes, accessibles et durables, intégrant la protection de l’environnement dès la phase de conception.

À quoi ressemble un site Low-Tech ?

L’éco-conception touche à l’UX, ainsi qu’aux templates, typographies, couleurs, background, images …

La simplification de l’UX est un point important dans la conception d’un site Low-Tech. Cela permet de limiter le nombre de clics, de fluidifier la navigation et ainsi raccourcir les parcours utilisateurs. Les codes graphiques du design d’interface doivent également être simples et propres, afin de rendre le site le plus minimaliste possible. On peut reconnaître un site Low Tech de très loin et ce qui pouvait être considéré comme un site basique il y a quelques temps est désormais un site avec une approche UX-UI très identifiable et vertueuse.
 

Quelles sont les bonnes pratiques à considérer ?

Dans la conception d’un site Low-Tech, il y a plusieurs points à prendre en compte, tels que :

• Le nombre de pages : publier le moins de pages possible, les réduire ou encore favoriser les one-page.
• Les typographies : utiliser les typographies issues de bibliothèques web et Police System. Le meilleur format est le format WOFF et WOFF2.
• Les couleurs : 3 couleurs maximum sont préconnisées, des couleurs et non gourmandes (meilleure méthode : la bichromie), avec un fond noir à 100%, pas de texture et utiliser les couleurs RVB les moins consommatrices.

Mais nous devons également apporter un point d’attention à plusieurs autres composantes importantes telles que : 

• Le choix des fonctionnalités : éliminer les fonctionnalités non essentielles. À savoir, 70% des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et 45% ne sont jamais utilisées.
• La conception mobile first : celui-ci oblige, à cause de la taille de l’écran, à aller à l’essentiel et à simplifier l’UX et le nombre de fonctionnalités.
• La préférence au site statique : limiter les animations de l’interface, les GIFs animés, les carrousels en Autoplay, car elles consomment beaucoup d’énergie.
• La préconisation de Lazy Loading : affichage progressif des informations. Éviter les Chatbot, les Widgets et les Plugins (fil d’actualités, réseaux sociaux, Google Maps, carte interactive, vidéos incrustées, …)

L'Éco-conception touche tous les aspects du site, de sa globalité aux micro-détails :

• Recherche : préférer la saisie assistée à l’auto-complétion.
• Liste déroulante : vérifier la pertinence des choix disponibles.

• Formulaire : employer uniquement si nécessaire et en limitant les champs  (uniquement les requis).

• Pagination : éviter le défilement infini et préconiser plutôt la pagination ou un bouton “Voir plus”. 
• Alerte : ne pas en solliciter en continu (ex : mails de confirmation inutiles).
• Wording : afin de diminuer son impact, rédigez clairement et de manière concise votre texte, et  privilégiez les listes à puces plutôt que les blocs de texte, pour une lecture plus rapide. Privilégier des mots qui présentent de manière plus fidèle l’impact du numérique (ex : utiliser le mot “télécharger” plutôt que “Lire une vidéo”).

Traitement des contenus et référencement naturel

Si le site est correctement optimisé pour les moteurs de recherche, l’utilisateur trouvera plus facilement ce qu’il recherche et évitera les parcours inutiles. Un site éco-conçu aura donc de meilleures chances d’arriver en haut des résultats de recherche. 

La légèreté des contenus (image et texte) au niveau de la quantité et de la qualité est également un point crucial pour le référencement et une expérience utilisateur agréable et fluide.

Mais comment adapter les images et le contenu de mon site ?

Dans une démarche minimaliste, le contenu (texte et images) est un point important à prendre en compte lors de la conception. En plus de sélectionner les visuels qui seront utilisés, il faut traiter le poids des fichiers et respecter quelques bonnes pratiques. 

Les images

Il est important de privilégier des dimensions adaptées, tramage, monochromie et qualité réduite qui permettent un poids plus léger. 

• Créer des visuels légers.
• Limiter le nombre d’images et de vidéos sur la page.
• Insérer un bloc image plus petit (Conteners).
• Usecase pages d’équipe : penser aux photos de groupes plutôt qu’individuelles. 
• Idées intéressantes : Proposer une option de configuration avec ou sans image. Ou bien, afficher l’image au clic.

L’optimisation du poids des fichiers

Pour diminuer l’impact écologique, il est important d’optimiser le poids des fichiers :

• Vectoriel : préférer le vectoriel à l’image, ainsi que le Glyphe.

• Vidéos : ne pas utiliser de lecture automatique de vidéos, se limiter à une 1’30 de temps et bannir les background vidéo.

Afin de conserver des poids de page minimes, nous pouvons choisir de ne les afficher sur l’index des articles que lorsque l’utilisateur le souhaite, ou bien, de ne pas les afficher sur ce même index lorsque les articles sont anciens (antérieurs à 4 mois).

La compression

Pensez à compresser les contenus en fonction de leurs utilités, dans les options proposées par défaut et favoriser les options les moins énergivores.

• Images : téléchargement de l’image dans sa taille la moins grande (par défaut).
• Média : médias non téléchargés / visualisés automatiquement (éviter les vidéos auto-play).
• Documents à télécharger : optimiser et compresser les documents (pdf) et fournir un résumé si le document est très long.

La compression d’image ainsi que le bon format d’export, permet de réduire le temps de chargement et l’empreinte sur les serveurs d’hébergement.

• Compresser l’image : simplifier le code de la photo de façon imperceptible pour l’œil humain. 
• Bons formats d’exports : photo (jpg ou webp), image (svg), icône (glyphs, style css).
• Pictogrammes : icônes coupées avec des bords effacés.

Le Responsive Image

N’oubliez pas de fournir une sélection de formats et de tailles d’images au navigateur afin que celui-ci puisse choisir lui-même laquelle charger en fonction du terminal utilisé ou de la vitesse de connexion.

Ainsi, pour créer un site web low-tech efficace, il est essentiel d'utiliser des polices lisibles et des couleurs contrastées pour améliorer la lisibilité. Cela aidera les utilisateurs à naviguer facilement sur le site et à comprendre rapidement le contenu. Ensuite, il est important d'utiliser des icônes et des images simples pour aider à la navigation. Les utilisateurs doivent pouvoir comprendre rapidement où ils se trouvent sur le site et comment accéder à d'autres pages. De plus, pour collecter les informations de l'utilisateur, il est important d'utiliser des formulaires courts et simples. Les utilisateurs doivent pouvoir remplir facilement les formulaires sans être submergés par trop d'informations. 

Enfin, il est important d'utiliser des boutons clairs et des appels à l'action pour diriger l'utilisateur vers les prochaines étapes. Les utilisateurs doivent savoir exactement quoi faire pour continuer à naviguer sur le site. Il est aussi important de tester le site avec des utilisateurs pour obtenir des commentaires et des idées d'amélioration.

Pour en savoir plus sur le Low-Tech, Green code et l’éco-conception, ou bien comment adapter les images et le contenu de son site web ou encore comment préparer son hébergement pour consommer moins et être plus Éco-Friendly, contactez-nous.