Newsletter Trends 2019 – Animationen mit Gifs

Vor einer Woche haben wir dich im ersten Teil über zwei Newsletter Trends für 2019 informiert. Es gab Tipps, wie du mehr Interaktionen erreichen kannst und welches Potential dynamische Inhalte für E-Mail Kampagnen haben. Für unsere Top 3 fehlt aber noch ein großer, wichtiger Trend: Heuer wollen wir mehr Newsletter mit animierten Gifs sehen!

Newsletter mit animierten Gifs aufpeppen

Bewegung schafft Aufmerksamkeit und in einem statischen Newsletter sind bewegliche Elemente wahre Eyecatcher. Eine einfache Möglichkeit etwas Bewegung zu erzeugen sind animierte Gifs, die sich wie Bilder im Newsletter integrieren lassen.

.gif ist ein Bildformat, dass es schon seit den 1980ern gibt. Dann sind Gifs einige Zeit in den Dornröschenschlaf versunken und nun poppen sie überall wieder auf. Bewegte Bildchen generieren mehr Aufmerksamkeit, und so werden Newsletter mit animierten Gifs zum Erlebnis! Und der Überraschungseffekt ist garantiert, denn wieviele E-Mails mit Animationen landen so bei dir im Postfach? In diesem Tool-Time-Beitrag erfährst du mehr über Gifs, und wie du selber welche erstellen kannst!

Tipp für die Bewegung: Idealerweise bewegt sich das Gif in Endlosschleife. Damit in Gifs zwischen Ende und Anfang kein unschöner Schnitt erkennbar ist, wird das komplette Gif in einem Animations-Programm kopiert, gespiegelt und an das erste wieder angehängt. Dann entfernt man den doppelten Frame in der Mitte und am Ende und schon entsteht beim Abspielen eine gleichmäßige, fließende Bewegung, die kein Anfang und Ende zu haben scheint. In dem Beispiel mit dem Schaf von mailchimp.com ist es so. Das klingt verwirrend für dich? Schreib uns, wir helfen gerne aus.

Stolpersteine und wie du diese vermeidest

1. 1. Kompatibilität mit e-Mail-Programmen

      Einige ältere Outlook-Versionen zeigen statt einer Animation nur den ersten Frame. So entgeht diesen Usern mitunter wichtige Information. Auch kann es irritierend für den User sein, wenn er nur ein Standbild sieht, welches eventuell keinen Bezug zum Rest der E-Mail hat.

      Tipp: Wir empfehlen animierte Gifs so zu gestalten, dass der erste Frame auch für sich alleine stehen kann. Wenn der erste Frame nur Hintergrund ist, auf dem sich schrittweise die Information aufbaut, können User mit alten Outlook-Browsern diese Information nicht sehen. Ein Gif sollte als rein dekoratives Element genutzt werden. Wenn es wichtige (Text-)Informationen enthält, sollten diese zusätzlich auch als klassischer HTML-Text in der Mail zur Verfügung stehen. Verstecke keine wichtigen Infos in den letzten Frames eines Gifs, denn die werden leicht übersehen.

   2. 

      Lange Ladezeiten

      Animierte Gifs verfügen oft über eine höhere Dateigröße als statische Bilder. Es gibt aber einige nützliche Tipps, wie du die Dateigröße klein halten und somit die Ladezeit verringern kannst. Als Faustregel empfehlen wir für Gifs in Mails eine Größe von unter 250kb. Je geringer die File-Size, desto besser!

      Beachte zusätzlich Folgendes:

      Keep it simple: Beschränke dich auf kurze, subtile Bewegungen. Weniger ist oft mehr, denn aufwendige Animationen benötigen länger, um geladen zu werden.
      Kleinere Abmessungen: Die Bilddimensionen sollten dem vorhandenen Platz in deiner Mail entsprechen.
      Frames entfernen: Ausdünnen und die Frame-Rate der übrig gebliebenen Bilder erhöhen ist ein guter Tipp, denn oft ergeben schon wenige Frames für das Auge eine ansprechende Animation.
      Farben reduzieren: Je weniger Farben, desto kleiner wird die Dateigröße.

   3. 

      Barrierefreiheit mitgedacht?

      Barrierefreiheit im Web ist ein sehr umfangreiches Thema, denn es können überall Barrieren lauern. „Barriere-woooot“, fragst du dich? Keine Bange, unsere Barrierefreiheits-Expertin Eva hat in diesem Beitrag die wichtigsten Infos für dich zusammengefasst.

      Hier ein paar Tipps, worauf du hinsichtlich Barrierefreiheit achten solltest, wenn du Newsletter mit animierten Gifs verschicken willst:

      Vermeide schnelles Blinken/Flackern: Schnell blinkende Gifs, vielleicht auch noch in grellen Farben können in seltenen Fällen epileptische Anfälle verursachen. Allgemein werden zu schnelle Bewegungen gepaart mit starken Kontrast-Änderungen als störend und unangenehm wahrgenommen. Dieselbe Irritation entsteht z.B. wenn eine Lampe flackert. Da schauen wir lieber ganz schnell weg, egal ob online oder offline. 😉
      Lass Text-Frames genug Zeit: Frames mit Texten, die sich nach einer gewissen Zeit ändern, können für manche User in der kurzen Zeit schwer zu lesen sein. Stelle daher sicher, dass Texte lange genug angezeigt werden und passe die Frame-Rate an, bevor sich das Bild verändert.
      Verwende Alternativ-Texte: Wie bei statischen Bildern empfiehlt sich auch bei Gifs eine Text-Alternative zu hinterlegen, damit User mit assistiven Technologien den Inhalt auch verstehen können. Diese wird im Code im alt-Attribut hinterlegt, wir beraten dich gerne dazu ausführlicher.
      Mehr zum Thema „barrierefreie E-Mails“ kannst du hier bei litmus.com nachlesen.

Möchtest du auch Newsletter mit animierten Gifs verschicken aber brauchst Unterstützung hinsichtlich Gif-Erstellung oder technischer Optimierung? Dann melde dich bei uns, wir unterstützen dich gerne!

Willst du unseren Newsletter abonnieren? Dann melde dich hier gleich an und erhalte zukünftig noch mehr Tipps, direkt in deine Inbox: