Météo Climat France
358 pages indexables, une carte animée sur 72 échéances — et pas une seule ligne de framework.
- Année
- 2026
- Conception
- 6 semaines
- Stack
- JavaScript · MapLibre · HTML/CSS · Vercel
- Architecture de l'information
- Design d'interface
- Développement
- Cartographie
- SEO programmatique
- Rédaction scientifique
Produit édité par Kayzen Web, servi sur une adresse de prévisualisation Vercel en attendant son domaine définitif.
- pages indexables180 communes · 141 fiches climat · 16 explications · 12 cartes
- 358
- points de maille interpolés
- 247
- échéances horaires animées
- 72
- clé d'API cartographiqueMapLibre et fond IGN auto-hébergés
- 0
Ce qu'il fallait résoudre.
Le contexte
Météo Climat France est un service météo national gratuit édité par Kayzen Web. Il couvre trois usages distincts avec la même base de données : la météo du quotidien (heure par heure sur 48 h, tendance à 10 jours), la climatologie (normales et records par station) et la météo agricole (températures et humidité du sol, ET0, bilan hydrique, degrés-jours, conditions de pulvérisation).
La contrainte
Trois contraintes s'opposaient. Le service devait afficher une carte animée de la France sur 72 échéances horaires — donc du calcul lourd côté navigateur. Il devait rester consultable sur un téléphone en bord de champ, souvent en 3G. Et il devait exister dans Google sur des requêtes ultra-locales du type « météo Vénissieux 69200 », terrain occupé par des acteurs installés depuis vingt ans.
La réponse
Nous avons refusé le réflexe du framework. Le site est écrit en JavaScript natif, découpé en onze modules chargés à la demande, avec MapLibre auto-hébergé pour la cartographie. Le budget économisé sur le runtime a été réinvesti là où il compte : l'interpolation des 247 points de maille, le pré-rendu des 358 pages et le soin apporté au vocabulaire agronomique.
Chaque parti pris, et sa raison.
La carte comme page d'accueil
Le premier écran n'est pas un formulaire de recherche mais la carte de France déjà rendue, à l'heure courante. Le visiteur voit sa réponse avant d'avoir agi. La recherche par commune ou code postal reste disponible juste dessous, et la touche « / » y ramène le focus depuis n'importe où.
Une échelle de couleurs par grandeur
Température, précipitations, vent, nuages, pression, humidité, orages et UV ont chacun leur rampe, bornée et légendée. Aucune n'utilise le dégradé rouge-vert seul : le daltonisme deutéranope touche 6 % des hommes, et une carte météo mal choisie devient illisible pour eux.
Un curseur temporel manipulable au clavier
Flèches gauche/droite pour changer d'heure, Maj + flèches pour changer de jour, Espace pour lancer l'animation, Origine pour revenir à maintenant. Les raccourcis sont écrits sous le curseur, pas cachés dans une aide.
Une description en toutes lettres
Sous la carte, un lien « Description de la carte en toutes lettres » restitue en texte ce que la carte montre. C'est indispensable pour un lecteur d'écran, et accessoirement lisible par les moteurs — une carte canvas est, pour eux, une image vide.
Typographie unique, auto-hébergée
Nunito en variable font servie depuis le domaine du site. Aucune requête vers Google Fonts : une police tierce sur un service consulté quotidiennement, c'est une dépendance réseau et un transfert de données à l'étranger sans base légale.
Palette du projet
Bleu ciel
#2E7BB6
Structure, liens, en-têtes
Ardoise
#1F2933
Texte principal
Blé
#C9A227
Volet agricole
Alerte
#C6413B
Seuils dépassés, vigilance
Système typographique
Titrage
Nunito 700
Texte courant
Nunito 400
Une seule famille variable, auto-hébergée. Les chiffres passent en chasse tabulaire : sans cela, une température qui varie fait sauter toute la colonne d'un tableau horaire.
Ce qu'il y a sous le capot.
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
JavaScript natif, onze modules
menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau et le vendor MapLibre. Chaque page ne charge que ce dont elle a besoin : la fiche climatologique d'une station n'embarque ni le moteur agronomique ni le lecteur de radar.
MapLibre auto-hébergé plutôt que Mapbox
Pas de clé d'API, pas de facturation à la vue, pas d'appel vers un tiers à chaque chargement. Le fond de plan vient de l'IGN — donnée publique française, cohérente avec un service qui parle de communes.
Interpolation sur maille de 247 points
Les modèles publics fournissent une grille ; l'interface a besoin d'un champ continu. L'interpolation et le rendu se font dans le navigateur, en une passe par échéance, avec mise en cache des 72 échéances : l'animation reste fluide sans rappeler l'API.
Les routes /api/ interdites aux robots
Le robots.txt exclut /api/. Sans cela, chaque exploration d'un crawler consommerait le quota Open-Meteo pour rien — et un quota épuisé, c'est un service indisponible pour les visiteurs réels.
Fonctions de données côté serveur
Les appels aux modèles passent par des fonctions serveur qui normalisent, mettent en cache et bornent les réponses. Le navigateur ne parle jamais directement au fournisseur : le jour où l'on change de source, l'interface ne bouge pas.
Comment le site se rend trouvable.
358 URL, quatre gabarits
180 fiches communales (/meteo/lyon-69001), 141 fiches climatologiques (/climat/…), 16 pages d'explication (/comprendre/…) et 12 pages de cartes thématiques (/cartes/radar…). Chaque gabarit répond à une intention différente ; aucune page n'est une variante cosmétique d'une autre.
Du contenu propre à chaque commune
Le SEO programmatique échoue quand il duplique. Chaque fiche communale porte ses coordonnées, son altitude, ses normales de station de rattachement et ses records — des valeurs qui diffèrent réellement d'une ville à l'autre.
Trois blocs de données structurées
WebApplication (catégorie météo, gratuité déclarée), WebSite avec SearchAction pointant sur la vraie recherche interne, et FAQPage alimentée par les questions réellement traitées dans la page.
Un maillage interne qui a du sens
Le pied de page relie les seize plus grandes villes ; chaque fiche renvoie vers sa page climatologique, ses cartes et son glossaire. Le maillage suit le parcours de lecture, il n'est pas un tapis de liens.
Sitemap et canoniques cohérents
Une seule canonique par page, un sitemap qui liste exactement les 358 URL servies. Une URL absente du sitemap n'est pas explorée ; une URL du sitemap sans page est un soft-404 qui dégrade tout le domaine.
Utilisable par tout le monde.
Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.
Une carte qui existe sans la vue
La description textuelle de la carte n'est pas un attribut alt : c'est un contenu généré, à jour de l'échéance affichée, atteignable au clavier et lisible par une synthèse vocale.
Tout au clavier
Changement de couche, de commune, d'échéance, lecture de l'animation : aucune interaction n'exige la souris. Les raccourcis sont documentés à l'écran.
Rampes de couleur testées en vision anormale
Chaque rampe a été simulée en protanopie, deutéranopie et tritanopie. Les valeurs restent distinguables, et la légende porte toujours les bornes chiffrées.
Ce qui a été livré.
- Accueil — carte animée et recherche
- /meteo/<commune>-<code postal> — 180 fiches communales
- /climat/<station> — 141 fiches de normales et records
- /cartes/<couche> — radar, satellite IR et visible, foudre, UV…
- /meteo-agricole — sols, ET0, bilan hydrique, pulvérisation
- /comprendre — 16 fiches pédagogiques et glossaire
- /lune, /contact, mentions, confidentialité, CGU/CGV, accessibilité
Le déroulé du projet.
Modèle de données
Choix des sources publiques (Open-Meteo, IGN), normalisation des grandeurs, quotas.
Cartographie
Maille, interpolation, rampes de couleur, curseur temporel.
Volet agricole
ET0 FAO-56, bilan P − ET0, degrés-jours, Delta T, seuil Beaufort 3.
SEO programmatique
Quatre gabarits, génération des 358 pages, sitemap, maillage.
Conformité
Mentions, réserve réglementaire phytosanitaire, accessibilité, RGPD.
Ce qu'on nous demande souvent.
D'autres réalisations
Conformité RGPD & SaaSKonsent by Kayzen
Un éditeur de bandeau qui audite les bandeaux est juge et partie : l'indépendance était le produit.
Cybersécurité offensive & SaaSSentinel by Kayzen
Vendre un produit de sécurité à des ingénieurs : chaque affirmation devait être démontrable.
Artisanat & BâtimentBTP EA Rénovation
Six champs, pas un de plus : le formulaire est le produit.
Le même niveau d'exigence, pour votre site.
Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.