Création de sites web en éco-conception

Lion d'or

Tiers-lieu et escape game
Site conçu en 2019

Performances

EcoIndex

Bilan environnemental du site
A 78.8/100
voir le test

Google PageSpeed

Vitesse de chargement des pages
Mobile :  99/100 voir le test
Bureau : 100/100 voir le test

Présentation

Le Lion d'or est un lieu culturel installé à Simandre (Saône-et-Loire). Il est né en 2016 de la restauration d'un ancien hôtel et de sa salle de bal. Au programme : spectacles, résidences d'artistes, expositions, ateliers, permaculture. Depuis cette année, la salle du Lion d'or est le théâtre d'un escape game dont les participants ressortent enthousiasmés.

L'idée de créer un site web a germé en 2018. Le Lion d'or a alors sollicité Nuweb, dont la démarche fait écho à la sienne. L'accessibilité, pour ne citer que cet aspect du web éco-responsable, c'est un peu le pendant de la démarche inclusive et intergénérationnelle du Lion d'or.

Photos d'archives

Le Lion d'or participe à un travail d'archives au niveau départemental. Il consiste à effectuer des collectages de souvenirs auprès des habitants et à scanner des documents pour une base de données patrimoniale. Certaines vieilles photos sont d'ailleurs visibles sur le site web. Pour l'occasion, Nuweb a développé un système permettant de visualiser les images selon deux modes :

  • "pleine page", pour avoir une vue d'ensemble de l'image
  • "pleine largeur", pour apprécier les détails (mais nécessite de faire défiler l'écran verticalement)
menu d'un repas de 1924
photo en pleine page
menu de repas de 1924
photo en pleine largeur

graphisme & éco-conception

Un site éco-conçu est-il de facto graphiquement sobre, voire austère ? Grâce au site du Lion d'or, l'on peut répondre NON !

Le webdesign du site est signé Lisa, une artiste dont l'univers est plein de textures, de découpages, de lignes pas droites, de petits éléments surprenants. Il aurait été dommage que l'éco-conception ne vienne brider son imagination. Alors, à Lisa, seules des contraintes en terme d'accessibilité, d'ergonomie ont été imposées. Pour le reste, c'est au développeur à s'adapter au travail du graphiste.

Pour "éco-intégrer" les maquettes de Lisa, deux techniques principales ont été utilisées : les images vectorielles et les "sprites CSS".

SVG pour les masques

Les maquettes contenaient plusieurs lignes sinueuses : le cadre des formulaires, celui des boutons, la bordure supérieure du pied de page etc.

aperçu du formulaire de contact
formulaire ondulé

Sachant que la taille du formulaire dépend de la taille de l'écran, que la taille d'un bouton dépend de son contenu, il aurait été impossible de créer à chaque fois une image, qui aurait été lourde de surcroît.

À la place, on a créé des masques transparents en images vectorielles (au format SVG) à l'intérieur duquel se répète une petite texture.

Sprites CSS pour les pictos

En éco-conception, on aime bien remplacer les fichiers images par des images vectorielles, car elles sont plus légères... sauf lorsque le motif à dessiner est complexe, ce qui est le cas avec les pictogrammes qui ornent le site du Lion d'or :

exemples de pictogrammes très détaillés
pictogrammes délicats

Pour afficher toutes ces images, on a utilisé une technique incontournable de l'optimisation web : les "sprites CSS". Cela consiste à rassembler toutes les images décoratives en une seule (une grosse image est plus légère que plusieurs petites) :

pictogrammes
détail d'une image en "sprites CSS"