Drupal Relaunch der Adicto-Website

Genau aus diesem Grund haben wir uns entschieden, unsere Adicto-Website einem moderaten Redesign zu unterziehen und das bisher verwendete WordPress-CMS in diesem Relaunch gegen eine Drupal-Lösung auszutauschen. Darüber hinaus gab es weitere primäre Ziele, die wir erreichen wollten:

• Neue Startseite
• Durchgehend bessere Performance
• Vermehrt kleine Micro-Animationen im Lottie-Format
• Individuelles Glossar-Modul mit Spotlight-Funktion
• Flexible Hero-Bereiche, die mit Bildern, Videos aber auch Verlaufs-Animationen befüllt werden können
• Optimierte Inhalts-Erfassung 
• Zusätzlicher Wissensaufbau zu Drupal und der Entwicklung von Drupal-Erweiterungen
• Dark-Mode der gesamten Website

Redesign oder sanfte Optimierung?

Eigentlich waren wir mit dem Look & Feel der Adicto-Website immer noch sehr zufrieden, was auch durch externes Feedback bestätigt wurde. Dennoch gab es Bereiche wie die Startseite, wo wir uns andere Möglichkeiten gewünscht hätten. Ebenso wünschten wir uns einen neuen Bereich für unsere Angebote. So wurden bestehende und neue Elemente zusammengeführt, teilweise existierende Design-Elemente hinterfragt und überarbeitet und neue Bereiche gestaltet. Das Ergebnis war ein vertrautes Gesamtbild mit neuen und verbesserten Details. Da das Frontend für Drupal und zur Erreichung unserer Performanceziele ohnehin komplett neu aufgebaut werden musste, waren die Anpassungen kein Problem. 

Inhalts-Erfassung

Neben der Verbesserung der Backend-Benutzeroberfläche, die im Vergleich zur Standard-Drupal-Benutzeroberfläche wesentlich benutzerfreundlicher ist, haben wir auch die Eingabemethoden für unsere Inhalte verbessert. Wo immer es möglich war, haben wir Felder mit Live-Suche eingebaut, über die wir verwandte Inhalte verlinken können. Die Live Suche kommt aber auch zum Einsatz beim Referenzieren von Informationen über den Autor für einen Blogpost oder um auf das verantwortliche Adicto-Teammitglied bei einem Projekt zu verweisen. Alle wichtigen Informationen für den Call-to-Action oder das verlinkte Projekt sind bereits eingefügt. Schnell und einfach. 

Hero-Bereiche

Die Hero-Bereiche sollten möglichst ein grosses Bild oder noch besser ein Video zeigen können. Für den Fall, dass beides nicht zur Verfügung steht, wollten wir dennoch die Möglichkeit haben, «Bewegung» in diese Headerbereiche zu bringen. Deshalb haben wir die Möglichkeit eingebaut, beliebig viele Farben für einen sich ständig verändernden Farbverlauf zu definieren. Und um dem Hero-Bereich noch mehr «Individualität» zu verleihen, ist es möglich, Mikrotexturen zu definieren. Aktuell ist das der Endlos-Report unseres Adicto «A». 

Ganz ohne Fachchinesisch geht es fast nicht

Auch wenn wir uns immer bemühen, möglichst wenig Anglizismen und typische Begriffe aus der Agentursprache zu verwenden, ist es manchmal einfach nicht möglich. Entweder weil es keinen passenden deutschen Begriff gibt, die deutsche Alternative noch unverständlicher wäre oder sich der entsprechende Fachbegriff bereits langsam in der deutschen Sprache manifestiert hat. Aus diesem Grund hatten wir bereits auf der alten Website unser Glossarmodul, mit dem Begriffe erklärt werden konnten. Gab es zu einem Begriff einen Glossar-Eintrag, wurde das «Fremdwort» überall auf der Website automatisch hervorgehoben und ein einfaches darüber fahren mit dem Mauszeiger lieferte die Erklärung. Ein solches Modul war für Drupal nicht verfügbar, also haben wir es selbst entwickelt und nach unseren Vorstellungen optimiert.

