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 face à 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.

Il s’agit d’une refonte, le client avait déjà un site qu’il souhaitait rendre responsive et mettre au gout du jour.

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 ses 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 selection sont les nombre de requêtes à la base de donnés (merci Query Monitor) et la qualité du code. 
Au final ça 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 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é au client et est en cours de rédaction. Il sera migré à la racine du serveur à l’issue de cette étape.
http://vallee-esches.fr/valleeeschesNEW/

Laisser un commentaire