Webseite Lohr.de Relaunch

KMU · Kommunen & Verwaltung

Relaunch von lohr.de

Die Stadt Lohr am Main hat ihr digitales Bürgerportal lohr.de mithilfe von Payload CMS und Next.js grundlegend neu entwickelt. Die neue Headless-Architektur basiert auf PostgreSQL sowie Docker und ersetzt ein gewachsenes Altsystem. Mehr als 1.200 URLs wurden strukturierten Umleitungsregeln unterzogen, um SEO-Verluste beim Wechsel zu vermeiden.

Das System erfüllt die Vorgaben für Barrierefreiheit nach BITV 2.0 und setzt auf Datenschutz durch das Unterbinden externer Anfragen. Durch den Verzicht auf Marketing-Tracker und Cookies ist kein Cookie-Banner erforderlich. Zudem stehen der Redaktion 51 modulare Bausteine zur flexiblen Seitengestaltung ohne Drittanbieter-Plugins zur Verfügung.

Case Study: Relaunch von lohr.de – Modernes Headless-Government mit Payload CMS & Next.js

  • Kunde: Stadt Lohr a. Main (Amt 6)
  • Leistung: Konzeption, Neuentwicklung, Datenmigration & technisches Projektmanagement
  • Tech-Stack: Payload CMS 3, Next.js 16, React 19, PostgreSQL 17, Docker / Mittwald Container-Stack
  • Fokus: Barrierefreiheit (BITV 2.0 / WCAG AA), Datenschutz (Zero-Tracking), Performance & Brückenmigration

Die Ausgangslage: Gewachsenes Altsystem trifft auf neues Corporate Design

Kommunale Webportale stehen heute vor einem massiven Spagat: Einerseits verlangen Bürgerinnen, Bürger und Unternehmen zeitgemäße, schnelle und barrierefreie digitale Services. Andererseits schleppen historisch gewachsene Systeme über Jahre hunderte Alt-URLs, unstrukturierte Inhalte, Medienberge und datenschutzrechtliche Altlasten mit sich herum.

Vor genau dieser Herausforderung stand auch die Stadt Lohr a. Main: Ein anstehender Relaunch im frischen Markendesign („Die Schönste im ganzen Land.“) erforderte nicht nur ein neues Gesicht, sondern ein zukunftssicheres, wartungsarmes technisches Fundament.

Die Kernfragen lauteten:

  1. Wie transformiert man über 800 Alt-Seiten und tausende Medien, ohne SEO-Abstürze oder 404-Wüsten zu riskieren?
  2. Welches CMS bietet Redakteurinnen und Redakteuren moderne Usability ohne die typische Plugin- und Wartungshölle?
  3. Wie lassen sich strenge Vorgaben für Barrierefreiheit (BITV 2.0) und Datenschutz (DSGVO) im Behördenumfeld kompromisslos einhalten?

Die Antwort: Der strategische Wechsel auf Payload CMS in Kombination mit Next.js.

Warum Payload CMS? Schlank, typsicher und unabhängig

Klassische monolithische CMS-Lösungen bringen im kommunalen Umfeld oft erhebliche Wartungsaufwände, starre Plugin-Hierarchien und Performance-Einbußen mit sich.

Payload CMS (TypeScript-native) bot für dieses Projekt entscheidende architektonische Vorteile:

  • Headless & Full-Stack in einem Prozess: Durch die tiefe Integration mit Next.js teilen sich Frontend und Backend denselben TypeScript-Code, Typen und dieselbe Laufzeitumgebung.
  • Keine Plugin-Falle: Formularverwaltung, Redirect-Steuerung, Suchindexierung und SEO-Bausteine wurden gezielt und maßgeschneidert ohne Drittanbieter-Plugins umgesetzt – volle Kontrolle über Codebasis und Lebenszyklen.
  • Zero Vendor Lock-in: Datenhaltung in relationalem Standard-PostgreSQL und lokale Medienspeicherung in Standard-Container-Images sorgen für maximale Portabilität.
  • Hervorragende Redaktions-UX: Ein klar strukturiertes, aufgeräumtes Backend mit Voransicht per Klick, automatischer URL-Pfad-Vergabe und maßgeschneiderten Inhaltsbausteinen (Blocks) für über 50 Seitentypen und Module.

Technische Highlights & Meilensteine

