Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

Dass Bannerwerbung per Flash ausgespielt wird, kommt immer seltener vor. Auch in der Online-Werbung hat sich HTML5 als Standard durchgesetzt. Dabei sind Animationen dank CSS3 und Interaktionen mit JavaScript problemlos möglich. Natürlich lassen sich HTML5-Banner von Hand erstellen. Aber es gibt eine Vielzahl an sowohl kostenlosen als auch kostenpflichtigen Tools, die sich auf das Erstellen von HTML5-basierten Bannern spezialisiert haben.

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

HTML5-Banner: Vorgaben berücksichtigen

Online-Werbung unterlag immer schon speziellen Vorgaben. Schließlich soll ein Banner universell – also in möglichst vielen Werbenetzwerken – einsetzbar sein. Daher müssen Regeln für Auflösung, Dateigröße und zulässige Technik her, damit es keine Probleme gibt. Welche Standards es für HTM5-Banner gibt, hat in Deutschland der Bundesverband Digitale Wirtschaft (BVDW) festgelegt. Sie wiederum basieren auf internationalen Standards.

Je nach Einsatz eines HTML5-Banners musst du entscheiden, welche Standards berücksichtigt werden müssen. Im Zweifel gibt dir der Werbevermarkter oder die Website, auf der die Werbung geschaltet werden soll, Auskunft darüber. Folgende Programme und Webanwendungen helfen dir bei der Gestaltung und technischen Umsetzung von HTML5-Bannern.

HTML5-Banner: Google Web Designer als klassische Desktopanwendung

Mit dem Web Designer hat Google eine Anwendung herausgebracht, mit der du recht unkompliziert Webinhalte unterschiedlicher Art erstellen kannst. Neben klassischen Webseiten gibt es spezielle Vorlagen, um HTML5-Banner zu erstellen. Hierbei hast die die Auswahl zwischen klassischen Bannern, Expandable-Anzeigen und Interstitials. Während Expandable-Anzeigen ihre Größe verändern, werden Interstitials als Layer über den eigentlichen Inhalt der Seite gelegt.

google-web-designer
Google Web Designer

Nachdem du dich für einen der Typen entschieden hast, wählst du eine gängige Auflösung für das Banner aus. Neben vorgegebenen Größen kannst du eine individuelle Breite und Höhe festlegen. Hier solltest du dich aber vergewissern, dass diese Auflösung tatsächlich unterstützt wird.

Da jedes Werbenetzwerk im Detail unterschiedliche Vorgaben hat, kannst du beim Web Designer die Werbeplattform auswählen. Zur Auswahl stehen wenig überraschend Googles eigene Vermarkter Doubleclick, AdWords und AdMob. AdMob ist speziell für Banner in mobilen Apps gedacht. Je nach Vermarkter stehen dir nur die Bannerformate zur Verfügung, die der jeweilige Vermarkter auch unterstützt.

Jetzt kannst du die Anzeige beziehungsweise das Banner gestalten. Die Oberfläche von Google Web Designer erinnert stark an Flash – einschließlich der Zeitleiste für Animationen. Du kannst Texte setzen, Bilder platzieren und Interaktionen festlegen. Das fertige HTML5-Banner wird als ZIP-Datei gepackt und kann direkt beim entsprechenden Vermarkter hochgeladen werden.

Der Google Web Designer nimmt einem viel Arbeit ab, hat aber den Nachteil, dass er Standardbanner nur für Google Werbedienste erstellt. Dafür ist das Tool komplett kostenlos.

HTML5 Maker mit Flash-Fallback

Der HTML5 Maker ist eine Webanwendung, die aber ähnlich einfach zu bedienen ist wie Googles Web Designer. Um den Dienst kennen zu lernen, ist keine Anmeldung nötig. Willst du ein fertiges Banner allerdings herunterladen, musst du ein Konto anlegen oder dich per Facebook oder Google anmelden.

html5maker
HTML5 Maker

Dank fertiger Presets und einer Bibliothek mit Bildmaterial ist ein Banner sehr schnell erstellt – inklusive einfacher Fade-in- und Slide-in-Animationen. Bilder, Texte und andere grafische Elemente kannst du dir ganz einfach in die Zeichenfläche ziehen und bearbeiten.

Aus einer Auswahl einer Vielzahl gängiger Bannerformate wählst du etwa verschiedene Rectangle-, Skyscraper- und Square-Formate. Auf Wunsch kannst du ein Banner responsiv gestalten. Das fertige Banner lädst du anschließend ebenfalls als ZIP-Datei mit allen dazugehörigen Dateien herunter.

Allerdings ist der HTML5 Maker nicht komplett kostenlos. Es gibt insgesamt fünf Tarife, wobei nur der Basistarif kostenfrei ist. In diesem Tarif wird immer ein Wasserzeichen des HTML5 Makers mit ins Banner eingebaut. Außerdem stehen einem keine professionellen Vorlagen zur Verfügung.

Die anderen Tarife kosten zwischen 4,99 und 49,99 US-Dollar im Monat. Der größte Unterschied zwischen den Tarifen ist die Anzahl der Banner, die gehostet werden können.

