Relaunch meteoschweiz.ch

Der Wetterbericht ist für viele Menschen ein täglicher Begleiter. Als Bundesamt investieren wir all unser Herzblut in die objektive und neutrale Beurteilung des Wetters und des Klimas.

Die neue Website der MeteoSchweiz ist zu 100% auf die Bedürfnisse unserer User zugeschnitten. Aktuelle Wetter- und Klimainformationen sind innovativ visualisiert und regen dazu an, sich weiter zu vertiefen. Die User können sich barrierefrei vom lokalen Wetterbericht bis hin zu wissenschaftlichen Analysen informieren. Die Inhalte erschliessen sich progressiv.

Wir veröffentlichen wesentlich mehr Mess- und Prognosedaten als zuvor. Alle Informationen sind wissenschaftlich fundiert und objektiv visualisiert.

Unsere komplexen Daten, Messwerte und Prognosen liefern wir mit performanten Schnittstellen direkt nach deren Erstellung aus. Durch die konsequente Entkoppelung der Systemkomponenten für die Datenverarbeitung und der Datenlieferung ist unsere Website auch bei grösster Datenlast hochverfügbar und ausfallsicher. Damit sind wir auch bei Naturereignissen hervorragend auf die Gefahren-Kommunikation vorbereitet.

• Zielgruppe: Alle
  Die neue Website fokussiert auf den relevanten Anwendungsfällen unserer User. Die Inhalte regen an, sich weiter in die Themen Wetter und Klima zu vertiefen.
• Täglicher Begleiter
  Wir vermitteln unseren Usern Sicherheit und Vertrauen. Als Bundesamt verpflichten wir uns der Objektivität und stellen den Usern mit der neuen Website erheblich mehr Mess- und Prognosedaten zur Verfügung.
• Realtime-Datenverarbeitung
  Wir halten die Daten stets aktuell. Dazu verarbeiten und aktualisieren wir auf der Website pro Sekunde ca. 4MB Daten (345 GB pro Tag).
• Hochverfügbar und zuverlässig
  Messwerte sowie Prognose-, Gefahren- und Klimadaten werden realtime ausgeliefert und sind durch die konsequente Entkoppelung der Systemkomponenten für die Datenverarbeitung und Datenauslieferung auch bei grösster Datenlast hochverfügbar und ausfallsicher. MeteoSchweiz hat den meisten regelmässigen Traffic von allen Websites der Naturgefahrenfachstellen des Bundes.
• Konsistentere User Experience
  Das neue Design System der Bundesverwaltung ist kombiniert mit einheitlich funktionierenden Datentools. In Usability Tests getestet.
• Mehr als Wetterprognose
  Die ausgefeilte Informationsarchitektur sieht vor, dass mit jedem vertiefenden Link die Komplexität der Inhalte etwas zunimmt. Wir erreichen damit eine stufenlose Komplexitätszunahme, sodass wir von Lai:innen über Fachpersonen bis hin zu Expert:innen alle Zielgruppen erreichen («Progressive Disclosure»).

Karten

Die Karten stellen komplexe Sachverhalte auf einfache Weise für die Allgemeinheit dar und sind das zentrale Informationsmittel von meteoschweiz.admin.ch. Aus diesem Grund haben wir den interaktiven Karten besondere handwerkliche Aufmerksamkeit geschenkt.

• Spezialisierte Karten-Komponente: Unsere für MeteoSchweiz spezialisierte React Karten-Komponente nutzt das Framework maplibre. Über 40 Karten und Diagramme wurden umgesetzt. Die Bibliothek an Karten und Diagrammen ist leicht und beliebig erweiterbar.
• Übersichtlich: Die Schweiz ist unabhängig vom Device oder vom Viewport initial stets vollständig sichtbar. Hierfür ermitteln wir die Ausdehnung umgebender Elemente im Seitenbereich und berechnen die Kartenhöhe und -breite entsprechend.
• Webgerechte Transformation von Daten: Die rohen Rasterdaten werden transformiert zu webgerechten Kartendaten, die im Frontend verwendet und dargestellt werden können.
• Layered: Verschiedenartige Layers werden kombiniert. So bestehen die interaktiven Karten aus Layern (Flächen, Linien, Symbole, Raster) zur Darstellung von Vektorkarten, Bildern und geoJSON-Daten.
• Interpolierte Vektorebenen: Rasterdaten werden vektorisiert (geoJSON) ausgegeben, sodass Besucher diese auf jeder Zoomstufe scharf sehen. Für Flächen mit Rasterdaten, die Potentialbereiche darstellen, mussten mit anspruchsvollen Algorithmen Polygone berechnet und zur Darstellung nach geoJSON transformiert werden.
• Optimierte Reliefkarten: Die Karten verwenden die Reliefs und Gewässer der Swisstopo Basis- und Vektorkarten. Wir haben die Originalkarten transparent gemacht und deren Kontrast optimiert. Dank der optimierten Reliefkarten haben wir mehr Freiheitsgrade beim Stacken der Karten-Layer und können schönere und einfacher lesbare Karten anbieten.

