____________________________________________________________________________________STUDIO MAÏS_________________________________________________________________________________________________SIAM GUILLOT_______________________________________________________________________________________________________GRAPHIC DESIGNER PRINT &  DIGITAL____________________________________________________________________________________________________________________________________________DESIGN ECOLOGIC & SOCIAL____PARIS__ORLEANS__________________siamguillot@gmail.com______________________________________________________________________________________________________________︎___________________________________________________________________________________________________________________________________________________________________________________________________________︎_____________________________________________________________________________________________________________________________________________________________________________________________________________︎___________________________________________________________________________________________________________________________________________________________________________________________________________________________



















← STUDIO MAÏS
Print →
Digital →
Mémoire →
Plastique →



Après un passage à l'école ESTIENNE↗ pour travailler le graphisme imprimé, Siam est passé par l'ENSAAMA↗ et l'EPSAA↗ pour compléter ses compétences en numérique. Installée entre Paris et Orléans, Maïs est un studio graphique polyvalent : édition, identité visuelle, design interactif et web, photographie et montage vidéo. Graphisme éducatif, solidaire et écologique.


CV ↗
Portfolio PDF
Email →
Instagram ↗
Linkedin ↗
Inspirations →
Découvrir le web “bas carbone” →








































← SITE WEB “BAS CARBONE”


À notre époque où réduire notre empreinte sur la planète est crucial, le web a son importance, car chaque octet consomme de l’énergie (stockage, terminaux, navigation...). Même si le web semble parfois immatériel, les conséquences de son usage sont bien réelles.

Internet n'est pas un être autonome. Sa consommation d'énergie croissante est la conséquence de décisions concrètes prises par les développeurs de logiciels, les concepteurs Web, les services marketing, les éditeurs et les internautes. Il est donc urgent de repenser notre rapport à la création numérique et notre rapport au web.

SOMMAIRE


→ ÉTAT DES LIEUX
→ GRAPHISME : Alléger les sites
CODE & UX
HÉBERGEMENT
CONCLUSION







1. ÉTAT DES LIEUX


La consommation d’énergie et les émissions provenant d’Internet sont énormes.
Selon les dernières estimations, le réseau tout entier représente 15 % de la consommation mondiale d’électricité et la quantité de données échangées double tous les deux ans. La technologie des communications émettra plus de carbone d'ici 2025 que n'importe quel pays (à l'exception de la Chine, de l'Inde et des États-Unis, voir la source↗).

Selon HTTPArchive.org ↗ , la taille moyenne d’une page Web aujourd’hui est presque quatre fois plus grande qu’en 2010 et continue d’augmenter. On estime donc qu’Internet pourrait représenter 3,5 % des émissions mondiales de carbone au cours des dix prochaines années.


Dans Eco-conception – Les 115 bonnes pratiques ↗ , Editions Eyrolles, l’ouvrage de référence francais sur le web “écologique” (PDF ↗ ). Les auteurs font une évaluation de la consommation du Web mondiale :
︎1037 twh d’électricité, soit 40 à 50 centrales nucléaires et deux fois la consommation de la France
︎ 608 millions de tonnes de CO2
︎ 8,8 milliards de m3 d’eau

Par internaute :
︎342 kwh d’électricité (soit l’équivalent de 10 ordinateurs portables pendant un an)
︎203 kg équivalent CO2
︎ 23000 litres d’eau. 




TROIS POSTURES, doivent être appliquées dès le début du projet:
SIMPLICITÉ (moins de fonctionnalités, moins de pages) : conception graphique et UX.
PERTINENCE (minimiser le temps passer sur le site) : reflexion UX afin d’optimiser le parcours utilisateur.
FRUGALITÉ (code optimisé, serveur écologique, image légères… ) : intégration et technique.



2. GRAPHISME : ALLÉGER LES SITES


