Ville d’Estérel

Le mandat

Un site municipal n'est pas un site qu'on visite pour le plaisir. On y vient pour une raison : trouver le prochain avis public, revoir la dernière séance du conseil, payer ses taxes, réserver un terrain de tennis. Le site de la Ville d'Estérel devait donc d'abord être clair, avec des dizaines de pages réparties en cinq grandes rubriques.

Il devait aussi rester simple à alimenter pour l'équipe de la Ville, qui publie régulièrement des actualités, des avis et des documents. Comme pour Inspirer. Respirer. et Synerlab, j'ai assuré la gestion et la structure du projet avec Bernard Imbert, puis toute la programmation, sur un design de Christine Martel.

Cinq rubriques, un mégamenu

En plus de l'accueil, tout le contenu se range sous cinq rubriques : la ville, les services aux citoyens, découvrir Estérel, documents et publications, et nous joindre. Au survol d'une rubrique, ses sous-pages se déploient dans un bandeau sous l'en-tête ; on voit d'un coup d'œil tout ce qu'elle contient.

Sur téléphone, le même menu devient une liste qu'on ouvre au toucher : le composant SubNav gère les deux comportements selon que le menu mobile est ouvert ou non. Et l'en-tête se cache quand on descend dans une page, puis revient dès qu'on remonte.

Les services en un clic

Juste sous le carrousel d'accueil, une barre d'icônes mène directement aux services les plus demandés : le portail de nouvelles et de taxes, les demandes en ligne, la cartographie et le rôle d'évaluation, le calendrier des activités, les séances du conseil et la collecte des matières résiduelles.

Plus bas, deux carrousels présentent les actualités et les nouvelles en environnement, trois cartes à la fois. Le carrousel d'accueil, lui, défile tout seul toutes les sept secondes et s'arrête quand la souris passe dessus. Le même composant Carousel couvre tous ces cas : un attribut data-carousel-type choisit la configuration Swiper.

Le même socle de blocs

Le thème reprend l'architecture de mes autres sites WordPress : des pages composées de blocs (hero, texte, liste de sous-pages, FAQ, liens, blogue), un front-end regroupé par webpack, et une fabrique qui instancie la bonne classe JavaScript pour chaque élément portant un attribut data-component.

Sept composants suffisent ici : Header, SubNav, Search, Carousel, Accordion, Video et Scrolly. Les pages de rubrique, par exemple, se résument souvent à un hero et à un bloc qui présente leurs sous-pages en tuiles photo.

Accueil

1. s-hero--carousel
2. s-links
3. s-blog--carousel
4. s-blog--carousel

Découvrir Estérel

1. s-hero
2. s-title
3. s-child-list

Avis publics

1. s-hero
2. s-text
3. s-faq

Notre équipe

1. s-hero
2. s-text
3. s-faq
4. s-text
5. s-hero

Des avis publics faciles à retrouver

Depuis un règlement adopté par la Ville, les avis publics sont publiés sur le site plutôt que dans un journal local. Ils devaient donc être faciles à trouver, même après plusieurs années.

Ils sont classés par année dans un accordéon : on ouvre seulement l'année qui nous intéresse. Le composant Accordion anime la hauteur avec GSAP, et un clic sur un lien à l'intérieur ne referme pas le panneau par accident. Les procès-verbaux, les règlements et les rapports financiers suivent le même modèle.

Sur téléphone

Sur téléphone, le menu passe derrière un bouton, les sous-menus s'ouvrent au toucher, les carrousels affichent une carte à la fois et les accordéons gardent toute la largeur pour les longs titres d'avis.

• Accueil
• Menu
• Avis publics
• Accordéon

Crédits

Client

Ville d’Estérel

Gestion et structure

Matthieu Parent, Bernard Imbert

Programmation

Matthieu Parent

Design

Christine Martel

Captures réalisées sur le site en ligne. Photographies et logos : propriété de leurs auteurs et de Ville d’Estérel.