Reichweitenstarkes Online-Marketing mit HTML5 Bannern

Erfahre alles was du über die Maximierung deiner Online-Präsenz mit Hilfe von HTML5 Bannern wissen musst

HTML5-Banner bieten dir die Möglichkeit, deine Online-Werbung auf ein neues Level zu bringen. Mit animierten Inhalten und interaktiven Funktionen kannst du die Aufmerksamkeit deiner Zielgruppe auf dich und deine Marke ziehen und ihre Erwartungen übertreffen.

Aber was macht ein erfolgreiches Banner aus? Es gibt keine allgemeingültige Antwort auf diese Frage, da ein Design, das für ein Unternehmen funktioniert, für ein anderes nicht unbedingt geeignet ist.

Allerdings gibt es gestalterische Grundregeln, die ein erfahrener Banner-Designer befolgen sollte, um eine bessere Performance zu erzielen, wie z.B. eine höhere Klickrate. Aber Vorsicht: Manchmal kann es sinnvoll sein, diese Regeln bewusst zu brechen, um ein besonderes und emotionales Erlebnis für die Zielgruppe zu schaffen.

Letztendlich ist das Design von Bannern subjektiv und hängt stark von der Marke, den Unternehmenszielen und der Zielgruppe ab, um erfolgreich zu sein. Die wichtigste Regel lautet immer: Ein Banner ist erfolgreich, wenn es seine Ziele erfüllt.

Stelle also klare Ziele für dein Banner und arbeite daran, diese zu erreichen. Wie du deine Online-Präsenz durch gezieltes Online-Marketing mit HTML5 Bannern stärkst und worauf zu achten ist, erfährst du in diesem Beitrag.

01 Marketing

Display Banner sind ein wichtiger Bestandteil des Online-Marketings, die dazu dienen, ein Produkt, eine Dienstleistung oder eine Marke einem breiten Publikum bekannt zu machen. Um erfolgreich zu sein, ist es wichtig, dass man ein klares Verständnis für die Ziele und Zielgruppen hat. Hierbei muss man bedenken, dass jede Display-Banner-Kampagne Teil einer größeren Marketing-Strategie sein sollte.

1.1 Ziele von Display Bannern

Die Ziele von Display Bannern können sehr unterschiedlich sein, aber jedes Ziel sollte klar definiert werden. Einige Beispiele für mögliche Ziele sind:

  • Steigerung der Bekanntheit deiner Marke
  • Förderung von Verkäufen
  • Erhöhung des Traffics auf deiner Webseite
  • Generierung von Leads
  • Verbesserung des Brand Images

Um erfolgreich zu sein, muss man in der Lage sein, die Effektivität der Display-Banner-Kampagne zu messen. Hierbei kann man beispielsweise die Klickrate, die Konversionrate oder den Return on Investment (ROI) als Metriken verwenden.

Bevor du Banner in Auftrag gibst, sollten deine grundlegenden Gedanken aber immer als erstes sein:

  • Was will ich bewerben? (Mein Produkt, meine Marke, meine Dienstleistung)
  • Welches Ziel soll der Banner konkret erfüllen? (Mehr Verkäufe, höhere Markenbekanntheit, mehr Newsletter-Anmeldungen etc.)

Je genauer diese Fragen beantwortet werden, desto besser lassen sich die Inhalte definieren, die die Banner haben müssen, um erfolgreich zu sein.

1.2 In Kampagnen denken

Display Banner sollten immer Teil einer größeren Marketing-Kampagne sein. Diese kann beispielsweise auch Social-Media-Marketing, E-Mail-Marketing oder Influencer-Marketing umfassen. Eine ganzheitliche Marketing-Strategie erhöht die Chancen auf Erfolg und ermöglicht es, die Effektivität der Display-Banner-Kampagne zu optimieren. Hierbei kann man beispielsweise die verschiedenen Marketing-Kanäle aufeinander abstimmen.

