Professionelle HTML-Banner erstellen: Tipps & Tricks

Professionelle HTML-Banner erstellen: Tipps & Tricks

Kaum eine Technologie hat das digitale Marketing so stark verändert wie HTML5. Sie ersetzt das einst populäre Flash-Format für multimediale und interaktive Inhalte. Ein Glück, denn aus dem nun offenen Standard ergeben sich viele neue Freiheiten. Hier ein paar Tipps, wie Du mithilfe dieser Technologie eigene HTML-Banner erstellen kannst.

Was wäre das World Wide Web ohne Bewegtbild? Langweilig. Das gilt auch für Online-Werbung. Welche Möglichkeiten gibt es, animierte HTML-Banner zu erstellen? Benötigt man zwingend Programmierkenntnisse? Wir präsentieren Dir vier Lösungsansätze.

Inhaltsangabe

Was ist HTML5?

Hypertext Markup Language (kurz: HTML) bezeichnet eine Computersprache zur Strukturierung und Vernetzung von Texten und anderen Inhalten im World Wide Web. Dabei ist HTML5 die technische Weiterentwicklung von HTML4 und gilt als aktueller Standard. HTML5 zeichnet sich insbesondere durch funktionale Erweiterungen aus. Während bei der Vorgängerversion statische Elemente im Fokus standen, ist es nun möglich, Animationen und interaktive Elemente einzubinden. Darüber hinaus lassen sich problemlos Video- und Audiodateien einfügen.

html5-banner

Was ist ein Banner?

Ein Banner ist eine i. d. R. rechteckige Fläche, die zu Werbezwecken eingesetzt wird. Sie kann aus Text, Grafiken und Videos bestehen. Wesentlicher Bestandteil ist die Handlungsaufforderung (Call-to-Action). Mehr Wissenswertes über Banner und Bannerwerbung findest Du hier.

Was ist das Besondere an HTML5?

Vorteile von HTML-Bannern

  • SEO-Freundlichkeit: Dank der übersichtlichen Strukturierung können Suchmaschinen HTML-Seiten besser crawlen.
  • Responsive Design: HTML5 kann auf mobilen Endgeräten verwendet werden. Somit lassen sich Banner responsive erstellen.
  • Browserunabhängig: HTML5 besitzt eine hohe Kompatibilität der programmierten Seite in unterschiedlichen Browsern.
  • Multimedial: Multimedia-Inhalte, interaktive Elemente, erweiterte Formular-Elemente sowie Web-Apps lassen sich mühelos integrieren.
  • Plug-in unabhängig: Jederzeit können Inhalte simpel, ohne Plug-ins wie z. B. der Adobe Flash Player aufgerufen werden.
  • Einfache Bearbeitung: Dank der neuen Strukturierung des HTML-Codes ist eine Überarbeitung relativ unkompliziert.
html-banner-beispiel
Beispiel-Banner mit animiertem Visual

Nachteile von HTML5-Bannern

Kompatibilität: Auf älteren Browsern und in vielen Email Clients läuft HTML5 oft gar nicht oder nur eingeschränkt.

HTML-Banner erstellen: Diese Möglichkeiten hast Du

1. HTML-Bannererstellung mit dem Google Web Designer

Eine kostenlose Möglichkeit zur Erstellung von HTML5-Banner bietet Dir der Google Web Designer als klassische Desktopanwendung. Mit ihr lassen sich auch ohne HTML-Kenntnisse professionelle, animierte Banner erstellen.

google-web-designer

Aufgrund des großen Funktionsumfangs ist die Benutzeroberfläche etwas komplex und unübersichtlich. Auch erscheint das Tool hier und da etwas fehlerhaft. Dennoch: Wer sich ausgiebig mit dem Google Web Designer beschäftigt, kann in null Komma nichts ansehnliche HTML-Banner erstellen – vor allem in den diversen Standardgrößen für Google Ads kreieren. Ein weiterer Nachteil: Eine Datenbank mit Grafiken, CTA´s etc. steht Usern nicht zur Verfügung.

Bonus-Tipp

Um Dir die Arbeit mit dem Google Web Designer zu erleichtern, empfehlen wir Dir, ein passendes Template zu kaufen. Anschließend ist die Bearbeitung relativ simpel gemacht.

Hier kannst Du den Google Web Designer herunterladen.

2. Erstellung von HTML-Banner mit cloudbasierten Tools

Für die Erstellung von statischen Grafiken oder animierten HTML-Bannern eignen sich hervorragend cloudbasierte Tools wie z. B. creatopy oder Bannerboo. Insbesondere durch die Kompatibilität mit Google Ads und Facebook Ads wird die Bannererstellung enorm erleichtert. Die wichtigsten Features sind bereits Bestandteil der Free-Version.

GIF-Maker-bannersnack

Die Oberfläche ist leicht zu bedienen und übersichtlich. Zu Beginn wählen User eine entsprechende Bannergröße sowie ein geeignetes Template aus. Alternativ können Banner auch ohne Template erstellt werden. Alle gängigen Funktionen sind auf dem ersten Blick ersichtlich und ermöglichen schnelles Einarbeiten.

Du suchst eine noch professionellere Lösung? Mit Adobe Animate kannst Du HTML5-Banner erstellen, die keine Wünsche übrig lassen. In diesem Video wird Schritt für Schritt erläutert, wie sich ein klickbarer Banner für Display & Video 360 (ehemals Google DoubleClick) erstellen lässt.

HTML5 Banner mit Adobe Animate

3. HTML5 Ad Template kaufen und Microjobs vergeben

Plattformen wie z. B. envato market bieten Marketern eine umfassende Auswahl an HTML5-Ad-Templates zum Kauf an. Hier versammelt sich eine Community aus Webdesignern, welche weltweit an universell einsetzbaren Templates arbeitet. Bei denen findest auch Du ein passendes Ad Template für wenig Geld.

envato-market

Von Haus aus sind die meisten Templates kompatibel zum Google Web Designer, so dass sie sich leicht customizen lassen. Größter Vorteil: Viele Templates sind speziell auf Google Ads ausgerichtet. Somit verfügen sie bereits über alle wichtigen Eigenschaften.

Bonus-Tipp

Über den Online-Marktplatz Fiverr lassen sich die Templates an Freelancer als Mikrojob übermitteln, die Dir im Handumdrehen professionelle HTML-Banner erstellen. Diese sogenannten internetbasierten Dienstleistungen sind relativ kostengünstig und liefern hervorragende Ergebnisse.

4. Erstellung von HTML-Banner durch eine Agentur

Die wohl teuerste Variante ist die Beauftragung einer professionellen Agentur. Durch Spezialisierung auf Online-Werbung bzw. Bannererstellung ist ein schnelles Ergebnis auf hohem Niveau garantiert. Da Agenturen oftmals “Fullservice” anbieten, musst Du Dich als Kunde um nahezu nichts kümmern. Neben der Konzeption und Gestaltung übernehmen die sogar die Auslieferung. Mehr Komfort geht nicht.

Fazit

Displaywerbung spielt im Digitalmarketing nach wie vor eine wichtige Rolle. Vor allem, wenn sie animiert und interaktiv ist. Genau hier kommen HTML-Banner ins Spiel. Sie lassen sich responsiv gestalten und mit interessanten Effekten versehen. Kurz gesagt: HTML5 für Displaywerbung ist nicht mehr wegzudenken.

Für welche der beschriebenen Wege Du Dich entscheidest, hängt von Deinen Ansprüchen, Fähigkeiten und dem Budget ab. Für den kleinen Geldbeutel eignet sich der Google Web Designer ganz gut, wenn man eine gewisse Einarbeitungszeit in Kauf nimmt. Falls Du es professioneller magst, werfe mal den Blick in eine SaaS-Lösung wie Bannerboo, creatopy, Adobe Animate oder den Ad Builder.

Über den Autor
Über den Autor

Moin aus Hamburg! Mein Name ist Frank und ich beschäftige mich seit über 25 Jahren intensiv mit digitalem Marketi8ng.
Du möchtest dich und dein Marketing weiterentwickeln? Dann lass uns sprechen!

Ergänzende Artikel