Schmitts Katze

ANIMATION IN HTML5

Was ist das und wie funktioniert’s?

Design

HTML5 und Animationen.

Durch die Nutzung von HTML5 wird eine dynamische und interaktive Darstellung von Inhalten ermöglicht und die Benutzerinteraktion verbessert. Wir erklären dir hier mehr dazu.

Was ist HTML5? Was sind Animationen? Wie stehen diese beiden Dinge in Verbindung zueinander? 

Vorteile:

  • Kompatibilität
  • Multimediale Inhalte
  • Interaktivität
  • Bessere Leistung
  • Mobile Unterstützung
  • SEO

HTML5 (Hypertext Markup Language, neuste Version) wird von den allermeisten Webbrowsern unterstützt und hilft bei der Strukturierung und Darstellung von digitalen Dokumenten und Inhalten. Es können bspw. Websites, Werbung oder Banner mit Interaktivität versehen werden, moderne Funktionen erstellt und Videos/Audiodateien nahtlos in Websites integriert werden.
Bei visuellen Darstellungen (Animationen) werden Grafiken, Bilder und Objekte schnell hintereinander präsentiert, und das mit Hilfe von digitalen Werkzeugen und Software. So wird der Eindruck erweckt, das Bild / die Grafik würde sich bewegen. Dies spielt eine wichtige Rolle in Bereichen wie Film, Websites und Werbung.

Warum sollten Animationen in HTML5 vorgenommen werden?

Animationen werden eingesetzt, um Benutzererlebnisse zu schaffen, die ansprechend und interaktiv sind. Mit HTML5 können Animationen in beispielsweise Websites oder Werbung integriert werden, um Inhalte dynamisch und interaktiv zu gestalten und Elemente zu transformieren und Effekte hinzufügen. So kann eine lebendige Darstellung von Inhalten ermöglicht und die Benutzerinteraktion verbessert werden. 

Den Entwicklerinnen und Entwicklern stehen verschiedene Techniken, wie bspw. CSS-Transitions- und Transformationen, das Canvas-Element, JavaScript-Bibliotheken sowie das Web Animations API zur Verfügung, um Animationen in HTML5 einzufügen.

Logos der Agenturkunden

BEISPIEL BANNER statisch, animiert und interaktiv

z.B. https://www.trafficdesign.de/knowhow/online-marketing/html5-bannererstellung

HTML5, Animation & Banner

Soll der Banner interaktiv, animiert oder statisch sein? Welche Formate sollen benutzt werden? Etwa GIFs für Animationen? Oder jpeg und png für statische Banner und Bilder? Oder HTML5-Banner für interaktive Banner und komplexere Animationen? 

Empfohlen werden HTML5 Banner, und das aus einem guten Grund. Mittlerweile gibt es verschiedene Tools (Bspw. Google Web Designer), die dabei helfen, Banner zu bauen. Es werden also nicht unbedingt fortgeschrittene Kenntnisse benötigt, um Banner zu erstellen. Jedoch werden zumindest Grundkenntnisse in HTML sowie CSS empfohlen, mit denen dann die Herstellung der Banner viel einfacher wird. 

Vorteile für die Nutzung von HTML5

  • Kompatibilität. Wird von den aller meisten Webbrowsern unterstützt. Inhalte können so konsistent auf Geräten dargestellt werden. 
  • Multimediale Inhalte. Beispielsweise Videos / Audiodateien, können ohne Probleme in Websites integriert werden. Bedeutet, dass User diese Inhalte direkt im Browser abspielen können. 
  • Interaktivität. Dies verbessert die Benutzererfahrung und lässt deine Marke eher in Erinnerung der Kundinnen und Kunden bleiben. Diese coolen visuellen Effekte und Animationen führen zu einer ansprechenderen Website.
  • Bessere Leistung. Inhalte können besser und effizienter gestaltet werden und die Ladezeit optimiert. 
  • Mobile Unterstützung. Durch ein responsives Webdesign können Animationen sowie andere Inhalte sich der Bildschirmgröße des Gerätes anpassen. Dies sichert die optimale Darstellung Interaktion auf allen Geräten. 
  • SEO (Suchmaschinenoptimierung). Inhalte können das Arbeiten mit HTML5-Elementen besser strukturiert werden. Sie können von Suchmaschinen schneller erkannt sowie klassifiziert werden und verbessern so die Auffindbarkeit in den Suchergebnissen.

Was sind Vorteile / Nachteile / Möglichkeiten und Grenzen von Animationen in Bannern?

Was macht eine gute HTML-Animation aus?

Alternativen zu HTML Animationen im Display Kanal

Best Practices bei animierten HTML Creatives

Welche Möglichkeiten gibt es durch HTML Animationen, Websites und Nutzererfahrungen zu verbessern?

HTML Grundlagen & Definitionen

Logo Schmitts Katze