Wir stellen ein!

Volkswagen Kundenmagazin Online – „Das Auto. Magazin”

Volkswagen Kundenmagazin Online – „Das Auto. Magazin”

Das Drupal. Responsive Magazin

Autos werden modular zusammengestellt und können dabei ganz genau auf die Bedürfnisse des Kunden zugeschnitten werden. Genau so funktioniert es auch unter der Haube der Online-Umsetzung des neuen Volkswagen Kundenmagazins.

Allerdings können sich Autos noch nicht auf die verfügbare Parkplatzgröße skalieren, ganz anders die neue Website „Das Auto. Magazin".

Zusammen mit KircherBurkhardt, bei denen die Gesamtverantwortung für das neue Kundenmagazin von Volkswagen liegt, haben wir ein System entwickelt, das im Front- und Backend flexibel angepasst werden kann.

Drupal ist biegsam

Auf Drupal-Basis haben wir ein CMS entwickelt, mit dem sich Artikel aus verschiedenen Layout-Modulen frei zusammenstellen lassen. Redakteure können Headlines, Anreißer, Bild- und Video-Inhalte sowie komplexe HTML-Assets frei anordnen, individuell formatieren und sortieren, ohne dabei eine Zeile Code produzieren zu müssen.

Redaktionelle responsive Raster

Der Leser kann sich über ein „magaziniges“ Online-Produkt freuen, bei dem die Artikel nicht nur lesenswert die Volkswagen-Welt näherbringen sondern raffiniert auf die verfügbare Displaygröße angepasst werden. Dass die Gestaltung mehr ist als nur Überschrift-Text ist dabei eigentlich schon selbstverständlich. Das Magazin lebt gerade im Design davon, Texte mit opulenten Bildern zu verbinden, was wir technisch verlängern konnten mit leichten Transitions wo möglich bzw. mit device-optimierter Übermittlung wo notwendig.

Insgesamt konnten wir das Leseerlebnis der in einigen der insgesamt zwölf Sprachen erscheinenden Print-Ausgabe sowohl auf kleinste Smartphone-Displays als auch auf überdimensionale Monitore verlustfrei übertragen.

Zusätzlich zur Webversion gibt es auch noch eine iPad-App die mit exklusiven audiovisuellen und interaktiven Inhalten aufwartet. Die iPad-App wurde direkt von KircherBurkhardt umgesetzt.

Unter der Haube

Bei der Gestaltung der Seiten hat die Redaktion durch die Verwendung des Drupal-Moduls Flexinode alle Möglichkeiten und dies ganz ohne Programmierkenntnisse. Die Module können für jede Seite individuell zusammengestellt werden. So kann ein Modul z.B. 2-spaltig sein und einen kleinen Textteil plus Video enthalten, ein anderes wiederum kann 3-spaltig sein und Text plus Bilder enthalten, oder nur Text, oder nur ... Und dies alles auf einer Seite.

Ein besonderes Feature ist die Bildverwaltung. Die Bilder passen sich automatisch den unterschiedlichen responsive Stufen an und die Redaktion kann auf Wunsch festlegen, welcher Bildausschnitt gezeigt wird. Eine Funktion, die über das übliche Vergrößern/Verkleinern von Bildern hinausgeht.

Das Translation-Modul vereinfacht es dem Redakteur, das Magazin in verschiedenen Sprachen anzulegen. Er kann dort z.B. einstellen, welche Bilder für eine bestimmte Sprachübersetzung genutzt werden sollen. Ein Bild von einem Golf, der für den deutschen Markt bestimmt ist, macht wenig Sinn für das englischsprachige Magazin. Dies vereinfacht die Arbeit für die Redaktion ungemein.

Große Bühne, viel darunter

Die Seite wurde vollständig in responsive Design umgesetzt. Die Startseite und die Artikelseiten passen sich optimal den verwendeten Devices und der Auflösung an.

Durch die interaktiven HTML5 Module und die modulartige, hyperflexible Anordnung und Konfektionierung von Content ist die Seite bei jedem Scroll in Bewegung. Mit einem Klick oben links fährt das Inhaltsverzeichnis vom linken Bildschirmrand in die Seite. So hat man schnell einen Überblick über die Artikel des Magazins.

Herzstück der Seite ist der große Header. Dieser besteht aus einem Karussell-Slider mit ausgesuchten Artikeln der Redaktion. Für mobile Endgeräte wurde der Slider touchoptimiert.

Scrollt man auf der Startseite weiter nach unten, so verschieben sich die einzelnen interaktiven Module nach oben. Dabei fahren die unteren Artikel nach oben und verdecken die Anrisstexte des darüberliegenden Artikels. Die Bilder reihen sich quasi untereinander an.

Slide, swipe, scroll

Klickt man auf einen Anrisstext oder ein Bild auf der Startseite, gelangt man auf die entsprechende Artikel-Seite. Angereichert sind die Artikeltexte zum Beispiel mit Bild-Slidern, Videoeinbettung oder interaktiven Infografiken. Die Besonderheit an den Bild-Slidern ist, das diese mit Zusatztext versehen werden können. Über einen Klick auf den Pfeil nach oben fährt eine Informationsbox in das Bild. Die Slider verändern sich automatisch je nach Gerät und sind selbstverständlich touchoptimiert.

So macht ein Magazin auch mobil richtig Spaß.

Parkplatz in der Wolke

Für eine hochverfügbare, zu jeder Zeit performante und weltweit verteilte Auslieferung des Magazins haben wir ein eigenes Drupal Deployment Modul entwickelt. Dies analysiert die freigegebenen und veränderten Inhalte, konfektioniert sie als statisches Datenpaket und schickt es in die Wolke, genauer gesagt zum entsprechenden S3 Bucket bei Amazon AWS. Mittels CloudFront, Amazon’s Content Distribution Network, werden die Inhalte schnellstmöglich auf der ganzen Welt ausgeliefert.

Weitere Projekte