Lokale Messwert-Tachos

Wichtige Messwerte werden gut interpretierbar visualisiert als Tachos mit berechneten Zeigerpositionen und radialen Balken. Die Werte für Temperatur, Wind, Luftdruck werden elegant visualisiert durch Elemente mit berechneten Ausdehnungen im SVG-Format.

Lokalprognose-Diagramm

Ein zentraler Bestandteil der User Journey ist das Lokalprognose-Diagramm. Es beantwortet die Frage, wie das Wetter heute an einem bestimmten Ort wird.

Für jede der über 8000 Ortschaften, Berge und alpinen Standorte zeigt das Diagramm Modelldaten zu Wetter, Unwetter, Wind, Temperatur, Niederschlag, Sonnenschein.

Rundum aktuell

Alle produktspezifische Elemente wie Pills, Karten, Teasern und Diagramme sind dynamisch berechnet: Sie zeigen stets die aktuellen meteorologischen Informationen an. Im Browser werden diese Elemente automatisch und periodisch aktualisiert.

Für die Inhaltserfassung wird Magnolia CMS hybrid eingesetzt. Der Clou: alle Frontend-Komponenten sind so umgesetzt, dass der gleiche Code sowohl im CMS Editing Modus als auch in der Storybook Komponentenbibliothek und auf der Webseite rendert. Single Source of Truth!

• Komponentenbasiert: Die React Elemente sind in Webkomponenten verpackt, die als Custom Elements im Markup verwendet werden können. Die webbasierte Fachanwendung ist komponentenbasiert implementiert und nutzt moderne Browser-Standards.
• SSR: Die Webkomponenten werden auf dem Server vorgerendert. Dadurch sind die Inhalte durch alle Suchmaschinen einfach indexierbar.
• Design System: Die Webkomponenten wenden das für MeteoSchweiz definierte Design System an. Das Design System orientiert sich an webbloqs.io. Design System Variablen werden als CSS Properties definiert und via Fallback Chains im Style der Webkomponenten appliziert. Mit dem Design System Ansatz konnten die Webrichtlinien Bund konsistent umgesetzt werden.
• Barrierefrei: Die Webseite mit allen Diagrammen ist auf modernen Geräten barrierefrei bedienbar, inklusive Touch-, Mouse-, Key- und Screenreader-Unterstützung.
• Bandbreite schonend: Um eine tolle User Experience zu erhalten, achten wir darauf, gerätespezifische und cachebare Artefakte auszuliefern. Dynamische Artefakte wie Teaser-Bilder liefert das System in Viewport-spezifischen Renditions aus, die versioniert sind und erreichen damit eine hohe Cache Hit Ratio. Mit Webpack-Chunking und Lazy Loading von versionierten Inhalten und Scripts erreichen wir eine gute UX, schonen die Bandbreite und sparen natürlich Kosten.

Der selbstentwickelte Produktprozessor ist das Herz der Verarbeitung kontinuierlich angelieferter Rohdaten von über 40 unterschiedlichen Produkten für Wetter, Klima und Gefahrensituationen:

• Performant: Die Produkte werden in Priority Lanes unterschiedlich prioritär und parallelisiert verarbeitet, damit die produktspezifischen Aktualitätsanforderungen strikt eingehalten werden können. Der Produktprozessor verarbeitet täglich ca. 60 GB an Rohdaten zu Produktdateien, die im Frontend verwendet werden. Von der Belieferung bis zur Ausgabe vergehen damit jeweils maximal fünf Minuten.
• Versatil: Folgende Formate werden automatisch verarbeitet: Strukturierte Textformate, Bilder und binäre NetCDF- und HD5 Dateien. Daraus entstehen kombinierte Prognosen, Messwerte-, Karten-, Diagramm-, animierte Bild- oder Textprodukte.
• Cachebar: Die Produktdaten sind versioniert und damit gut cachebar

Je komplexer die Lösung ist, desto grösser ist das Risiko unerwünschter Effekte. Daher haben wir in der Deployment Chain in mehreren Schritten Quality Gates für unterschiedliche Aspekte eingerichtet. Der Code gelangt nur zum nächsten Schritt, wenn er ein Quality Gate besteht. Unsere Quality Gates sind:

• Unit Tests: Unit Test Abdeckung 85% bei der Produktverarbeitung (Java) und 90% im Frontend Code (React).
• Design Tests: Alle eingesetzten Frontend-Komponenten werden automatisiert im Browser gerendert und zu einem Bild transformiert. Das Bild wird visuell gegen die Baseline verglichen und Abweichungen können erkannt und gemanagt werden.
• Performance, SEO und Accessibility Tests: Automatisierte Tests mit Lighthouse geben bereits während der Entwicklung Feedback zu der Trendentwicklung bez. Performance und der Einhaltung von Best Practices bez. SEO und Accessibility.

