Daten & Wetterdienst

Météo Climat France

358 indexierbare Seiten, eine animierte Karte über 72 Zeitpunkte – und keine einzige Zeile Framework.

Jahr
2026
Umsetzung
6 Wochen
Stack
JavaScript · MapLibre · HTML/CSS · Vercel
  • Informationsarchitektur
  • Interface-Design
  • Entwicklung
  • Kartografie
  • Programmatisches SEO
  • Wissenschaftliche Texte
Website besuchen(neuer Tab)Über ein ähnliches Projekt sprechen

Ein Produkt von Kayzen Web, bis zur endgültigen Domain unter einer Vercel-Vorschauadresse erreichbar.

https://meteo-climat-france.vercel.app/
Startseite der Website Météo Climat France — Daten & Wetterdienst, erstellt von Kayzen Web
indexierbare Seiten180 Gemeinden · 141 Klimaseiten · 16 Erklärseiten · 12 Karten
358
interpolierte Gitterpunkte
247
animierte stündliche Zeitschritte
72
Kartografie-API-SchlüsselMapLibre und IGN-Grundkarte selbst gehostet
0
Die Ausgangslage

Was gelöst werden musste.

Der Kontext

Météo Climat France ist ein kostenloser landesweiter Wetterdienst von Kayzen Web. Er deckt mit derselben Datenbasis drei verschiedene Anwendungen ab: das Alltagswetter (stündlich für 48 Stunden, Trend über 10 Tage), die Klimatologie (Normalwerte und Rekorde pro Station) und das Agrarwetter (Bodentemperatur und -feuchte, ET0, Wasserbilanz, Gradtage, Bedingungen für den Pflanzenschutzeinsatz).

Die Einschränkung

Drei Anforderungen standen im Widerspruch. Der Dienst sollte eine animierte Frankreichkarte über 72 stündliche Zeitschritte anzeigen – also schwere Berechnungen im Browser. Er musste auf einem Smartphone am Feldrand nutzbar bleiben, oft mit 3G. Und er musste bei Google für hyperlokale Suchanfragen wie „météo Vénissieux 69200“ existieren – ein Terrain, das seit zwanzig Jahren von etablierten Anbietern besetzt ist.

Die Antwort

Wir haben den Framework-Reflex verweigert. Die Website ist in nativem JavaScript geschrieben, aufgeteilt in elf bei Bedarf geladene Module, mit selbst gehostetem MapLibre für die Kartografie. Das beim Runtime eingesparte Budget wurde dort investiert, wo es zählt: in die Interpolation der 247 Gitterpunkte, das Prerendering der 358 Seiten und die Sorgfalt beim agronomischen Vokabular.

Design & Art Direction

Jede gestalterische Entscheidung – und ihr Grund.

  1. Die Karte als Startseite

    Der erste Bildschirm ist kein Suchformular, sondern die bereits gerenderte Frankreichkarte zur aktuellen Stunde. Besucher sehen ihre Antwort, bevor sie etwas tun. Die Suche nach Gemeinde oder Postleitzahl steht direkt darunter, und die Taste „/“ setzt den Fokus von überall dorthin zurück.

  2. Eine Farbskala pro Messgröße

    Temperatur, Niederschlag, Wind, Bewölkung, Luftdruck, Luftfeuchte, Gewitter und UV haben jeweils eine eigene, begrenzte und beschriftete Skala. Keine nutzt allein den Rot-Grün-Verlauf: Deuteranopie betrifft 6 % der Männer, und eine schlecht gewählte Wetterkarte wird für sie unlesbar.

  3. Ein per Tastatur bedienbarer Zeitregler

    Pfeiltasten links/rechts für die Stunde, Umschalt + Pfeiltasten für den Tag, Leertaste zum Starten der Animation, Pos1 zurück zu jetzt. Die Tastenkürzel stehen unter dem Regler, nicht versteckt in einer Hilfe.

  4. Eine Beschreibung in ganzen Worten

    Unter der Karte gibt ein Link „Beschreibung der Karte in ganzen Worten“ als Text wieder, was die Karte zeigt. Für Screenreader ist das unverzichtbar und nebenbei für Suchmaschinen lesbar – für sie ist eine Canvas-Karte ein leeres Bild.

  5. Eine einzige, selbst gehostete Schrift

    Nunito als Variable Font, von der eigenen Domain ausgeliefert. Keine Anfrage an Google Fonts: Eine Drittanbieter-Schrift auf einem täglich genutzten Dienst ist eine Netzwerkabhängigkeit und eine Datenübermittlung ins Ausland ohne Rechtsgrundlage.

