Larissa Weber Webauftritt

Larissa Weber ist Bürgermeisterin der Stadt Waldbröl im Oberbergischen Kreis. Ihre Website erklärt Bürgerinnen und Bürgern, welche Ziele sie für die Stadt verfolgt, welche Projekte laufen und wer sie persönlich ist.

Der bisherige Auftritt lief auf WordPress. Ziele, Projekte und Neuigkeiten waren dort über mehrere Seiten verteilt, und die Sitemap enthielt zusätzlich ältere SEO-Duplikate derselben Inhalte.

Die Inhalte mussten vollständig übernommen und neu geordnet werden: politische Ziele, kommunale Projekte von der Innenstadt bis zum Breitbandausbau, Vita und Kontakt. Aussagen mit inzwischen verstrichenen Planungsterminen durften dabei nicht als künftige Zusagen stehen bleiben.

Gleichzeitig sollte die Kundin nicht anhand von Skizzen entscheiden, sondern echte, klickbare Seiten vergleichen können. Nach dem Umstieg durfte außerdem keine der bisherigen Adressen ins Leere führen.

Die Seite lebt von Fotos aus der Stadt. Bilder sollten deshalb auch auf dem Smartphone scharf und schnell erscheinen, ohne dass das Layout beim Laden springt.

Aus dem bisherigen Auftritt entstand eine zentrale Inhaltsbasis: sechs Ziele, zum Entwurfsstand 25 Projekte in acht Bereichen, eine Vita mit vier Stationen sowie Kontakt, Impressum und Datenschutz. Darauf hat DuoByte vier vollständige Designrichtungen gebaut, jede mit allen Seiten, mobiler Navigation und einem schwebenden Umschalter, der die aktuelle Seite direkt im anderen Entwurf öffnet. Eine Vergleichsansicht stellte die Richtungen nebeneinander, und alle Entwürfe waren für Suchmaschinen gesperrt.

Gewählt wurde „Waldbröl im Blick“. Die drei anderen Richtungen wurden entfernt, die Seiten liegen jetzt unter sauberen Adressen wie /ziele und /projekte, und an die Kundin verschickte Entwurfslinks leiten dauerhaft dorthin weiter. Inzwischen sind 29 Projekte online, und ein Kontaktformular mit Eingangsbestätigung ersetzt die früheren mailto-Links.

Die Website basiert auf Next.js 16 mit App Router, React 19, TypeScript und Tailwind CSS 4. Alle Seiten werden beim Build statisch erzeugt; Inhalte und Routen liegen zentral in je einer Datei, was in der Entwurfsphase alle vier Designs synchron hielt. Für jede Seite entsteht beim Build außerdem ein eigenes Vorschaubild für soziale Netzwerke und Messenger aus Foto, Titel und Einordnung.

Bilder liegen als Originale im Projekt. Ein Skript begrenzt sie auf 2.000 Pixel Kantenlänge und komprimiert sie mit mozjpeg, ein zweites erzeugt 12 Pixel kleine Blur-Platzhalter, aus denen jedes Foto in seinen eigenen Farben eingeblendet wird. Next.js liefert die Bilder als WebP mit einjährigem Cache aus, und weil die Platzhalter nur in Server Components gelesen werden, landen sie nicht im JavaScript des Browsers.

Titel, Beschreibung, Canonical, Open Graph und JSON-LD für Person, Stadt und Seitentyp sind pro Seite gesetzt, dazu robots.txt, eine Bild-Sitemap und ein Web-Manifest. Ein Audit-Skript auf Basis von Playwright ruft alle Routen auf, prüft die Weiterleitungen der alten WordPress-Adressen und kontrolliert diese Angaben für jede Seite. In Desktop- und Smartphone-Breite prüft es zudem, dass jede Seite genau eine Hauptüberschrift hat und nicht horizontal überläuft.

Das Kontaktformular prüft alle Eingaben serverseitig, ignoriert Absendungen, die schneller kommen, als ein Mensch tippen kann, und begrenzt Anfragen pro Anschluss und insgesamt. Deployt wird über GitHub Actions nach Linting und Typprüfung: Der Server baut das Release, schaltet es atomar um und prüft den Dienst. Antwortet er nicht innerhalb von 60 Sekunden, wird automatisch das vorherige Release reaktiviert.

Die neue Website ist live und hat den WordPress-Auftritt abgelöst. Bürgerinnen und Bürger finden die sechs Ziele und jedes Projekt auf einer eigenen Seite, und Nachrichten erreichen das Büro über ein Formular mit Eingangsbestätigung.

Neue Projekte werden in der zentralen Inhaltsdatei ergänzt und erscheinen automatisch in Übersicht, Sitemap und strukturierten Daten. Alte WordPress-Links und die Links aus der Entwurfsphase führen weiterhin auf die richtige Seite.