Video falso: un respaldo para el video en el correo electrónico
Publicado: 2019-03-15No se puede negar absolutamente el poder del marketing de video. El contenido de video tiene el poder de contar historias más rápidamente que las imágenes estáticas. Es más emocional. Le permite comunicar en segundos lo que hubiera tomado párrafos para describir por escrito. Por lo tanto, no es de extrañar que muchos especialistas en marketing por correo electrónico estén interesados en incluir videos en sus correos electrónicos, solo para descubrir que la mayoría de los clientes de correo electrónico no ofrecen soporte para videos.
Pero si bien los videos reales no son compatibles con la mayoría de los clientes, eso no significa que deba despedirse de la idea de agregar interacciones tipo video a sus campañas. Entrar: faux vide o !
El video falso imita el movimiento similar al de un video con una interacción que permite a sus suscriptores sentir que están reproduciendo el video en su bandeja de entrada. Hay una serie de técnicas de video falso. El más popular fue creado por su compañero #emailgeek Kristian Robinson, quien presentó su enfoque del uso de la animación CSS para desplazarse a través de una hoja de sprites de fotogramas de video individuales en Litmus Live London en 2018. Debería ver su charla a continuación o sintonizar el Podcast de diseño de correo electrónico # 71 donde cubrimos la técnica de Kristian.
En esta publicación, lo guiaremos a través de la técnica que usamos aquí en Litmus. Está construido sobre GIF animados y tiene una gran ventaja: ¡también funciona en Gmail!
¿Por qué usar un video falso?
Aunque el video en el correo electrónico es un tema popular, solo funciona en Apple Mail y iOS Mail, los únicos clientes de correo electrónico que brindan soporte completo para video HTML5. Al utilizar una técnica de video falso, puede imitar videos reales en su correo electrónico con soporte en muchos más clientes de correo electrónico.
La técnica del video falso es compatible con:
- Gmail
- Aplicación de Gmail
- Correo de Apple
- Correos iOS para iPhone y iPad
- Correo Samsung
- Outlook para Mac
Eso es más del 64% de la cuota de mercado general de clientes de correo electrónico que respaldan esta técnica. Entonces, si está buscando agregar algún movimiento similar a un video a sus campañas, utilizar la técnica de video falso significa que su contenido de video puede ser visto por más suscriptores de los que podría alcanzar al utilizar el video HTML5.
Cómo crear un video falso: usar imágenes en capas para imitar video en vivo
Para utilizar esta técnica de video falso en su próxima campaña de correo electrónico, necesitará dos imágenes del mismo tamaño: una portada estática y un GIF animado, superpuestos uno encima del otro.
- La imagen de portada estática
En este ejemplo, nuestra imagen de portada estática se denomina cover-play.jpg . Esta es la imagen que se mostrará de forma predeterminada, pero desaparecerá y revelará el GIF de fondo debajo cuando su suscriptor interactúe con su correo electrónico. Nuestro ejemplo tiene un icono de botón de reproducción en la imagen de portada estática para imitar un video, pero no es necesario que incluya uno; puede incorporar cualquier tipo de gráfico o texto, si lo desea, pero no olvide su Texto ALT !
- Una imagen de fondo GIF animada
Luego, necesitará la imagen de fondo GIF animada; la nuestra se llama fauxvideo.gif . Esta es la imagen que se revelará cuando un suscriptor pase el mouse sobre la imagen de portada estática. Esto se colocará en el código como una imagen de fondo normal.
Configuración de CSS / HTML
Veamos cómo usar HTML y CSS para configurar un video falso para su próxima campaña de correo electrónico:
CSS incrustado
Este código va entre las etiquetas <head> </head> en la parte superior de su correo electrónico.
.showvideo:hover{ opacity: 0 !important; transition: 0.3s !important; } .showvideo { transition: 0.3s !important; }El estilo : hover en este código cambia la imagen de la portada a opacity: 0, ocultando efectivamente la imagen, cuando un suscriptor se desplaza sobre la sección, revelando el GIF animado en el fondo. La transición de 0.3 segundos es una adición cosmética, que agrega un desvanecimiento gradual al desplazamiento en los clientes de correo electrónico donde es compatible. Se agrega tanto a las clases flotantes como a las no flotantes para garantizar una transición sin problemas cuando un suscriptor pasa el mouse sobre la imagen y se apaga. (Nota: no es necesario configurar un respaldo de VML para Outlook, ya que Outlook no admite el desplazamiento).
HTML
Deberá incluir dos secciones de código en su HTML, una celda <td> y una celda <img> .
Este es el código de la celda <td> que lo contiene y que carga el GIF animado como imagen de fondo, incluso cuando la imagen de portada está en la parte superior y la interacción no está activa.
<td class="w100p" background=" http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif " bgcolor="#43a1e2" valign="top">Este es el código de la imagen cover-play.jpg que se oculta en : hover . Como puede ver, el CSS en el <head> ha activado la clase " 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" />Ahora, ¡júntalo todo! Puede ver el código de video falso de muestra completo en acción en este CodePen .
Preguntas comunes sobre videos falsos
¿El dispositivo móvil de video falso responde?
¡Absolutamente! Si bien el GIF animado se activará al pasar el mouse en el escritorio, se necesita un toque o una presión prolongada para revelar el GIF en el dispositivo móvil. Sin embargo, si se aplica un clic en su correo electrónico, el enlace abrirá el navegador con un toque y el suscriptor nunca verá el video. Sin un clic, el GIF se reproducirá como se esperaba. Una pulsación larga revelará el GIF con o sin un clic. 
¿Puedes usar imágenes de retina con esta técnica?
¡Sí! Para los propósitos de este ejemplo, no usamos imágenes de retina, pero ciertamente puede usar imágenes de retina con videos falsos si tiene sentido para el tiempo total de carga de su correo electrónico. Tenga cuidado con el uso de imágenes o GIF que sean demasiado grandes y afectarán negativamente el tiempo de carga de su correo electrónico. Asegúrese de revisar nuestra publicación sobre imágenes de retina .
¿Por qué utilizar la opacidad en lugar de otros métodos de ocultación?
El uso de la pantalla: ninguno en un elemento desplazado lo elimina del flujo del documento, y termina obteniendo un efecto en el que las imágenes siguen desapareciendo y reapareciendo al pasar el mouse, lo que no revela el GIF animado ni proporciona una transición suave: 
El uso de visibilidad: oculto produciría un efecto de destello similar: 
Usar el método de opacidad para ocultar la imagen de portada proporciona la experiencia más fluida, pero también tiene sus inconvenientes. La opacidad no es compatible con los siguientes clientes de correo electrónico:
- AOL
- Yahoo
- Outlook.com
Agregue videos falsos a su próxima campaña de correo electrónico
No podemos esperar a ver más videos falsos por ahí. Entonces, si usa la técnica de video falso en un próximo correo electrónico, ¡nos encantaría verlo! No dude en compartir un enlace a su diseño en los comentarios a continuación.
Y si tienes alguna pregunta, ¡déjanos escucharla!