Digitalisierung des Evonik Magazins

Evonik Magazin Cover

Digitalisierung des Evonik Magazins

Seit 2014 veröffentlicht Evonik Industries ein Firmenmagazin (Evonik Magazin) in modernem Design und mit aktuellen, äußerst interessanten Themen. Jede Ausgabe behandelt ein wichtiges Thema der Neuzeit wie Nachhaltigkeit, Bildung, Migration oder zuletzt Alter. Jedes Thema wird mit vielfältigen Artikeln, Bildstrecken und Portraits ausgeleuchtet.

 

Umsetzung des Evonik Magazins auf Basis von Wordpress

Das Design und die Redaktion des Printmagazins wird von der Corporate-Publishing-Agentur Bissinger[+] übernommen. Ziel unseres Projektes war, das Magazin auch digital zur Verfügung zu stellen. Die ersten Designs zur Digitalisierung des Evonik Magazins wurden uns von der Werbeagentur KNSK  präsentiert. Für uns war schnell klar, dass dieses Projekt in WordPress mit Hilfe von Scrollmagic.io und Advanced Custom Fields (ACF) umgesetzt werden sollte. So sollte gewährleistet werden, dass auch zukünftige Magazine in kürzester Zeit eingepflegt werden können. Der Bärenanteil der Magazine richtet sich nach einem festen Layout, sodass dieses mit kommenden Magazinen nicht neu erfunden werden muss. Sonderinszenierungen, die jeder Ausgabe ein besonderes Look & Feel geben, werden individuell erstellt.

 

Evonik Magazin - Ein Projekt mit WordPress und Advanced Custom Fields

Die Startseite der aktuellen Ausgabe ist gleichzeitig das Inhaltsverzeichnis des Magazines.

Vorarbeiten für die Digitalisierung des Evonik Magazins

Das Projekt hatte einen knappen Zeitrahmen, da das Magazin quartalsweise erscheint und das Projekt mit Erscheinen der Ausgabe 01/2017 begann. Bereits die Ausgabe 02/2017 sollte zeitgleich physisch wie auch digital erscheinen. Und das obwohl für Bild und Text nur knapp drei Wochen vor Veröffentlichung der Ausgaben Redaktionsschluss ist. So wurde innerhalb von drei Monaten Konzept, Design, Technik und Feinschliff erstellt. Hierbei gab es einen ständigen, direkten Austausch mit der Werbeagentur KNSK. Auch kleinste Entscheidungen wurden zeitnah abgestimmt, um für alle zu jeder Zeit das bestmögliche Ergebnis zu erzielen.

KNSK leistete konzeptionell sehr gute Vorarbeit. Die Werbeagentur identifizierte Seitentypen, erstellte eine Sitemap und stellte Wireframes für Templates und Elemente bereit. Gewünschte Animationen wurden in .key Files dargestellt. Dies ermöglichte uns, Scrollmagic.io so einzubinden, dass wir in kürzester Zeit die gewünschten Inszenierungen abbilden konnten. Gerade bei zeitkritischen Projekten ist eine stabile Vorarbeit Gold wert. Änderungen auf den letzten Metern führen immer zu problematischen Implikationen.

 

Evonik Magazin - Advanced Custom Fields im Backend

Advanced Custom Fields ermöglicht es ganze Artikel nach einem gewissen Schema zu erstellen. Ganz individuell und im Frontend rasend schnell.

Kurze Entwicklungsphase

Für die Entwicklung wurde ein individuelles WordPress Theme erstellt. Zunächst wurde ein einfacher Seitentyp identifiziert und in Advanced Custom Fields abgebildet. Parallel dazu konnten letzte Änderungen an Design und Animation abgestimmt werden. In PHP wurde ein Markup geschrieben, das Klassen nach dem „Block Element Modifier“ (kurz BEM) Prinzip erhalten hat. Daraufhin wurde das Design in CSS so umgesetzt, dass kaum redundanter Code erzeugt werden musste. Nachdem KNSK und wir mit dem Ergebnis zufrieden waren, setzten wir uns an den komplexesten Seitentyp. Dieser nahm mehrere Wochen Entwicklungszeit in Anspruch. Durch das BEM Prinzip, das auch auf Seiten von PHP und ACF durchgezogen wurde, konnten wir viele Funktionen wieder und wieder verwenden. Dies ermöglichte uns, die Entwicklungsdauer und später auch die Ladezeit minimal zu halten.

Maximale Flexibilität bei den Artikelseiten des digitalen Magazins

Letzten Endes wurden sechs Seitentypen entwickelt. Alleine für den Typ „Artikel“ wurden zehn Layout-Elemente (unterschiedliche Contentblöcke und Animationen) programmiert. Diese können beliebig mit acht Content Typen (Text, Bild, Galerie, Überschrift…) befüllt werden. So ist es möglich, Artikelseiten auf zigtausend unterschiedliche Arten anzulegen. Über das gesamte Projekt wurden über 200 nicht redundante Optionen eingefügt. So können wir den kommenden Ausgaben gelassen entgegenblicken, da wir bereits initial mit maximaler Flexibilität entwickelt haben. Auch wenn der Aufwand für diese erste Ausgabe recht stattlich ausgefallen ist, wird sich unsere Arbeit in den kommenden Jahren um ein Vielfaches rentieren.

 

Evonik Magazin - Animationen

Das Magazin zeichnet sich durch Stop & Go einzelner Elemente bei kontinuierlichem Scrolling aus. Durch frühzeitige Identifizierung von Kernelementen ist das Layout federleicht und in millionenfach unterschiedlichen Optionensätzen konfigurierbar.

Minimale Ladezeiten

Durch die Verwendung eines eigenen Themes und die Integration genau der Komponenten, die wir auch wirklich brauchen, werden Ladezeiten unterhalb einer Sekunde erreicht. Nach Einbindung leichter Caching- und Minify Plugins, erreichen wir auf der Index Seite eine Ladezeit von 700ms bei gerade mal 28 Requests. Nach einer frischen Worpress Installation und bei Verwendung eines gängigen Themes, werden oft bereits über 100 Requests für den Pageload gesendet. Dies treibt die Ladezeiten unnötig in die Höhe.

Die Digitalisierung des Evonik Magazins ist ein Paradebeispiel für gelungene Projektplanung. Für verhältnismäßig wenig Aufwand wurde hier ein Grundstein für ein schnelles, komplexes, individuelles CMS gelegt, das noch viele Jahre auf dem Stand neuester Technik arbeiten kann.

No Comments

Post A Comment