Refonte de site éco-conçu : Lemon Interactive, concilier performance digitale et éco-conception

Un site éco-conçu est développé suivant des principes visant à minimiser son empreinte écologique, tout en maintenant des standards élevés de performance et d'accessibilité. Plus clairement, cela signifie intégrer dès la phase de conception des pratiques et des technologies permettant de réduire la consommation de ressources énergétiques et matérielles, ainsi que les émissions de CO2 associées à l'utilisation du site.

Cinq principes de l'éco-conception web

L'éco-conception d'un site web repose sur cinq axes majeurs, aucun de ces principes ne doit être oublié :

• Optimisation des ressources : Utiliser des technologies, des images ou des techniques d’optimisation efficaces tout en étant légères pour minimiser la consommation d’énergie.

• Design simple et accessible : Assurer un accès à l'information pour tous les utilisateurs, y compris ceux présentant des handicaps spécifiques, que ce soit visuels ou moteurs.

• Optimisation technique (HTML, CSS, JavaScript…) : Écrire un code propre et efficient pour réduire le poids des pages et améliorer les temps de chargement.

• Réduction des données transférées : Limiter les fichiers média lourds et privilégier les formats compressés, éviter les vidéos et utiliser les formats Webp et Avif.

• Hébergement éco-responsable : Choisir des hébergeurs utilisant des énergies renouvelables et des data centers à faible impact environnemental.

Réaliser l’éco-conception d’un site : comment faire ?

Pour cette refonte réalisée en interne, nous avons mis en œuvre une approche éco-conçue en adoptant des technologies adaptées comme le framework Astro en front et Strapi en back. Les maquettes allégées, pensées pour prioriser le contenu essentiel, et les tests rigoureux d'Eco-Index et de performances ont été essentiels tout au long de la conception. Revenons plus en détails sur ces différents éléments techniques.

Après plusieurs refontes au fil des années et une nouvelle vision apportée à l’identité de Lemon Interactive, la “Performance Digitale Durable”, il était devenu nécessaire de réaliser une refonte adaptée à cette promesse. Début 2022, nous avons constaté que l’UX de l’ancien site peinait à offrir une expérience utilisateur fluide et rapide, impactant notre référencement naturel et notre taux de conversion. De plus, notre changement de design à venir, notre volonté d’éco-conception et la faible accessibilité étaient des barrières pour nos clients potentiels, nécessitant une mise à jour complète, réalisée entre 2023 et 2024.

Phase de Réflexion et benchmark UX/UI Design

Le premier travail commence avec notre équipe de design d’expérience, que ce soit sur la charte graphique, l’UX et l’UI du site de Lemon Interactive. Redéfinir l’ensemble de notre identité, en incluant le logo, les présentations, les documents ou les affiches, était devenu une nécessité.

Dans cet objectif, il a fallu travailler une palette de couleurs accessible, en accord avec les recommandations WCAG (Web Content Accessibility Guidelines) et RGAA (Référentiel général d'amélioration de l'accessibilité), et assez versatile pour nous permettre de limiter notre consommation d’encre sur nos supports imprimés.

L’univers photographique de Lemon a également été pensé pour alléger les pages du site , avec un traitement en noir et blanc des photos et un aspect pixellisé qui nous permet d’obtenir des visuels plus légers. Adieu les photos de banques d’images, sur notre nouveau site on veut du vrai, du Lemon !

En imaginant les premières maquettes du site web, deux éléments sont ressortis comme prioritaires : plus de légèreté et de hiérarchisation. Notre directrice artistique a donc réalisé de nombreuses versions de chaque page, en tenant compte des principes d’éco-conception et en constant dialogue avec les développeurs et l’équipe SEO.

Repenser les technologies utilisées

Le choix des technologies est crucial pour la création d’un site éco-conçu. Il guide toutes les réalisations à venir, tout en étant nécessaire dans notre objectif d’atteinte de l’’éco-index A sur toutes les pages.

Nous avons opté pour une architecture Jamstack : initialement hésitants entre WordPress en headless ou Directus, nous avons finalement choisi Strapi pour notre backend. La roadmap de Strapi est prometteuse…

En front-end, après des tests comparatifs rigoureux sur le même prototype, nous étions partis initialement sur Nuxt pour le côté SPA (single page application) et le rendu client-first mais nous avons finalement opté pour Astro et sa gestion MPA (Multi page application) et le rendu server-first et pour ses meilleures performances en termes d’éco-index et d’accessibilité. Astro est aussi le pionnier de l’architecture frontend Islands, architecture que nous avons utilisé sur notre formulaire de contact conçu en VueJs. Nous n’avons pas poussé sur les “view transitions” mais c'est quelque chose dont nous regardons les impacts et les intérêts pour le futur.

Concernant la gestion des formulaires et la génération de leads, dans l’objectif de synchronisation de toutes les technologies et outils que nous utilisons, nous avons appliqué le mode hybride d’Astro pour qu'il gère ses pages en static. Nous appliquons le SSR pour certaines pages, l'intérêt de mettre une page en SSR est d'appliquer de la gestion côté serveur, comme la validation de formulaire et la sécurisation des datas pour ensuite l'envoyer au serveur back, qui lui va traiter cette data pour l'envoyer à nos outils de gestion.

Par ailleurs, notre utilisation de Typescript permet d'implémenter un typage fort sur du javascript. Cela a l'avantage de rajouter de la lisibilité et du cadre dans le code.

Réaliser la création d'un plugin Strapi

Avec cette refonte de site, nous devions développé un plugin spécifique pour Strapi, afin de gérer des champs particuliers nécessaires à nos composants.

