Mit dem neuen Web-Standard HTML5 lassen sich – in Kombination mit anderen Technologien – animierte Werbebanner nun endlich sowohl für Desktop, als auch für Tablets und Smartphones umsetzen. Hier erklären wir die Vor- und Nachteile des neuen Standard, die Umsetzung und eröffnete Möglichkeiten.

Das Thema kam an einem unserer Barcamps am 4. Februar 2017 auf, leider fehlte die Zeit für eine ausführliche Session. Darum haben wir uns gedacht: Warum eine angedachte Session nicht verschriftlichen? Enjoy the read:

Was ist neu bei HTML5?

HTML 5 ist die neueste Version von HTML. Sie erweitert das bestehende HTML um “Rich Web Content”, das sind neue Elemente wie Visuelle Effekte, oder bessere Einbettung von Video- und Audioinhalten. Hand in Hand mit HTML5 geht CSS3, die neueste Version der Sylesheet Sprache. Die Markup Sprache wurde im Dezember 2012 vom Word Wide Web Consortium W3C zum neuen offenen Standard erklärt und es lag an den einzelnen Browsern, an der Umsetzung zu arbeiten.

Eine Kombination von HTML5, CSS3 und weiteren Technologien wie beispielsweise JavaScript APIs bietet neue Möglichkeiten der Darstellung von Animationen oder beispielsweise geographische Lokalisierung. Mit HTML5 können Werbebanner für Webseiten, Apps und vieles mehr mit zahlreichen Animationen umgesetzt werden.

Warum sind HTML5 Banner nun wichtig für eine Content Strategie? Je nachdem nach welchen Richtlinien Content produziert wird ist es wichtig, auf allen Plattformen ein einheitliches Auftreten anzustreben – sei es einheitliche Sprache, einheitliches Farbschema oder ähnliches. Wenn das Corporate Design nun Animationen beinhaltet, kommen Entwickler beim Design von Websites für mobile devices an HTML5 und eben animierten Bannern nicht mehr vorbei.1

HTML5 vs. Flash

Verglichen mit einem HTML5-Banner ist die Umsetzung von Flash-Bannern mit der Adobe Flash Software relativ einfach – immerhin braucht es für HTML5 Banner Kenntnisse in CSS, HTML und JavaScript. Ohne Programmier-Kenntnisse war eine Animation in HTML5 also schwer möglich oder einfach nur sehr aufwendig.

Flash wird jedoch auf mobilen Geräten nicht unterstützt – bei gewissen Browsern funktioniert die Darstellung auch am Desktop nicht mehr – und daher von HTML5 (fast gänzlich) abgelöst. Die Hürde der erforderlichen Programmierkenntnisse lassen sich inzwischen dank einiger Tools überwinden: Der kostenlose Dienst Google Web Designer von Google oder das kostenpflichtige Adobe Programm Adobe Edge schaffen hier Abhilfe und machen einen Umstieg von Flash auf HTML5 einfacher.Ein weiterer Grund für einen Umstieg: Google AdWords erlaubt für Displaywerbung keine Flash-Banner mehr.

Ansicht Adobe Flash:

Adobe Flash

Ansicht Google Web Designer:

Google Web Designer

Vorteile / Nachteile Google Web Designer

Das kostenlose Programm Google Web Designer traf die Web-Gemeinde unvorbereitet. Die Idee hinter dem Tool ist, Anwendern die Gestaltung von Werbebannern zu erleichtern, und so die Umstellung auf HTML5 zu erleichtern. Letztendlich handelt es sich jedoch um einen vollständigen Editor für HTML, CSS, XML und JavaScript.
Mit dem Google Web Designer lassen sich saubere HTML5- und CSS3-Codes mit interaktiven, selbsterklärenden Features erstellen. Das Google-Tool lässt sich im Handling mit WordPress vergleichen: Man kann im interaktiven Modus arbeiten oder selbst Code schreiben und in den vom interaktiven Modus erzeugten Code eingreifen. Die Outcomes funktionieren – laut Google – auf jedem Gerät.
Eine kleine Einschränkung gibt es jedoch: Es lassen sich nur Dateien öffnen, die man mit dem Tool selbst erstellt hat.
Der Google Web Designer befindet sich offiziell noch in der Beta-Phase, die hohe Funktionalität und Benutzerfreundlichkeit lädt aber schon jetzt darauf ein, die eigenen Websites auf den neuesten HTML5-Standard zu bringen.2

Pro

  • kostenlos
  • interaktiver Modus mit leichter Bedienung
  • man kann leicht in den Code eingreifen
  • erleichtert Umstellung um HTML5-Standard
  • unterstützt auch moderne Formate (z.B. MPEG-4)

Contra

  • Beta-Version
  • man kann nur Dateien öffnen, die mit dem Tool selbst erstellt wurden
  • Flash-Banner sind nach wie vor einfacher zu erstellen als HTML5-Banner3

Beispiel HTML5 Banner mit dem Google Web Designer

Fazit

Die Erstellung von Flash-Bannern ist noch immer einfacher als die Arbeit mit HTML5. Jedoch werden die Programme zur Erstellung von HTML5-Banner immer benutzerfreundlicher und ausgereifter. Google Web Designer ist kostenlos und bietet schon jetzt viele Features, die die Erstellung von Werbebannern fast uneingeschränkt möglich macht.
Es wird noch ein paar Jahre dauern, bis Flash vollständig von HTML5 abgelöst wird – gewisse Browser unterstützen das Format bereits jetzt gänzlich nicht mehr. Als umsichtige Content-Strategen sollten wir uns jedoch schon jetzt mit einer Umstellung auf den neuen Standard auseinandersetzen.

Referenzen

1Kerstin (2014). “Die Zukunft der Bannerwerbung”. In Artworx. Retrieved from http://www.artworx.at/die-zukunft-der-bannerwerbung/
2Saumweber, W. (2014). “Kostenloser Webdesigner Editor von Google”. In PC-Magazin. Retrieved from http://www.pc-magazin.de/business-it/google-kostenlos-web-designer-editor-1936352.html
3Gassmann, J. (2013). “Google Web Designer – HTML5-, responsive-, mobile advertising”. In: Flyacts. Retrieved from
http://www.flyacts.com/blog/google-web-designer-html5-advertising-responsive-advertising-mobile-advertising/

Related Posts