Display-Werbung mit HTML5 – So erstellen Sie responsive Anzeigen

In diesem Artikel erklären wir, warum responsive HTML5-Banneranzeigen ein Muss für alle digitalen Werbetreibenden sind. Von Designern bis zu Digitalspezialisten, von Agenturen bis hin zu internen Teams ist HTML5-Display-Werbung heute das Standard-Bannerformat.

Insbesondere bei einer immer größeren Anzahl von Geräten und Plattformen, die bedient werden müssen, ist es entscheidend, sich an das Verhalten der Zuschauer anpassen zu können. Wenn Ihre Banneranzeige nicht kompatibel ist, nicht auf Änderungen der Bildschirmgröße reagieren kann oder auf Mobilgeräten funktioniert, dann haben Sie ein Problem. Responsive HTML5-Display-Werbung bietet die Flexibilität und Technologie, die Sie benötigen, damit Ihre Marke online erfolgreich ist.

Insbesondere bietet HTML5 digitalen Vermarktern die Möglichkeit:

• Skalieren Sie schnell auf viele Formate und Größen
• Besitzen Sie die ultimative Kontrolle über das Design
• Erstellen Sie ganz einfach Anzeigenvarianten und Übersetzungen
• Massenproduktion von Rich-Media-Bannern
• Nutzen Sie das Wachstum von Video und mobiler Anzeige
• Aktualisieren Sie Banner dynamisch mit Daten-Feeds
• Teamintern effektiv zusammenarbeiten

Ja, die Erstellung reaktionsschneller Display-Werbung war noch nie so wichtig, zumal Ihre schöne Display-Werbung heute mit größerer Wahrscheinlichkeit als je zuvor auf Mobilgeräten angesehen wird. Laut einer Bannerflow-Studie aus dem Jahr 2020 überholen mobile Display-Anzeigen Desktop-Anzeigen um einiges. Fast zwei Drittel der Aufrufe von Display-Werbung erfolgen heute in Europa über Mobilgeräte. Hinzu kommt, dass mobile Nutzer jeden Tag über vier Stunden auf ihren Smartphones verbringen – das ist ein Engagement, das sich ein digitaler Werbetreibender nicht leisten kann zu ignorieren. Die alte Welt der statischen, Gifs und Flash-Banner ist längst vorbei – oder sollte es zumindest sein.

Warum sollte ich HTML5-Display-Werbung erstellen?

Benötigen Sie weitere Gründe für die Erstellung von HTML5-Display-Werbung? Zunächst einmal dreht sich bei unserem Spiel alles ums Konvertieren und es ist kompetitiv. Jeder sehnt sich nach Aufmerksamkeit – gelingt es ihm nicht zu fesseln, ist das Spiel vorbei. HTML5 bietet unvergleichliche Gestaltungsmöglichkeiten durch Rich Media und eine ganze Reihe von Anzeigenformaten. Wenn Sie nicht den Best Practices für das Bannerdesign folgen, können Sie darauf wetten, dass ein Konkurrent dies tun wird. Darüber hinaus gewinnt Display-Werbung immer mehr an Reichweite – insbesondere im Bereich Programmatic.

Nehmen Sie zum Beispiel, was in Großbritannien vor sich geht. Laut einem eMarketer-Bericht gaben britische Werbetreibende im Jahr 2020 6,79 Mrd. £ für programmatische Werbung aus. Die Ausgaben für programmatische Display-Werbung machen jetzt 92 % aller Ausgaben für digitale Display-Werbung im Vereinigten Königreich aus – ungeachtet der Auswirkungen der Covid-19-Pandemie. Und dieser Anteil wird voraussichtlich bis 2022 94,5 % erreichen und 9,01 Mrd. £ ausmachen! Die Produktion besserer Anzeigen – über HTML5 – muss eine Priorität sein, um das Beste aus diesem Wachstum zu machen.

