Skip to content
aYOUne
Not in your language

This page is not yet available in en. You're reading the de version.

Wetter-Seite im Schaufenster: die rechte Spalte fuer regionale Live-Daten

Die Wetter-Seite des Schaufensters nutzt heute ein Drittel ihrer Fläche. Diese Seite hält fest, was gemessen wurde, welche drei Entwürfe zur Wahl stehen und warum einer davon empfohlen ist. Entscheidung: pm.Decisions, Aufgabe FDQ2U3P.

Der Befund ist zweigeteilt

Querformat — die rechte Hälfte ist leer. Am ausgelieferten Demo gemessen, nicht an einer Nachbildung:

Scheibe belegte Fläche leeres Band rechts
1920×1080 32,7 % der Bühne 922 px = 48 % der Scheibe
3840×2160 32,8 % der Bühne 1844 px = 48 % der Scheibe

Derselbe Anteil auf beiden Auflösungen — es ist eine Eigenschaft des Aufbaus, kein Auflösungs-Artefakt.

Hochformat — die Seite schneidet ab, und niemand hat es gemeldet. Die Temperatur „24°" läuft 400 px über ihre Kiste hinaus, ohne Auslassungspunkte, ohne Fehlermeldung: rund 40 % des Helden sind nicht auf der Scheibe. „Regen" wird zu „Reg…".

Die Ursache ist übertragbar und trifft jede Seite dieser Familie: der Held bemisst sich an der Scheiben-Höhe (--ip-hero: 25vh), steht aber in einer Spalte, deren Breite davon nichts weiß. Im Querformat fällt das nicht auf, weil dort Breite übrig ist. Es ist dieselbe Klasse wie die Spritpreis-Kopfzeile (2026-09-14) und die Gruß-Karten (2026-09-15) — zum dritten Mal.

Die rechte Spalte ist deshalb nicht nur eine Verschönerung. Sie ist der Anlass, einen stillen Defekt zu beheben.

Der Rahmen, den alle drei Entwürfe teilen

Links bleibt die Wetter-Seite unangetastet — sie ist heute richtig, nur einsam. Rechts eine Spalte im Verhältnis 58 : 42, getrennt durch eine Haarlinie, nicht durch eine Kachel. Im Hochformat wird aus der Spalte eine untere Bank.

Die drei Entwürfe

1 „Ortstafel" 2 „Silhouetten-Karte" 3 „Wechselkachel"
Form Liste benannter Orte, je eine Zahl Orte in ihrer echten Lage EIN Ort, groß, im Wechsel
Einträge quer / hoch 3 / 2 3 / Rückfall auf Tafel 1 / 1
Lesbar auf 3–10 m gut mittel sehr gut
Braucht Bewegung nein nein ja

Variante 2 fällt an ihrer eigenen Bedingung. Eine Karte braucht Fläche. Im Hochformat ist die rechte Zone eine breite, flache Bank; drei Beschriftungen kollidierten dort nach zwei Umbauten immer noch um 32–84 px. Und im Querformat löst sie ihr Versprechen nicht ein: drei Silhouetten ohne Tal, Straßen oder Rahmen lesen sich auf 640 px Spaltenbreite nicht als Karte, sondern als verstreute Liste. Die Karte gehört auf eine eigene Seite — und genau die verlangt der Seen-Brief bereits.

Variante 3 fällt am Straßenraum. Sie braucht einen Wechsel, also Bewegung, und trafficSafeMode verbietet die auf jeder Fläche am Verkehr — auf den Think-Tank-Fenstern also. Zudem stehen zwei große Zahlen (24° und 18,4°) gegeneinander: Voss 2 fällt auf Seiten-Ebene.

Variante 1 trägt drei Orte ohne Bewegung, hält die Hierarchie (24° bleibt das Größte) und funktioniert in beiden Ausrichtungen. Empfehlung.

Vorrang — die Spalte ist ein Platz, kein Inhalt

  1. Amtliche Warnung ab Stufe 2 — das Band ersetzt die Spalte ganz, in DWD-Farben, mit DWD-Wortlaut. Ab Stufe 3 darf die Warnung zusätzlich eine eigene Seite belegen.
  2. Saison — Sommer: Wassertemperaturen der Seen. Winter: Skigebiete mit offenem Betrieb.
  3. Rückfall — die Drei-Tage-Aussicht aus dem Wetter-Feed, der immer da ist.

Die Spalte ist nie leer. Das ist der Zweck des dritten Rangs: ein toter Zulieferer darf kein leeres Drittel auf einer Schaufensterscheibe hinterlassen.

