HTML5 Werbung und Banner designen

Bannerwerbung zählt schon seit den 90ern zur Grundausstattung der Werbetreibenden. Kommen Textanzeigen oft etwas nüchterner daher, schaffen Sie mit Bildern eine andere Wahrnehmung, die sich mehr in die Erinnerung einbrennt und dadurch besonders für Branding Kampagnen geeignet sind. Animationen sorgen hier für Aufmerksamkeit und hinterlassen Spuren in der Erinnerung des potentiellen Kunden.

Statische Werbeanzeigen werden immer öfter durch interaktive Ads ersetzt. Diese sind aus dem Internet nicht mehr wegzudenken: Insbesondere, wenn Konsumenten auf neue Firmen, Produkte oder Dienstleistungen aufmerksam werden sollen, sind sie effektive Werbemittel des Suchmaschinenmarketing (SEM). Mit klassischen Textanzeigen, die bei Suchanfragen ausgespielt werden, erreichen Sie meistens eher die Benutzer, die mit dem Produkt bereits vertraut sind und gezielt danach suchen.

HTML5 oder Flash?

Früher erfolgte die Umsetzung der interaktiven Werbeanzeigen meist mit dem Flash Player. Während Apple allerdings den Flash-Player von Anfang an boykottierte, zogen Mozilla und Google nach (wir berichteten). Stattdessen werden animierte Display Ads heute mit HTML5 umgesetzt, der neusten Version von HTML. Dies ist aber nicht ganz so einfach, aus diesem Grund bieten wir diesen Service unseren Kunden an.
Im Bereich der Vektorgrafik und der Videowiedergabe (FLV-Format) überzeugte das Flash-Werbemittel. Darüber hinaus sah ein Flash-Banner auf jedem Betriebssystem und in jedem Browser gleich aus. Dies erleichterte die Produktion und Qualitätssicherung.

Die Umsetzung von Werbebannern mit HTML5, verlangt einiges an Kenntnissen, da z.B. die Umsetzung mit einem Tool wie dem Google Web Designer eine Mischung aus Photoshop, Flash, Action Script und 3ds Max ist – und besonders unerfahrene Nutzer oder Designer sehr viele Stunden kostet.

Flash-Werbung in HTML5 umwandeln

Vielleicht fragen Sie sich jetzt, können wir unsere Flash-Banner nicht einfach in HTML5-Banner umwandeln? Ihre Werbebanner sind ursprünglich mit Flash erstellt worden, sollen nun aber in HTML5 umgewandelt werden?

Dann sollten Sie am besten die betreffenden Werbemittel vollständig neu aufbauen, um ein optimales Ergebnis zu erzielen. Es besteht zwar auch die Möglichkeit die bestehenden Dateien in HTML5 zu konvertieren (oft automatisiert), aber dieses Vorgehen zieht meist Ärgernisse, wie unscharfe Schriften, Farbfehler oder Auflösungsprobleme, nach sich.

HTML5-Banner erstellen

HTML5 kommt ohne Plugins aus. Die hohen Performanceanforderungen und Sicherheitslücken von Flash stören die Benutzererfahrung, ganz anders als Animationen und Interaktionen der Webtechnologie HTML5, welche auch für mobile Geräte kein Problem darstellen und direkt responsive gestaltet werden können.

HTML5 erweitert HTML um „Rich Web Content“, das bedeutet unter anderem, dass visuelle Effekte und eine bessere Einbettung von Video- und Audioinhalten ermöglicht werden. Kurz: HMTL5 ist auf der Überholspur für Webanimationen.

Wird alles komplizierter mit hmtl5?

Während es sich bei Flash um eine etablierte Plattform handelt, welche die Produktion von digitalen Werbemitteln verlässlich gestaltet, müssen bei HTML5 gewisse Standards noch erprobt werden.

Dazu kommt, dass es oft an Erfahrung mangelt im Umgang mit den neuen HTML5-Bannern. Es gibt allerdings viele Erfolgsfaktoren, die für Ihre Anzeigen getestet werden können, um erfolgreiche Werbemittel zu erstellen.

Tests für Ihre Banner Designs

Wir erstellen nicht nur Banner oder Display Ads, wir sind uns auch der Schwächen von diesen bewusst und testen deshalb immer die Effektivität verschiedener Anzeigen. Es gibt immer wieder Beispiele, wie diese sehr erfolgreich genutzt (Achtung, das Beispiel ist nur bedingt jugendfrei) werden können.

Leider gibt es hierbei kein klassisches Rezept, sondern der wissenschaftliche Ansatz des Testens führt Sie zum Erfolg. Einige unserer Tests sind z.B.:

• A/B Tests Ihrer Anzeigen – Unterschiedliche Anzeigen werden gegeneinander ausgespielt und ein „Gewinner“ wird ermittelt.
• Farbigkeit der Banner – Besonders auffällige und gefühlt „nervige“ Farben können hohe Klickraten erzeugen – aber nicht zwangsläufig zu Verkäufen führen.
• Echte vs Stock-Fotos – Stock-Fotos haben meist niedrigere Interaktionsraten, vor allem Werbeanzeigen die nicht „perfekt“ wirken, sondern authentisch, erzielen oft überdurchschnittlich hohe Aufmerksamkeit.
• Pattern Interrupts – Die beste Werbung schafft es einen „Bruch“ in der Wahrnehmung des Nutzer zu erzeugen, der ihn verführt auf die Anzeige zu klicken, ohne dass die Erwartungen danach enttäuscht werden.
• Klare Lesbarkeit der Schriften – Wenn Sie einen Text haben, sorgen Sie dafür, dass er lesbar ist, denn sonst wird er kaum wahrgenommen.
• Animationen zum Ansprechen der Aufmerksamkeit – Besonders durch Banner-Blindness sind wir es gewohnt Anzeigen zu ignorieren. Dezente Animationen, die den Nutzer zu einer Handlung führen (und ansprechen), erreichen meist gute Ergebnisse.
• Ein direkter „Call to Action“ motiviert die „Leser der Werbung“ dazu eine Handlung zu treffen
• Display Ads haben immer auch den Faktor Branding und führen oft zeitversetzt zu Umsätzen, wenn ein neuer Bedarf für das beworbene Produkt beim Betrachter besteht.

Besonders bei der Werbung gibt es durch viele Negativerfahrungen Konditionierungen der Nutzer um Banner zu ignorieren, die durch effektives Bannerdesign neu durchbrochen werden müssen.

Darüber hinaus wird Ihre Werbung technisch intensiv getestet, denn die HTML5-Implementierungen sind von Browser zu Browser verschieden. Schwierigkeiten tauchen oft auch beim Einfügen der Click-Tags bei Spezialformaten (z.B. Expandables, Wallpapers) sowie bei der Einbindung von Datenfeeds auf.

Werbung mit HTML5 – Ein Fazit

Auf lange Sicht ist der Umstieg auf HTML5 unausweichlich und ist richtig eingesetzt eine sehr effektive Form der Werbung. Der Google Web Designer ist ein tolles, wenn auch kompliziertes Tool mit dem jederzeit HTML5 Anzeigen erstellt werden können.

Gerne helfen wir Ihnen bei der Umsetzung von HTML5-Werbemitteln: Von der Konzeption, über das Design, bis hin zur Programmierung und der Auslieferung. Wir freuen uns auf Ihre Nachricht!