Da Unternehmen jetzt in ihrem gesamten digitalen Marketing „mobile first“ denken, ist es eine Mindestanforderung, sicherzustellen, dass Ihre Website, Zielseiten und Banner reaktionsschnell sind. Mit HTML5 können Sie Banner erstellen, die für Mobilgeräte geeignet, reaktionsschnell und reich an Funktionen sind. Anstatt eine statische Kampagne für den Desktop zu entwerfen und dann jedes Banner einzeln zu skalieren, können Sie stattdessen mit HTML5 skalieren!

Werbung ist längst mobil geworden und HTML5 ist der Weg, um die Banner zu erstellen, die Sie brauchen.

Was hat es mit HTML5 auf sich?

Bevor HTML5 allgemein eingeführt wurde, war das Ausführen einer Werbekampagne auf verschiedenen Geräten harte Arbeit. Das manuelle Erstellen von Bannern für all die verschiedenen Bildschirme, auf denen die Bannerwerbung erscheinen könnte, war eine Qual. HTML5 ist der optimale Weg, um Bannerwerbung zu erstellen, genauso wie für responsive Websites.

HTML5 ist das neueste Update der Hypertext Markup Language. Es ist die Standardsprache, die verwendet wird, um den Inhalt und das Design von Webseiten zu beschreiben, einschließlich derjenigen, die responsive sind. HTML5 ist in der Online-Werbung wichtig, da es die Flexibilität bietet, Bannerwerbung auf allen Geräten zu schalten.

Es bietet sowohl Publishern als auch Werbetreibenden die Möglichkeit, anpassbare Werbekampagnen durch Banner zu erstellen, die auf alle Plattformen passen. Anders als beispielsweise bei der Verwendung von Flash (oh, wie kurios) bedeutet dies, dass Sie nicht Hunderte von Versionen derselben Anzeige erstellen müssen. Die Reduzierung der Anzahl der Anzeigenversionen verringert auch die Wahrscheinlichkeit von Fehlern und erhöht Ihre Bannerproduktion.

Innerhalb einer HTML5-Banneranzeige sind Text, Bilder, Videos und JavaScript auf die gleiche Weise anpassbar wie bei jeder Webseite – sie können bearbeitet werden. HTML5-Banneranzeigen werden ebenfalls dynamisch optimiert, sodass die Anzeige überall perfekt aussieht. Darüber hinaus funktionieren HTML5-Banneranzeigen perfekt auf Mobilgeräten! Ohne Funktionsverlust, was bedeutet, dass es einfach ist, ein breiteres Publikum zu erreichen.

Es gibt zwei Möglichkeiten, HTML5-Banner zu erstellen

Im Wesentlichen gibt es heute zwei verschiedene Möglichkeiten, wie Sie Online-Banneranzeigen erstellen können.

Erstens können Sie die Werbebanner manuell selbst codieren, um sie responsive zu machen. Und ja, es gibt viele Tutorials und Vorlagen online, die Ihnen zeigen, wie das geht. Der Prozess ist jedoch langsam und bedeutet, dass Sie über ausreichende Kenntnisse in HTML5 und CSS verfügen müssen. Außerdem müssen Sie natürlich auch das Flair eines Designers haben! Eine seltene Kombination.

Alternativ können Sie eine Creative-Management-Plattform wie Bannerflow verwenden, die über einen Anzeigenersteller verfügt, der auf die Automatisierung der Creative-Produktion ausgerichtet ist. Diese helfen Ihnen dabei, die Codierung für Sie zu übernehmen – und alle Ihre Banner mit einem Klick auf eine Schaltfläche responsive zu machen. Außerdem bieten sie, wie wir feststellen werden, viele integrierte Möglichkeiten, um HTML5 zu nutzen. Diese können von der Entwicklung großartiger Videobanner bis hin zu dynamischen Bannern mit Datenfeeds reichen.

Die Realität sieht so aus, dass Creative-Management-Plattformen die Zeit zum Erstellen und Skalieren einer Kampagne verkürzen, während der Fokus der HTML5-Bannerproduktion fest auf das Design gelegt wird.

Erstellen von HTML5-responsiver Display-Werbung

Das Erstellen von responsiven HTML5-Banneranzeigen ist relativ einfach. Doch wie bei allen digitalen Bannern gibt es Regeln und Best Practices, die befolgt werden müssen. Beim Erstellen von HTML5-Display-Werbung ist Folgendes zu berücksichtigen:

Überprüfen Sie Ihre HTML5-Bannergrößen

Beim Erstellen eines responsiven HTML5-Layouts ist es erforderlich, dass Elemente variable Breiten haben, ähnlich der Konvention für Banneranzeigen. Sie können auch eine beliebige Höhe verwenden – aber das bedeutet nicht, dass Ihre Anzeige auf dieser Höhe bleibt. Die beste Vorgehensweise bei der Erstellung von Responsive-Bannern ist es, dieselben Höhen wie herkömmliche Bannergrößen zu verwenden. Dies geschieht, um die Kompatibilität mit Publishern und Werbenetzwerken aufrechtzuerhalten.

Entwerfen (oder ändern) Sie HTML5-Banner immer für die spezifischen Größen, die von Werbenetzwerken und Publishern angeboten werden. Hier ist beispielsweise eine Liste der von Google Ad Manager angebotenen Größen. Wenn Sie Ihre Werbebanner auf diesen Größen basieren, können Sie sicher sein, dass die meisten Geräte Ihr Werbemittel korrekt anzeigen, wenn es veröffentlicht wird.

Bilder, Bannerdesign und HTML5

Bei der Erstellung von responsiven HTML5-Bannern ist Ihre Kontrolle über Design und Bilder beispiellos. Rahmen für Nachrichten und Animationen sind einfach zu steuern. Aber werde nicht gierig! Ihr Banner wird höchstwahrscheinlich nur zwischen 5 und 15 Sekunden für den Betrachter sichtbar sein – machen Sie also das Beste aus dieser Zeit und konzentrieren Sie sich auf Ihre Designentscheidungen.

Und hier wird es interessant! Bei Verwendung einiger Creative-Management-Plattformen wie Bannerflow werden die in Ihrem HTML5-Banner verwendeten Bilder automatisch angepasst und komprimiert. Das bedeutet, dass die Bildgröße und das Gewicht Ihres Banners genau auf die Werbenetzwerke abgestimmt sind.

Trotz all dieser erstaunlichen Technologie lohnt es sich jedoch, jedes Bild auf eine maximale Größe von 4000 × 4000 (Breite und Höhe) in Pixeln zu beschränken. Außerdem ist es immer am besten, sehr große Rohdateien zu bearbeiten, wenn sie 4000 × 4000 überschreiten, um bessere Ergebnisse zu erzielen. Tatsächlich ist es am besten, immer die kleinstmöglichen Bilder zu verwenden. Dies wird dazu beitragen, das Gewicht eines Banners weiter zu reduzieren. Je kleiner das Bild, desto besser (aber natürlich ohne Qualitätsverlust!).

Es lohnt sich auch, das beste Bildformat für den Bildtyp auszuwählen, den Sie in Ihrem Banner verwenden. Beispielsweise sollte für einen Hintergrund immer ein JPEG verwendet werden. Wenn es transparent oder ein Objekt ist, verwenden Sie ein PNG. Für Logotypen und gezeichnete Objekte (außer Fotos) SVGs – klein in der Dateigröße, aber gut darin, die Schärfe zu bewahren, wenn sie erweitert werden. Eine Kombination von Bilddateitypen liefert oft bessere Ergebnisse.

Aber denken Sie daran, es gibt Dinge, die selbstverständlich sind! Stellen Sie zum Beispiel sicher, dass Ihr Hauptbild voll fokussiert ist. Ein klares, schlichtes Design funktioniert immer am besten.

Skalierung, Versionierung und Übersetzung

Selbst wenn Sie HTML5-responsive Banner erstellen, die automatisch optimiert werden, müssen Sie so viele Versionen wie möglich erstellen, um so viele Menschen wie möglich zu erreichen. Je mehr Bannergrößen, desto besser. Abhängig von der Art des Mediums ist es umso wahrscheinlicher, dass Sie programmatische Gebote gewinnen, je mehr Banner Sie haben.

Die offensichtliche Best Practice besteht darin, eine Creative-Management-Plattform und einen Anzeigenersteller zu verwenden, der effizient und schnell ist, wenn es um die Skalierung und Erstellung mehrerer Versionen von HTML5-Bannern geht. Besser noch, es ist viel einfacher, in mehreren Märkten zu arbeiten, wenn Sie Ihre Display-Werbung duplizieren, übersetzen und Varianten erstellen können.

Es ist auch einfach, Inhalte in HTML5-Bannern auszutauschen. Da Kampagnen in Sekundenschnelle dupliziert und skaliert werden können, ist es außerdem viel einfacher, verschiedene Varianten für verschiedene Tage zu planen. Einfach ausgedrückt: Responsive HTML5-Banner eignen sich hervorragend für den Einsatz in Automatisierungsdiensten wie Programmatic.

Rich-Media-Banner

Ohne HTML5 gäbe es keine Rich-Media-Banner. Es wäre unmöglich, Banner zu erstellen, die mit Zuschauern interagieren, die reagieren und auf mehreren Geräten funktionieren. Rich Media-Anzeigen fördern ein höheres Engagement und sind gut für Ihre Marke. Von Anmeldeformularen über Suchleisten bis hin zu In-Banner-Spielen Mit HTML5 können digitale Vermarkter Zuschauer auf vielfältige Weise ansprechen.

Seien Sie jedoch vorsichtig, wie Sie Rich Media-Banner verwenden. Ihre Effektivität hängt stark von dem Bannerformat ab, das Sie verwenden. Versuchen Sie nicht, zu viele Informationen hinzuzufügen oder es zu komplex zu machen. Die Interaktion sollte nicht mehr als ein oder zwei Schritte umfassen; Versuchen Sie, sich auf eine Sache zu konzentrieren und es dem Betrachter schnell und einfach zu machen.

Beispielsweise sollte ein Online-Formular das Minimum an erforderlichen Interaktionen enthalten – mehr, dann beginnt es im Banner und endet auf der Landingpage. Der Schlüssel zu einer guten HTML5-Rich-Media-Bannerkampagne ist, dass sie seriös in der Ausführung und intuitiv im Design ist.

Heutzutage können Sie Funktionen nutzen, z. B. die Möglichkeit, direkt für ein Produkt zu bezahlen, das in einem Banner vorgestellt wird. Oder wie in der Display-Werbung oben Chatbots zu sehen – mit Rich-Media-Bannern sind die zukünftigen Anwendungen endlos!

Video- und HTML5-Display-Werbung

Innerhalb der Display-Werbung nimmt die Verwendung von Videos ständig zu. Allein in Europa vervielfacht sich die Online-Videoanzeige dreieinhalb Mal schneller als die Nicht-Videoanzeige. Die Verwendung von Videos in Ihrer HTML5-Display-Anzeige trägt dazu bei, dass Sie authentischer wirken und mit den Zuschauern in Kontakt treten, was wiederum zur Conversion beiträgt. HTML5 erleichtert auch die Erstellung von Bannern, die Videos verwenden, für die Massenproduktion.

Durch die Verwendung von HTML5-Bannern haben Sie viele Möglichkeiten, wie Sie Videos verwenden. Auf einer einfachen Ebene kann ein Video als Hintergrund für ein Banner verwendet werden. Oder kreativer, es kann Teil der Banneranimation sein. Zum Beispiel ein Trailer, der mit einem Call-to-Action-Rahmen (CTA) endet.