Display Banner sind also im Idealfall eines von vielen Mitteln um eine Kampagne erfolgreich werden zu lassen. In der Regel ist es außerdem empfehlenswert, sich auf eine Botschaft oder ein Produkt pro Banner zu beschränken, da diese nur begrenzten Platz bieten und die Aufmerksamkeitsspanne des Users kurz ist. Sollten dennoch mehrere Produkte innerhalb eines Banners beworben werden, kann dies auch durch ein in Schleife laufendes Karussell umgesetzt werden.

1.3 Zielgruppen definieren

Die Zielgruppe ist ein wichtiger Faktor für den Erfolg einer Display-Banner-Kampagne. Hierbei sollte man sich über die demografischen Daten, Interessen und Verhaltensweisen der Zielgruppe im Klaren sein. Beispiele für demografische Daten sind Alter, Geschlecht, Bildungsstand und Einkommen. Interessen können beispielsweise bestimmte Hobbys oder politische Überzeugungen sein. Verhaltensweisen können beispielsweise die Online-Aktivitäten, die Kaufgewohnheiten oder das Reiseverhalten sein. Je besser man die Zielgruppe kennt, desto gezielter kann man die Display Banner gestalten und platzieren und desto größer sind die Erfolgschancen der Kampagne.

02 Botschaft

Eine erfolgreiche Display-Banner-Kampagne hängt nicht nur von einer klaren Zielgruppe und einer größeren Marketing-Strategie ab, sondern auch von einer starken Botschaft. Die Botschaft der Banner sollte klar, einprägsam und ansprechend sein, um das Interesse der Zielgruppe zu wecken. Daher gilt hier meist auch die Regel: Weniger ist mehr. Banner sollen Interesse wecken, nicht unbedingt tiefgehende Inhalte vermitteln, das machen dann die Landingpages.

2.1 Bedeutung von Slogans

Ein starker Slogan kann eine wichtige Rolle bei der Übermittlung der Botschaft spielen. Ein guter Slogan ist kurz, einprägsam und vermittelt die Kernbotschaft des Produkts oder der Dienstleistung. Ein guter Slogan bleibt im Gedächtnis und hilft, dass das Interesse an der Marke aufrechterhalten wird.

2.2 Was ist die AIDA-Ansprache?

Die AIDA-Ansprache ist ein Modell, das das Verhalten von Verbrauchern bei der Reaktion auf Werbung beschreibt:

  • Attention (Aufmerksamkeit beim Benutzer erzeugen)
  • Interest (Interesse wecken, das Alleinstellungsmerkmal verdeutlichen)
  • Desire (Verlangen wecken über ein klares Nutzenversprechen gegenüber des Nutzers)
  • Action (Handlung fördern, beispielsweise über einen CTA)

Um eine erfolgreiche Display-Banner-Kampagne zu gestalten, sollte die Botschaft die AIDA-Ansprache berücksichtigen. Zunächst sollte die Botschaft das Interesse der Zielgruppe wecken, dann das Verlangen nach dem Produkt oder der Dienstleistung wecken und schließlich zu einer Handlung aufrufen.

2.3 Direkte Ansprache über Geo-Targeting

Geo-Targeting ermöglicht es, die Display Banner gezielt an eine bestimmte geografische Region zu richten. Hierbei kann man beispielsweise auf die demografischen Daten oder Verhaltensweisen der Zielgruppe in einer bestimmten Region abzielen. Eine direkte Ansprache über Geo-Targeting kann das Interesse der Zielgruppe erhöhen, da die Botschaft direkt auf die Bedürfnisse und Interessen der Zielgruppe in einer bestimmten Region abgestimmt ist.

03 Gestaltung

Die Gestaltung eines HTML5-Banners ist von entscheidender Bedeutung, um das Interesse der Zielgruppe zu wecken und die gewünschte Handlung auszulösen. Eine ansprechende und wirkungsvolle Gestaltung kann dazu beitragen, dass ein Banner erfolgreicher ist und die Ziele einer Marketingkampagne erreicht werden.

3.1 Corporate Identity

Es ist wichtig, dass das HTML5-Banner mit der Corporate Identity (CI) deines Unternehmens übereinstimmt. Die CI beinhaltet die visuelle Identität eines Unternehmens, einschließlich Farben, Schriftarten und Logos. Eine konsistente Anwendung der CI in allen Marketing-Materialien, einschließlich HTML5-Banners, kann dazu beitragen, dass das Interesse an der Marke gestärkt und das Vertrauen in die Marke erhöht wird.

3.2 Farben und Formen

Farben haben einen starken Einfluss auf die Emotionen und das Verhalten von Verbrauchern. Daher ist es wichtig, dass die Farbauswahl für das HTML5-Banner sorgfältig überdacht wird. Farben sollten ausgewählt werden, um die Botschaft zu unterstützen und das Interesse der Zielgruppe zu wecken. Es ist auch wichtig, dass die Farben gut lesbar sind und einen guten Kontrast bieten, um sicherzustellen, dass die Botschaft gut verstanden wird.

Bei bekannten Marken reicht es außerdem oft schon aus, dass eine Form gezeigt wird und man sofort erkennt, um was es geht. Bekannte Beispiele sind hierfür das McDonald’s M oder der Haken von Nike. Solch eine Verknüpfung von Farben und Formen mit deiner eigenen Marke in den Köpfen der User sollte ebenfalls ein Ziel und Mittel sein, um auf lange Sicht Erfolg in deiner Nische zu haben.

3.3 Schrift

Eine lesbare Schrift ist wichtig, um sicherzustellen, dass die Botschaft gut lesbar ist. Es ist wichtig, dass die Schriftart für das HTML5-Banner gut lesbar und ansprechend ist. Eine leicht lesbare Schrift kann dazu beitragen, dass das Interesse der Zielgruppe geweckt wird und dass die Botschaft gut verstanden wird.

Hier ist es wichtig, ein paar essentielle Punkte zu beachten. Es muss stets ein gutes Mittelmaß aus Schriftgröße und Textmenge gefunden werden, damit der Text lesbar bleibt, da die Banner nur begrenzten Platz bieten.

  • Die Textmenge: So viel wie nötig, so wenig wie möglich.
  • Schriftarten: Wenn nicht schon von deinem CI vorgegeben, sollten auf einem Banner niemals mehr als 2 oder 3 unterschiedliche Schriftarten zum Einsatz kommen. Wenn du noch nicht weißt, welche Schrift du nutzen möchtest, suche ich gerne auch eine passende für deine Banner heraus.
  • Ein klares Schriftbild: Eine Schriftart die zwar schön aussieht, weil man den Handwritten-Style mag, aber nicht lesbar ist, wird niemandem etwas vermitteln können, wenn sie nicht lesbar ist. Der Kontrast zum Hintergrund und ein klares Schriftbild sind essentielle Bestandteile einer gut verständlichen Botschaft.
  • Die Textausrichtung: Es ist wie so oft eine Geschmacksfrage, aber auch bei der Textausrichtung gibt es ein paar Design-Empfehlungen. Seriös auftretende Unternehmen wie Banken, Versicherungen und Anwälte bevorzugen eine eher zentrierte und symmetrische Textausrichtung. Unternehmen die eine eher emotionale Schiene fahren und Abenteuer, Spaß und Spannung vermitteln möchten, brechen eine solche Ausrichtung gerne auf und setzen Texte gerne an den Rand des Banners und brechen damit bewusst die allgemein gültigen Ansätze bei der Textgestaltung auf.

3.4 Visual und Animation

Visuals und Animationen können eine wichtige Rolle bei der Gestaltung des HTML5-Banners spielen. Eine ansprechende Visualisierung und Animation kann das Interesse der Zielgruppe wecken und die Botschaft unterstützen. Es ist jedoch wichtig zu beachten, dass zu viele oder ablenkende Animationen die Aufmerksamkeit von der eigentlichen Botschaft ablenken können. Die Gestaltung kann hier auch völlig unterschiedlich ausfallen. Ein starkes Visual ist Kernelement eines guten Banners. Es erzeugt Aufmerksamkeit und unterstützt durch Emotionen deine Markenbildung und transportiert die Stimmung der Botschaft.