Der HTML5 Maker hat zwei Besonderheiten. Zum einen gibt es für jedes Banner ein HTML-Dokument mit fester und eines mit responsiver Größe, welches sich in der Breite jeweils anpasst. Als zweites hast du die Möglichkeit, dir jedes Banner als Flash-Fallback herunterzuladen. Dazu wird dir eine SWF-Datei bereitgestellt.

Wie beim Google Web Designer werden vornehmlich Googles Werbedienste unterstützt. Insgesamt ist die Bedienung einfach und das Ergebnis dank Fallback-Lösung sehr ausgereift.

Bannersnack kann zusätzlich auf Facebook werben

Ganz ähnlich wie der HTML5 Maker funktioniert der Dienst Bannersnack. Auch hier ist eine Anmeldung unter anderem per Facebook und Google möglich. Es gibt insgesamt vier Tarife, wobei hier ebenfalls ein kostenloser dabei ist. Mit diesem ist allerdings nur das erste erstellte Banner kostenlos. Um ein zweites Banner anzulegen, ist ein kostenpflichtiger Tarif notwendig. Diese kosten zwischen 16 und 36 US-Dollar im Monat.

bannernsack
Bannersnack

Von der Funktionalität her gibt es ebenfalls viele Ähnlichkeiten zum HTML5 Maker. Es steht eine eigene Bibliothek mit Bildern sowie die Möglichkeit, Texte und vorkonfigurierte Animationen – Fade, Slide, Alpha und Scale – einzusetzen, zur Verfügung. Außerdem kannst du mit einigen verfügbaren Vorlagen direkt loslegen.

Mit Bannersnack legst du zudem komplette Werbekampagnen an. So kannst du Budgets und Zielgruppen für deine Anzeigen festlegen und diese in Googles Werbenetzwerk sowie auf Facebook schalten. Vor allem bei den Funktionen der Kampagnen unterscheiden sich die verschiedenen Tarife des Dienstes.

Zwar beherrscht auch Bannersnack Flash-Banner. Diese lassen sich jedoch nur unabhängig von HTML5-Bannern erstellen. Eine automatische Generierung einer Flash-Fallback-Lösung aus einem HTML5-Banner ist nicht möglich.

Bannerflow mit großem Werbenetzwerk

Der Anbieter Bannerflow startet mit monatlichen Kosten von 79 US-Dollar. Das ist durchaus nicht wenig, dafür aber  unterstützt er eine Vielzahl von Werbenetzwerken. Unter anderem sind Googles Doubleclick und weitere knapp 30 Werbevermarkter dabei.

bannerflow
Bannerflow

Es gibt eine umfangreiche Kampagnenverwaltung einschließlich Analytics sowie die Möglichkeit, Banner in verschiedene Sprachen zu übersetzen. Es werden automatisch Fallbacks hergestellt, um sowohl im Browser als auch in Apps für die Darstellung einer Anzeige sorgen zu können.

Außerdem sind Banner generell responsiv, so dass verschiedene Display- und Browsergrößen berücksichtigt werden.

Der Banner-Builder erlaubt es dir, wie bei den anderen genannten Diensten über eine einfach zu bedienende Benutzeroberfläche HTML5-Banner zu erstellen. Auch hier sind verschiedene Animationen und das Hochladen von Bildern möglich.

Fazit

Sowohl Googles Web Designer als auch die Webdienste haben ihre Stärken. Während der Google Web Designer komplett kostenlos und sehr übersichtlich ist, liegt die Stärke beim HTML5 Maker in der Bereitstellung kompletter responsiver Lösungen inklusive Fallback und bei Bannersnack bei seinem Rundumpaket inklusive Kampagnenverwaltung. Bannerflow besticht durch die Unterstützung zahlreicher Werbenetzwerke.

Was verwendest du zur Erstellung von Werbung im HTML5-Format?

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Matze
Gast
5 Monate 19 Tage her

Hallo Denis, danke für das Vorstellen der interessanten Tools! Da kann ich mir künftig wirklich eine Menge Arbeit ersparen. Wie wichtig ist in deinen Augen denn die Eigenschaft, dass ein Banner responsive ist? Grüße

trackback

[…] Sourced through Scoop.it from: http://www.drweb.de […]

Anna Milena von Gersdorff
Gast
Anna Milena von Gersdorff
5 Monate 8 Tage her

Ist Bannerflow auch für deutschsprachige oder nur englische Webseiten geeignet?

Torsten
Gast
Torsten
4 Monate 19 Tage her

Hallo zusammen,
nun habe ich hier fleissig mit gelesen.

Kann man die Größe des fertigen Banners im Nachhinein noch ändern?

z.b. habe ich einen in 336x280px angelegt, und brauche ihn auch in 300x250px.
theoretisch könnte ich einfach die Größe runterskalieren.
Aber wie mache ich das?

Danke im Voraus!

Torsten
Gast
Torsten
4 Monate 19 Tage her

.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen