Lemon Interactive refonde son site internet dans une démarche d’éco-conception

Dans le cadre de la refonte éco-conçue de son site internet, Lemon Interactive a débuté par une phase de réflexion sur l’interface utilisateur et l’expérience utilisateur (UX/UI). Le but était de repenser la charte graphique pour répondre aux normes d’accessibilité tout en optimisant les ressources. Les couleurs et les visuels ont été adaptés pour réduire la consommation d’encre sur les supports imprimés et alléger le poids des pages web. En adoptant un style minimaliste avec des photos traitées en noir et blanc, l'agence a réussi à alléger considérablement les fichiers et à se détacher des banques d'images au profit d'éléments visuels authentiques.

Lemon Interactive a opté pour une architecture Jamstack¹, en utilisant Strapi comme backend et Astro pour le front-end, après des tests rigoureux visant à comparer leurs performances. L'approche Multi Page Application (MPA) ² d'Astro, associée à la gestion server-first, a permis d’optimiser l’éco-index et l’accessibilité, tout en maintenant des performances techniques élevées. L’agence a également intégré des technologies comme Typescript pour ajouter de la rigueur et de la lisibilité au code.

Un plugin Strapi a été développé en interne pour gérer les champs spécifiques et améliorer la personnalisation des composants. Pour le front-end, Lemon Interactive a créé son propre kit pour réduire les dépendances à des frameworks³ tiers comme Bootstrap, se concentrant uniquement sur les éléments nécessaires, ce qui a permis de minimiser le poids du code et les requêtes.

Enfin, l’agence a adopté une stratégie d’optimisation des ressources en mettant en place des tests avec Cypress pour assurer la stabilité et la qualité du site. Les éléments réutilisables créés pour le site (comme les hero block) ont été pensés pour être modulables, allégeant encore davantage les besoins en ressources et permettant une personnalisation facile pour les rédacteurs via le back-office.

Chaque étape de ce processus a été marquée par un souci constant d’aligner éco-conception et performance digitale, tout en garantissant une expérience utilisateur fluide et optimisée.

¹ Jamstack : architecture web qui compile des sites dynamiques en pages statiques pour accélérer le rendu et améliorer l'expérience utilisateur.
² Multi Page Application (MPA) : application web traditionnelle où chaque changement de page entraîne le chargement d'une nouvelle page complète depuis le serveur
³ Framework : ensemble d'outils et de bibliothèques qui facilite le développement d'applications en fournissant une structure préétablie.