Innerhalb des ersten Frames sollte auch klar werden, worum es geht, die Aufmerksamkeitsspanne des Betrachters ist begrenzt. Wenn dieser nicht sofort weiß worum es geht, wird er sich auch nicht länger mit der Anzeige beschäftigen. Es ist daher wichtig, den Anfang der Animation immer lustig, emotional oder provokant zu gestalten, um Neugier zu wecken.

Hier einige Tipps, die bei einer Animation berücksichtigt werden sollten:

  • Bei einem animierten Banner sollte auf übertriebene blinkende Effekte wie Stroboskope verzichtet werden, da sie von Google oft nicht erlaubt sind. Auch das Täuschen des Benutzers durch eingeblendete Mauszeiger, die auf ein bestimmtes Element klicken, ist unzulässig.
  • Dein Logo sollte wenn möglich ständig sichtbar sein, um eine maximale Wirkung für dein Branding zu erzielen.
  • Animierte Banner sollten maximal 30 Sekunden lang sein und 24 Frames pro Sekunde im HTML5-Format haben.
  • Zum Schluss sollte das animierte Banner die wichtigsten Informationen enthalten, da du davon ausgehen musst, dass das Banner nicht von Anfang bis zum Ende gesehen wird.
  • Interaktive Elemente wie ein CTA können das Klick- und Engagement-Interesse erhöhen, besonders wenn es sich um ein spielerisches Produkt handelt.

3.5 Call-to-Action

Ein klarer Call-to-Action (CTA) ist ebenfalls ein wichtiger Teil jedes HTML5-Banners und macht diesen erst zum Banner. Ein CTA fordert die Zielgruppe zur Interaktion auf und gibt ihnen eine klare Handlungsanweisung. Dies kann ein Klick auf einen Button, eine Anmeldung für einen Newsletter oder ein Kauf eines Produkts sein. Ein klarer und eindeutiger CTA kann dazu beitragen, dass das Interesse der Zielgruppe gestärkt wird und dass die Ziele einer Marketingkampagne erreicht werden.

Es ist wichtig, dass der CTA gut sichtbar und leicht zugänglich ist. Eine schlecht platzierte oder schwer zu findende CTA-Schaltfläche kann dazu führen, dass die Interaktion verloren geht. Es ist auch wichtig, dass der CTA gut lesbar und ansprechend ist, um sicherzustellen, dass die Zielgruppe auf den CTA reagiert.

Auch hier gibt es ein paar Stichpunkte, die beachtet werden sollten. Ein guter CTA-Button muss …

  • leicht lesbar sein. Ein vollgepacktes Banner mit zu viel Inhalt gibt dem CTA nicht den Platz, den er benötigt, um leicht gesehen zu werden. Ein zu kleiner CTA geht unter und wird dementsprechend auch nicht geklickt.
  • zu einer Handlung auffordern. Der CTA stellt die Verbindung her zwischen dem Banner und deinem Kampagnenziel. Wird er nicht geklickt, funktioniert das Banner nicht. Kurze und prägnante Aufforderungen sind hier wichtig. Ein CTA-Text muss dem Benutzer in möglichst wenigen Zeichen erklären, was er machen muss, um an sein Ziel zu kommen. Formulierungen wie “Jetzt kaufen”, “Broschüre downloaden”, “Mehr erfahren” verraten dem Benutzer direkt, was er zu erwarten hat und was ihm ein Klick an Mehrwert bringt.
  • wenn möglich einzeilig sein. Einzeilige Buttons springen leichter ins Auge als welche die, übertrieben gesagt, einen halben Satz beinhalten.
  • keine langen Wörter beinhalten. “Automatische Dokumentenerstellung nutzen” ist deutlich zu lang und sperrig. Diese Info lässt sich besser im Textbereich des Banners unterbringen und eine Formulierung wie “Service nutzen” als CTA einsetzen.
  • zur Werbebotschaft passen. Dein CTA sollte in keinem Fall irreführend sein und falsche Versprechungen suggerieren. Der Nutzer merkt das spätestens auf deiner Landingpage und springt dann sofort ab. Das nervt nicht nur den Nutzer, sondern schädigt auch den Ruf deiner Marke.
  • optisch hervorstechen. Oft sind hier Kontrastfarben, die sich vom restlichen Farbschema des Banners abheben, das Mittel der Wahl.

