Disclaimer : l’ampleur de notre approche (et de l’article qui la partage) pour un simple site vitrine n’est certainement pas corrélée justement aux enjeux. Elle répondait en effet à deux besoins, en sus de son intérêt propre : approfondir nos connaissances au profit des applications que nous réalisons et préciser notre identité à travers cet article.
À propos…
…de la convivialité et de la question
Pourquoi parler de site convivial, plutôt que de “site éco-conçu” ou de “numérique responsable”, concepts plus standards et partagés sur la question ? Ce n’est pas uniquement par volonté de se distinguer : nous pensons que c’est le terme le plus adapté. Le concept de convivialité permet en effet d’adresser tous les enjeux qui nous importent ici et dans une forme plus appropriée :
- nous n’inventons rien : il est utilisé depuis longtemps dans le domaine informatique pour désigner des outils faciles d’emploi, d’accès. Ivan Illich en a également fait un concept central de sa pensée (« L’autonomie est le mot le plus important chez Ivan Illich »).
- le terme est bien plus attrayant, positif, que l’éco-conception ou le numérique responsable. Et rendre ces sujets désirables, pourquoi pas sympathiques, est un défi majeur,
- sa simple étymologie (vivre ensemble) nous incline enfin à nous intéresser à son impact environnemental : pour paraphraser nos amis d’Arviva, “pas de site vivant sur une planète morte”
Alors, le site de Bleu Matin est-il convivial ? Le point d’interrogation l’indique : nous vous en laissons juge, en vous apportant quelques éléments pour former votre avis. Il indique également qu’aucun tampon reconnu ne permet de l’affirmer définitivement : de multiples outils et référentiels existent, mais adressent tous une partie de la problématique ou un scope bien plus large, non adapté à un simple site vitrine. Comment se fixer un cadre dans ce contexte ?
… de notre approche
Nous nous sommes basés sur deux référentiels principaux (Numérique d’Intérêt Général et le GR491, référentiel de l’Institut Numérique Responsable) ainsi que sur nos connaissances pour définir les quatre objectifs de notre site :
- Être utile
- Être accessible
- Être agréable
- Limiter son impact environnemental
Un choix simple mais structurant nous a permis de faire une grande partie du chemin : opter pour une conception sobre (et toujours conviviale), centrée sur l’essentiel. Nous expliquons dans les sections suivantes comment le design facilite l’atteinte des objectifs précités et quelles actions spécifiques nous avons mises en œuvre.
La sobriété du design améliore également l’accessibilité : un site allégé est plus rapide et plus facile à naviguer, ce qui est essentiel pour les personnes avec des connexions internet limitées ou des appareils moins performants. Cela facilite aussi l’adaptation aux normes d’accessibilité, garantissant que chacun, quelles que soient ses capacités, puisse bénéficier de nos services.
Être utile
Les enjeux
Le point 1.1 du Numérique d’Intérêt Général explique : “Le premier critère pour caractériser un numérique d’intérêt général est lié aux objectifs stratégiques servis par l’outil ou le service numérique. L’outil s’intègre dans un projet, qu’il s’agisse de la raison d’être et du modèle économique d’une entreprise privée ou d’une politique publique mise en œuvre par un ministère ou une collectivité locale. Il n’est pas de numérique responsable pour une organisation irresponsable.”
Notre action
Je me permets d’être concis pour ce point : un site vitrine pour un studio web est presque indispensable (même si nous fêtons notre première année avec un site qui partageait uniquement notre email de contact) et notre activité est dédiée à des applications d’utilité sociale (et environnementale). Le besoin d’avoir plus d’informations sur Bleu Matin nous a d’ailleurs été exprimé à de multiples reprises. Voilà enfin une première carte de visite pour y répondre :).
Il existe des organisations qui se dispensent de site (quitte à en avoir un, clin d’oeil aux chouettes éditions La Lenteur). C’est un choix éminemment respectable mais je n’ai pas d’exemple similaire d’acteur du web concerné (peut-être pour cause) et nous sommes pragmatiques : pour avoir de l’impact, il faut en créer un peu, idéalement le minimum, en tous cas moins que l’impact que nous permettons de réduire (cf le concept d’ombre climatique).
Reste à être utile dans la forme et le contenu. Le design épuré et les messages centrés sur l’essentiel permettent de concentrer les efforts sur ce qui compte vraiment, assurant que le site serve les besoins de ses quelques visiteurs de passage.
Être accessible
Les enjeux
20 à 40% des utilisateurs/trices ont un accès difficile, partiel ou impossible aux informations et services en ligne. Les situations de handicap sont très diverses et peuvent être temporaires, situationnelles. Une personne en fauteuil roulant peut tout à fait utiliser le numérique sans difficulté quand une tendinite (au poignet par exemple), une langue pas encore bien maîtrisée ou une méconnnaissance des outils numériques (appelée illectronisme) peuvent être des obstacles importants à son accès.
Par chance, le web est une technologie conçue pour être accessible, en permettant tous les usages : visuels, textuels, sonores et physiques. Il n’y a plus qu’à en faire bon usage.
Notre action
Pour le site de Bleu Matin, nous avons privilégié une approche d’accessibilité plutôt que de conformité stricte, plus adaptée à nos enjeux (et nos compétences). Plutôt que de cocher toutes les cases d’un long référentiel, nous nous sommes concentrés sur les éléments essentiels couvrant les critères les plus génériques. Nous avons suivis une méthode très simple pour cadrer notre action, découverte lors d’un atelier de beta.gouv mené par Romy Duhem-Verdière : les Easy Checks. Quelques outils nous ont aussi été utiles pour tester certains aspects de l’accessibilités.
Nous avons ainsi pris soin, par exemple :
- d’être compatibles avec des terminaux / technologies rudimentaires (temps d’ouverture en 3G de 1,8 secondes). La légèreté du site en est le facteur le plus important,
- de concevoir la structure du site (les balises) afin de répondre au besoin de hiérarchisation des contenus, ce qui permet d’en avoir une bonne lecture sonore,
- de limiter les contenus animés, en volume et dans le temps d’animation : ils peuvent en effet provoquer une crise chez des visiteurs atteints de certains troubles, par exemple chez les personnes souffrant d’épilepsie,
- de garantir un bon contraste (ce point a revétu un enjeu particulier pour notre site, dont l’identité repose sur de nombreuses couleurs, en particulier pour les fonds bleus pour lesquels aucune couleur ne se distingue avec un très bon contraste. Nous avons ainsi dû augmenter certaines tailles de texte pour garantir un contraste suffisant dans ces cas).
Cette démarche est toujours en cours, et nous devons encore améliorer l’accessibilité du site pour :
- permettre une meilleure navigation au clavier,
- garantir une lecture convenable du texte agrandi à 200% : c’est un mode de lecture utilisé par des personnes ayant des troubles de la vision.
Être agréable
Les enjeux
Comme mentionné plus haut, il nous parait essentiel de rendre les démarches d’éco-conception et de sobriété aussi attractives que possible. Souvent perçues comme des contraintes, elles se donnent parfois un mal fou à en prendre les apparences. Mais la contrainte, particulièrement dans un cadre normatif peu contraignant, n’est pas toujours très efficace. Et si nous travaillions un peu leur désirabilité ? Nous n’inventons rien, beaucoup travaillent en ce sens (campagne “Et si…” d’Alternatiba, travail de Frédéric Lordon, etc.). Cela permet de prendre soin de nos visiteurs, et aussi de nous : c’est que nous y passons un certain temps, dans les outils que nous développons ! Et comme dirait l’autre : “What cannot be eschew’d must be embraced” / “ce qui ne peut être évité, il faut l’embrasser”. Autant embrasser un objet désirable, non ?
Notre action
Nous avons essayé de le rendre beau, chaleureux, sympathique. Si nous sommes très polyvalents dans l’équipe, le beau n’est pas notre spécialité. Nous avons heureusement croisé l’excellent Théo Délepine sur notre chemin, qui a défini notre identité et nous accompagne maintenant sur nos différents projets.
Nous espérons que le résultat vous plaît. Il vous plaît ?
Pour rendre votre visite plus agréable, nous avons décidé de vous épargner la traditionnelle pop-up de cookies. Nous nous dispensons même de tout suivi statistique : nous n’en ferions aucun usage à ce stade. Cela pourrait être utile d’au moins vérifier l’utilisation du site (nous avons quelques solutions low tech en tête) mais nous pourrons le vérifier différemment, par exemple par l’outil de la discussion :)
Limiter l’impact environnemental
Les enjeux
L’impact du numérique est déjà très important et son évolution est particulièrement préoccupante. Ces impacts sont multiples et ne se limitent pas à l’empreinte carbone : augmentation de la consommation énergétique, épuisement des ressources naturelles (fossiles, minéraux et métaux), etc. Vous trouverez plus d’informations et de chiffres dans cette étude de l’ARCEP.
Parmi tous ces chiffres, retenons que l’essentiel de l’impact environnemental du numérique provient des terminaux : ils représentent de 65 % à 90 % des impacts considérés. Parmis ces terminaux, ce sont les écrans (géants) qui portent la majeur partie des impacts, suivis des ordinateurs et des téléphones.
Ainsi, l’un des enjeux clés pour tout producteur de contenu numérique (comme un site) est de ne pas participer à l’obscolescence des terminaux. Dit autrement, il est bienvenu que tout contenu numérique soit lisible, exploitable, sur d’anciens (mais non obsolètes) portables ou ordinateurs, disposant d’une faible connexion. C’est mieux mais, en toute honnêteté, sûrement très peu impactant à notre échelle : ce n’est pas notre site qui déterminera le choix d’un utilisateur de changer ou non de terminal. On peut néanmoins faire notre part et ne pas participer à la course à l’échalotte.
Pour être tout à fait complet, les impacts d’un site comme celui-ci peuvent se décomposer simplement en 4 catégories :
- impact lié à la fabrication et à l’utilisation des serveurs utilisés pour l’héberger et le rendre accessible
- impact lié à la fabrication et à l’utilisation du réseau d’échange de données
- impact lié à la fabrication et à l’utilisation des terminaux utilisés pour le lire
- impact lié à son développement : déplacements de l’équipe, utilisation des ordinateurs, visios, etc.
Il nous a semblé intéressant d’intégrer l’étude de l’impact de cette dernière catégorie, pour juger de la matérialité de l’impact des trois premières et donc des efforts à y associer. Il serait dommage de passer des heures à choisir le framework dev le plus économe quand, peut-être, un simple déplacement en voiture annulerait l’impact du meilleur choix sur trois générations.
Le numérique a également un impact social, que nous ne traitons pas ici spécifiquement (nous avons moins de prise sur celui-ci), mais que nous ne souhaitons pas évacuer : il transforme profondément les modes de travail et de communication, induit des changements dans l’organisation sociale et économique, crée de nouvelles inégalités numériques, et impacte la santé mentale et le bien-être des individus. De plus, les conditions de travail dans l’extraction minière, souvent nécessaires pour produire les composants électroniques, sont souvent très difficiles et dangereuses, avec des impacts graves sur la santé et les droits des travailleurs.
Notre action
Une grande partie de notre activité est aujourd’hui consacrée aux développements de calculateurs d’impact environnemental. La comptabilité carbone n’est pas notre expertise, mais celle de certains de nos partenaires qui nous ont tout de même un peu contaminés à l’usure :) J’ai ainsi pris plaisir (si si), à développer un calculateur Excel dédié à la mesure de l’impact d’un tel site, que je n’ai pas encore eu le temps de finaliser tout à fait et que je partagerai très bientôt ici.
Dans l’attente de chiffres plus précis sur leur portée, nous pouvons d’ores et déjà mentionner les actions mises en place pour réduire cet impact.
Limiter l’impact serveur :
- le serveur qui héberge notre site est mutualisé avec nos autres services (majoritairement les sites de développement des applications que nous concevons et développons) : nous utilisons ainsi un serveur déjà existant et alimenté. L’impact de l’utilisation d’un serveur est effectivement davantage lié à son temps d’alimentation qu’à la sollicitation de son CPU (ce que certains outils qui “mesurent” tout ne mesurent pas ;) ),
- notre serveur est situé en France, où se situe la majorité de nos utilisateurs, et est géré par OVH. Son PUE est de 1,29. Peut mieux faire.
Limiter l’impact des terminaux / des données :
L’impact environnemental de l’utilisation d’un terminal est très simple à approximer (nul besoin d’outil pour cela) : il est égal au temps de lecture x puissance x facteur d’émission (émissions GES / kWh) + poids des données téléchargées x facteur d’émission (émissions GES / Go). Le reste (utilisation du CPU, du disque) est tout à fait négligeable pour un site web.
Nous devons donc minimiser deux paramètres : le temps de lecture et le poids des données téléchargées.
Note au passage : nous avons de la chance dans le web : la performance est corrélée à la sobriété. Plus un site est léger, simple, “sobre”, plus il est rapide à charger.
Pour réduire le temps de lecture (et aussi simplifier sa conception), nous nous sommes contentés de l’essentiel : présenter nos services en quelques mots, quelques références, une courte description de notre équipe et un lien pour nous contacter. Nous ne connaissons pas de statistique moyenne de lecture pour un site de ce type : ce qui rend les comparaisons difficiles. Pour donner un ordre de grandeur, la consommation électrique d’un PC de bureau standard est d’environ 200 watts par heure (Wh). Si nous économisons 10 secondes de lecture sur 1000 visites, cela équivaut à environ 500 Wh, soit la consommation d’un réfrigérateur pendant une heure.
Pour contenir la taille de notre site, c’est aussi assez simple :
- une seule image “lourde”, toutes les illustrations sont des .svg très légers,
- les images sont chargées uniquement quand affichées,
- une seule font est chargée (avec trois niveaux de graisse), et une font native (disponible par défaut dans les navigateurs) est utilisée. C’était contraignant de se dispenser de la font chargée : c’est celle de notre identité, du “bleu matin” du logo, et les font native ne proposent pas de graisse légère, ce qui nous a semblé indispensable pour une lecture agréable des textes descriptifs,
- nous avons développé le site sur Astro, ce qui permet de ne charger que le .js utilisé.
Au final le poids du site au chargement est de 93 ko et si la première page a été assez “désirable” pour que vous la lisiez jusqu’au bout, votre navigateur aura téléchargé 83 ko supplémentaires (en particulier les illustrations et nos deux bouilles, chargées uniquement quand visibles). En comparaison du poids moyen des pages web de 2,2 Mo (source http archive) nous pensons le résultat satisfaisant. En d’autres termes, on énonomise en 500 visites le téléchargement d’un film HD.
Nous évoquerons la fabrication des terminaux et des infrastructures nécessaires au transport de données lors de la publication du modèle de calcul d’impact de notre site.
Limiter l’impact du développement du site
Comme dit précédemment, la conception “à l’essentiel” du site nous a permis d’y passer un temps réduit. Réduit mais pas minimal : nous aurions pu le développer plus rapidement avec un utilitaire dédié, mais c’est notre métier, nous aimons ça : nous ne nous sommes pas privés de ce plaisir, qui a sûrement coûté quelques heures d’ordinateurs allumés supplémentaires.
D’ailleurs, nous avons perdu du temps en débutant le développement sur Next.js. Nous l’avons choisi par habitude et en croyant à sa promesse : si le site est “statique”, point de .js. Ce n’est pas ce que nous avons constaté : même sur un site simple, tous les js “react” sont téléchargés. Pas idéal. Si nous avons manqué quelque chose, n’hésitez pas à nous le faire savoir ! Heureusement, Astro a parfaitement rempli la mission et nous a permis de découvrir un chouette framework.
Comme évoqué précédemment, plus de chiffres à venir très bientôt avec sûrement quelques surprises à la clé :)
Merci de nous lire, à très bientôt,
Pascal