Die Saison kommt nicht aus dem Kalender, sondern aus den Daten: liegt ein Schnee-Feed mit mindestens einem offenen Gebiet vor, ist Winter; sonst entscheidet das Wasser-Feed. Ein Ort ohne Seen und ohne Skigebiet bekommt den Rückfall — ohne dass jemand etwas einstellt. Orte, Entfernungen und Warngebiet kommen aus dem Standort des Displays, nie aus dem Code.

Das Warnband

Ein Band, keine Kachel: es läuft an drei Seiten bis an die Scheibe. Eine amtliche Warnung mit Rand ringsum liest sich als eines von mehreren Angeboten; das ist sie nicht. Wortlaut, Ereignis und Gültigkeit stehen unverändert so da, wie der DWD sie liefert — eine amtliche Warnung, die man umformuliert, ist keine amtliche Warnung mehr. Dasselbe gilt für ihre Farbe.

Stufe Fläche Schrift Kontrast
1 gelb #ffeb33 #2b2200 12,90:1
2 orange #fa8c00 #1f1200 7,70:1
3 rot #e4262c #ffffff 4,55:1
4 violett #c60078 #ffffff 5,72:1

Farbleiter der Orte — nachgemessen, nicht gewählt

Die Silhouette sagt „das ist Wasser"; die Zahl trägt die Ablesung und bleibt Tinte. Trotzdem ist die Fläche informationstragende Grafik und braucht 3:1. Die erste Leiter fiel durch — #38b2a4 lag bei 2,27:1. Korrigiert gegen den hellsten Punkt des Verlaufs: Wasser kalt #16455e (9,73:1), mittel #1f7893 (4,78:1), warm #16867a (4,21:1); Ski offen #2a63a5 (5,81:1), teilweise #4e6f94 (4,95:1), geschlossen #6b7688 (4,35:1).

Abnahme

Voss — bestanden. Der stärkste Punkt ist Nummer 6: die Region steht namentlich auf der Scheibe, mit Entfernung. „Tegernsee 18,4°" ist ortskundig, wo „24° Regen" allgemein bleibt. Punkt 5 (Marke in 2 s) und Punkt 7 (CTA) liegen ausdrücklich außerhalb dieser Seite — die trägt das Betreiber-Band bzw. die Werbe-Karte, und jede Information erscheint genau einmal je Scheibe.

Ehrmann — bestanden. „18,4°" statt „18°" ist die feine Einheit und sagt zugleich „gemessen, nicht geschätzt". Das Greifbare (die Orte) steht rechts, das Abstrakte (das Wetter) links. Je Zeile eine Zahl — das Presenter's Paradox ist der Grund für drei Orte statt fünf. Rot bleibt ausschließlich der Warnstufe 3 vorbehalten. Und getextet ist vom Symptom des Gasts her: „Wassertemperatur", nicht „GKD-Messstelle".

Ein Wächter, der zuerst gelogen hat

Der Geometrie-Wächter meldete „keine Beanstandung", während die Seite sichtbar kaputt war. Er fragte nur nach rechts und unten — der Held lief nach oben hinaus, und „Stand 12:22" lag über „Wassertemperatur". Beides sieht keine Rand-Messung.

Er prüft jetzt vier Dinge: über die Scheibe hinaus in alle vier Richtungen, Text breiter als seine Kiste, Inhalt höher als sein Behälter, und zwei Geschwister, deren Kästen einander schneiden. Endstand: zehn Scheiben, keine Beanstandung, kleinste Schrift über dem Hausboden von 4vh.

⚠ Im selben Skript steckte ein zweiter Messfehler: ein reiner Hash-Wechsel lädt die Seite nicht neu, die Aufnahmen für Variante 2 und 3 zeigten deshalb zweimal Variante 1. Eine Aufnahme belegt, dass etwas gerendert wurde — nicht, dass es das Gemeinte war.

Was für die Umsetzung schon da ist

Der DWD-Konnektor existiert samt Warn-Vertrag, und LocalFeedKind trägt weather-warning und water-temperature bereits (Kaskade 106). Es fehlen: der Wasser-Konnektor, die Waldbrandgefahr am Warn-Feed, und im Spieler Typ, Wächter und Spalte. Belegte Null: die beiden Feed-Arten kommen in clients/ad-display null-mal vor, während die Positiv-Kontrolle snow-report zehnmal trifft — die Suche greift also.

Belege

Messungen, Aufnahmen und beide Checklisten Punkt für Punkt: .claude/reports/schaufenster/wetter-seite-ux-2026-09-16/ (MESSUNG.md, ist-*.png, mockup-*.png).

Work with this page

Ready-made instructions for your AI tool. Copy, paste, go — the AI fetches the content itself via the address in the text.

Summarise the steps for me The essentials, in the right order.
Read the following documentation by tolinax UG and work with it.

This page: https://ayoune.com/en/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
The complete collection: https://ayoune.com/en/docs/werbung.md

Summarise the content for me.

- First, in two sentences: what is this about?
- Then the steps in the order I need to take them.
- One line per step, in plain language.
- At the end: what I should have ready beforehand.

Leave out nothing I need in order to actually finish.
A note on sources:
- Every page of this documentation is available as Markdown (the same address with `.md`).
- A machine-readable overview of all public content is at `/llms.txt`.
- If you have access to the aYOUne MCP server, you can work against live data
  instead of this snapshot. If not, ignore this point.
Explain what I need this for What it is good for — and when it is worth it.
Read the following documentation by tolinax UG and work with it.

This page: https://ayoune.com/en/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
The complete collection: https://ayoune.com/en/docs/werbung.md

Explain to me what I need this for.

1. Which problem does it solve? In one sentence, from my point of view.
2. Three typical situations in which it genuinely helps me.
3. When I do NOT need it — that saves me time.
4. What I can do instead if it is not a fit.

Stick to what the source says. Where it gives nothing, say so openly instead
of guessing.
A note on sources:
- Every page of this documentation is available as Markdown (the same address with `.md`).
- A machine-readable overview of all public content is at `/llms.txt`.
- If you have access to the aYOUne MCP server, you can work against live data
  instead of this snapshot. If not, ignore this point.
Help me set this up Step by step, asking me as you go.
Read the following documentation by tolinax UG and work with it.

This page: https://ayoune.com/en/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
The complete collection: https://ayoune.com/en/docs/werbung.md

Walk me through the setup step by step.

- First tell me what I need to have ready (access, data, time).
- Then take me through ONE step at a time. Wait for my "next".
- For each step, say how I can tell that it worked.
- If something goes wrong, ask me for the exact message instead of guessing.

If the instructions leave a point open, tell me so rather than inventing it.
A note on sources:
- Every page of this documentation is available as Markdown (the same address with `.md`).
- A machine-readable overview of all public content is at `/llms.txt`.
- If you have access to the aYOUne MCP server, you can work against live data
  instead of this snapshot. If not, ignore this point.
Help me with a problem Narrow down the cause instead of guessing.
Read the following documentation by tolinax UG and work with it.

This page: https://ayoune.com/en/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
The complete collection: https://ayoune.com/en/docs/werbung.md

Help me narrow down a problem.

- First ask me what I observe and what I expected instead.
- From that, derive the most likely causes consistent with this source.
- For each cause, give me ONE test that confirms or rules it out.
- Order them so the cheapest test comes first.

Do not guess. If the source does not cover the problem, tell me where I should
look next.
A note on sources:
- Every page of this documentation is available as Markdown (the same address with `.md`).
- A machine-readable overview of all public content is at `/llms.txt`.
- If you have access to the aYOUne MCP server, you can work against live data
  instead of this snapshot. If not, ignore this point.
Explain it in plain words No jargon, from the ground up.
Read the following documentation by tolinax UG and work with it.

This page: https://ayoune.com/en/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
The complete collection: https://ayoune.com/en/docs/werbung.md

Explain the content so that someone without prior knowledge understands it.

- Start with the purpose: why does this exist at all?
- Explain technical terms in half a sentence on first use.
- One everyday comparison where it genuinely holds — none where it limps.
- At the end: the three things worth remembering.

Do not shorten by dropping conditions. A simplification that hides a
prerequisite is a false statement.
A note on sources:
- Every page of this documentation is available as Markdown (the same address with `.md`).
- A machine-readable overview of all public content is at `/llms.txt`.
- If you have access to the aYOUne MCP server, you can work against live data
  instead of this snapshot. If not, ignore this point.
A checklist to tick off To follow along while you do it.
Read the following documentation by tolinax UG and work with it.

This page: https://ayoune.com/en/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
The complete collection: https://ayoune.com/en/docs/werbung.md

Turn this into a **tick-off checklist** for practical use.

- Exactly one action per item, in the imperative.
- Order it so that no item depends on a later prerequisite.
- Prerequisites and pitfalls as indented sub-items.
- End with an acceptance step: how do I know everything is right?
A note on sources:
- Every page of this documentation is available as Markdown (the same address with `.md`).
- A machine-readable overview of all public content is at `/llms.txt`.
- If you have access to the aYOUne MCP server, you can work against live data
  instead of this snapshot. If not, ignore this point.

Was this article helpful?

👎 No (0)
Leave a comment