Faux vidéo : une solution de repli pour la vidéo dans les e-mails

Publié: 2019-03-15

Le pouvoir du marketing vidéo est absolument indéniable. Le contenu vidéo a le pouvoir de raconter des histoires plus rapidement que les images statiques ne le pourraient jamais. C'est plus émotionnel. Il vous permet de communiquer en quelques secondes ce qu'il aurait fallu des paragraphes pour décrire par écrit. Il n'est donc pas surprenant que de nombreux spécialistes du marketing par e-mail soient intéressés à inclure une vidéo dans leurs e-mails, pour apprendre que la plupart des clients de messagerie n'offrent pas de support pour les vidéos.

Mais bien que les vraies vidéos ne soient pas prises en charge par la plupart des clients, cela ne signifie pas que vous devez dire adieu à l'idée d'ajouter des interactions de type vidéo à vos campagnes. Entrée: faux vide o!

La fausse vidéo imite le mouvement de type vidéo avec une interaction qui donne à vos abonnés l'impression de lire la vidéo dans leur boîte de réception. Il existe un certain nombre de techniques de fausse vidéo. Le plus populaire a été créé par son collègue #emailgeek Kristian Robinson qui a présenté son approche consistant à utiliser l'animation CSS pour faire défiler une feuille de sprite d'images vidéo individuelles à Litmus Live London en 2018. Vous devriez consulter son discours ci-dessous ou vous connecter au Email Design Podcast #71 où nous avons couvert la technique de Kristian.

Dans cet article, nous vous expliquerons la technique que nous utilisons ici chez Litmus. Il est basé sur des GIF animés et présente un gros avantage : il fonctionne également dans Gmail !

Exemple de fausse vidéo

Pourquoi utiliser de la fausse vidéo ?

Bien que la vidéo par courrier électronique soit un sujet populaire, elle ne fonctionne que dans Apple Mail et iOS Mail, les seuls clients de messagerie offrant une prise en charge complète de la vidéo HTML5. En utilisant une technique de fausse vidéo, vous pouvez imiter de vraies vidéos dans votre courrier électronique avec l'assistance de nombreux autres clients de messagerie.

La technique de la fausse vidéo est supportée par :

  • Gmail
  • Application Gmail
  • Courrier Apple
  • Courriers iOS pour iPhone et iPad
  • Courrier Samsung
  • Outlook pour Mac

C'est plus de 64% de la part de marché globale des clients de messagerie prenant en charge cette technique. Donc, si vous cherchez à ajouter un mouvement de type vidéo à vos campagnes, l'utilisation de la technique de la fausse vidéo signifie que votre contenu vidéo peut être vu par plus d'abonnés que vous ne pourriez en atteindre en utilisant la vidéo HTML5.

Comment créer une fausse vidéo : utiliser des images superposées pour imiter une vidéo en direct

Pour utiliser cette technique de fausse vidéo dans votre prochaine campagne d'e-mails, vous aurez besoin de deux images de la même taille : une couverture statique et un GIF animé, superposés.

  1. L'image de couverture statique
     Dans cet exemple, notre image de couverture statique est nommée cover-play.jpg . C'est l'image qui s'affichera par défaut, mais elle disparaîtra et révélera le GIF d'arrière-plan en dessous lorsque votre abonné interagit avec votre e-mail. Notre exemple a une icône de bouton de lecture dans l'image de couverture statique pour imiter une vidéo, mais vous n'avez pas nécessairement besoin d'en inclure une - vous pouvez incorporer n'importe quel type de graphique ou de texte, si vous le souhaitez, mais n'oubliez pas votre Texte ALT !

    Comment créer une fausse vidéo
  2. Une image d'arrière-plan GIF animée
     Ensuite, vous aurez besoin de l'image d'arrière-plan GIF animée, la nôtre s'appelle fauxvideo.gif . C'est l'image qui sera révélée lorsqu'un abonné survolera l'image de couverture statique. Cela sera placé dans le code comme une image d'arrière-plan normale.

    L'image d'arrière-plan GIF animé.