Plus un site dispose d’images/vidéos plus il mobilisera les ressources électriques liées à l’alimentation du serveur. Les médias constituent généralement 90% du poids d'un site. La 1ere étape est donc de limiter l’utilisation des médias et de les réduire. L’objectif étant de trouver le juste équilibre entre poids, résolution et qualité.

RÈGLES DE BASE

  • Préférer des glyphes aux images (par exemple utiliser le tiret “_” pour les liserets, penser un logo à base de Glyphes...).
  • Se limiter à une ou deux typographies et utiliser moins de style (Less is more !) et choisir des Fonts issues de bibliothèques web ; ou mieux ne pas définir de typographie et laisser la police par défault du navigateur.
  • Recycler vos images /actifs au lieu d’en télécharger de nouvelles (donner une seconde vie à une image avec un filtre CSS par exemple : une en couleur, une en noir en blanc, une avec un flou, en superposant plusieurs...)
  • Éviter la lecture automatique des vidéos. Laissez le choix à votre internaute de visualiser ou non votre vidéo, afin de ne pas démultiplier les chargements inutiles.
  • Utilisez le lazy loading pour vos images et médias. Ce chargement différé des médias se fait uniquement en fonction des besoins réels de votre visiteur.
  • Limiter les templates ou en choisir des simples (sur Wordpress, ce thème à été conçu pour être aussi léger que possible, seulement 6 ko)


COMPRESSION D’IMAGE

Lors de la consultation d’un site web, il faut savoir que 65 % des données reçues sont liées aux image. Ca veut dire moins d'images, moins grandes et traitées différemment. Si dessous je vais détaillé quelques techniques trouver lors de mes recherches.


Formats de fichiers
Pour les photographies, images non vectorisées privilégier le PNG-8 dithered (~5-100kb),
pour les textes et diagrammes vectorisés privilégier le SVG (~10kb).

Image 1 :exporter pour le web en niveaux de gris avec Photoshop/Illustrator
Image 2 :exporter pour le web en sélectif si des couleurs doivent apparaître

Le simple fait que vos images soient moins lourdes  vous procure trois vrais avantages :
  • Votre serveur sera moins encombré.
  • Vos pages web seront plus rapide à charger sur l’écran de l’internaute.
  • L’expérience utilisateur sera meilleure et votre référencement en profitera (la vitesse de chargement d’une page compte parmi les critères de l’algorithme mis au point par Google).


Le format WebP, développé par Google en 2010, est un format d’images qui a pour objectif de remplacer, à terme, le JPEG considéré comme obsolète et peu performant.Le WebP se démocratise, car il permet des fichiers images de haute qualité avec uneréduction de leur taille jusqu’à 80 % par rapport au JPEG et jusqu’à 30 % par rapport au PNG) et il prend en charge les images animées (ex. gif) et la transparence (ex. png).

Malgré une dizaine d’année d’existence, le Webp reste peu utilisé car pendant longtemps, de nombreux navigateurs (Firefox, Edge, etc) ne le prenaient pas en charge. Encore aujourd’hui, il est tres compliqué d’afficher les fichiers Webp avec Safari .
Comment convertir vos images en Webp ? Personnellement j’utilise Webpconv qui permet une conversion en lot de fichiers. Sur Wordpress, avec le plugin gratuit WebP Express, vous pouvez servir des images Webp auto-générées aux navigateurs qui les supportent, tout en servant des JPEG et des PNG aux utilisateurs Safari.


La diffusion d’erreur est une ancienne technique de compression d’image. Le nombre de couleurs d’une image, combiné avec son format de fichier et sa résolution, détermine la taille de cette image. Plutôt que d’utiliser des images en couleurs HD, il s’agit de convertir toutes les images en noir et blanc, avec quatre niveaux de gris.
Ces images en noir et blanc sont ensuite colorées en fonction de la catégorie de leur contenu via le code CSS. Cette technique permet des images 10 fois plus légeres.

Image du site LowTechMagazine


