Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 10. Dezember 2015

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

Dass Bannerwerbung per Flash aus­ge­spielt wird, kommt immer sel­te­ner vor. Auch in der Online-Werbung hat sich HTML5 als Standard durch­ge­setzt. Dabei sind Animationen dank CSS3 und Interaktionen mit JavaScript pro­blem­los mög­lich. Natürlich las­sen sich HTML5-Banner von Hand erstel­len. Aber es gibt eine Vielzahl an sowohl kos­ten­lo­sen als auch kos­ten­pflich­ti­gen Tools, die sich auf das Erstellen von HTML5-basier­ten Bannern spe­zia­li­siert haben.

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

HTML5-Banner: Vorgaben berücksichtigen

Online-Werbung unter­lag immer schon spe­zi­el­len Vorgaben. Schließlich soll ein Banner uni­ver­sell – also in mög­lichst vie­len Werbenetzwerken – ein­setz­bar sein. Daher müs­sen Regeln für Auflösung, Dateigröße und zuläs­si­ge Technik her, damit es kei­ne Probleme gibt. Welche Standards es für HTM5-Banner gibt, hat in Deutschland der Bundesverband Digitale Wirtschaft (BVDW) fest­ge­legt. Sie wie­der­um basie­ren auf inter­na­tio­na­len Standards.

Je nach Einsatz eines HTML5-Banners musst du ent­schei­den, wel­che Standards berück­sich­tigt wer­den müs­sen. Im Zweifel gibt dir der Werbevermarkter oder die Website, auf der die Werbung geschal­tet wer­den soll, Auskunft dar­über. Folgende Programme und Webanwendungen hel­fen dir bei der Gestaltung und tech­ni­schen Umsetzung von HTML5-Bannern.

HTML5-Banner: Google Web Designer als klassische Desktopanwendung

Mit dem Web Designer hat Google eine Anwendung her­aus­ge­bracht, mit der du recht unkom­pli­ziert Webinhalte unter­schied­li­cher Art erstel­len kannst. Neben klas­si­schen Webseiten gibt es spe­zi­el­le Vorlagen, um HTML5-Banner zu erstel­len. Hierbei hast die die Auswahl zwi­schen klas­si­schen Bannern, Expandable-Anzeigen und Interstitials. Während Expandable-Anzeigen ihre Größe ver­än­dern, wer­den Interstitials als Layer über den eigent­li­chen Inhalt der Seite gelegt.

google-web-designer
Google Web Designer

Nachdem du dich für einen der Typen ent­schie­den hast, wählst du eine gän­gi­ge Auflösung für das Banner aus. Neben vor­ge­ge­be­nen Größen kannst du eine indi­vi­du­el­le Breite und Höhe fest­le­gen. Hier soll­test du dich aber ver­ge­wis­sern, dass die­se Auflösung tat­säch­lich unter­stützt wird.

Da jedes Werbenetzwerk im Detail unter­schied­li­che Vorgaben hat, kannst du beim Web Designer die Werbeplattform aus­wäh­len. Zur Auswahl ste­hen wenig über­ra­schend Googles eige­ne Vermarkter Doubleclick, AdWords und AdMob. AdMob ist spe­zi­ell für Banner in mobi­len Apps gedacht. Je nach Vermarkter ste­hen dir nur die Bannerformate zur Verfügung, die der jewei­li­ge Vermarkter auch unter­stützt.

Jetzt kannst du die Anzeige bezie­hungs­wei­se das Banner gestal­ten. Die Oberfläche von Google Web Designer erin­nert stark an Flash – ein­schließ­lich der Zeitleiste für Animationen. Du kannst Texte set­zen, Bilder plat­zie­ren und Interaktionen fest­le­gen. Das fer­ti­ge HTML5-Banner wird als ZIP-Datei gepackt und kann direkt beim ent­spre­chen­den Vermarkter hoch­ge­la­den wer­den.

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 kom­plett kos­ten­los.

HTML5 Maker mit Flash-Fallback

