A.P. Mutter Kommunikation
Kunde
UX/UI Design, Beratung, Webdesign
Leistungen
6 Wochen
Zeitraum

Anne-Sophie Mutter zählt zu den weltweit erfolgreichsten und bekanntesten klassischen Musikerinnen. Ihre Karriere spannt über 40 Jahre und viele musikalische Höhepunkte, sowie unzählige Auszeichnungen.

Sie fördert außerdem junge Talente mit der Anne-Sophie Mutter Stiftung. Wir haben seit mehreren Jahren die Ehre, das zweimal jährlich erscheinende Mitgliedermagazin „Impressionen“ vom Layout bis zur Druckproduktion zu begleiten.

Als im Sommer 2017 ein Relaunch der Website für Künstlerin und Stiftung geplant wurde, konnte IMMERWIEDER DESIGN das Projekt für sich sichern. Neben einem umfassenden Redesign, das die zuletzt 2011 neu gestaltete Website zeitgemäßer präsentieren sollte, kam auch ein neues Content-Management-System (CMS) zum Einsatz, das das Aktualisieren der Website durch den Kunden vereinfachen sollte.

Konzept und inhaltliche Struktur

Die vorhandene Website hatte über die Jahre ihrer Existenz viele Unterseiten in zwei Sprachen (deutsch und englisch), eine umfangreiche Medienbibliothek, einen Konzertkalender, sowie eine biografische Timeline der Künstlerin angesammelt, die für Musikinteressierte, Konzertgänger und Journalisten einen Anlaufpunkt für „all things Anne-Sophie Mutter“ darstellten. Da diese Inhalte auch von Suchmaschinen gut indiziert waren, sollte natürlich nichts abhanden kommen. Auch die grundsätzliche Struktur, die von unserem Auftraggeber Andreas P. Mutter seit dem bestehen der Seite stets auf dem aktuellen Stand gehalten wurde, blieb bestehen.

Neues Navigationskonzept

Optimierungsbedarf sahen wir jedoch bei der Navigation der Inhalte. Mit über 120 Unterseiten, einem umfangreichen Konzert-Jahr mit durchschnittlich 150 Konzerten, sowie einer Diskografie mit 60 veröffentlichten Alben, war und ist die Website ein Schwergewicht. Wir schlugen eine dreistufige Navigation vor:

  • Die Hauptnavigation mit den wichtigsten, priorisierten Sektionen
  • Die sekundäre Navigation in der Seitenleiste für Themen innerhalb der gewählten Sektion
  • Eine optionale tertiäre Navigation für gruppierte Seiten, die ein Thema mit mehreren Unterseiten behandelten

Mediendatenbank, News und Presse

Ein weiterer Punkt, der prominenter platziert werden sollte als bisher war der News- und Medienbereich, der für Journalisten eine wichtige Quelle für ihre Recherche darstellte. Auf der Startseite sollten deshalb immer die drei neuesten News-Artikel angerissen werden. In die Hauptnavigation nahmen wir die Mediendatenbank auf, die zeitlich gruppierte Fotoalben, Videos und allgemeine Presseinformationen bereitstellt.

Look and Feel, Entwurf und Layout

Ein Ziel jedes Website-Relaunch ist eine zeitgemäße Darstellung der zu lesenden Inhalte. Auch anne-sophie-mutter.de passte nach gut 5 Jahren nicht mehr so recht zur Künstlerin, die in den vergangenen Jahren viele avantgardistische Projekte ins Leben gerufen hat und mit Ihrem Ensemble „Mutter’s Virtuosi“ regelmäßig mit jungen Ausnahme-Künstlern auftritt.

Da der Zeitrahmen für den Relaunch fest definiert war – das neue Album „Schubert: Forellenquintett“ erschien knapp 2 Monate nach dem Kick-Off – entschieden wir uns für eine in mehreren Projekten bewährte Methode zur Abstimmung unserer Designvorschläge.

Styleboards für effiziente Abstimmung

