September 2020

Webanimation im B2B – performant und responsiv

Gerade im B2B geht es oftmals um die Vermarktung erklärbedürftiger Services und Investitionsgüter. Hier spielen gut gemachte Animationsfilme ihre Vorteile aus. Wir haben uns Gedanken gemacht, wie Erklärfilme heute aussehen und ressourcen­schonend in Webseiten eingebunden werden können.

Von Markus Remscheid

Dieser 30-Sekünder ist gerade einmal 120 KB groß. Möglich macht es unsere Umsetzung im SVG-Format. In diesem Fall wird die SVG-Animation innerhalb eines HTML5-Canvas-Elements abgespielt.

Besser erklären mit Webanimationen

Animationsfilme sind im Netz seit Jahren weit verbreitet. Kein Wunder, denn dank einer animativen Darbietung lassen sich auch komplexe Sachverhalte einfach darstellen. Ein gelungenes Storytelling verpackt die Botschaft zudem auf unterhaltsame Weise und bindet so die Aufmerksamkeit der Zielgruppe.

Somit sind Erklärfilme, gerade im B2B-Marketing, eine wirksame Hilfe. Sie eignen sich zur Unterstützung im Verkaufsgespräch, zur Bespielung von Social-Media-Kanälen und zum Einsatz auf Webseiten und E-Commerce-Angeboten.

SVG-Animation vs. Video

Die meisten Erklärfilme und Animationen werden als klassische Videos im Netz veröffentlicht. Dazu werden die fertigen Filme auf dem eigenen Server gehostet oder auf Plattformen wie youTube oder Vimeo hochgeladen. Über einen embed-Code oder eine einfache URL werden sie dann in die eigene Webseite eingebunden. Die Nachteile: Videos sind auflösungsabhängig und je nach Videoformat ressourcenhungrig. Die hohen Dateigrößen können sich negativ auf Ladezeiten und somit auf die Website-Performance auswirken.

Gif-Animationen stellen eine weitere Möglichkeit dar, Inhalte in Bewegung zu inszenieren. Im Vergleich zu Videos lassen sich Gif-Animationen ganz einfach in Webseiten einbinden. Die Nachteile von Videos gelten allerdings auch hier: Gif-Animationen sind nicht ohne Qualitätsverlust skalierbar und die Dateigrößen steigen bei höherer Auflösung stark an. Ein großer Nachteil in Zeiten von Responsive Design. Zudem sind fließende Übergänge, z.B. einfache Farbwechsel, nicht ruckelfrei darstellbar.

Mit dem SVG-Format steht zum Glück eine Alternative bereit. Denn SVG-Dateien sind nicht zwangsweise statisch, sondern können animiert und zum Leben erweckt werden. Da SVG-Dateien auf Vektorgrafiken und nicht auf Pixeln basieren, eignen sich SVG-Animationen für die Bewegung von Logos, Icons, Infografiken und Erklärfilmen. Somit sind SVG-Animationen für den Einsatz im Netz geradezu prädestiniert, da genau diese Elemente auf Webseiten immer wieder zum Einsatz kommen. Der große Vorteil von SVGs liegt darin, dass sie ein Garant für kleine Dateigrößen und verlustfreie Skalierung sind.

Vergleich Video und SVG

Im Vergleich zur SVG-Version ist das Video mehr als 1.000 mal größer. Die Abbildungsqualität kann mit dem gestochen scharfen SVG ebenfalls nicht mithalten.

Die Vorteile von SVG-Animationen in Kürze:

  • Verlustfreie, gestochen scharfe Darstellung auf allen Endgeräten, egal ob Retina, Smartphone oder große Monitorwand
  • Kleinste Dateigrößen für performance-starke Webseiten
  • Interaktiv in Webseiten oder Apps einbindbar
  • Relativ kostengünstig in der Produktion

Animierte SVGs erstellen

1. Animation mit CSS