04 Technik

4.1 Dateiformate für Banner

Banner gibt es in vielen unterschiedlichen Formaten. Flash, GIF oder HTML5 sind die bekannten Vertreter. Warum in den allermeisten Fällen HTML5 das Mittel der Wahl ist, erfährst du jetzt.

Flash

Flash war ein Format von Adobe (swf-Format) und bis Anfang der 2010er Jahre sehr beliebt bei Webdesignern und Animatoren. Flash-Banner boten flüssige Animationen, Soundeffekte und Möglichkeiten zur Interaktion. Selbst Spiele im Web-Browser konnten damit umgesetzt werden. Mit der Entwicklung der ersten Smartphones ist dieses Format aber mittlerweile ausgestorben. Keiner der aktuellen Browser unterstützt dieses Format noch, weder mobil, noch am Desktop.

GIF

Das GIF-Format gilt als Urgestein der animierten Bilder im Web. Die Vorteile sind unter anderem …

  • Kompatibilität in so gut wie allen Web-Browsern.
  • sind klein in der Dateigröße, wenn wenige Farben zum Einsatz kommen
  • günstiger in der Erstellung, aber auch qualitativ minderwertiger als HTML5

Allerdings hat GIF auch einige Nachteile gegenüber HTML5:

  • GIF unterstützt nur 256 Farben und ist dadurch optisch sehr limitiert, weiche Farbverläufe sind damit nicht möglich.
  • Google erlaubt für GIF Banner nur 5 Bilder pro Sekunde (fps), dadurch wirken die Animationen nicht sehr flüssig und eher stockend
  • Mit steigender Animationsdauer erreichen GIF-Banner außerdem sehr schnell riesige Datenmengen

Zusammenfassend kann man daher sagen, dass GIF verwendet werden kann, wenn wenige und simple Animationen und nur zwei oder drei Farben zum Einsatz kommen sollen, alles andere ist in HTML5 einfacher und qualitativ hochwertiger umsetzbar.

HTML5

HTML steht für Hypertext Markup Language und dient zur Auszeichnung von Texten und anderen Inhalten eines Webdokumentes zu strukturieren. Hier die Gründe, weshalb HTML5 Banner die derzeit beste Option für Web-Banner sind:

  • HTML5 wird mittlerweile auf sämtlichen Geräten problemlos wiedergegeben.
  • Die Qualität der Display Banner ist überall gleichbleibend im Gegensatz zu beispielsweise Videos, die je nach Verbindungsqualität und Kompression zu Artefaktbildung neigen.
  • Durch das Verwenden von 24 oder 25 fps in den Animationen, wirken diese stets sauber und flüssig und können die Werbebotschaft ideal kommunizieren.
  • CTAs können durch Animationen zusätzlich hervorgehoben werden und die Interaktionsrate steigern
  • Aufgrund ihres Aufbaus, können auch komplexe Animationen realisiert werden, ohne die Dateigröße des Banners überproportional aufzublasen.

Es gibt also fast keine Gründe, weshalb man kein HTML5 bei Bannern einsetzen sollte. Wer Display Ads nutzen möchte, kommt an HTML5 heute nicht mehr vorbei.

05 Fazit

Zusammenfassend lässt sich sagen, dass die Gestaltung des HTML5-Banners eine wichtige Rolle bei der Umsetzung einer erfolgreichen Marketingkampagne spielt. Eine ansprechende Gestaltung, die die CI deines Unternehmens widerspiegelt, kann das Interesse der Zielgruppe wecken und dazu beitragen, dass die Ziele einer Marketingkampagne erreicht werden.

Wie du nun weißt, ist bei der Erstellung von Display Bannern eine Menge zu berücksichtigen. Die Botschaft, das Design und auch die Technik sind stets bei der Erstellung zu beachten. Solltest du nun auch von Display Bannern überzeugt sein und möchtest gerne professionelle HTML5-Banner gestaltet bekommen, nimm gerne Kontakt mit mir auf.

Schreibe mir