Die gängige Methode, mehrere vollständige Entwürfe für Unterseiten zur präsentieren, war in der Vergangenheit ein Garant für überzogene Budgets, da die Antwort auf die Frage „Welche ist der beste Entwurf?“ doch immer „Ein bisschen A, ein bisschen B, und die Farben von C“ sind. Da dennoch verschiedene Gestaltungsrichtungen für den Look and Feel der Website ausprobiert werden wollten, greifen wir zu Styleboards: Auf den Seiten, die auf ein DIN-A4 Blatt passen, werden die selben gestalterischen Elemente in dargestellt, auf jeder Seite mit einem anderen, prägnanten und unterscheidbarem Stil. So wurden Bildelemente, Albencover, Buttons, Eingabefelder, Navigationselemente und einfache typografische Elemente wie Überschriften, Lesetexte und Listen auf einer Seite zusammengefasst und der Künstlerin in 4 Versionen von traditionell bis modern vorgelegt.

Immer up-to-date mit Zeplin

Technisch benutzen wir für die Abstimmung der gelieferten Entwürfe Zeplin. Die praktische, cloud-basierte Abstimmungs- und Übergabesoftware erlaubt es uns, auf zeitraubende und schwer zu planende Meetings für Präsentationen zu verzichten. Stattdessen erhalten Auftraggeber direkten Zugriff zu allen Entwürfen. Mit der Kommentarfunktion können sie (und wir) direkt auf dem Entwurf über Elemente diskutieren. Außerdem werden benutzte Grafiken direkt für die Umsetzung zum Download zur Verfügung gestellt.

Die Mischung macht’s … auch auf Websites

Schnell stellte sich heraus, dass zwei der Styleboards nicht funktionieren würden. Zu traditionell sei der dargestellte Stil; die Dekorelemente zu verschnörkelt; der gewünschte moderne Look fehlte. Eine Antwort, die wir erwartet hatten. Es war aber wichtig, die kreative Fahrtrichtung auch durch klare Neins zu definieren, anstatt auf Jas zu hoffen. Unser Motto: Kill your darlings, and kill them early!

Anders verhielt es sich mit den drei übrigen Styleboards. Alle gefielen auf ihre Art. Die Typografie des Entwurfs Modern war elegant und zeitlos, die Farbwelt des Entwurfs Authentisch war die passende und gefiel Anne-Sophie Mutter am meisten, die Art der Konzertdarstellung im Board Puristisch war am übersichtlichsten dargestellt. Hier zeigt sich der Vorteil einer schnellen, abgekürzten Entwurfsarbeit, anstatt komplette Entwürfe zu präsentieren: Mischen ist ausdrücklich erwünscht! Es enstand der finale Entwurf

Moderne Webentwicklung mit Twig, CSS3 und JavaScript

Nachdem der Look and Feel definiert war, mussten die wichtigsten Elemente in verschiedenen Größen ausgestaltet werden, um deren Funktionalität im Sinne des responsive Webdesign für alle Bildschirmgrößen gleichermaßen zu erhalten. Vor allem das mobile Navigationsmenü, das auf Knopfdruck über die Seite schwebt, war eine komplexe Designaufgabe.

Starke Partner mit zauberhaftem Code

Unsere langjährigen Kollegen von zauberware technologies übernahmen den Löwenanteil der Entwicklungsarbeit und wurden von uns mit allen notwendigen Designvorlagen und grafischen Elementen unterstützt.

Templates in Twig

Die Templatesprache Twig erzeugt auf übersichtliche Art und Weise HTML5-Code, die darin dargestellten Daten stammen aus dem Content-Management-System Craft (siehe unten). Mit Twig war es uns möglich, häufig genutzten Code effizient wiederzuverwenden, so dass der Entwicklungsaufwand reduziert werden konnte und eine spätere Änderung oder Erweiterung jederzeit möglich ist.

Layout und Styling in CSS3