Compresser en ligne
Si vous ne souhaitez pas passer par la technique de la diffusion d’erreur (dithering) et donc maintenir vos images dans leur esthétique première alors vous pouvez utiliser un service de compression comme reSmushit, ImageCompressor, ImageOptim  ou encore Compressor. La compression vous permet de réduire le poids de votre image de 90 %, tout en préservant la qualité de vos fichiers : la différence est imperceptible à l’œil.
La compression lossy est également une piste a creuser.



OPTIMSATION VIDÉOS

Encore plus gourmandes en data que les images, les vidéos posent un réel problème. Alourdissant la note, elles offrent généralement une qualité et une taille beaucoup trop élevées pour le web. En effet, comme pour les images, les vidéos basses déf sont largement suffisantes.

Sans parler de bannir les vidéos, il est possible de les optimiser.
Est-il bien nécessaire que votre vidéo soit en 1080p, compte tenu de la taille de la fenêtre et du contexte d’utilisation ? Le générique de 15 secondes est-il réellement indispensable ? Posez-vous ces quelques questions afin d’alléger et de raccourcir vos vidéos au maximum.

Gauthier Roussilhe a trouvé un outil pour réduire considérablement le poids de des vidéos sans perte de qualité apparente : Handbrake. C'est un outil de conversion vidéo miraculeux et assez facile à prendre en main si on a les bons paramètres. En suivant les paramètres de Benoit Labourdette, il a réduit de 75% le poids de ses vidéos hébergées. Il a également décidé que le format 720p (1280*720) était nécessaire à la bonne compréhension des vidéos. Maintenant il travaille avec des textes plus gros quand il fait de l'animation afin d'éviter toute problème de lecture.



3. CODE & UX


Le “green UX” n’en est encore qu’à ses balbutiements et ces quelques recommandations sont, bien entendu, imparfaites. Toutefois, le facteur environnemental ne peut plus être  ignoré et il est amené à prendre une place de plus en plus importante dans les méthodes de travail des web designers.

RÈGLES DE BASE

  • Faire un site statique
  • Améliorez la navigation de votre site /  Fluidifier le parcours utilisateur permet de faire les tâches plus vite et donc consommer moins
  • Garder uniquement les fonctionnalitées essentielles pour les utilisateurs : une approche “mobile first”  
  • Favoriser un design épuré avec un CSS simple et éviter les effets JavaScript 
  • Mettre en cache tout ce qui peut l’être, et bien utiliser les en têtes Expires, Cache-Control, et les ETags pour que le cache soit le plus efficace possible.
  • Ne pas redimensionner vos images par le navigateur (avec width, height).
  • Utiliser le CSS pour les effets graphiques/images (dégradés, coins arrondis... ) plutôt que des images
  • Respecter l’historique du navigateur, ne pas forcer de refresh avec les boutons précédent / suivant
  • Décharger les grands médias vers des fournisseurs tiers qui sont respectueux de l’environnement.

Si vous voulez pousser la question, je vous renvois vers l’article de Alex Soyes qui dévelloppe cette question de son point de vue de dévellopeur et vers le résumé du livre 115 bonnes pratiques eco-conception web.


SITE STATIQUE

Un site Web statique est généré une fois et existe sous la forme d'un simple ensemble de documents sur le disque dur du serveur. Il est toujours là - pas seulement lorsque quelqu'un visite la page contrairement à un site dynamique qui génère la page à chaque visite. Ils nécessitent donc beaucoup moins de puissance de traitement et donc moins d'énergie. Un site low tech est donc forcément statique. De nombreuses solutions existent pour se faire : Hugo, Jekyll, Pelican, etc...

Je n’ai pas encore pousser la question, je vous renvoi vers ces 2 articles très complets : What a website can be et de nouveau Alex Soyes.

MOBIL FIRST

Commencer par concevoir le site pour des appareils mobiles, qui ont des petits écrans et sont plus lents que les ordinateurs de bureau.
Cela permet de se focaliser sur l’essentiel au niveau fonctionnalités, et aussi d’être efficient à plein de niveaux : taille des pages, animations, traitements javascript, lisibilité... Il faut commencer par coder pour le mobile, puis décliner en format tablette, puis desktop (ordinateur).

La régle de base est simple, ne pas avoir plus d’élèments visible sur l’ordinateur que sur le mobile. Avoir une approche mobile first consiste surtout à n’afficher que les informations nécessaires pour aller à l’essentiel.



4. HÉBERGEMENT ÉCOLOGIQUE


L’hébergement constitue la ressource la plus énergivore d’un site internet. Cette problématique est donc essentielle dans la création d’un site web à faible émissions carbone.

PROXIMITÉ

Choisir un hébergeur proche de vos visiteurs : le transport des données consomme de l’énergie. La proximité de l’hébergeur a donc un impact certain sur l’empreinte du site web. De plus, il faudra s’assurer que ses installations soient économes en énergie, se renseigner sur sa politique RSE et sa gestion des DEEE... Si vous coulez en savoir plus je vous conseil cet article pour identifier un hébergeur “vert”.


ÉNERGIES VERTES

Alimenter son site aux énergies renouvelables : C’est chose possible grâce au système de certificat d’électricité verte. Les hébergeurs de ce type ont pour particularité d’utiliser uniquement des énergies renouvelables (solaire, éoliens, géothermie, énergie hydroélectrique…) pour faire fonctionner leurs data centers, mais aussi de les refroidir (le plus possible) par des moyens naturels.  Le choix d’un hébergement web écologique  comme Infomaniak et bien d’autres est une bonne façon de limiter son impact environnemental.


S’AUTO-HÉBERGER

Il y a une façon intéressante de s'auto-héberger tout en réduisant son empreinte carbone : en récupérant du vieux matériels informatiques dirigés vers les casses, les réparer et les utiliser comme serveur. Lowtech.org documente abondamment leurs procédés de récupération et de réparation. Le site de Low-tech Magazine (une référence dans le web écologique) est auto-hébergée et alimentée à l'énergie solaire.


COMPENSATION CARBONE

Tu achètes des “crédits-carbones “ auprès d’entreprises dont le but est de faire diminuer le CO2…

Mesurer les émissions carbone de votre site web :
  • Ecometer : Ce service en ligne base son analyse sur des critères reconnus d’efficacité écologique 








Premier prototype du serveur solaire qui exécute le nouveau site Web de Low-tech Magazine. Le contrôleur de charge solaire (à droite) alimente le serveur (à gauche) via un câble USB .


CONCLUSION

Le web bas carbone, offre de nombreux champs encore inexploités qui vont demander beaucoup d'imagination et d'innovation pour s'adapter aux contraintes énergétiques, écologiques et techniques. Tout est à faire et j'espère que de plus en plus de designers graphiques s'en saisiront pour proposer des nouvelles esthétiques et expériences.

Réduire l’empreinte écologique de son site permet d’en améliorer les performances, l’accessibilité, de réduire sa facture électrique, de réduire la fracture numérique… Un Web à faible teneur en carbone est donc une véritable solution gagnant-gagnant pour les propriétaires de sites Web, les internautes et l’environnement.

La conception écologique n’a pas un impact que pour la planète. Un site conçu de manière légère et intelligente va favoriser d’autre éléments :
  • Equité sociale : un site simple et épuré, sera plus accessible sur des vieux appareils ou chez des personnes avec une connexion limitée.
  • Accès aux personnes en situation de handicap : un code propre et adapté aux logiciel d’adaptation aux handicaps permettra au site d’être accessible à tous
  • Performance : des temps de chargement plus rapides, favorisent l’expérience utilisateur donc la conversion (inscriptions, ventes…)

Avec du bon sens, de la volonté, il est possible de créer un web plus inclusif, moins polluant et proposant toujours une meilleure expérience utilisateur.