Mise en place du CSS/HTML

Voyons comment utiliser HTML et CSS pour configurer une fausse vidéo pour votre prochaine campagne d'e-mails :

CSS intégré

Ce code se place entre les balises <head></head> en haut de votre e-mail.

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

Le style :hover dans ce code change l'image de couverture en opacité : 0 — cachant efficacement l'image — lorsqu'un abonné survole la section, révélant le GIF animé en arrière-plan. La transition de 0,3 seconde est un ajout cosmétique, ajoutant un fondu progressif au survol dans les clients de messagerie où il est pris en charge. Il est ajouté aux classes survolées et non survolées pour assurer une transition en douceur lorsqu'un abonné survole l'image et arrête la souris. (Remarque : vous n'avez pas besoin de définir une solution de secours VML pour Outlook, car Outlook ne prend pas en charge le survol.)

HTML

Vous devrez inclure deux sections de code dans votre code HTML, une cellule <td> et une cellule <img> .

Il s'agit du code de la cellule contenant <td> qui charge le GIF animé en tant qu'image d'arrière-plan, même lorsque l'image de couverture est en haut et que l'interaction n'est pas active.

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

C'est le code de l' image cover-play.jpg qui est cachée sur :hover . Comme vous pouvez le voir, le CSS dans le <head> a activé la classe « showvideo ».

 <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" />

Maintenant, il suffit de tout assembler ! Vous pouvez voir l'exemple complet de faux code vidéo en action dans ce CodePen .

Questions courantes sur les fausses vidéos

La fausse vidéo mobile est-elle réactive ?

Absolument! Alors que le GIF animé se déclenchera au survol du bureau, il suffit d'appuyer ou d'appuyer longuement pour révéler le GIF sur mobile. Cependant, si un clic est appliqué dans votre e-mail, le lien lancera le navigateur au toucher et l'abonné ne verra jamais la vidéo. Sans clic, le GIF jouera comme prévu. Un appui long révélera le GIF avec ou sans clic.
La fausse vidéo mobile est-elle réactive ?

Pouvez-vous utiliser des images de rétine avec cette technique ?

Oui! Pour les besoins de cet exemple, nous n'avons pas utilisé d'images de rétine, mais vous pouvez certainement utiliser des images de rétine avec une fausse vidéo si cela a du sens pour le temps de chargement global de vos e-mails. Attention à ne pas utiliser d'images ou de GIF trop volumineux et qui auront un impact négatif sur le temps de chargement de votre e-mail. N'oubliez pas de consulter notre article sur les images de rétine .

Pourquoi utiliser l'opacité au lieu d'autres méthodes de masquage ?

L'utilisation de display:none sur un élément survolé le supprime du flux de documents et vous obtenez un effet où les images continuent de disparaître et de réapparaître au survol, ce qui ne révèle pas le GIF animé ni ne fournit une transition en douceur :
utiliser l'opacité au lieu d'autres méthodes de masquage
L'utilisation de la visibilité:hidden produirait un effet clignotant similaire :
Utilisation de la visibilité : masqué
L'utilisation de la méthode d'opacité pour masquer l'image de couverture offre l'expérience la plus fluide, mais elle a aussi ses inconvénients. L'opacité n'est pas prise en charge dans les clients de messagerie suivants :

  • AOL
  • Yahoo
  • Outlook.com

Ajoutez de fausses vidéos à votre prochaine campagne d'e-mails

Nous avons hâte de voir plus de fausses vidéos. Donc, si vous utilisez la technique de la fausse vidéo dans un prochain e-mail, nous serions ravis de la voir ! N'hésitez pas à partager un lien vers votre design dans les commentaires ci-dessous.

Et si vous avez des questions, s'il vous plaît laissez-nous les entendre!