Werbebanner ohne Bilder, dafür mit Animation
Kommentare

Kaum eine Website kommt ohne die Anzeige von Werbung aus. Allerdings werden Werbebanner gerne von den Besuchern übersehen und noch weniger angeklickt – nicht zuletzt, weil die Nutzung von AdBlockern

Kaum eine Website kommt ohne die Anzeige von Werbung aus. Allerdings werden Werbebanner gerne von den Besuchern übersehen und noch weniger angeklickt – nicht zuletzt, weil die Nutzung von AdBlockern weit verbreitet ist. Wie kann man also seine Werbebanner erfolgreich gestalten, sodass sie sowohl wahrgenommen werden, als auch für Conversion sorgen? Mit dieser Frage beschäftigte sich das Team von Campaign Monitor und ging bei der Gestaltung ihres Werbebanners einen etwas ungewöhnlichen Weg und entwarf ein animiertes Werbebanner ohne Bilder. Steven Fabre erklärt, wie solche Banner erstellt werden können.

Konzept für das animierte Werbebanner entwerfen

Natürlich will man mit Werbebannern Kunden auf sein Produkt aufmerksam machen. Meistens soll das mithilfe auffälliger Farben und Formen oder eindrucksvoller Bilder geschehen. Allerdings muss bei der Gestaltung im Hinterkopf behalten werden, dass viele User Banner auf Websites kaum wahrnehmen, weil sie unter einer „Banner Blindness“ leiden.

Das Campaign Monitor-Team hat darum versucht, mit einem bilderlosen, animierten Banner auf ihr Produkt aufmerksam zu machen, statt ein statisches Werbebanner zu gestalten. Beworben wird „Canvas“, ein Tool mit dem E-Mails designt werden können, die auf jedem Device ohne Abstriche in der Darstellung funktionieren.

Dieses Feature sollte auch auf dem Werbebanner hervorgehoben werden, darum entschied sich das Entwickler-Team für das Konzept, die Erstellung und Darstellung einer E-Mail auf verschiedenen Devices in der animierten Anzeige zu zeigen. Erst im zweiten Schritt wurde über den Code für die Animation des Banners nachgedacht.

Animiertes Banner mit HTML und CSS erstellen

In der Anzeige werden verschiedene Devices dargestellt, die alle ähnlich designt sind, sodass alle dargestellten Icons das gleiche HTML-Markup, teilweise auch die gleichen CSS-Regeln, teilen. Zudem hat jedes Icon sein eigenes Property, was die Animation der einzelnen Frames mit dem CSS-Transition-Property vereinfacht.

Um den Übergang zwischen den einzelnen Devices natürlicher wirken zu lassen, fügte das Campaign-Monitor-Team dem Banner eine Morphing-Animation mit der Transform-Regel des CSS-Animation-Properties hinzu. Abschließend wurde das Timing zwischen den originalen Key-Frames definiert, indem dem HTML-Element mit JavaScript die Klasse des Devices, das dargestellt werden soll, hinzugefügt wurde.

Wie ein animiertes Werbebanner entwickelt werden kann, erklärt Steven Fabre ausführlicher und mit Codebeispielen in seinem Blogpost. Beim Erstellen des Codes sollte allerdings immer im Hinterkopf behalten werden, wie die fertige Anzeige aussehen soll, da man sonst schnell überflüssigen Code erhält. Dennoch ist das Gestalten eines bildlosen, animierten Werbebanners eine interessante Alternative, die es vielleicht schafft, die „Banner Blindness“ der Kunden zu durchbrechen.

Aufmacherbild: Cityscape blank billboard for the user to modify. Advertising in blank von Shutterstock / Urheberrecht: avarand

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -