Faux-Video: Ein Fallback für Video in E-Mails

Veröffentlicht: 2019-03-15

Die Macht des Videomarketings ist absolut nicht zu leugnen. Videoinhalte können Geschichten schneller erzählen, als es statische Bilder jemals könnten. Es ist emotionaler. Damit können Sie innerhalb von Sekunden kommunizieren, was Sie schriftlich beschreiben müssten. Es überrascht daher nicht, dass viele E-Mail-Marketer daran interessiert sind, Videos in ihre E-Mails aufzunehmen – nur um zu erfahren, dass die meisten E-Mail-Clients keinen Support für Videos anbieten.

Obwohl echte Videos von den meisten Kunden nicht unterstützt werden, bedeutet dies nicht, dass Sie sich von der Idee verabschieden müssen, Ihren Kampagnen videoähnliche Interaktionen hinzuzufügen. Geben Sie ein: Faux Vide o !

Faux-Video imitiert videoähnliche Bewegungen mit einer Interaktion, die Ihren Abonnenten das Gefühl gibt, das Video in ihrem Posteingang abzuspielen. Es gibt eine Reihe von Faux-Video-Techniken. Das beliebteste wurde von seinem Kollegen #emailgeek Kristian Robinson erstellt, der seinen Ansatz zur Verwendung von CSS-Animationen zum Scrollen durch ein Sprite-Sheet einzelner Videoframes von Litmus Live London im Jahr 2018 vorstellte. Sie sollten sich seinen Vortrag unten ansehen oder einschalten E-Mail-Design-Podcast #71, in dem wir Kristians Technik behandelt haben.

In diesem Beitrag führen wir Sie durch die Technik, die wir hier bei Litmus verwenden. Es baut auf animierten GIFs auf und hat einen großen Vorteil: Es funktioniert auch in Gmail!

Faux-Video-Beispiel

Warum Faux-Video verwenden?

Obwohl Video in E-Mail ein beliebtes Thema ist, funktioniert es nur in Apple Mail und iOS Mail – den einzigen E-Mail-Clients, die HTML5-Video vollständig unterstützen. Durch die Verwendung einer Faux-Video-Technik können Sie echte Videos in Ihren E-Mails imitieren, wobei viele weitere E-Mail-Clients unterstützt werden.

Die Faux-Video-Technik wird unterstützt von:

  • Google Mail
  • Gmail-App
  • Apple-Mail
  • iOS-Mails für iPhone und iPad
  • Samsung Mail
  • Outlook für Mac

Das sind über 64 % des gesamten E-Mail-Client-Marktanteils , der diese Technik unterstützt. Wenn Sie also Ihren Kampagnen eine videoähnliche Bewegung hinzufügen möchten, bedeutet die Verwendung der Faux-Video-Technik, dass Ihr Videoinhalt von mehr Abonnenten gesehen wird, als Sie mit HTML5-Video erreichen könnten.

So erstellen Sie ein Faux-Video: Verwenden von überlagerten Bildern, um Live-Videos zu imitieren

Um diese Faux-Video-Technik in Ihrer nächsten E-Mail-Kampagne zu verwenden, benötigen Sie zwei Bilder gleicher Größe: ein statisches Cover und ein animiertes GIF, die übereinander geschichtet sind.

  1. Das statische Titelbild
     In diesem Beispiel heißt unser statisches Titelbild cover-play.jpg . Dies ist das Bild, das standardmäßig angezeigt wird, aber verschwindet und das darunter liegende Hintergrund-GIF enthüllt, wenn Ihr Abonnent mit Ihrer E-Mail interagiert. Unser Beispiel hat ein Play-Button-Symbol im statischen Titelbild, um ein Video zu imitieren, aber Sie müssen nicht unbedingt eines einfügen – Sie können jede Art von Grafik oder Text einfügen, wenn Sie möchten, aber vergessen Sie nicht Ihre ALT-Text !

    So erstellen Sie ein Faux-Video
  2. Ein animiertes GIF-Hintergrundbild
     Dann benötigen Sie das animierte GIF-Hintergrundbild – unseres heißt fauxvideo.gif . Dies ist das Bild, das angezeigt wird, wenn ein Abonnent mit der Maus über das statische Titelbild fährt. Dieses wird als normales Hintergrundbild in den Code eingefügt.

    Das animierte GIF-Hintergrundbild.

CSS/HTML einrichten

Sehen wir uns an, wie Sie HTML und CSS verwenden, um Faux-Videos für Ihre nächste E-Mail-Kampagne einzurichten:

Eingebettetes CSS

Dieser Code steht zwischen den <head></head> -Tags oben in Ihrer E-Mail.

 .showvideo:hover{ opacity: 0 !important; transition: 0.3s !important; } .showvideo { transition: 0.3s !important; }

Der :hover- Stil in diesem Code ändert das Titelbild in Deckkraft: 0 – und blendet das Bild effektiv aus – wenn ein Abonnent mit der Maus über den Abschnitt fährt und das animierte GIF im Hintergrund sichtbar wird. Der Übergang von 0,3 Sekunden ist eine kosmetische Ergänzung, die dem Hover in E-Mail-Clients, wo er unterstützt wird, ein allmähliches Fade hinzufügt. Es wird sowohl der Hover- als auch der Nicht-Hover-Klasse hinzugefügt, um einen reibungslosen Übergang zu gewährleisten, wenn ein Abonnent über das Bild fährt und die Maus entfernt. (Hinweis: Sie müssen keinen VML-Fallback für Outlook festlegen, da Outlook Hover nicht unterstützt.)

HTML

Sie müssen zwei Codeabschnitte in Ihren HTML-Code einfügen, eine <td> -Zelle und eine <img> -Zelle.

Dies ist der Code für die enthaltende <td> -Zelle, die das animierte GIF als Hintergrundbild lädt, auch wenn das Titelbild oben ist und die Interaktion nicht aktiv ist.

 <td class="w100p" background=" http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif " bgcolor="#43a1e2" valign="top">

Dies ist der Code für das Bild cover-play.jpg , das auf : hover ausgeblendet wird . Wie Sie sehen, hat das CSS im <head> die Klasse „ showvideo “ aktiviert .

 <img class="showvideo" src="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/cover-play.jpg" width="600" border="0" alt="Play" />

Jetzt einfach alles zusammenfügen! Sie können den vollständigen Beispiel-Faux-Video-Code in Aktion in diesem CodePen sehen .

Häufige Fragen zu Faux-Videos

Ist Faux-Video für Mobilgeräte responsive?

Absolut! Während das animierte GIF beim Schweben auf dem Desktop ausgelöst wird, ist ein Tippen oder langes Drücken erforderlich, um das GIF auf dem Handy anzuzeigen. Wenn jedoch in Ihrer E-Mail ein Klick angewendet wird, wird der Link durch Tippen den Browser starten und der Abonnent wird das Video nie sehen. Ohne Clickthrough wird das GIF wie erwartet abgespielt. Durch langes Drücken wird das GIF mit oder ohne Durchklicken angezeigt.
Ist Faux-Video für Mobilgeräte responsive?

Können Sie Netzhautbilder mit dieser Technik verwenden?

Jawohl! Für dieses Beispiel haben wir keine Retina-Bilder verwendet, aber Sie können durchaus Retina-Bilder mit Faux-Video verwenden, wenn dies für Ihre gesamte E-Mail-Ladezeit sinnvoll ist. Achten Sie darauf, dass Sie zu große Bilder oder GIFs verwenden, die sich negativ auf die Ladezeit Ihrer E-Mail auswirken. Schauen Sie sich unbedingt unseren Beitrag zu Retina-Bildern an .

Warum Opazität anstelle anderer Versteckmethoden verwenden?

Wenn Sie display:none auf einem schwebenden Element verwenden, wird es aus dem Dokumentenfluss entfernt, und Sie erhalten am Ende einen Effekt, bei dem die Bilder beim Schweben immer wieder verschwinden und wieder erscheinen, was weder das animierte GIF zeigt noch einen reibungslosen Übergang bietet:
Verwenden Sie Deckkraft anstelle anderer Versteckmethoden
Die Verwendung von visible:hidden würde einen ähnlichen Blinkeffekt erzeugen:
Sichtbarkeit verwenden:versteckt
Die Verwendung der Deckkraftmethode zum Ausblenden des Titelbilds bietet die reibungsloseste Erfahrung, hat jedoch auch Nachteile. Deckkraft wird in den folgenden E-Mail-Clients nicht unterstützt:

  • AOL
  • Yahoo
  • Outlook.com

Fügen Sie Ihrer nächsten E-Mail-Kampagne gefälschte Videos hinzu

Wir können es kaum erwarten, mehr Faux-Videos zu sehen. Wenn Sie also in einer kommenden E-Mail die Faux-Video-Technik verwenden, würden wir uns freuen, sie zu sehen! Fühlen Sie sich frei, einen Link zu Ihrem Design in den Kommentaren unten zu teilen.

Und wenn Sie Fragen haben, lassen Sie uns diese gerne hören!