Farbpalette des Projekts

  • Himmelblau

    #2E7BB6

    Struktur, Links, Kopfzeilen

  • Schiefer

    #1F2933

    Haupttext

  • Weizen

    #C9A227

    Agrarbereich

  • Alarm

    #C6413B

    Überschrittene Schwellen, Warnungen

Typografisches System

Überschriften

Nunito 700

Fließtext

Nunito 400

Eine einzige variable Familie, selbst gehostet. Die Ziffern stehen in Tabellenbreite: Ohne das lässt eine schwankende Temperatur die ganze Spalte einer Stundentabelle springen.

Engineering

Was unter der Haube steckt.

  • JavaScript
  • MapLibre
  • HTML/CSS
  • Vercel

  1. Natives JavaScript, elf Module

    menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau und der Vendor MapLibre. Jede Seite lädt nur, was sie braucht: Die klimatologische Seite einer Station bringt weder die Agrar-Engine noch den Radar-Player mit.

  2. Selbst gehostetes MapLibre statt Mapbox

    Kein API-Schlüssel, keine Abrechnung pro Aufruf, kein Drittanbieter-Aufruf bei jedem Laden. Die Grundkarte stammt vom IGN – öffentliche französische Daten, passend zu einem Dienst, der von Gemeinden spricht.

  3. Interpolation auf einem Gitter von 247 Punkten

    Die öffentlichen Modelle liefern ein Raster; die Oberfläche braucht ein kontinuierliches Feld. Interpolation und Rendering erfolgen im Browser, in einem Durchgang pro Zeitschritt, mit Caching der 72 Zeitschritte: Die Animation bleibt flüssig, ohne die API erneut aufzurufen.

  4. Die /api/-Routen für Robots gesperrt

    Die robots.txt schließt /api/ aus. Ohne das würde jeder Crawl das Open-Meteo-Kontingent sinnlos verbrauchen – und ein erschöpftes Kontingent bedeutet einen Dienst, der für echte Besucher nicht verfügbar ist.

  5. Serverseitige Datenfunktionen

    Die Aufrufe der Modelle laufen über Serverfunktionen, die die Antworten normalisieren, zwischenspeichern und begrenzen. Der Browser spricht nie direkt mit dem Anbieter: An dem Tag, an dem die Quelle wechselt, bleibt die Oberfläche unverändert.

Suchmaschinenoptimierung

Wie die Website gefunden wird.

  1. 358 URLs, vier Vorlagen

    180 Gemeindeseiten (/meteo/lyon-69001), 141 Klimaseiten (/climat/…), 16 Erklärseiten (/comprendre/…) und 12 thematische Kartenseiten (/cartes/radar…). Jede Vorlage bedient eine andere Suchintention; keine Seite ist eine kosmetische Variante einer anderen.

  2. Eigene Inhalte für jede Gemeinde

    Programmatisches SEO scheitert, wenn es dupliziert. Jede Gemeindeseite trägt ihre Koordinaten, ihre Höhe, die Normalwerte ihrer Referenzstation und ihre Rekorde – Werte, die sich von Stadt zu Stadt tatsächlich unterscheiden.

  3. Drei Blöcke strukturierter Daten

    WebApplication (Kategorie Wetter, als kostenlos deklariert), WebSite mit einer SearchAction, die auf die echte interne Suche verweist, und eine FAQPage, gespeist aus den tatsächlich auf der Seite behandelten Fragen.

  4. Eine sinnvolle interne Verlinkung

    Die Fußzeile verlinkt die sechzehn größten Städte; jede Gemeindeseite verweist auf ihre Klimaseite, ihre Karten und ihr Glossar. Die Verlinkung folgt dem Leseweg, sie ist kein Linkteppich.

  5. Stimmige Sitemap und Canonicals

    Ein einziges Canonical pro Seite, eine Sitemap, die genau die 358 ausgelieferten URLs auflistet. Eine URL, die in der Sitemap fehlt, wird nicht gecrawlt; eine URL in der Sitemap ohne Seite ist ein Soft 404, der die ganze Domain abwertet.

