Relaunch des Naturschutzbund Deutschlands (NABU)

Nach langjähriger Zusammenarbeit mit dem NABU, dem mitgliedsstärksten deutschen Umweltverband mit 560.000 Mitgliedern, wurde der Relaunch der neuen Seiten des Bundesverband und der zugehörigen Landesverbände heute online geschaltet. Der Auftritt verzeichnete zuletzt rund 6 Millionen Besuche im Jahr und ist mit einem Angebot von rund 8.000 Seiten sehr umfangreich. Dem Relaunch ging eine rund 7-Monatige Entwicklungsphase und eine mehrmonatige Konzeptionsphase voraus.

Imperia oder TYPO3?

Im Vorfeld wurde nach detaillierter Abwägung auf einen Wechsel oder Upgrade des Content-Management-Systems Imperia 8 verzichtet. Dadurch konnten bestehende Module weiterentwickelt statt komplett neu entwickelt werden und dadurch auch Kosten und notwendige Umschulungen der Redakteure minimiert werden.

Dank des freien Backends des CMS Imperia 8 war es Faktor E möglich die gestaltung der neuen Eingabemasken für Inhalte der Redakteure komplett frei zu gestalten und nach modernen Gesichtspunkten zu verbessern. So ist das neue Backend nun aufgeräumt, bietet Shortcuts zu Inhaltsmodulen auf der Seite, und nutzt fortgeschrittene JavaScript-Funktionen z.B. um Slider- und Headergrafiken individuell zu layouten. Alle Eingabefelder sind mit Eingabehilfen und klaren Strukturen versehen, so dass es Redakteuren sehr einfach fällt, ihre Artikel zügig und vollständig einzupflegen.

Content-Container Flexmodul-Konzept

Das bereits im alten Auftritt entwickelte “Content-Container”-Konzept von Faktor E konnte erweitert und übernommen werden. Hierbei wurde ein eigenständiges sogenanntes “Flexmodul” für Imperia entwickelt, dass im Hintergrund über ein eigens entwickeltes Backend die Imperia-Inhalte zur Einbindung ziehen kann. Somit können Redakteure Teaser/Übersichtsseiten leicht via Drag’n’ Drop im Backend zusammenstellen, indem sie über das Content-Container Popup die bestehenden Imperia-Zielseiten auswählen (und filtern/durchsuchen können) ohne Redundanzen zu erzeugen. Komfortabel wird das Konzept dadurch, dass jeder Stammseite Meta-Informationen für unterschiedliche Teaser-Erscheinungsorte mitgegeben werden können. So erscheint ein und derselbe Artikel abhängig von seinem eingesetzten Kontext (z.B. in einer “Mitmachen”-Box, in einem “Aktuelles”-Slider oder auch in der rechten Seitenleiste) mit unterschiedlichen Teasertexten und Bildern.  Zudem können dynamisch Teaserübersichten platziert werden, mit denen automatisch Artikel gewählter Rubriken angeteasert werden können. Imperia selbst besitzt kein “Teaser-Konzept” mit vorhandenen Bausteinen um diese Funktionalitäten abzudecken, so dass diese Funktionalitäten eine große Erleichterung in der Pflege der Seite sind.

Im Relaunch prägnant umgesetzte “Call-To-Action”-Buttons können an vielen Stellen und in unterschiedlichen Designs vom Redakteur eingesetzt werden, und sind durch hochgradig flexible Inhaltsblöcke mit zahlreichen Konfigurationsoptionen anpassbar.

Artikel-Pool

Ein ähnliches “Artikel-Pool”-Konzept wird durch die dynamisch gezogene Rubrikkästen in der rechten Seitenleiste des Auftritts verfolgt. Jene Kästen können unabhängig von der eigentlichen Seite im CMS erzeugt werden, und dort wird deren Erscheinungsort (auch für alle Unterrubriken einer gewählten Rubrik) festgelegt.

Hier ein paar Screenshots des Backends:



Übersichtsseite des Backends mit unterschiedlichen Akkordeon-Elementen und Warnungsmeldungen, falls gewisse Inhalte noch nicht ausgefüllt wurden

 

