Nachhaltiges Webdesign für Designhotel & CongressCentrum

Von Mai bis September 2025 haben wir die Website des Wienecke XI. komplett neu aufgebaut – unter laufendem Hotelbetrieb, ohne Wartungsmodus. Die bestehende Website war technisch veraltet, nicht barrierefrei und passte nicht mehr zu einem Hotel, das sich als nachhaltiger Betrieb positioniert. Das neue System: 0,06 g CO₂ pro Seitenaufruf, Barrierefreiheit nach EN 301 549, eine durchdachte Struktur für Hotel und Kongresszentrum. Das CMS ist so aufgebaut, dass das Hotelteam Inhalte in fast
allen Bereichen selbst pflegen kann – über strukturierte Eingabemasken, ohne ins Frontend eingreifen zu müssen.

Custom Post Types für Zimmer und Tagungsräume

Zimmerkategorien

140 Zimmer in fünf Kategorien – teils mit fast identischer Ausstattung. Statt Möbel-Listen zu wiederholen, haben wir die Standard-Ausstattung in eine gemeinsame Section gezogen und jede Kategorie über ihren Use-Case differenziert: Das Einzelzimmer als Rückzugsort für Solo-Reisende, das Zweibettzimmer für Geschäftsreisende – gleicher Raum wie das Doppelzimmer, aber eine andere Story.

Die Reihenfolge auf der Übersichtsseite: bewusst Einzelzimmer zuerst, nicht die Junior Suite. Ohne sichtbare Preise hätte „Premium first” den Weg zu den meistgebuchten Kategorien verlängert. Von der Zimmerübersicht führt der Buchungsprozess zur externen Booking Engine.

Tagungsräume

Über 15 Tagungsräume, 19 Ausstattungsmerkmale, 7 Bestuhlungsvarianten mit raumspezifischen Kapazitäten. Die Herausforderung: ein Datenmodell, das diese Komplexität abbildet, ohne im Frontend zu erschlagen.

Die Lösung: Ausstattungsmerkmale fachlich gruppiert (Medientechnik, Präsentationstechnik, Bühne & Event, Basis-Infrastruktur). Angezeigt wird nur, was ein Raum tatsächlich hat. Bestuhlungsvarianten als kompakte Mini-Liste statt großflächiger Cards – nach mehreren Iterationen der schlankste Weg, die Information unterzubringen.

Barrierefreie Website nach WCAG 2.1, Stufen A und AA

Lighthouse Accessibility Score: 100. Kein Zufallstreffer – Barrierefreiheit war ab dem ersten Wireframe eingeplant, nicht nachträglich draufgesetzt. Semantisches HTML, tastaturnavigierbare Elemente, Skip-Links, geprüfte Kontrastwerte. Dazu ein Barriere-Melde-Formular, über das Nutzer:innen Zugangsprobleme direkt an das Hotel melden können.

Die Website erfüllt die Anforderungen der EN 301 549 und ist konform mit dem Barrierefreiheitsstärkungsgesetz (BFSG) – Stand: Launch September 2025.

Nachhaltiges Webdesign trotz Bilderreichtum

Hotel-Websites leben von Bildern. Gäste wollen sehen, wo sie schlafen, wie der Tagungsraum aussieht, ob die Terrasse einladend ist. Gleichzeitig treiben große Bilddateien den Energieverbrauch nach oben. Unser Ansatz: optimierte Bildgrößen für Retina-Displays, konsequentes Caching, reduzierte DOM-Komplexität.

Das Ergebnis: 0,06 g CO₂ pro Seitenaufruf, Carbon Rating A, sauberer als 90 % aller getesteten Websites. Desktop: Lighthouse Performance 100, Speed Index 0,5 s. Mobil: 97 bei 1,4 s Speed Index.

Nicht ganz reibungslos: Der KI-Chatbot mit WhatsApp-Anbindung war von der alten Website zu übernehmen. Sein Script kollidierte mit dem Caching-Plugin und dem Cookie-Consent – auf mobilen Geräten funktionierte die Navigation zeitweise nicht. Die Ursache: pauschales JavaScript-Deferring. Die Lösung: gezielte Ausnahmen für einzelne Scripts statt globaler Verzögerung.

Regionale Designsprache

Das Wienecke XI. hat eine Motivtapete mit skizzenhaften, detailreichen, partiell kolorierten Zeichnungen von Hannover-Wahrzeichen – Nanas, Kröpcke-Uhr, Herrenhäuser Gärten, das Alte Rathaus. Die lagen nur als Bitmap vor. Für die Website haben wir einzelne Motive freigestellt, zugeschnitten und web-optimiert.

Die Motive sind nicht zufällig verteilt: Das Hanomag Kommissbrot taucht bei mobilen Themen auf, der Leibniz-Keks bei kulinarischen Inhalten, Leibniz und die Drei warmen Brüder beim Thema Nachhaltigkeit. Die Herausforderung: Illustrationen integrieren, ohne vom Inhalt abzulenken. Gelöst über reduzierte Deckkraft und verzögerte Entry-Animationen – die Motive erscheinen erst, wenn der umgebende Content bereits steht.