Barrierefreiheit

Für alle nutzbar.

Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.

  1. Eine Karte, die auch ohne Sehen existiert

    Die Textbeschreibung der Karte ist kein alt-Attribut: Sie ist ein generierter Inhalt, aktuell zum angezeigten Zeitschritt, per Tastatur erreichbar und von einer Sprachausgabe lesbar.

  2. Alles per Tastatur

    Wechsel der Ebene, der Gemeinde, des Zeitschritts, Abspielen der Animation: Keine Interaktion erfordert die Maus. Die Tastenkürzel sind auf dem Bildschirm dokumentiert.

  3. Farbskalen auf Farbfehlsichtigkeit getestet

    Jede Skala wurde in Protanopie, Deuteranopie und Tritanopie simuliert. Die Werte bleiben unterscheidbar, und die Legende trägt immer die bezifferten Grenzwerte.

Seitenstruktur

Was ausgeliefert wurde.

  • Startseite – animierte Karte und Suche
  • /meteo/<Gemeinde>-<Postleitzahl> – 180 Gemeindeseiten
  • /climat/<Station> – 141 Seiten mit Normalwerten und Rekorden
  • /cartes/<Ebene> – Radar, Satellit IR und sichtbar, Blitze, UV …
  • /meteo-agricole – Böden, ET0, Wasserbilanz, Pflanzenschutz
  • /comprendre – 16 Erklärseiten und Glossar
  • /lune, /contact, Impressum, Datenschutz, Nutzungsbedingungen/AGB, Barrierefreiheit
Methode

Der Projektablauf.

  1. Datenmodell

    Wahl der öffentlichen Quellen (Open-Meteo, IGN), Normalisierung der Messgrößen, Kontingente.

  2. Kartografie

    Gitter, Interpolation, Farbskalen, Zeitregler.

  3. Agrarbereich

    ET0 nach FAO-56, Bilanz P − ET0, Gradtage, Delta T, Schwelle Beaufort 3.

  4. Programmatisches SEO

    Vier Vorlagen, Generierung der 358 Seiten, Sitemap, Verlinkung.

  5. Konformität

    Impressum, regulatorischer Vorbehalt zum Pflanzenschutz, Barrierefreiheit, DSGVO.

Fragen

Was man uns oft fragt.

Weil die schwerste Seite der Website eine Canvas-Karte ist: Die dominierenden Kosten entstehen beim grafischen Rendering, nicht bei der Aktualisierung eines Komponentenbaums. Ein Framework hätte JavaScript hinzugefügt, das auf oft per 3G verbundenen Smartphones geladen und ausgeführt werden muss, ohne irgendetwas zu lösen. Die Wahl ist nicht ideologisch – bei Projekten, deren Oberflächenzustand wirklich komplex ist, setzen wir auf React.

Nein, und die Seite sagt das ausdrücklich. Die Beratung zum Einsatz von Pflanzenschutzmitteln ist in Frankreich eine zulassungspflichtige, regulierte Tätigkeit. Die Website zeigt vorhergesagte Wetterbedingungen an und erinnert an die Windschwelle des Erlasses (arrêté) vom 4. Mai 2017; die Entscheidung liegt beim Betrieb und seinem zugelassenen Berater. Dieser Vorbehalt ist Teil der Konzeption, nicht des Impressums.

Für die Vorhersage aus den öffentlichen Modellen, die Open-Meteo bündelt, für die Grundkarte vom IGN. Beide Quellen sind in der Fußzeile genannt und verlinkt: Ein Datendienst, der nicht sagt, woher seine Zahlen stammen, ist nicht überprüfbar.

Weitere Referenzen

Zurück zum Portfolio

Derselbe Anspruch, für Ihre Website.

Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.

Termin vereinbarenPreise ansehen
Teilen