Banner für das WWW: animierte GIFs vs. HTML5-Canvas
Animierte Banner erstellen für’s Web? In diesem Artikel zeigen wir dir die Vorteile eines HTML5-Banners.
Willst du im WWW werben? Möchtest du das mit einem Banner tun? Ja? Dann möchte ich in diesem Blogbeitrag für die HTML5-Variante von Werbebannern im Internet werben. Warum? Na, dazu musst du den Beitrag schon lesen
Unsere Beispielwerbung als animiertes GIF
Um die Unterschiede zwischen HTML5-Bannern und animierten GIFs unter die Lupe nehmen zu können, macht es Sinn, mit einem Beispielprojekt zu arbeiten.
Et voilà:
Das wackelnde Auto soll die zukünftigen Kunden/innen dazu animieren, auf die Werbung zu klicken.
Das oben gezeigte Banner ist ein animiertes GIF. Um schon einmal vorwegzunehmen, was die Vorteile eines HTML5-Banners sind, ein paar Überlegungen:
- Zoom das Banner einmal ganz nah! Wie sieht es mit den Schriften aus? Siehst du, wie verpixelt die Schrift ist?
- Wie interaktiv findest du das Banner? Reagiert es auf deine Mausbewegungen?
- Wie sieht es mit zeit- oder ereignisbasierten Animationen aus? Wie wäre es, wenn das Auto losfahren würde, sobald du den Button klickst, und erst dann die Zielseite geladen wird?
Die Antworten auf alle drei Test-Fragen fallen relativ enttäuschend aus, oder?
Die HTML5-Variante im Detail
Schauen wir uns kurz die HTML5-Variante des Banners an, bevor wir uns um die Details kümmern:
Wir stellen fest:
- Wenn du das Banner im Browser heranzoomen, bleibt der Text scharf.
- Wenn du mit der Maus über den Button fährst, ändert dieser seine Farbe.
- Wenn du den Button klickst, fährt das Auto los.
Ganz anders als das animierte GIF also. Schauen wir uns diese «Features» ein wenig im Detail an.
Zoom, zoom!
Ein riesengrosser Vorteil von HTML5-Bannern ist die Tatsache, dass sie aus einzelnen Elementen «zusammengebaut» werden – und das zur Laufzeit im Browser. Auch das animierte GIF baust du aus einzelnen Teilen (der Strasse, dem Auto, dem Text) zusammen, aber am Schluss befindet sich alles auf einer grossen «Pixelwiese». Und diese «Pixelwiese» hat keine Ahnung mehr von den ursprünglichen Einzelteilen.
Ganz anders bei einem HTML5-Banner. Dieses wird jedes Mal, wenn es angezeigt wird, neu aus den Einzelteilen zusammengebaut.
So erklärt es sich auch, warum die Schrift beim Zoomen scharf bleibt: Es wird nicht eine «Pixelwiese» näher herangezoomt, damit einfach die Pixel grösser dargestellt werden. Es wird das ganze Banner näher geholt, dann neu zusammengebaut und der Text neu auf der entsprechenden Grösse gerendert. Und da Text aus Vektor-Objekten besteht, werden die Buchstaben «immer» scharf dargestellt.
Übrigens: Hätte ich die Bilder für das Banner in höherer Auflösung abgespeichert, als es die Masse des Banners vorgeben, würden auch die Bilder bei einem Zoom wieder neu geholt und somit schärfer dargestellt. Wenn du einen Retina-Bildschirm hättest, würde dich das enorm freuen.
Interaktion erwünscht
Beim GIF-Banner hast du bemerkt, dass es sich total un-interaktiv verhält. Also egal, ob du mit der Maus darüberfährst oder nicht, es läuft einfach ab wie ein Film. Klar, du kannst es anklicken – aber das kannst du mit einem Textlink auch tun.
Das HTML5-Banner hingegen verhält sich mehr wie ein Computerspiel als wie ein Film: du kannst damit interagieren. Wenn du im HTML5-Banner z.B. mit der Maus über den Button fährst, ändert dieser seine Farbe. Das liegt daran, dass du in einem HTML5-Banner mit JavaScript gewisse Logiken einbauen kannst. In einem animierten GIF gibt es keine solche Logik. Es läuft vom ersten bis zum letzten Bild ab… und fängt dann wieder von vorne an.
Ereignisse und Zeit steuern das Geschehen
Wie oben bereits beschrieben, kann das GIF-Banner nicht interaktiv «gesteuert» werden. So ist es auch nicht möglich, auf Zeit oder auf Ereignisse zu reagieren.
In der HTML5-Variante des Banners kannst du den Button klicken. Damit sagst du dem Banner, dass es einen anderen Teil der Logik (=das Losfahren des Autos) ausführen soll und dann wieder an den Anfang der Logik springen soll. Das Zauberwort heisst auch hier JavaScript.
Na? Schon verkauft?
Wenn du jetzt am liebsten mit der Erstellung von HTML5-Bannern loslegen möchtest, empfehle ich dir folgende drei Varianten für deine entsprechende Weiterbildung:
- Entweder – wenn du eher der Code-Typ bist – besuchst du einen Kurs wie z.B. den Web Developer Basic («WDB») und eignest dir die entsprechenden Kenntnisse in HTML, CSS und JavaScript an, um HTML5-Banner «von Hand» erstellen zu können.
- Oder – wenn du eher der kreative Typ bist – besuchst du einen Kurs: Adobe Animate CC – animierte und interaktive Inhalte für das moderne Web («ADOANI») und lernst dort den Umgang mit einem Werkzeug, das dir die Planung und Erstellung von Animationen um ein Vielfaches vereinfacht.
- Oder – wenn du entsprechendes Zeit- und Geld-Budget hast – besuchst du beide Kurse! ? So oder so: Ich freue mich auf dich!
Noch nicht von HTML5-Bannern überzeugt?
Dann gibt es hier noch eine kleine Statistik bezüglich der Dateigrösse als Abschluss:
Dateigrösse
- HTML5-Banner (alle Dateien zusammen): 66 KB
- Animiertes GIF: 2.7 MB
Also rund 40-mal grösser!
Wenn du jetzt noch nicht überzeugt sein solltest, wirst du spätestens von den Regeln bezüglich der Maximal-Dateigrösse von Werbebannern des Werbenetzwerks, das du nutzen möchtest, überzeugt.