Der HTML5 Maker ist eine Webanwendung, die aber ähn­lich ein­fach zu bedie­nen ist wie Googles Web Designer. Um den Dienst ken­nen zu ler­nen, ist kei­ne Anmeldung nötig. Willst du ein fer­ti­ges Banner aller­dings her­un­ter­la­den, musst du ein Konto anle­gen oder dich per Facebook oder Google anmel­den.

html5maker
HTML5 Maker

Dank fer­ti­ger Presets und einer Bibliothek mit Bildmaterial ist ein Banner sehr schnell erstellt – inklu­si­ve ein­fa­cher Fade-in- und Slide-in-Animationen. Bilder, Texte und ande­re gra­fi­sche Elemente kannst du dir ganz ein­fach in die Zeichenfläche zie­hen und bear­bei­ten.

Aus einer Auswahl einer Vielzahl gän­gi­ger Bannerformate wählst du etwa ver­schie­de­ne Rectangle-, Skyscraper- und Square-Formate. Auf Wunsch kannst du ein Banner respon­siv gestal­ten. Das fer­ti­ge Banner lädst du anschlie­ßend eben­falls als ZIP-Datei mit allen dazu­ge­hö­ri­gen Dateien her­un­ter.

Allerdings ist der HTML5 Maker nicht kom­plett kos­ten­los. Es gibt ins­ge­samt fünf Tarife, wobei nur der Basistarif kos­ten­frei ist. In die­sem Tarif wird immer ein Wasserzeichen des HTML5 Makers mit ins Banner ein­ge­baut. Außerdem ste­hen einem kei­ne pro­fes­sio­nel­len Vorlagen zur Verfügung.

Die ande­ren Tarife kos­ten zwi­schen 4,99 und 49,99 US-Dollar im Monat. Der größ­te Unterschied zwi­schen den Tarifen ist die Anzahl der Banner, die gehos­tet wer­den kön­nen.

Der HTML5 Maker hat zwei Besonderheiten. Zum einen gibt es für jedes Banner ein HTML-Dokument mit fes­ter und eines mit respon­si­ver Größe, wel­ches sich in der Breite jeweils anpasst. Als zwei­tes hast du die Möglichkeit, dir jedes Banner als Flash-Fallback her­un­ter­zu­la­den. Dazu wird dir eine SWF-Datei bereit­ge­stellt.

Wie beim Google Web Designer wer­den vor­nehm­lich Googles Werbedienste unter­stützt. Insgesamt ist die Bedienung ein­fach und das Ergebnis dank Fallback-Lösung sehr aus­ge­reift.

Bannersnack kann zusätzlich auf Facebook werben

Ganz ähn­lich wie der HTML5 Maker funk­tio­niert der Dienst Bannersnack. Auch hier ist eine Anmeldung unter ande­rem per Facebook und Google mög­lich. Es gibt ins­ge­samt vier Tarife, wobei hier eben­falls ein kos­ten­lo­ser dabei ist. Mit die­sem ist aller­dings nur das ers­te erstell­te Banner kos­ten­los. Um ein zwei­tes Banner anzu­le­gen, ist ein kos­ten­pflich­ti­ger Tarif not­wen­dig. Diese kos­ten zwi­schen 16 und 36 US-Dollar im Monat.

bannernsack
Bannersnack

Von der Funktionalität her gibt es eben­falls vie­le Ähnlichkeiten zum HTML5 Maker. Es steht eine eige­ne Bibliothek mit Bildern sowie die Möglichkeit, Texte und vor­kon­fi­gu­rier­te Animationen – Fade, Slide, Alpha und Scale – ein­zu­set­zen, zur Verfügung. Außerdem kannst du mit eini­gen ver­füg­ba­ren Vorlagen direkt los­le­gen.

Mit Bannersnack legst du zudem kom­plet­te Werbekampagnen an. So kannst du Budgets und Zielgruppen für dei­ne Anzeigen fest­le­gen und die­se in Googles Werbenetzwerk sowie auf Facebook schal­ten. Vor allem bei den Funktionen der Kampagnen unter­schei­den sich die ver­schie­de­nen Tarife des Dienstes.