Die Inhalte der Website mussten jetzt visuell and den Entwurf angepasst werden. Die mithilfe von Adobe Typekit eingebetteten Schriftarten „Europa“ und „More Pro“ bildeten die textliche Basis, optimiert für ideale Lesbarkeit und scharfe Konturen. Die an vielen Stellen vorkommenden Farbverläufe werden mithilfe von CSS3 Linear-Gradients eingebunden. Mouseover- und Focus-Animationen bei der Bedienung der Seite mit Maus und Tastatur sorgen für schnell erfassbare Interaktionsmöglichkeiten. Eine Besonderheit stellt der große Kopfbereich auf der Startseite und der Konzert-Übersichtsseite dar, der mehrere Ebenen enthält. Das abgebildete Zitat musste auf allen Bildschirmgrößen optimal lesbar sein.

Modulares CSS mit BEM

Komplexe Websites wie diese erfordern vom Webentwickler gerade in Hinblick auf die Stylesheets eine disziplinierte Benennung und Schachtelung des geschriebenen Codes. Mithilfe der als Block-Element-Modifier (BEM) bekannten Methodik wurde eine zweckbezogene Benennung der einzelnen Komponenten gewährleistet, was es ermöglicht, Komponenten an jeder Stelle im Layout wiederzuverwenden. Für den Kunden unsichtbar führt BEM zu weniger Code mit weniger Abhängigkeiten, was die Entwicklungszeit vor allem zum Ende des Projekts – wenn viel Code fertig geschrieben wurde – enorm verkürzt.

Hohe Performance

Browser- und Servercaching werden auf der gesamten Website eingesetzt, um statische Inhalte, die sich nicht häufig ändern, auf dem Server oder im Browser des Besuchers zwischenzuspeichern und nicht bei jedem Aufruf erneut herunterzuladen. Auch wenn eine zweisprachige Website mit sehr vielen dynamischen Inhalten nicht mit einer statischen Marketingwebsite mithalten kann, so konnten wir durch Caching und serverseitige Bildoptimierung, sowie durch den Einsatz von Responsive Images die Ladezeiten doch stark reduzieren. Vor allem mobile Nutzer mit Smartphones profitieren so von für mobile Daten optimierten Seiten und einem geringen verbrauchten Datenvolumen beim Aufruf der Seite.

Interaktive Features: Kalender, Suche nach Konzerten und Alben

Die Website anne-sophie-mutter.de wird monatlich von mehreren tausend Nutzern besucht, die sich für die internationalen Konzerte und die Alben-Veröffentlichungen der Künstlerin interessieren.

Next up … Konzertkalender

Auf der Startseite werden sofort das nächste, sowie die vier darauf folgenden Konzerte dargestellt. Wichtig war hierbei, dass sofort der Veranstaltungsort erkennbar ist, um Besucher nicht unnötig auf Konzertdetails zu Konzerten zu führen, die für sie nicht erreichbar sind. Darunter folgt der komplette Konzertkalender, der monatsweise alle Konzerte darstellt und so einen Überblick über zukünftige Termine gibt. Alle weiteren Konzerte finden Besucher in der Konzert-Liste.

Such- und Filterfunktion

Um die mehreren Dutzend Konzert-Termine übersichtlich darzustellen, die Anne-Sophie Mutter jährlich absolviert, und die in unterschiedlichen Tourneen mit verschiedenen Programmen, Ensembles und auf verschiedenen Kontinenten stattfinden, war eine Such- und Filterfunktion unabdingbar.

Reinhören mit Spotify

Den Streaming-Service Spotify, bei dem monatlich über 300.000 Hörer (Stand Juni 2018) die Musik von Anne-Sophie Mutter anhören, banden wir über die hauseigene Embed-Funktion auf den Diskografie-Seiten ein. Besucher können so direkt in die Alben hereinhören, oder auf einer der angebotenen E-Commerce-Plattformen die Alben digital oder als CD bestellen.

Einfaches Content-Management mit Craft