Das Erstellen von Video-Display-Anzeigen ist einfach

Ein paar Top-Tipps bei der Verwendung von Videos sind, immer sicherzustellen, dass Ihr Logo im HTML5-Videobanner sichtbar ist. Beginnen Sie mit Ihrer Hauptbotschaft und stellen Sie sicher, dass das Video wiederholt wird. Versuchen Sie auch, maximal 1-3 Phasen im Video zu haben: die Aufmerksamkeit der Zuschauer auf sich ziehen, das Engagement vertiefen und immer mit einem CTA enden. Stellen Sie Ihre Videos immer auf „stumm“ und aktivieren Sie Untertitel (falls erforderlich).

HTML5 in Kombination mit einer guten Creative-Management-Plattform sollte bedeuten, dass auch keine Codierung erforderlich ist. So können viele Ideen Wirklichkeit werden, ohne dass im Backend des Banners etwas getan werden muss.

Darüber hinaus schauen sich die Menschen immer mehr Videobanner auf ihren Mobiltelefonen an. Stellen Sie also sicher, dass Sie eine responsive HTML5-Video-Display-Anzeige haben, die für Mobilgeräte geeignet ist.

Wenn Sie außerdem die Möglichkeit haben, Ihre HTML5-Videobanner im mp4-Format zu exportieren, können Sie diese Videoanzeigen über soziale Netzwerke hochladen. Eine einfache Möglichkeit für interne Teams, Videoanzeigen zu erstellen, HTML5-Assets wiederzuverwenden und die Reichweite ihrer digitalen Kampagnen zu vergrößern. So macht der Anzeigenersteller in Bannerflow, Creative Studio alles so einfach:

Erstellen von responsiven HTML5-Banneranzeigen für Mobilgeräte

Bei der Erstellung von responsiven HTML5-Display-Anzeigen für Mobilgeräte kommt es zunächst darauf an, das richtige Format zu verwenden. Anstatt ein Desktop-Banner auf eine mobile Größe herunterzuskalieren, entwerfen Sie Ihre Anzeige speziell für Mobilgeräte. Angesichts der Popularität und des Engagements von Mobilgeräten wird in manchen Kreisen die Entwicklung aller Kampagnen auf Mobilgeräte als zukunftsweisend angesehen.

Denken Sie daran, dass sich die Proportionen von HTML5-Bannern an jeden Bildschirm anpassen lassen. Es ist jedoch immer noch am besten, Ihre Banner mit Blick auf ausgewählte mobile Formate zu entwerfen.

Ein zu berücksichtigender Aspekt beim Design mobiler Banner ist sicherzustellen, dass alle Texte lesbar sind. Ja, dazu gehört auch die Schriftgröße, aber haben Sie auch an Ihre Botschaft gedacht? Möglicherweise müssen Sie Ihrem mobilen HTML5-Banner weitere Frames hinzufügen, um dieselbe Botschaft wie ein Desktop-Banner auszudrücken. Auch hier hängt es vom verwendeten Format ab, aber versuchen Sie zu vermeiden, mehr als Sie sollten in ein einzelnes Bild zu quetschen.

Lassen Sie außerdem große Mengen an Texten fallen und konzentrieren Sie sich auf die Wirkung Ihrer Bilder. Außerdem muss Ihre Anzeige angesichts der Bildschirmgröße ansprechend und nicht aufdringlich sein. Digitale Werbung wurde schon vor Ewigkeiten mobil – gehen Sie dorthin, wo Ihre Kunden sind, und erstellen Sie fantastische HTML5-Responsive-Banner für sie.

Dynamische Creatives