Zwar beherrscht auch Bannersnack Flash-Banner. Diese las­sen sich jedoch nur unab­hän­gig von HTML5-Bannern erstel­len. Eine auto­ma­ti­sche Generierung einer Flash-Fallback-Lösung aus einem HTML5-Banner ist nicht mög­lich.

Bannerflow mit großem Werbenetzwerk

Der Anbieter Bannerflow star­tet mit monat­li­chen Kosten von 79 US-Dollar. Das ist durch­aus nicht wenig, dafür aber  unter­stützt er eine Vielzahl von Werbenetzwerken. Unter ande­rem sind Googles Doubleclick und wei­te­re knapp 30 Werbevermarkter dabei.

bannerflow
Bannerflow

Es gibt eine umfang­rei­che Kampagnenverwaltung ein­schließ­lich Analytics sowie die Möglichkeit, Banner in ver­schie­de­ne Sprachen zu über­set­zen. Es wer­den auto­ma­tisch Fallbacks her­ge­stellt, um sowohl im Browser als auch in Apps für die Darstellung einer Anzeige sor­gen zu kön­nen.

Außerdem sind Banner gene­rell respon­siv, so dass ver­schie­de­ne Display- und Browsergrößen berück­sich­tigt wer­den.

Der Banner-Builder erlaubt es dir, wie bei den ande­ren genann­ten Diensten über eine ein­fach zu bedie­nen­de Benutzeroberfläche HTML5-Banner zu erstel­len. Auch hier sind ver­schie­de­ne Animationen und das Hochladen von Bildern mög­lich.

Fazit

Sowohl Googles Web Designer als auch die Webdienste haben ihre Stärken. Während der Google Web Designer kom­plett kos­ten­los und sehr über­sicht­lich ist, liegt die Stärke beim HTML5 Maker in der Bereitstellung kom­plet­ter respon­si­ver Lösungen inklu­si­ve Fallback und bei Bannersnack bei sei­nem Rundumpaket inklu­si­ve Kampagnenverwaltung. Bannerflow besticht durch die Unterstützung zahl­rei­cher Werbenetzwerke.

Was ver­wen­dest du zur Erstellung von Werbung im HTML5-Format?

(dpe)

Denis Potschien

Denis Potschien

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.

7 Kommentare

  1. Was der Artikel lei­der ver­misst zu erwäh­nen ist, dass offen­bar auch GSAP(Greensock). Hier (adsspirit.com) einn paar Beispiele für alle Varianten

  2. Hallo zusam­men,
    nun habe ich hier fleis­sig mit gele­sen.

    Kann man die Größe des fer­ti­gen Banners im Nachhinein noch ändern?

    z.b. habe ich einen in 336x280px ange­legt, und brau­che ihn auch in 300x250px.
    theo­re­tisch könn­te ich ein­fach die Größe run­ter­ska­lie­ren.
    Aber wie mache ich das?

    Danke im Voraus!

  3. Ist Bannerflow auch für deutsch­spra­chi­ge oder nur eng­li­sche Webseiten geeig­net?

    • Bannerflow ist auch für deutsch­spra­chi­ge Websites geeig­net. Der Dienst gibt dir ja sogar die Möglichkeit, ein Banner in ver­schie­de­nen Sprachen für ver­schie­denspra­chi­ge Zielgruppen zu erstel­len.

  4. Hallo Denis, dan­ke für das Vorstellen der inter­es­san­ten Tools! Da kann ich mir künf­tig wirk­lich eine Menge Arbeit erspa­ren. Wie wich­tig ist in dei­nen Augen denn die Eigenschaft, dass ein Banner respon­si­ve ist? Grüße

    • Hallo Matze, da immer mehr Websites respon­siv gestal­tet sind, wer­den sicher auch respon­si­ve Banner eine immer grö­ße­re Rolle spie­len. Schließlich ist es ja auch im Interesse der Werbeindustrie, dass Banner auch in einem respon­si­ven Layout ver­nünf­tig aus­se­hen.

      Aber letzt­end­lich muss man halt schau­en, wie die jewei­li­gen Vermarkter Banner ein­bin­den.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.