Drupal Glossar-Modul von Adicto

Wenn zum Beispiel ein Begriff wie «CMS», die Abkürzung für Content Management System, vorkommt, erscheint automatisch eine gepunktete Linie unter dem Begriff. Liegt der Mauszeiger über dem Begriff, wird eine Art «Spotlight-Effekt» wie bei einem Scheinwerfer ausgelöst. Der Begriff steht nun im Rampenlicht und wird über das blaue Fenster erklärt. Die Verlinkung der Begriffe erfolgt wieder vollautomatisch. Aus unserer Sicht nur ein kleiner Aufwand für uns als Anwender und eine grosse Hilfe für den Leser – und Google mag die Glossar-Einträge übrigens auch ;-)

Mit Lottie zu mehr Interaktion

Von jedem Link, Button oder klickbaren Element auf einer Website wird seit langem eine Art «Feedback» erwartet, wenn man mit der Maus darauf zeigt. Eine Art Beweis, dass man hier klicken kann. Noch schöner ist es aber, wenn nach dem «Klick» eine kleine «Belohnung» wartet – und das angeklickte Element eine Mikro-Animation ausführt. Nichts Grosses, nur etwas Subtiles, das die eigentliche Aktion auch nicht behindert, sondern ein Goodie obendrauf ist. Alle Icons unserer Navigation weisen einen schönen Übergang in einen anderen Zustand auf. Besonders schön ist das bei dem Icon, mit dem man vom hellen in den dunklen Modus unserer Website wechseln kann. Genau der dunkle Modus, oder auch «Dark-Mode» genannt, stand auch auf unserer Liste der Neuerungen!

Noch vielfältiger als in der Navigation wird es auf unserer Teamseite. Neben unseren Portraits findet man dort unsere Werte. Und wer diese Werte toll findet, kann jeden einzelnen mit einem «Like» versehen. Als Dankeschön gibt es zu jedem Herz-Icon eine andere Micro-Animation. 

Für diese Animationen greifen wir auf eine Technik zurück, die vom Airbnb-Team zur Marktreife entwickelt wurde: die Lottie-Animation. Ziel von Lottie ist es, dass Designer solche Animationen in After Effects erstellen und dann mit möglichst wenig Aufwand ausgeben können. Durch diese Lösung mussten die Animationen nicht aufwändig mittels animierter SVG-Grafiken durch die Webentwickler erstellt werden. Wir sind Fans von Lottie-Animationen und wollten sie unbedingt auf unserer Website haben. Sie beeinträchtigen die Ladezeit nicht wesentlich und werden auf allen Geräten und Bildschirmen perfekt dargestellt. 

Performance, Performance, Performance

Google liebt schnelle Websites und auch wir mögen es, wenn eine Website schnell geladen wird. Wenn sie das trotz vieler Bilder, Videos und Animationen tut, ist das natürlich umso besser. Deshalb haben wir nicht nur den Code optimiert, sondern auch die ohnehin schon schnelle Seitenauslieferung von Drupal weiter verbessert. Natürlich braucht ein Video wie auf der Startseite etwas länger zum Laden, aber eine Seite wie unsere Referenzübersicht wird dank Lazy-Loading und Infinite-Scrolling (gut, dass wir ein Glossarmodul haben...) schnell genug geladen, um die Seitenbesucher nicht lange warten zu lassen und Google zu erfreuen. 

Fazit

Für uns hat sich die Umstellung gelohnt. Wir waren zwar immer zufrieden mit unserer WordPress-Seite, aber der Wunsch, mit Drupal etwas anderes auszuprobieren, hat sich auch für uns gelohnt. Vor allem weil wir neben WordPress nun mit noch mehr KnowHow Drupal-Websites für unsere Kunden umsetzen können und so für jede Anforderung und Unternehmensgrösse gerüstet sind.