En ce qui concerne le front et l’intégration, là où nous utilisons habituellement le framework Bootstrap que nous connaissons bien désormais et que nous maîtrisons pleinement, sur un projet de la sorte où on s'attendrait à voir un Tailwind pour sa gestion orienté composant, nous avons fait le choix de créer notre propre kit front afin de ne charger que ce dont nous avions besoin, de réduire les dépendances et encore plus notre impact environnemental. Un style global pour définir le skeleton ainsi qu’un découpage de styles par composants a été défini. Évitant au maximum de charger du style CSS la ou il n’a pas besoin d’être appelé. Un système de purge permet aussi de nettoyer le code à la compilation du code non utilisé.

Nous avons aussi utilisé des sprites pour certains svg ou images. Avec ce procédé nous avons pu limiter le nombre de requêtes aux assets dans nos pages. Astro permet également la gestion de picture qui nous a permis pour une seule image de disposer de multiples formats et tailles.

Grâce à cela, nos images ont des tailles différentes en fonction des breakpoints pour le côté responsive mais aussi des formats jpg/png pour la source originale mais propose également aux navigateurs récents des sources en webp et avif. Ces nouveaux formats sont cruciaux dans le travail sur l'éco-conception. Des tests fonctionnels continus avec Cypress assurent la qualité et la stabilité de notre site.

Lors d’une telle refonte de site, plusieurs arbitrages sont indispensables pour allier éco-conception et performance digitale. La première décision fut de restructurer notre charte graphique. Chaque aspect des maquettes a été minutieusement pensé pour respecter les principes d'éco-conception : contenu allégé, priorisation des éléments essentiels, étude des ratios graphiques pour garantir l’accessibilité.

Dernières technologies pour un site plus performant

Après plusieurs ateliers et discussions avec toutes les équipes impliquées, notre choix s’est orienté vers une architecture Jamstack avec Strapi et Astro. Ce ne sont pas des choix uniquement guidés par l’éco-conception : ils permettent aussi et surtout d’avoir de réels résultats de performance, que ce soit sur la rapidité des pages ou l’optimisation back-office.

Optimisation des ressources et personnalisation

Dans notre démarche, nous avons aussi eu la volonté de pousser la réutilisation de tous les éléments créés. Cela passe notamment par la création de blocs sous forme de composants réutilisables. Imaginer ce concept autour de la réutilisabilité à été aussi bien créé sur les maquettes UI que pour l’équipe de développeurs. Les exemples sont nombreux, avec le hero block des pages expertises qui est le même que celui utilisé sur les pages CMS, ou les blocs des “cartes expertises”, utilisés sur les avis par exemple.

Etant donné que nous possédons une partie blog avec plusieurs articles par semaine, la personnalisation était aussi importante sur les pages dédiées. Tout est accessible pour les rédacteurs directement dans le back-office du site, en utilisant des blocs existants tous adaptés à la nouvelle charte de l’agence.

Développement sur-mesure et tests rigoureux

En instaurant des tests fonctionnels rigoureux via Cypress, nous avons pu avoir un développement sur-mesure de chaque partie du site. Le tout, géré intégralement par toute l’équipe de développeurs de l’agence : chaque collaborateur a pu participer à la création du site, permettant une amélioration continue des compétences de tous les développeurs, front et back. Un moyen de préparer toutes les équipes aux futurs sites éco-conçus à créer !

Une refonte de site d’une telle envergure était pavée de défis à surmonter : l’éco-conception est un domaine qui doit continuer son développement, et la sortie de ce site performant et responsable montre que, oui, un site éco-conçu qui convertit, c’est possible ! En étudiant l’expérience utilisateur, tout en conservant l’essentiel avec une navigation fluide et intuitive, cela permet à chaque visiteur de trouver la bonne information.

Une identité visuelle renouvelée et éco-conçue

L’agence a pris une direction engagée depuis plusieurs années, qui devait se ressentir dans son identité. Cela a donné lieu à la création d’un nouveau logo, mettant en avant notre promesse qui résume cet engagement environnemental lié à la performance des sites créés : “Performance Digitale Durable”. Chaque élément du logo correspond à un mot :

• Le triangle symbolise la performance que nous promettons à nos clients ;

• Les trois barres représentent le digital, rappelant les grilles utilisées pour structurer le contenu d’une page web ;

• Le rond exprime l’aspect durable, autant sur l’environnement que sur la relation avec nos clients.

En examinant les bons usages sur les couleurs ou les polices utilisées, nous avons pu créer une charte qui est modelée pour une communication complète, avec une nouvelle identité web et physique, garantissant une accessibilité optimale et un design allégé avec le contenu essentiel.

Des résultats probants et mesurables

Les résultats obtenus démontrent l’efficacité de la méthode utilisée : notre site affiche désormais la majorité de ses pages avec un éco-index A et un taux d'accessibilité élevé. Deux indicateurs clés qui doivent devenir indispensables pour toutes les créations et refontes de site web à venir.

La performance technique et le design allégé ont permis non seulement d'améliorer l'expérience utilisateur, mais également de maintenir une empreinte écologique limitée. Nous avons mis en place un maximum de mesures pour atteindre l’objectif principal d’une telle démarche : limiter notre impact environnemental sur le numérique.

Ainsi, la refonte du site Lemon Interactive prouve qu'il est possible de concilier éco-conception et performance digitale sans jamais sacrifier l'ergonomie ou l'esthétique. En faisant participer toute l’agence à la création du site et de cette nouvelle direction artistique, nous faisons avancer toute une équipe vers un nouvel objectif. Celui de poursuivre la production de prestations digitales au service de clients engagés !

Nous sommes fiers de montrer la voie vers un web plus responsable, et nous espérons que, grâce à ces projets, de nouveaux acteurs prendront ce train en marche d’un web plus durable : pourquoi pas vous ?