Nachdem der Besucher der Seite einen zeitgemäßen Auftritt zu sehen bekommt, bleibt für uns der Anspruch, unserem Auftraggeber eine ebenso zeitgemäße Datenpflege zu ermöglichen, die lange hält und leicht erweiterbar ist, wenn neue Anforderungen dazukommen. Mithilfe der in Twig geschriebenen Templates (siehe oben) ist sichergestellt, dass die entstehenden Seiten immer optimal dargestellt werden. Die Autoren der Website können sich auf das Eingeben von Texten und Inhalten konzentrieren.

We 💛 Craft!

Das Content-Management-System Craft stellt für uns die ideale Plattform für Websites aller Größen dar. Die Software vom amerikanischen Entwicklerteam Pixel and Tonic bietet die perfekte Möglichkeit, verschiedene Inhaltstypen als unabhängige Datensätze anzulegen und zu einem übergreifenden Datenmodell zusammenzufügen. Der Vorteil liegt auf der Hand: Statt Inhalte auf mehreren „Seiten“ einzufüllen und sie bei einer Änderung auch auf mehreren Seiten abändern zu müssen, müssen Autoren nur einmal Inhalte eingeben. Die von uns erstellten Templates übernehmen das Zusammenfügen der Inhalte zu Seiten.

Die kraftvolle Relationsfunktion von Craft gibt Autoren die Möglichkeit einer maßgeschneiderten Datenpflege, die Live-Vorschau, bei der Inhalte mit direkter Vorschau der resultierenden Seite eingegeben werden, sorgt regelmäßig für aufgesperrte Kinnladen. Gerade wer andere Content-Management-Systeme wie Typo3 oder WordPress kennt, ist von Craft sofort begeistert.

Für uns als Entwickler und Designer ist Craft ein mächtiges Werkzeug, das das Prinzip der Trennung von Inhalt und Darstellung mit Bordmitteln ermöglicht. WordPress-Websites neigen dazu, mit ihrem „Übergewicht“ viel Mehraufwand zu erzeugen. Craft-Websites fangen bei Null an. Nur was gebraucht wird, muss gebaut werden. Ein Minimalismus, der uns voll überzeugt hat.  

Integrierte Konzertdatenbank

Die alte, für die Autoren separat zugängliche Konzertdatenbank, wurde in das normale CMS überführt. Aus zwei Logins wurde einer. Die Struktur der Konzerte mit einzelnen Terminen, die in Tourneen zusammengefasst werden und deren Veranstaltungsorte und Programmpunkte in einem separaten Datensatz platziert sind, machen das Anlegen mehrerer neuer Konzerttermine in Rekordzeit möglich. Ein wichtiger Vorteil, denn die Dutzenden von Konzertterminen werden einmal saisonal von den Autoren eingegeben – Tempo ist also wichtig.

Newsfeed auf der Startseite

Um über Neuigkeiten aus der künstlerischen Welt von Anne-Sophie Mutter zu informieren legen die Autoren News-Beiträge an. Ausgewählte Einträge können außerdem auf der Startseite platziert werden, um so auch komplett neue Besucher auf dem Laufenden zu halten.

Umfangreiche Diskografie-Datenbank mit Cover-Bibliothek

Die Diskografie von Anne-Sophie Mutter kann über eine Cover-Ansicht auf der Startseite, sowie im Alben-Archiv in Kachelform abgerufen werden. Um die darauf vorkommenden Komponisten und Künstler einfach zu erkennen, können über eine separate Datenbank Künstler und Komponisten hinzugefügt werden.

Timeline mit 40 Jahren Rückblick

Eine besondere Herausforderung stellt die Timeline dar. Auf der vorherigen Website war diese in Flash programmiert worden. Da Flash seit mehreren Jahren nicht mehr ohne Plugins von Browsern unterstützt wird und für den Einsatz auf Websites quasi obsolet geworden ist, mussten die Inhalte übernommen werden. Unser Team übernahm das Übertragen von Text und Bild aus dem alten in das neue System und veröffentlichte auch die in Flash eingebetteten Videos auf YouTube, um sie danach zurück in die Website einzubetten.