Banner für das WWW: animierte GIFs vs. HTML5-Canvas

Sie wollen im WWW werben? Möchten Sie 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 müssen Sie 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 den zukünftigen Kunden 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:

• Zoomen Sie das Banner einmal ganz nah! Wie sieht es mit den Schriften aus? Sehen Sie, wie verpixelt die Schrift ist?
  
• Wie interaktiv finden Sie das Banner? Reagiert es auf Ihre Mausbewegungen?
• Wie sieht es mit zeit- oder ereignisbasierten Animationen aus? Wie wäre es, wenn das Auto losfahren würde, sobald Sie den Button klicken, 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 Sie das Banner im Browser heranzoomen, bleibt der Text scharf.
• Wenn Sie mit der Maus über den Button fahren, ändert dieser seine Farbe.
• Wenn Sie den Button klicken, 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 bauen Sie 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 Sie einen Retina-Bildschirm hätten, würde Sie das enorm freuen.

Interaktion erwünscht

Beim GIF-Banner haben Sie bemerkt, dass es sich total un-interaktiv verhält. Also egal, ob Sie mit der Maus darüberfahren oder nicht, es läuft einfach ab wie ein Film. Klar, Sie können es anklicken – aber das können Sie mit einem Textlink auch tun.
Das HTML5-Banner hingegen verhält sich mehr wie ein Computerspiel als wie ein Film: Sie können damit interagieren. Wenn Sie im HTML5-Banner z.B. mit der Maus über den Button fahren, ändert dieser seine Farbe. Das liegt daran, dass Sie in einem HTML5-Banner mit JavaScript gewisse Logiken einbauen können. 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 können Sie den Button klicken. Damit sagen Sie 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 Sie jetzt am liebsten mit der Erstellung von HTML5-Bannern loslegen möchten, empfehle ich Ihnen folgende drei Varianten für Ihre entsprechende Weiterbildung:

• Entweder – wenn Sie eher der Code-Typ sind – besuchen Sie einen Kurs wie z.B. den Web Developer Basic («WDB») und eignen sich die entsprechenden Kenntnisse in HTML, CSS und JavaScript an, um HTML5-Banner «von Hand» erstellen zu können.
• Oder – wenn Sie eher der kreative Typ sind – Sie besuchen einen Kurs: Adobe Animate CC – animierte und interaktive Inhalte für das moderne Web («ADOANI») und lernen dort den Umgang mit einem Werkzeug, das Ihnen die Planung und Erstellung von Animationen um ein Vielfaches vereinfacht.
• Oder – wenn Sie entsprechendes Zeit- und Geld-Budget haben – Sie besuchen beide Kurse!  ? So oder so: Ich freue mich auf Sie!

Noch nicht von HTML5-Bannern überzeugt?

Dann gibt es hier noch eine kleine Statistik bezüglich der Dateigrössen als Abschluss:

Dateigrösse

• HTML5-Banner (alle Dateien zusammen): 66 KB
• Animiertes GIF: 2.7 MB

Also rund 40-mal grösser!

Wenn Sie jetzt noch nicht überzeugt sein sollten, werden Sie spätestens von den Regeln bezüglich der Maximal-Dateigrösse von Werbebannern des Werbenetzwerks, das Sie nutzen möchten, überzeugt.