Mairie de Brié-et-Angonnes
Le ciel de Brié à l’heure qu’il est
Un site de mairie vivant : il sait si la mairie est ouverte, trouve « nounou » quand on cherche le relais petite enfance, et s’affiche près de sept fois plus vite sur téléphone.
17,5 s → 2,6 s pour afficher l’accueil sur mobile
55 → 97 score de performance mobile
À valider Accord de la mairie pour publier l’étude de cas · Droits de la photo de l’église et de la mairie · Blason redessiné, pas encore validé par la mairie
- 17,5 s → 2,6 s pour afficher l’accueil sur mobile
- 55 → 97 score de performance mobile
- 294 anciennes adresses reprises
- 23 publications de la mairie elle-même
Ce qui n’allait plus
Le site de la commune tournait sous WordPress et Elementor, avec une dizaine d’extensions. Sur téléphone, l’accueil pesait 2,7 Mo, demandait 152 requêtes et mettait 17,5 secondes à afficher son contenu principal.
- Les accès rapides aux démarches étaient masqués sur mobile
- Quatre sections de l’accueil étaient cachées
- Les données lues par Google portaient le nom « My WordPress »
- Les tribunes étaient publiées en images de texte, sans alternative
L’objectif
La mairie voulait un site plus beau, plus simple et plus rapide, avec un effet « whaouh ». La direction retenue : une évolution premium de son identité (le bleu nuit, le panorama, le « Explorez » manuscrit, le blason), pas une rupture.
Les fonctions qui changent le quotidien
Un accueil qui vit
Bandeau « mairie ouverte » ou « fermée » calculé à la minute, jours fériés compris, et météo rafraîchie tous les quarts d’heure.
Une recherche qui comprend
Résultats instantanés, mots-clés invisibles (« nounou » mène au relais petite enfance), fautes et élisions tolérées.
Le ciel de Brié
Les en-têtes passent de l’aube au jour puis à la nuit selon la hauteur du soleil, avec ses nuages et ses étoiles.
Démarches et rendez-vous
Prise de rendez-vous pour les cartes d’identité et passeports, documents lisibles dans la page, agenda à ajouter à son calendrier.
Carte des hameaux et frise
Une carte illustrée de la commune et une frise historique que l’on fait glisser.
La mairie publie elle-même
Actualités, conseils municipaux, journal, fermetures exceptionnelles, offres d’emploi : depuis un espace de gestion simple.
Un formulaire en règle
Chaque message reçoit l’accusé de réception qu’exige la loi pour une administration : date, service, adresse et téléphone.
Le site, page par page
Une identité qui a du sens
Le bleu nuit historique de la commune reste la base. L’azur et l’or viennent du blason, redessiné en vectoriel d’après sa description héraldique. Chaque rubrique a sa couleur, avec des contrastes vérifiés.
#17294D #2451C7 #F7CF3A #0F1B35 #F5F7FB #15703F Typographie
- Plus Jakarta Sans tout le site
- Catamaran le nom de la commune et les pictos
- Abuget le « Explorez » manuscrit
Partis pris
- Une mise en avant prend la couleur de sa rubrique, jamais le bleu nuit, réservé aux en-têtes et au pied de page
- Les actions en azur ; l’or seulement pour les petits accents
- Répondre tout de suite aux questions les plus fréquentes : la mairie est-elle ouverte ? quel temps fait-il ? comment avoir un rendez-vous ?
- Un menu mobile pensé écran par écran, avec le téléphone et « Écrire » toujours à portée
- Des contrastes mesurés sur les trois ciels, de 360 à 2 560 pixels de large
Essayé, puis écarté
- Une seule police de titrage sur tout le site
- Des ciels de crépuscule et de coucher de soleil
- Des boutons jaunes
- Une liseuse maison pour le journal municipal
Comment le projet s’est déroulé
Chaque piste a été montrée en ligne, sur une adresse d’essai, puis gardée ou écartée en la voyant.
Préproduction en ligne en 2 jours
- 13 septembre
Audit et direction
Mesure de l’ancien site, import des contenus par script, direction artistique validée, puis accueil et design system.
- 14 septembre
Pages intérieures
195 pages en ligne sur une adresse d’essai, 584 règles de redirection contrôlées une à une.
- 15 septembre
Itérations en ligne
Chaque piste (ciels, méga-menu, cartes d’actualité) montrée sur la préproduction, gardée ou écartée en la voyant.
- 17 septembre
Feu vert
Formulaire branché et accord de mise en production.
- 9 octobre
Mise en ligne
Le domaine bascule sur le nouveau site, la messagerie de la mairie reste intacte.
- 14 octobre
Autonomie
L’espace de gestion ouvre à l’équipe de la mairie.
- 20 au 24 octobre
Suivi
Référencement, page Santé, rubrique Recrutement, puis un audit en lots.
Sous le capot
- Astro
- Cloudflare Pages
- Pagefind
- d3-geo
- Open-Meteo
- netygo-forms
- netygo-gestion
- Migration de WordPress vers un site statique : 45 actualités, 41 pages, 139 images et 45 documents repris par script.
- Index de recherche, carte et horaires calculés à la construction : rien d’inutile n’est envoyé au téléphone.
- 28 150 liens internes vérifiés à chaque publication ; une saisie de la mairie ne bloque jamais la mise en ligne.
- Données structurées de collectivité et fichier llms.txt pour les assistants IA.
Ce que ça a changé, mesuré
| Mesure | Avant | Après |
|---|---|---|
| Performance | 55 | 97 |
| Affichage du contenu principal | 17,5 s | 2,6 s |
| Poids de la page | 2,7 Mo | 412 Ko |
| Requêtes | 152 | 18 |
| Performance sur ordinateur | 82 | 100 |
Lighthouse, mesuré le 13 septembre 2026
- < 1 s pour afficher l’accueil chez les vrais visiteurs sur mobile (75e centile, mesure Cloudflare)
- 190 / 196 pages indexées par Google deux semaines après la bascule
- 132 recherches courantes testées : la bonne page toujours dans les trois premiers résultats
Parlons de ce que vous voulez construire
Nous vous disons franchement ce qui est faisable, en combien de temps et pour quel budget.
D’autres projets racontés
-
Étude de cas Les Chats de Brié
Le site d’une association de protection des chats : adoption guidée, dons en ligne, reçus fiscaux automatiques et appli de gestion des fiches. -
Étude de cas Clavelin Import
Le site d’un importateur de vins européens : six domaines présentés sur leurs cartes, filtre des vins et tables partenaires. -
Étude de cas Syndicat DEFIS
Le site d’un syndicat du CHU Grenoble-Alpes, reconstruit à l’identique et sans perdre une adresse, avec recherche dans les PDF et grilles de salaire.