Performances
Google PageSpeed
Vitesse de chargement des pagesMobile : | 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)
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.
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 :
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) :