Header-Grafikmodul mit Drag/Drop für platzierbare Slider

 



Eingabemaske für unterschiedliche Teaser-Formate (“Klassik”-Teaser für normale Inhalte, “3er” Teaser wenn das Element in einem Slider vorkommt, “Rechte Spalte” und für besondere “Aktions”-Boxen)

 



Die eigentlichen Inhaltsblöcke, mit ausgeklappter “Sofortsprung”-Funktion zu einzelnen Inhaltsmodulen der Seite

 



Beispiel für komplexere Eingabemasken von Modulen der rechten Spalte (Publikationskasten für Downloads)

Ein besonderes Highlight im Backend ist ein komplett von Faktor E entwickeltes Tool zur dynamischen Erstellung von Listen- und Tabellen. Dabei können neue Zeilen und Spalten per Mausklick erzeugt (und entfernt) werden und vor allem problemlos einzelne Zellen sortiert/vertauscht werden. Diese Art der Tabellenerstellung ist deutlich komfortabler und bedienfehlerunanfälliger z.B. als die problematische Tabellenerzeugung in gängigen WYSIWYG-Editorkomponenten:

Vollständig responsive HTML5-Umsetzung

 

Das Frontend wurde vollständig responsiv mit mehreren Breakpoints für Desktop, Tablets und Mobiltelefone HTML5-konform umgesetzt. So können sich die unterschiedlichen Boxtypen und -Formen des NABU-Auftritts abhängig von dem zur Verfügung stehenden Raum dynamisch arrangieren. Bilderslider und Fotogalerien sind barrierearm umgesetzt und lassen sich auch per Wischgesten auf entsprechenden Geräten bedienen.

Datenmigration und Modul-Entwicklung

Eine besondere Anforderung an Faktor E war die Migration der bestehenden Daten, die im laufenden System geschehen musste um Redundanzen und aufwändige Umstellarbeiten zum Relaunchtermin zu vermeiden. Die Inhaltsübernahme alter Artikel wurde mit Importmechanismen angepasst, die minimale Redakteursinteraktion für mehr als 8.000 Seiten bieten musste. Auch die Weiterleitung der migrierten Seiten zur neu angelegten Seite wurde aufwändig implementiert.

In zahlreichen Teilprojekten wurden zudem Module des Auftritts überarbeitet, wie der von Faktor E entwickelte dynamische Formulargenerator (dieser erhielt ein komplexes Rechtemanagement, neue Formulartypen, automatische Straßennamens/PLZ-Findung), neuen Video-Modulen, einem dynamischen RSS-Feed-Pool. Viel Aufwand stellte die Migration von Prototype zu jQuery in Backend- und Frontendmodulen dar. Da viele Module nun parallel im Live-Betrieb als auch mit neuen Features im Entwicklungsbereich eingesetzt wurden, war vom Faktor E-Team viel Sorgfalt und Bedacht gefordert, so dass dank tiefgründiger Konzeption und Vorarbeiten die Anpassungen letztlich reibungslos ohne negative Auswirkungen auf den Live-Betrieb bis hin zum Relaunch eingebunden werden konnten.

Hoher Wert wurde auf die datenschutzkonforme Vermeidung von User-Tracking gelegt, so dass z.B. Google Analytics-Funktionen die entsprechende IP-Anonymisierung nutzt. Die Einbindung sozialer Medienwidgets wurde nach dem 2-Klickmodell umgesetzt. Facebook- und Twittermeldungen werden erst dynamisch und nahtlos nachgeladen, nachdem der Benutzer bewusst auf entsprechende Segmente der Seite geklickt hat.

Das Team von Faktor E freute sich über die enge, offene und freundliche Zusammenarbeit mit den NABU-Projektleitern, die in unterschiedliche Teams mit jeweiligen Aufgabenbereichen mit großem Einsatz gearbeitet haben. Die enorme Arbeit, die in diesem Relaunch steckt, kann man als Aussenstehender kaum beurteilen, so dass wir den Entstehungsprozess ausführlicher erklärt haben.

www.nabu.de