Werbeagentur für Corporate Design, Online Marketing, Kommunikation, Employer Branding

HTML5-Banner erobern Online-Werbung

Adobe Flash galt lange Zeit als der Standard bei der Entwicklung von Online-Werbemitteln. Animationen und Interaktionen waren leicht umzusetzen. Und die Komprimierung und Auslieferung von Programmcode, Grafiken und Schrift in einer einzelnen Datei war bequem gelöst.

Mobile Endgeräte ignorieren Flash

Doch die Verbreitung von Smartphones und Tablets brachte Adobes proprietäres Format in Bedrängnis. Denn Flash gilt als ressourcenhungrig. Zusätzlich kämpft die Software mit vielen Sicherheits-Lücken. Mobile Apple-Geräte unterstützen den Flash Player daher nicht. Als Apple-Gründer Steve Jobs das bekannt gab, ging es mit der Beliebtheit von Flash steil bergab.

Moderne Browser unterstützen HTML5

Eine der letzten Bastionen von Flash waren die Online-Werbemittel. Lange gab es dort keine wirkliche Alternative zu Flash. Doch die Browser werden immer besser. Sie unterstützen HTML5, CSS3-Standards und enthalten immer leistungsfähigere JavaScript Engines. So machen sie Flash den Bereich der Werbemittel streitig. Mit HTML, CSS und JavaScript kann man nun genauso interaktive und animierte Werbebanner erstellen, wie es mit Flash möglich ist.

Neue Entwicklungs-Umgebungen für HTML5-Werbemittel

Die Software-Hersteller reagieren auf diesen Trend. Sie bieten spezielle Entwicklungs-Umgebungen für HTML5-Werbemittel an. Adobe Animate CC und der Google Webdesigner (GWD) sind am weitesten verbreitet. Adobe Animate CC soll laut Hersteller die Software Adobe Edge Animate und Flash Professional ersetzen.

Google als Besitzer des wohl größten Online-Werbemittel-Netzwerks bietet mit GWD eine eigene Entwicklungs-Umgebung an. Und im Google Display Network (GDN) gibt es eine Gratis-Software zum Erstellen von HTML5-Werbemittel. Noch befindet sie sich allerdings im Beta-Stadium.

Animations-Libraries als Alternative zu HTML5

Eine Alternative zu den integrierten Entwicklungs-Umgebungen ist der Einsatz einer Animations-Library auf Basis von JavaScript. Die am weitesten verbreitete Library dieser Art ist die Greensock Animation Platform, kurz GSAP. Sie wird sogar von Google empfohlen. Anders als die Entwicklungs-Umgebungen Animate CC und GWD steuert man Animationen nicht über eine Zeitleiste, sondern setzt sie programmatisch um. Das ist unter anderem ein großer Vorteil, wenn viele Werbemittel mit gleichem Animations-Ablauf adaptiert werden müssen. Auch New Communication verwendet GSAP, um HTML5-Werbemittel zu erstellen.

Automatisierte Daten-Komprimierung

Neben der Animation ist dabei die Dateigröße wichtig. Lange Zeit galten 40 Kilobyte als Standard für Werbemittel. Ein Werbemittel besteht aber nicht mehr aus einer einzelnen Datei, sondern aus HTML, CSS, JavaScript-Dateien und Grafiken.

Hier verwendet New Communication das Automations-Tool gulp.js, das auf Node.js aufbaut. Damit erstellen wir sogenannte Tasks, die automatisiert Grafiken, JavaScript- und CSS -Dateien komprimieren. Gerade bei einer größeren Kampagne mit vielen Format-Adaptionen kommen schnell um die 100 Werbemittel zusammen. Wenn jedes Werbemittel 5 Grafiken besitzt, ist die Automatisierung der Grafik-Komprimierung ein enormer Vorteil.

Hilfe bei der Etablierung von HTML5-Werbemitteln

Der Online-Vermarkterkreis (OVK) im Bundesverband Digitale Wirtschaft (BVDW) e.V. hat eine HTML5-Richtlinie zur Erstellung von Werbemitteln veröffentlicht. Aber nicht jeder Vermarkter hält sich daran. Bei der Etablierung von HTML5-Werbemitteln in den Systemen gibt es deutliche Unterschiede. Beispielsweise können die Auslieferung des Werbemittels und die Spezifikation des Click-Tags unterschiedlich sein. Mithilfe von gulp.js können Werbemittel aber für die unterschiedlichen Richtlinien der Vermarkter ausgeliefert werden. Dazu injiziert man z. B. den Click-Tag für den jeweiligen Vermarkter in das Werbemittel.

Prognose

Eins ist sicher: HTML5-Banner sind schon in naher Zukunft der neue Standard bei der Erstellung von Online-Bannern. Mit dem richtigen Workflow und Toolset werden sie heute schon problemlos umgesetzt.

Quellen:
developers.google.com
greensock.com
t3n.de
support.google.com 
google.com
adobe.com