1. Die „Brücken-Architektur“: 100 % SEO-Sicherheit beim Cutover

Ein Relaunch scheitert nicht am Design einer neuen Seite, sondern an der Zerstörung historischer Pfade. Bei über 1.200 inventarisierten Alt-URLs wurde ein zweistufiges Modell etabliert:

  • Deterministischer Umleitungskatalog: Vollständiges internes Mapping aller migrierten Pfade via sauberer 301/308-Weiterleitungen (Kettenplättung inklusive).
  • Temporäre Subdomain-Brücke (old.lohr.de): Nicht sofort in Phase 1 überführte Altinhalte und Schulsubdomains wurden über temporäre HTTP 307-Redirects abgefangen. So blieben wichtige Bürgerservices und Informationsseiten unterbrechungsfrei erreichbar, während Suchmaschinen-Caches nicht mit fehlerhaften Permalinks verunreinigt wurden.

2. Datenschutz by Design: Null Drittland-Transfer, keine Banner nötig

Behördenwebsites dürfen keine Zweifel beim Datenschutz aufkommen lassen. Das neue Portal arbeitet nach strikten Prinzipien:

  • Zero External Requests: Keine externen CDNs, keine Google Fonts oder YouTube-Embeds zur Laufzeit – alle Schriften, Assets und Scripts werden lokal vom Server ausgeliefert.
  • Kein Cookie-Banner erforderlich: Da weder Marketing-Tracker noch Third-Party-Cookies eingesetzt werden, entfällt der Consent-Banner für Besucherinnen und Besucher vollständig.
  • Cookiefreies Matomo: Anonymisierte, lokale Reichweitenmessung ohne Setzen von Tracking-Cookies.
  • Send-Only-Formular-Engine: Statt sensible Bürgerdaten in US-Cloud-Tools (wie Formular-Apps oder Monday.com) oder dauerhaft in der CMS-Datenbank zu speichern, validiert ein eigens gebauter nativer Formular-Builder Anfragen serverseitig, versendet sie über gesicherte SMTP-Routen direkt an die zuständigen Fachstellen und verwirft sie danach sofort.

3. Barrierefreiheit von Beginn an (BITV 2.0 / WCAG AA)

Barrierefreiheit war kein nachträgliches Add-on, sondern Kernbestandteil der Architektur:

  • Atomic Design mit Kontrastgarantie: Farbsysteme und Typografie-Tokens stellen sicher, dass alle Farbwelten (Rathaus, Tourismus, Wirtschaft, „Leben in Lohr“) die strengen Kontrastvorgaben (mind. 4,5:1) einhalten.
  • Batch-Kuration von Bildmedien: Über 1.200 Alt-Bilddateien wurden strukturiert aufbereitet, maschinell/teilautomatisiert mit BITV-konformen ALT-Texten versehen und in ein modernes WebP-Format überführt (~68 % Ladezeit-Ersparnis).
  • Semantische UI-Struktur: Durchgängige Screenreader-Unterstützung, strikte Landmark-Ebenen, saubere Überschriften-Hierarchien und optimierte Tastaturfokussierung.

Zahlen & Fakten zum Launch

  • 22 strukturierte Daten-Set Systeme nach Schema.org & 51 Inhaltsbausteine im modularen CMS-Kern abgebildet
  • > 1.200 URLs im Umleitungskatalog inventarisiert und ohne Kettenbrüche aufgelöst (100 % Erfolgsquote der internen Ziele)
  • > 1.200 Bildmedien für Barrierefreiheit kuratiert und vollständig auf Next-Gen WebP migriert
  • 0 externe Requests – vollständige digitale Souveränität und maximale DSGVO-Konformität
  • Container-Infrastruktur mit PostgreSQL 17 auf zertifizierten deutschen Servern.

Fazit

Der erfolgreiche Relaunch von lohr.de zeigt, dass moderne Web-Technologien aus der Headless- und Next.js-Welt reif für den anspruchsvollen kommunalen Sektor sind. Mit Payload CMS profitiert die Stadtverwaltung von einem intuitiven, schnellen Redaktionssystem, während Bürgerinnen und Bürger ein responsives, barrierefreies und datenschutzkonformes Portal erleben.

Planen Sie den Relaunch Ihres kommunalen Webportals oder suchen nach einer zukunftssicheren CMS-Architektur? Sprechen Sie uns an!