Die große Stärke von SVGs liegt darin, dass sie auf Vektoren basieren. Vektoren sind grafische Formen, Pfade und Linien, dessen Koordinaten durch einfache mathematische Zahlen beschrieben werden. Und diese Zahlen lassen sich durch Code verändern und bearbeiten. Im Vergleich zu JPGs haben SVGs somit deutlich mehr mit einer Webseite gemeinsam. Deshalb lassen sich SVGs direkt mit Hilfe von CSS animieren.

Diese kleine Spielerei soll demonstrieren, wie sich mit einfachen Zeilen CSS-Code eine kleine Animation erstellen läßt:

See the Pen Leg by Johannes Reinhart (@johannes_reinhart) on CodePen.light

Dieses Beispiel von unserer Shopicons-Landingpage demonstriert, wie ein SVG mit Hilfe von Inline-CSS animiert werden kann. D.h. der gesamte CSS-Code, der für die Animation zuständig ist, wird direkt in das SVG-Format eingefügt. So können animierte SVG-Grafiken einfach in jede Webseite eingebunden werden. Zudem profitiert die Siteperformance von kleinen Dateigrößen. Die hier gezeigte Animation ist 3 KB groß. Eine vergleichbare GIF-Animation wäre mit 2–3 MB ca. 1.000 mal so gewichtig:

See the Pen Shopicons Warenkorb Animation by H2D2 (@H2D2) on CodePen.light

2. Animation mit CSS & Javascript

Dank der JavaScript-Bibliothek „GreenSock“ ist diese komplexere Animationen mit einer Zeile Javascript möglich:

See the Pen Hello World! by Johannes Reinhart (@johannes_reinhart) on CodePen.light

3. UX Animationen

Ein weiteres großes Plus von SVGs liegt darin, dass sie auf Nutzerinteraktionen reagieren und somit eng in die User Journey eingebunden werden können. Mit Hilfe von SVGs können so kleine Animationen umgesetzt werden, die dem Nutzer Rückschlüsse zu erfolgten Aktionen geben. Als Beispiel sei der Like-Button bei Twitter genannt. Nach Tab auf das Herz erhält der Nutzer direkt ein positives visuelles Feedback. Somit kann er sicher sein, dass der Like registriert wurde. Solche nutzerfreundlichen Animationen werden auch UX Animationen oder Microanimationen genannt.

Folgendes, nicht ganz ernst gemeinte SVG-Experiment, lotet Möglichkeiten von SVG-Microanimationen aus. Ein fiktives Warenkorb-Icon zeigt, was es von der Nutzerinteraktion hält:

See the Pen animated shopping cart by Johannes Reinhart (@johannes_reinhart) on CodePen.light

4. SVG-Animation mit Animationssoftware

Komplexere Animationen und kleinere Filme lassen sich nur noch schwer von Hand direkt in CSS animieren. Hier helfen Tools wie Adobe Animate oder After Effects (in Kombination mit dem Bodymovin-PlugIn). Dank dem zeitleistenbasierten Aufbau der Software, lassen sich auch detailreiche interaktive Animationen und Filme erstellen, die sich entsprechend für die Einbindung in Webseiten exportieren lassen.
Unser B2B-Animationsbeispiel zum Thema Elektro-Mobilität haben wir mit Hilfe von Adobe Animate umgesetzt:

Fazit

SVG-Animationen sind eine ressourcenschonende Alternative zu klassischen Videos oder Gif-Animationen. Da das SVG-Format auf die Verwendung von Vektorgrafiken ausgelegt ist, spielen sie vor allem dann ihre Vorzüge aus, wenn auf die Integration von Fotos und Bildelementen verzichtet werden kann. So lassen sich SVG-Animationen ohne Qualitätsverlust skalieren und sind eine ideale Zutat im heutigen Responsive Design. Dabei können SVGs vielfältig eingesetzt werden. Beispielsweise um komplexe Sachverhalte zu erklären oder Webseiten generell nutzerfreundlicher und lebendiger zu gestalten.

Haben Sie eine Frage zum Thema oder bereits eine Projektidee?
Wir beraten Sie sehr gerne – kostenlos und unverbindlich:

Zum Beratungsgespräch

Passend zum Thema: