Association pour l’aménagement de la vallée de l’Esches

Le client : l’AAVE

L’AAVE est une association qui mène une action de valorisation de la vallée de l’Esches (dans l’Oise) et cherche à la défendre contre des projets d’aménagements destructeurs dans cette zone humide.
Engagés dans la défense environnementale, ils ont été sensibles à ma démarche. C’est réciproque.

Ce projet est une refonte d’un ancien site que  le client souhaitait rendre responsive et mettre au goût du jour.

Du côté du cahier des charges, l’AAVE a besoin de publier régulièrement des actualités et dispose de nombreuses photos qu’elle utilise dans ce cadre.

La conception

Interface

Tout d’abord,  j’ai repensé l’arborescence du site afin de simplifier la navigation et de mettre en avant deux grands pôles : 

  • les actions juridiques menées par l’association
  • la valorisation de la vallée

Pour répondre au besoin de publication régulière, j’ai proposé l’utilisation de WordPress.

J’ai donc réalisé la maquette du site en pensant son intégration dans un WordPress optimisé.

La page d’accueil ainsi conçue met en avant les actualités générales de l’association puis présente son activité juridique et leurs derniers développements.

D’une manière générale j’ai essayé de proposer une navigation et une interface plus « calme » et dépouillée. Les animations sont toujours le résultat d’une action. La charte graphique retenue est composée de couleurs proches allant d’un léger vert (les arbres de la vallée) au bleu (l’eau au coeur de la vallée) ponctuées par un usage parcimonieux du violet comme couleur intermédiaire.

Technique

Contrairement à ma précédente réalisation éco-conçue, j’ai décidé de me passer de bibliothèque JS et de jQuery. Concernant ce dernier, mon thème (GeneratePress) ne l’active pas, reste à sélectionner des extensions qui font de même… Parfois, il n’en existe pas (par exemple les extensions de galerie et de lightbox utilisent toutes jQuery) il faut donc faire autrement ou taper du code.
D’autres fois, j’ai le choix.  Dans ce cas, mes critères de sélection sont le nombre de requêtes à la base de donnés (merci Query Monitor) et la qualité du code. 
Au final, cela permet de faire le ménage dans les plugins et de casser certaines mauvaises habitudes : bye bye Contact Form 7, re-bonjour bon vieux formulaire en PHP.

L’effet de parallaxe sur la bannière est en JavaScript. 
Toutes les autres animations / interactions sont en CSS, y compris celles déclenchées au scroll.

Il faut être conscient que faire des choix technologiques pour optimiser la performance environnementale d’un site nécessite du temps supplémentaire par rapport à un développement classique.

Bilan :

Le nouveau site est responsive, le code plus propre (il n’y a plus de style dans les balises HTML…), il est plus rapide et largement moins énergivore d’après les audits auxquels je l’ai soumis (ecoindex, ecometer et GTmetrix).

++

  • Pas de jQuery ni de bibliothèque JS supplémentaire
  • Peu de requêtes http
  • Peu de plugins mais soigneusement sélectionnés et intégrés dans un thème qui permet le bidouillage sans rajouter de surcouche
  • Performance et efficience grandement améliorées

_ _

  • Choix graphique de grandes images (qui sont optimisées cependant) qui alourdissent la page
  • Usage de Google Font

Le site est livré et visible à cette adresse :
https://vallee-esches.fr/

Laisser un commentaire