BILD denkt in Plattformen. Dies war der Titel zur Präsentation von Julian Reichelt  und Paul Ronzheimer bei den Online Marketing Rockstars 2016. Hierzu sollte eine Keynote entstehen „die mal so richtig rockt“.

Das Ergebnis war eine art Wimmelbild das die einzelnen Plattformen zeigt auf denen BILD vertreten ist. Keine Slides! Nur ein Screen der zum stöbern und entdecken animiert und letztendlich auch aufzeigt, dass Medien neue Kanäle nutzen sollten.

Julian Reichelt und Paul Ronzheimer berichten vom digitalen Erfolg bei BILD  Foto: Online Marketing Rockstars

Idee & Anspruch

Soweit so cool! Aber irgendwie auch soooo … statisch. Der Event war vorbei. Die Keynote kam super an und landet in der Schublade. So läuft es zumindest in der Regel ab. Da der zeitliche Aufwand zur Erstellung der Grafiken aber relativ hoch war (und zumindest diese Arbeit schon erledigt), kam mir die Idee noch mehr aus dem vorhandenen Material rauszuholen. Ja und außerdem wollte ich schon länger etwas über Animationen im Web wissen.

Der Plan: Eine voll responsive und animierte Webseite! Die Animationen natürlich nur mit CSS. Klar! Wenn schon denn schon.

Aber wie kann man aus einer statischen Präsentation eine interaktive Website erstellen? Welche Möglichkeiten bietet CSS zur Animation überhaupt und wo liegen die Grenzen? Wie positioniere ich die einzelnen Elemente zueinander? Kann ich prozentual skalieren? Vererben sich die Animationen auch auf die Unterlemente? Fragen über Fragen.

Doch zunächst erstmal ran ans Reißsbrett!!!

Auch wenn es für den einen oder anderen vielleicht altbacken erscheint, für mich beginnt die inhaltliche und formale Auseinandersetzung bei den meisten Projekten immer in meinem Skizzebuch. Es hilft mir ganz einfach dabei, die Ideen die ich umsetzen will, vorher richtig zu durchdenken. Außerdem habe ich das Gefühl, so vorab eine gewisse Ordnung für die vielen Fragen und Lösungsansätze zu schaffen. Eigentlich nichts anderes als meine Einkaufliste für ein Projekt bevor es in den Supermarkt geht. Hier ein paar Auszüge:  

Zumindest auf dem Papier, stand jetzt das Ziel fest: Jedes Plattformer-Element wird einzeln auf der Oberfläche positioniert und erhält eine eigene Zuweisung auf der Z-Ebene. Die Größe wird entsprechend des Viewports definiert. Innerhalb des Elements werden die Unterelemente der jeweiligen Plattform positioniert.

Umsetzung der einzelnen Elemente

Nachdem ich zum generellen Grundaufbau einige Lösungsansätze überlegt und getestet hatte, ging es jetzt an die Umsetzung der einzelnen Elemente. Auch hier jeweils in 2 Arbeitsschritten. Erst überlegen was man animieren will. Dann schauen ob und wie es am Besten umzusetzen ist. Dazu habe ich mich zunächst an unterschiedlichen Quellen schalau gemacht. Besonders hilfreich bei dem Einstieg in das Thema CSS-Animationen waren für mich:

• ANIMATE.CSS
• CSSANIMATE.COM
• CSS SPRITE SHEET ANIMATIONS WITH STEPS
• CSS3 ANIMATION CHEAT SHEET
• WEBCODETOOLS.COM
• CSS ANIMATION KIT

Bevor ich die einzelnen Module zu einer Onescreen-Komposition zusammen gefasst habe, wurden diese zunächst einzeln erstellt und auf Codepen getestet. Hier wieder ein paar Beispiele:

Die einzelnen Module waren nun fertig und für sich gesehen auch schon ziemlich cool. Verschieden Arten an Animationen wurden miteinander kombiniert und diverse Techniken ausprobiert. So kamen neben CSS-Bibliotheken und Sprite-Animationen auch verschiedene CSS-Generatoren zum Einsatz. Jetzt ging es in die Endphase – die Gesamtkomposition.

Eigentlich hatte ich an dieser Stelle der Umsetzung gedacht, den Großteil der Arbeit erledigt zu haben. Dem war aber nicht so. Tatsächlich stellte es sich als ziemlich kniffelig heraus  die einzelnen Module vernünftig miteinander zu kombinieren. Die richtige Anordnung auf der Z-Achse, der richtige Skalierungsfaktor und der optimale Viewport musste im Zusammenspiel der Elemente gefunden werden. Da half nur ausprobieren Schritt für Schritt aufeinander abstimmen.

Die finale Anordnung der einzelnen Module

Sieht ziemlich „wimmelwild“ aus oder?!? Jetzt denkt Euch das Ganze noch voll animiert und natürlich responsiv. Bereit?

Wooohoooooooooooooo 😉