Die Infrastruktur wird durch das Konzept Infrastructure as Code bespielt. Updates der Produktionsumgebung und Releases sind durch Knopfdruck innerhalb von fünf Minuten komplett durchgeführt.

Das System wird von Quatico als Software-as-a-Service in der Google Cloud betrieben. Der Kubernetes Cluster mit drei Knoten erlaubt die Erneuerung von Knoten, ohne dass ein Unterbruch durch Nutzer wahrnehmbar ist, z.B. bei Wartungsarbeiten.

• Hochverfügbar: meteoschweiz.admin.ch ist eine der meistbesuchten Webseiten der Schweiz. Bei Wetterextremen kann die Peak-Last mehr als 200'000 Visitors pro Tag betragen. Damit sich die Bevölkerung auch in Ausnahmesituationen jederzeit verlässlich informieren kann, ist der Betrieb hochverfügbar ausgelegt. Die webbasierte Fachanwendung erfüllt dank teilweiser Dreifach-Redundanz der Systemkomponenten und Skalierbarkeit des Google CDN eine Uptime von 99.95%.
• Resilient: Der operative Betrieb ist resilient gegenüber Ausfällen aller verbundenen Drittsysteme inklusive einem Unterbruch des Dateneingangs, der Blog-Schnittstelle, des Identitätsmanagements, von Dritt-Applikationen und von Kubernetes-Knoten.
• Stabile Authoring Experience: CMS Editoren können Produktkomponenten in Applikations- oder Seitenbereichen platzieren. Da das CMS von der Datenaufbereitung für die Produktdaten entkoppelt ist, werden die CMS Editoren nicht beeinträchtigt bei der Bearbeitung der Inhalte.
• Stabilität durch Pushen von Produktdaten: Der Produktprozessor verarbeitet neue Produktdaten im eigenen Tempo und pusht sie weiter zum Produktdaten Storage. Dort holt sie der Webserver ab. Dadurch dringt keine Last von Besuchern zum Produktprozessor durch. Wenn der Produktprozessor wider Erwarten ausfällt, dann werden die bereits verarbeiteten Daten weiterhin angezeigt. Währenddessen startet Kubernetes den Produktprozessor in einem neuen Pod neu.
• Stabilität durch Pushen von Inhalten: Ein spezialisierter Crawler im CMS statifiziert neue redaktionelle Inhalte im eigenen Tempo und legt sie im Dateisystem ab. Dort holt sie der Webserver ab. Dadurch dringt keine Last von Besuchern zum CMS durch und das CMS läuft nicht Gefahr überlastet zu werden. Sogar bei einem allfälligen Ausfall des CMS werden den Besuchern weiterhin Inhalte angezeigt. Allfällige Verarbeitungsblockaden und Unterhaltsarbeiten sind sogar während Peak-Zeiten für Besucher unbemerkbar.
• Geringe Latenz bei extremer Last: Das Cloud CDN skaliert adaptiv und sorgt für den entsprechenden Throughput bei aussergewöhnlichen Wetter- und Gefahren-Ereignissen. Das CDN fängt die Hauptlast von Besuchern ab.

• Zugangssicherheit: Die Identity Management Hoheit liegt bei der MeteoSchweiz (Bundeslogin eIAM und Keycloak). MeteoSchweiz regelt darüber bequem, wer welche Rollen und Berechtigungen im CMS hat. Es werden keine schützenswerten Daten im System gespeichert.
• DDOS, WAF: Google Cloud Armor schützt die webbasierte Fachapplikation vor Denial-of-Service- und Webangriffen. Zudem mindert Google Cloud Armor die OWASP-Top-10-Risiken.
• Monitoring, Alerting: Die Systemkomponenten werden permanent überwacht. Wenn ein Health Check fehlschlägt, dann wird ein Alarm ausgelöst und die verantwortlichen Stellen werden informiert. Wenn z.B. Produkte nicht zeitnah aktualisiert werden, dann werden die verantwortlichen Stellen automatisch informiert:
  • Warnungen aufgrund von Unterbrüchen der Datenbelieferung oder falscher Formatierung gelangen an den Absender.
  • Warnungen bei korrekter Lieferung, aber fehlerhafter Verarbeitung oder Ausgabe gelangen direkt an das Quatico Operations Team.
• Logging: Damit Vorgänge nachvollziehbar analysiert werden können, loggen die Systemkomponenten wichtige Vorgänge. Insgesamt fallen ca. 40 GB allgemeine Logs pro Monat plus 60 GB Access Logs pro Tag an. Die allgemeinen Logs können mit Google Log Analytics analysiert werden.
• Sicherheit durch Push-Mechanismen: Die implementierten Push-Mechanismen bieten Vorteile aus Security-Sicht, da keine potenziell bedrohlichen Requests von äusseren Systemkomponenten auf innere Systemkomponenten gelangen.