Zum Hauptinhalt springen Skip to page footer

Responsive Webdesign, Barrierefrei, TYPO3 CMS

Projekt: Wiener Hofmusikkapelle

Webdesign der Startseite Desktopansicht

Desktop Darstellung der Startseite

Webdesign der HMK auf dem iPhone X

Responsive Webdesign auf dem iPhone

Webdesign Programmansicht

Einfache, übersichtliche Darstellung der Konzertermine

Webdesign Programm-Detailansicht

Detailansicht eines Programmpunktes

Responsive Webdesign auf dem iPad

Das Webdesign auf dem iPad ist nur geringfügig reduziert, es stehen alle Funktionen ohne Burger Menu zur Verfügung

  • Grafisches Konzept
  • Barrierefreies Webdesign
  • TYPO3-Umsetzung
  • Umsetzung Barrierefreiheit
  • Umsetzung Konzertprogramm

Die Wiener Hofmusikkapelle ist eine der weltweit ältesten Institutionen ihrer Art. Als Geburtsstunde gilt der 7. Juli 1498 als Kaiser Maximilian I. die Anstellung eines Kapellmeisters, 2 Bassisten und 6 Sängerknaben anordnete. Die erste urkundliche Erwähnung der Wirkungsstätte der Wiener Hofmusikkapelle, der Hofburgkapelle, stammt sogar schon aus dem Jahr 1296. 

Die Beauftragung beinhaltete ein komplettes Redesign mit Integration des neuen Logos der Hofmusikkapelle, das vom Bundeskanzleramt Inhouse entwickelt wurde. Die Programmdarstellung, das Kernstück der Website, sollte erheblich übersichtlicher und benutzerfreundlicher werden, natürlich modern und barrierefrei. Eine kostengünstige Projektwartung und möglichst wenig technischer Overhead zur bestehenden Infrastruktur waren Voraussetzung.

Konzept und Webdesign

Die Grafik des Projektes wurde von Pixel Melange in Anlehnung an die Bundes Web-CI entwickelt. Eine grafische Abweichung zu den anderen Bundes-Websites mit weniger künstlerischem Background war erwünscht, dennoch war die Orientierung an der Bundes-Web-CI erfoderlich. Der "Spagat" beim Webdesign musste erarbeitet werden:

Die Startseite begrüßt den Benutzer mit qualitativ hochwertigen Fotos von der Hofburgkapelle und von den Wiener Sängerknaben. Bildwechsel-Elemente, sogenannte "Slider" wirken schnell nervös und unruhig. Damit der Fokus nicht zu unruhig wird, wird das Bildmotiv bei jedem neuen Aufruf der Startseite per Zufall ausgewählt. Die edle Optik braucht keine Hektik – es wird nicht übergeblendet oder über einen womöglich aufdringlichen Effekt gewechselt sondern bleibt statisch bis zum nächsten Aufruf. 

Das Quadrat des Logos wurde als Leit-Element eingesetzt. Es transportiert sowohl auf der Startseite als auch im Konzert-Programm die wichtigsten Informationen zu den Konzertterminen. Sogenannte "Click to Action"-Buttons führen zur Kartenbestellung. Wenige, wichtige News können auf der Startseite präsentiert werden. Auch hier galt: weniger ist mehr und führt zu einem besseren, weil ruhigeren und benutzerfreundlicheren Endergebnis. Die Contentseiten über Ensemble und Geschichte des Hauses sind aufgelockert mit Bild-/Textelementen gestaltet und wurden zum Teil durch Sprungmarken und Direktlinks zu den Inhaltsblöcken gegliedert.  

Webdesign tauglich für Mobil- und Tabletgeräte

Das Projekt sollte natürlich auch auf Tablet- und Mobilgeräten optimal funktionieren. Responsive Webdesign mit schnellen Ladezeiten. Durch das realisierte "Mobile First"-Webdesign steht der volle Funktionsumfang auf allen modernen Endgeräten zur Verfügung. 

Technische Umsetzung

Die Basis des Projektes bilden das TYPO3 CMS. Die technische Infrastruktur war durch die Projekte "Kalendarium.gv.at" sowie "100 Jahre Republik" bereits vorhanden. TYPO3 CMS ist Multisite- und Multidomainfähig, die Rechtestruktur kann sehr genau konfiguriert werden und ermöglicht vollständig getrennte Arbeitsbereiche für die Mitarbeiter der Hofmusikkapelle und das Web-Redaktionsteam des Bundeskanzleramts. Die Folge sind wesentlich niedrigere Wartungskosten für die Einzelprojekte sowie ein erheblich geringerer Supportumfang, da das Redaktions-Know-How bereits vorhanden war. Die Technik wir von uns laufend gewartet und überwacht, der Mehraufwand für eine weitere Website ist geringfügig. 

Das Frontend wurde "Mobile First", Responsive und in sehr hohem Maß barrierefrei umgesetzt. 

Barrierefrei

Das Projekt wurde weitestgehend WAI-AA-konform barrierefrei umgesetzt. Ein hoher Testaufwand und eine möglichst lückenlose Qualitätssicherung sind neben entsprechendem Know-how für eine hohe Qualität im Bereich Barrierefreiheit zwingend. Pixel Melange greift auf eine langjährige Erfahrung mit barrierefreien Web-Projekten zurück: Bereits 2006 gab es eine „BIENE“ beim renommierten BIENE-Award in Berlin, später den Sonderpreis Barrierefreiheit beim ebiz egovernment Award in Wien und den alternativen Medienpreis im Bereich Internet für die Chronologie des Holocaust. 

In den vergangenen Jahren wurde eine Reihe barrierefreier Webprojekte umgesetzt, unter anderem für die Wiener Volkshochschulen, den Wiener Musikverein oder die Deutsche Verkehrswissenschaftliche Gesellschaft.