Ohne HTML5 können Sie keine überzeugenden dynamischen, datengestützten Werbebanner erstellen und verwalten. Beschränken Sie sich darauf, nur die einfachsten Banner zu erstellen, und Sie werden feststellen, dass Sie auf eine Nachricht beschränkt sind. Während ein Konkurrent potenziell 2000 liefern kann. Ja, wirklich: über konsistente Datenfeed-Updates und Automatisierung. Ein responsives HTML5-Banner kann 2000 Nachrichten in der Zeit liefern, die für die statische Erstellung eines Banners benötigt wird.

Wie bereits erwähnt, ist das Schöne an HTML5, dass es Ihnen die vollständige Kontrolle bietet. Dasselbe gilt für ein Banner, das mit einem Datenfeed verbunden ist – aber mehr noch: Sie haben die Möglichkeit, das Banner in Echtzeit zu aktualisieren.

Personalisieren Sie Ihre responsiven Display-Anzeigen

Nehmen Sie zum Beispiel eine HTML5-Bannerkampagne, die die beliebtesten Artikel in einem E-Commerce-Shop zeigt. Wenn ein Artikel ausverkauft ist, wird dies automatisch in der Produktliste angezeigt, die im dynamischen Banner angezeigt wird. Das ist sowohl für die Zuschauer als auch für das E-Commerce-Geschäft großartig!

Die gleiche Idee kann von iGaming-Unternehmen verwendet werden. Beispielsweise können Quoten während eines Spiels – innerhalb eines Banners – dynamisch geändert werden. Es gibt viele verschiedene Arten von personalisierten Kampagnen, die Sie mit HTML5-basierten dynamischen Creatives verwenden können.

Darüber hinaus hat es sich bewährt, einen Produkt-Feed in Echtzeit zu aktualisieren. Schließlich müssen Sie kritisch über das Format nachdenken, in dem die Daten angezeigt werden. Stellen Sie sicher, dass alle Daten, die Sie in Ihrem Banner verwenden, für die Zuschauer verständlich sind. Dies kann von Daten und Preisen bis hin zu Quoten reichen. Dies kann auch je nach Markt und Sprache variieren. Beispielsweise unterscheidet sich die Art, wie Amerikaner Datumsangaben schreiben, von der Art, wie Schweden Datumsangaben schreiben. Oder die unterschiedliche Art und Weise, wie Briten und Schweden Wettquoten verstehen.

Ein letzter Ratschlag: Ein guter Anzeigenersteller wie Creative Studio oder eine kreative Verwaltungsplattform erleichtert das Einrichten von Filtern und Sortieroptionen bei der Bearbeitung eines Datenfeeds.

Nächste Schritte: Erstellen Sie Ihre bisher besten reaktionsschnellen Banneranzeigen!

Hoffentlich haben Sie inzwischen erkannt, dass das Erstellen von responsiven HTML5-Banneranzeigen die beste Option für Ihre Anforderungen an digitale Display-Werbung ist. Bei so viel Flexibilität und Sichtbarkeit auf mehreren Bildschirmen und Plattformen gibt es einfach keine bessere Technologie für Banner. Bessere Anzeigen, bessere Designs, bessere Messwerte – alles ist möglich.

Zu guter Letzt, mit Creative-Management-Plattformen, die Ihnen die Möglichkeit bieten, Kampagnen für alle großen Werbenetzwerke – sowie soziale Netzwerke – zu erstellen, ist die Verwendung einer solchen Plattform eine einfache Möglichkeit, die Produktivität Ihres internen Teams zu steigern. Es ist keine Option mehr, Tage (oder sogar Wochen!) für das manuelle Duplizieren und Aufskalieren von Kampagnen zu benötigen.

In einem Zeitalter mit mehreren Märkten, Live-Optimierung und Transparenz hilft die Einführung von HTML5 Vermarktern dabei, die gewünschte Anzeigenleistung zu erzielen.

Wenn Sie wissen möchten, wie eine Plattform wie Bannerflow dabei helfen kann, großartige Werbung zu produzieren, dann nehmen Sie Kontakt mit uns auf.