Le numérique sera responsable ou ne sera pas

Suite au succès et aux très nombreuses ressources créées lors de la "Semaine Européenne du Numérique Responsable" organisée en Juin 2021, l'Eurométropole de Strasbourg a décidé de créer un site web pour mettre à disposition de tous les internautes les différents contenus. Ce site a 4 objectifs principaux :

• Être un laboratoire technique de ce que pourraient être les futurs sites de l'Eurométropole, en intégrant une contrainte environnementale forte.
• Être une vitrine des savoirs faire de l'Eurométropole sur le numérique responsable et tous les aspects liés
• Etre une archive explorable pour que tout le monde puisse profiter des connaissances regroupées lors des différentes sessions passées et à venir
• Proposer une solution réplicable, pour que les autres sites de l'Eurométropole puissent profiter des innovations

S'agissant d'un site mettant en avant le numérique responsable, il était important que celui-ci soit exemplaire en termes d'éco-conception, d'accessibilité,... bref qu'il réponde à un maximum de critères inhérents au NR.

Mais comme c'est un site de l'Eurométropole, il était aussi nécessaire de respecter les usages en vigueur en termes d'administration de sites web, et notamment de respecter la plateforme backoffice utilisée à l'Eurométropole : Liferay.

Liferay est une solution de portail open source, de gestion de contenu, de collaboration sociale et de commerce en ligne B2B, en langage Java. C'est un outil puissant, totalement adapté à une structure de la taille de l'Eurométropole, qui fonctionne depuis de nombreuses années. Cette solution a cependant un inconvénient de taille : il est très difficile d'optimiser les pages web afin que celles-ci respectent les bonnes pratiques d'écoconception. Celà est principalement dû à la nature "tout en un" du produit, où la facilité de mise en œuvre a un pendant en termes de limitations techniques.

Afin de réaliser ce site, nous avons employé une technique connue dans le monde "zéro déchets" : les "5R". Pour un site web, on peut les décrire ainsi :

• Refuser (les fonctionnalités inutiles)
• Remplacer (les outils énormes par des plus simples)
• Réduire (faire au plus simple, au plus direct)
• Réutiliser (des technologies éprouvées)
• Revendiquer (partager ses retours d’expérience)

Dans notre cas particulier, les 5R se sont déclinés opérationnellement de la manière suivante :

• Réutilisation d’une grande partie du produit Liferay en place à l’Eurométropole.
• Remplacement du système de portlets de Liferay (puissant mais très lourd et avec un certain nombre de limitations) par un système beaucoup plus Réduit en fonctionnalités, beaucoup plus optimisées pour un site web « grand public ».
• Refus des fonctionnalités non essentielles au bon fonctionnement du site web.
• Réduction du poids du design / simplification du design.
• Réduction du poids des médias (vidéos, images,…)

Il a été aussi réalisé quelques ajouts, notamment pour proposer des choix plus conscients aux utilisateurs, ou améliorer l'accessibilité générale du site :

• Travail de fond sur l’accessibilité, notamment pour les médias (sous-titrage, lecteur accessible)
• Par défaut, le lecteur vidéo lance la version "basse qualité" des vidéos pour économiser la bande passante.
• Ajout du support du chapitrage pour les vidéos (éviter aux utilisateurs de visionner/télécharger toute une vidéo si seul un chapitre les intéresse)
• Possibilité de télécharger les vidéos pour les regarder « hors ligne », avec différentes qualités, voire seulement la bande son (si on peut se passer de l'image, pourquoi ne pas utiliser une bande son de 50Mo plutôt qu'une vidéo de 1500Mo ?).

D'un point de vue technique, la principale "nouveauté" du site est la (ré)apparition d'un concept disparu depuis le milieu des années 2000 : le site statique.

Un site web, depuis le milieu des années 1990, fonctionne de la même manière : du code HTML est "lu" par votre navigateur et celui-ci transforme des lignes de codes incompréhensibles par des pages web affichant de manière agréable du texte, des images, et toutes les informations que l'on peut trouver sur une page web. De nombreux ajouts ont été réalisés depuis, mais fondamentalement le principe reste identique.

Historiquement, ce code HTML était écrit à la main. Au début du web, un simple bloc-notes suffisait à réaliser un site web !

Au milieu des années 2000, un nouveau système arrive, qui va grandement accélérer l'essor du web : le CMS. Avec un CMS, plus besoin de mettre les mains dans le code pour avoir un site, on passe par une interface d'administration simple qui permet de se concentrer sur le contenu. 

Cette facilité de mise en place a un inconvénient : chaque fois qu'un internaute affiche une page, le serveur doit la recalculer entièrement, en allant chercher des informations dans une base de données. Pendant très longtemps, l'augmentation exponentielle de la puissance de calcul des serveurs a fait de cet inconvénient un problème négligeable. Mais depuis quelques années, avec le développement d'une conscience environnementale dans le monde de la tech, de nombreuses personnes cherchent des solutions alternatives. L'une d'entre elles est la génération de sites statiques.

Concrètement, au lieu de calculer la page web à chaque visite d'un internaute, tout le contenu du site est généré en amont, et ne change plus jusqu'à la prochaine génération. 

On peut schématiser la démarche comme ceci :

En terme d'infrastructure, l'appel d'une page web sur un site statique ne mobilise "que" le serveur web, on se passe complètement de calcul et de base de données !

D'autres avantages sont à noter : notamment une sécurité accrue (impossible pour un hacker de pirater la base de donnée, il n'y en a plus !).

Pour le site Strasbourg Numérique Responsable, nous avons fait le choix d'utiliser l'outil Gatsby (https://www.gatsbyjs.com/), open-source et utilisé par de très grosses organisations (Airbnb, IBM, ...). 

Le choix du site statique a été réalisé en prenant en compte les caractéristiques du projet, notamment une faible interactivité (pas de commentaires, pas de besoin de mise à jour "immédiate",...). Tous les sites ne peuvent pas être statiques !

En faisant ce choix du statique et en optimisant l'expérience utilisateur, nous espérons que les visiteurs du site pourront découvrir au mieux la thématique du numérique responsable, en étant eux-mêmes sur un site le plus vertueux possible !