Seit seiner Gründung 1987 setzt das Haus der Geschichte Baden-Württemberg (HDGBW) neue Maßstäbe bei der Präsentation und Vermittlung von Landesgeschichte.
Es zeichnet sich durch zahlreiche dezentrale Ausstellungen, vielseitige Aktivitäten im ganzen Land und seit 2002 durch ein eigenes Haus in Stuttgart aus. Dabei erzählt es die Geschichten der Länder Baden, Württemberg und Hohenzollern seit der französischen Revolution.
Während die Geschichten unveränderbar sind, entwickelt sich das Haus der Geschichte stets weiter – mit einem frischen Blick auf historische Themen. Und aktuell zudem mit einem neuen Corporate Design und einer dazu passenden Website mit neuem Konzept, sowie Webdesign und Entwicklung von NLDX.
Unsere Highlights des Projekts
Beim Aufbau der Museumsseite haben wir einige der technischen Möglichkeiten von WordPress erfolgreich ausgeschöpft. Das Ergebnis ist eine optisch ansprechende Seite mit einer optimalen User Journey für die Besucher:innen. Die Website kann von den Redakteur:innen flexibel gestaltet werden und behält zugleich den roten Faden des Website-Konzepts stringent bei. Drei Hauptanforderungen sind dabei besonders zu betonen:
- Die unterschiedlichen Ausstellungsorte wurden in das Design der Website integriert.
- Wir haben den zentralen Ort für die wichtigsten Informationen unter „Besuch planen“ wiederkehrend auf jeder Seite integriert.
- Alle Events des Haus der Geschichte finden in unserem interaktiven Veranstaltungskalender Platz.
Die (digitale) Geschichte der Ausstellungsorte
Neben der Dauerausstellung und regelmäßigen Sonderschauen im zentralen Museum in der Konrad-Adenauer-Straße in Stuttgart zählen verschiedene Ausstellungsorte zum Haus der Geschichte Baden-Württemberg – u.a. der Erinnerungsort Hotel Silber, die Ehemalige Synagoge Haigerloch und die Stauffenberg Erinnerungsstätte.
Mit dem Relaunch der Website sind auch die Ausstellungsorte in das einheitliche Design des HDGBW eingezogen, ohne dabei ihre individuelle, authentische Identität zu verlieren. Das konnten wir durch individualisierte Farbschemen je Ausstellungsort realisieren, sodass eine einheitliche User Experience entsteht und die Redakteur:innen der Museen zugleich Gestaltungsfreiheiten haben, um die Landingpages entsprechend zu personalisieren.
Technisch bedeutet das, dass die Ausstellungsorte als Custom Post Type umgesetzt wurden. So können Hausfarben, Öffnungszeiten, Kontaktdaten, etc. einzeln im Backend verwaltet werden. Diese Elemente erscheinen einheitlich auf allen Seiten des Ausstellungsorts: im Header, unter Service und Kontakt sowie im „Besuch planen“-Element.
Wie Sie ganz easy Ihren „Besuch planen“
Für ein Museum gibt es ein zentrales Ziel: Besucher:innen, die den Ort zum Leben erwecken. Daher hatte das HDGBW bereits auf der vorherigen Website das Element „Besuch planen“ integriert. Mit dem Relaunch der Seite haben wir diese Funktion weitergedacht und verfeinert: „Besuch planen“ beinhaltet tagesaktuelle Daten wie die heutigen Öffnungszeiten, Ausstellungen und Preise. Diese Informationen können vom Redaktionsteam ganz einfach zentral im Backend verwaltet werden – sowohl für das Hauptmuseum wie für die weiteren Ausstellungsorte.
Einblicke in den Veranstaltungskalender
Um Veranstaltungen übersichtlich und attraktiv darzustellen, haben wir uns technisch einem ganz ähnlichen Prinzip bedient, wie es sich bereits mehrfach bewährt hat, unter anderem auf der Seite des StadtPalais – Museum für Stuttgart und der IBA’27 Festival Seite.
Wir haben einen zentral befüllbaren Veranstaltungskalender für alle Ausstellungsstätten implementiert. Dieser ist Echtzeit filterbar, Zielgruppen-freundlich und jederzeit erweiterbar. So können User sowohl nach Datum und Thematik als auch nach Veranstaltungsformat und Museum filtern und finden in Sekundenschnelle die gewünschten Events. Außerdem können die einzelnen Veranstaltungen selektiv auf jeder beliebigen Unterseite ausgespielt werden. Die Redakteur:innen wählen im Backend dafür entweder alle oder gezielt für einen Themenbereich die entsprechenden Events aus.
Durchdachtes Webdesign und technische Finesse
Gemeinsam mit stapelberg&fritz haben wir das neue Corporate Design des Museums in die digitale Welt übersetzt. Dafür haben wir den Webdesign-Entwurf final ausgearbeitet, auf technische Machbarkeit geprüft und ihn in unser individualisiertes WordPress Theme integriert. Dabei haben wir zum einen eine klare Mobile-First-Strategie umgesetzt. Zum anderen haben wir sowohl das Farbsystem als auch die Typografie auf Barrierefreiheit nach WCAG 2.0 Level AA überprüft. Diese Webdesign-Arbeitsschritte zählen für uns zum Standard, um zu garantieren, dass wir das Screendesign, das das Haus der Geschichte Team vorab gesehen hat, später auch genau so technisch umsetzen können.
Eine weitere Besonderheit sind die von uns im Backend vordefinierten Datenfelder: In Abstimmung mit dem HDGBW haben wir festgelegt, wie die Darstellung im Frontend vereinheitlicht und vereinfacht werden kann. So gibt es unter anderem eine einheitliche Regelung dazu, wie Datumsangaben und Preise (€ vs. Euro) ausgespielt werden, ohne dass die Seite Einbußen beim Design hinnehmen muss.
Außerdem haben wir die neue Website des HDGBW mit einem integrierten Formularsystem, das bequem per Drag & Drop bedient werden kann, und mit einem geschützten Downloadbereich für Pressematerialien ausgestattet. All das basiert auf unserem Standard-IT-Sicherheitskonzept, für das wir einen Maßnahmenkatalog speziell für die hdgbw.de dokumentiert haben.
Zu Ende gedacht – bis zum Newsletter
Passend zum Design der Website haben wir ein E-Mail-Newsletter Template für den Versand über den Anbieter CleverReach gestaltet und entwickelt. Das Haus der Geschichte kann dadurch – ähnlich wie bei der Website – aus verschiedenen Modulen auswählen und so jeden Newsletter individuell und zugleich einheitlich im Design zusammenstellen und versenden. Die Charakteristika der einzelnen Ausstellungsorte haben wir hier ebenfalls berücksichtigt.
NLDX Leistungen
- ENTWICKLUNG Custom WordPress Theme, Integration der Ausstellungsorte, Eventkalender mit Filter, dokumentiertes IT-Sicherheitskonzept
- SCREENDESIGN Erweiterung des Corporate Design, Mobile-First-Strategie, Ausarbeitung CSS-Framework, CMS-Komponenten und UI-Kit
- SEO Technischer Qualitätsstandard
„Herzlichen Dank im Namen des Hauses der Geschichte Baden-Württemberg für die hervorragende Arbeit …
… das Go Live hat reibungslos funktioniert. Und wir sind sehr glücklich mit unserer neuen Website. Sie hat ein tolles Design und sieht sehr gut auf dem Desktop sowie auf dem Smartphone aus. Dabei haben Sie es geschafft, unser neues Corporate Design mit den Anforderungen an ein zeitgemäßes Webdesign zu verbinden.
Wir haben wunderbare Funktionen und Elemente wie die Veranstaltungselemente dazu gewonnen, die unsere redaktionelle Arbeit wesentlich erleichtern. Wir sind sehr zuversichtlich, dass sich die Mühe und der Einsatz auch in den Bereichen Barrierefreiheit, IT-Sicherheit und SEO auszahlt. Insgesamt kommt uns die Arbeit im Frontend und die Flexibilität mit dem CMS sehr entgegen.
Vielleicht noch wesentlicher ist, dass die neue Website in hohem Maße auf die Bedürfnisse unserer Besucherinnen und Besucher ausgerichtet ist. Ein Schmuckstück davon ist das neue Besuch planen-Element. Wir sind überzeugt, dass unsere Besucherinnen und Besucher nun schneller zu den gesuchten Informationen gelangen und sich effizienter auf den Museumsbesuch vorbereiten können.“
Stefan Reichert
Digitalmanagement HDGBW
Custom WordPress Theme
Ein maßgeschneidertes, von uns selbst programmiertes Website-Template, das ganz individuell auf die Bedürfnisse von Kunden-Websites zugeschnitten wird und jederzeit erweiterbar ist. Vergleichbar mit einem maßgeschneiderten Kleidungsstück.
Mobile First
Eine Strategie, in der Design und Entwicklung einer Website für mobile Endgeräte optimiert sind, sprich die Darstellung auf dem Smartphone steht an erster Stelle. Da ein Großteil der Nutzer:innen überwiegend mit dem Smartphone oder Tablet im Internet surft.
WCAG 2.0
Mit den Web Content Accessibility Guidelines (WCAG) 2.0 aus dem Jahr 2008 sollen Websites für Menschen mit Behinderungen wesentlich besser zugänglich und nutzbar sein = wahrnehmbar, bedienbar, verständlich, robust. Die Angabe zum Level (z.B. Level AA) beschreibt die verschiedenen Barrierefreiheitsstufen.
UI-Kit
Web- und Mobile-optimierte Schriften, Buttons, sprich das gesamte Design System mit User-Interface-Elementen.