• HOME
  • Blog
  • Infundir vida en los e-mail con ayuda de vídeos, animaciones GIF, cuentas atrás e imágenes...
Andrea Serventi
14 noviembre 2017
Tiempo de lectura: 8 min.

Infundir vida en los e-mail con ayuda de vídeos, animaciones GIF, cuentas atrás e imágenes dinámicas

Cómo hacerlo, pros y contras: por qué y cómo dar impulso dinámico a los mensajes para aumentar las aperturas y conversiones.

Según un reciente reporte de Cisco System, en 2018 en los Estados Unidos los vídeos constituirán el 84% del tráfico de Internet. Un dato impresionante, que da la medida de cómo un elemento dinámico sobre un soporte digital tenga la capacidad de catalizar más que ninguna otra cosa la atención del usuario.

Esto no quiere decir que los contenidos interesantes viajen solamente en vídeo, lo cual significaría admitir que los mil millones de horas de visualizaciones diarias en Youtube están hechos por entero de vídeos relevantes –, sino que lo que atrae y cautiva al usuario es el formato, ese elemento cinético que lleva a la página web a dinamizarse, adquiriendo movimiento en una secuencia de imágenes y cuadros.

Estamos asistiendo a una constante mutación en las costumbres del usuario, que cada vez da mayor preferencia al elemento dinámico. Pensemos en los Timelapse y en los Boomerang de Instagram, los Live y los 360° de Facebook: también los contenidos en las redes sociales se desplazan hacia el lado de los vídeos y de las imágenes dinamizadas. Una tendencia que se refleja en todos los canales, e-mail incluido.

El volumen de contenidos animados que se pueden introducir en los e-mail comprende cuatro grandes elementos:

  • Animaciones GIF
  • Vídeos
  • Cuenta atrás
  • Imágenes dinámicas

En la entrada de hoy nos adentraremos en cada uno de estos contenidos, acompañándolos con mejores prácticaserrores que no se deben cometer y directrices para integrarlos correctamente en los e-mail, optimizando su visualización.

256x218
Prueba la plataforma
Descubre todo lo que puedes hacer con MailUp.

Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.

Animaciones GIF: el as en la manga del email

Tal vez todavía no sepas bien como se pronuncia “GIF”, pero seguramente sabes de qué se trata. Es un formato que reúne muchas ventajas, sobre todo si tenemos en cuenta que son relativamente fáciles de crear y de utilizar. Gracias al movimiento que generan en el mensaje e-mail, en efecto:

  • Atraen la atención y captan la mirada de forma mucho más eficaz que una imagen estática.
  • El resultado es que mejoran el rendimiento de los e-mail, sobre todo en relación al índice de clic.
  • Permiten contar auténticas historias que crean un vínculo emotivo con el lector, perfectas en una óptica de narración visual.
  • Divierten y animan a compartir.
  • Admiten transparencia (pueden, por ejemplo, superponerse a un fondo de color)
  • Ideales para imágenes con texto superpuesto

Por otra parte, también tienen algunas desventajas (de las que sabremos darte los remedios correspondientes):

  • Admiten un máximo de 256 colores
  • Pesan mucho: pueden aumentar el peso del mensaje y hacer que se cargue más lento
  • Calidad no adecuada para fotografías

Cómo crear una animación GIF

Si introducirlas en el e-mail es simple e intuitivo, también es cierto que, en comparación con las imágenes estáticas, las animaciones GIF requieren un poco de esfuerzo extra a la hora de crearlas. Veamos las posibilidades:

  • Usar Photoshop para crear animaciones GIF 100% originales. Es una opción que requiere mayores capacidades, pero también garantiza mejores resultados.
  • Recurrir a herramientas online como meezgif.commakeagif.comimgur.comgiphy.com o gifbrewery.com (pero hay muchas más) para convertir las fotos y vídeos en GIF.
  • Hacer uso de las bien surtidas galerías de GIF ya listas, como en los propios com y makeagif.com. La originalidad no es la misma, pero con el beneficio de un uso mucho más fácil.

Cómo introducir las animaciones GIF en los e-mail

Las GIF son archivos de imagen, como los formatos PNG y JPEG, por lo que pueden introducirse en los mensajes exactamente igual que cualquiera de esas imágenes «normales».

  • Si utilizas el editor de arrastrar y solar de MailUp, puedes subir la imagen GIF de la misma manera que las demás imágenes.
  • Si trabajas en HTML, introduce la cadena de código correspondiente.

Compatibilidad con los clientes de e-mail

Actualmente las animaciones GIF se visualizan perfectamente en la gran mayoría de los clientes e-mail, tanto en PC como en móvil . La principal excepción es la constituida por las versiones 2007, 2010 y 2013 de Microsoft Outlook, que bloquean la animación, mostrando solo el primer cuadro.

¡Recuerda! El hecho de que los clientes sean, en teoría, compatibles con las animaciones GIF no garantiza automáticamente su visualización. Si el usuario de que se trate tiene bloqueada la descarga de imágenes, o si el archivo de imagen es demasiado pesado para una descarga ágil, nos encontraremos con que la visualización falla.

Animaciones GIF: 4 errores que no hay que cometer

1. Exagerar con el peso

Si es demasiado grande, la animación GIF puede ser lenta y consumir demasiado tráfico de datos de móvil. Trata de mantener tu GIF por debajo de los 50 KB de peso, y asegúrate de no superar nunca los 200-250 KB. Entre los trucos para disminuir el peso:

  • Usa menos colores (prestando atención a no comprometer demasiado la calidad de la imagen)
  • Anima solamente la parte de la imagen que necesita movimiento (aprovechando, por ejemplo, la técnica del cinemagraph)
  • Elimina fotogramas: la ilusión de movimiento se mantiene incluso con pocos cuadros bien elegidos.

2. Olvidarse de optimizar el primer cuadro

Algunos clientes limitan la visualización de las GIF al primer cuadro de la animación. Partiendo del presupuesto de que podría ser el único que vean todos los usuarios, es aconsejable que el fotograma inicial esté siempre completo, que por sí solo transmita un sentido, y que nunca esté vacío. De ese modo, el mensaje llegará a destino, y no se perderá completamente en caso de visualización limitada.

3. No preparar Texto Alternativo (Alt Text)

No acaban ahí las cosas: la configuración del destinatario o de un determinado cliente puede bloquear por completos las animaciones GIF, cosa que también puede ocurrir con las imágenes normales. Por ello, es importante emplear cadenas de texto alternativo (el denominado Alt Text) para que incluso quienes no visualizan la GIF puedan recibir el contenido de la misma.

4. No enlazar la imagen

El gran valor añadido de las animaciones GIF está en que pueden contener un enlace a una página web, como cualquier otra imagen estática, y al contrario que los vídeos incrustados. Por tanto, no te olvides de introducir un enlace de aterrizaje para llevar a quienes hacen clic en la animación a donde tú desees.

Vídeos en los e-mail, ¿sí o no?

Para responder a la pregunta, es conveniente echar un vistazo a un artículo del Content Marketing Institute que nos informa de que el 76% de quienes introducen contenido en vídeo en los e-mail obtienen porcentajes de clics mucho más altos, además de registrar una mayor tendencia a la compra por parte de los posibles clientes, que se cuantifica en un porcentaje del 72%.

En realidad, la pregunta ya se había planteado, pero había chocado con que muchos clientes de e-mail no ofrecían compatibilidad con los formatos de vídeo y no existían alternativas válidas. Hoy, por fortuna, la situación ha cambiado y, a partir de estudios detallados, podemos finalmente decir que los vídeos se pueden usar satisfactoriamente dentro de una campaña de marketing por e-mail.

Se habla de “incrustar” («embed«) un vídeo, es decir, de incorporarlo en el código HTML. La etiqueta <video> nos permite incluir el vídeo en el HTML del mensaje enviado a nuestros destinatarios, de modo que ellos puedan visualizarlo directamente en el mensaje de la bandeja de entrada, sin usar otros plugin o servicios como YouTube.

PROS

  • Como media, un vídeo incrustado obtiene un 40% de visualizaciones más que cualquier vídeo del que solo se incluya el enlace.
  • Los vídeos incrustados ofrecen una experiencia dinámica directamente en la bandeja de correo de los destinatarios.
  • Los vídeos incrustados son una herramienta eficaz. Generan aproximadamente un 55% más de facturación por cada e-mail enviado (pruebas A/B, minoristas).
  • Son fáciles de implementar.

CONTRAS

  • Los vídeos incrustados no se visualizan en todos los clientes de correo. Los remitentes B2C alcanzan aproximadamente al 60% de las bandejas de entrada de los destinatarios y son visibles en ellas. En el sector BSB, esa cifra se reduce hasta el 40% aprox.
  • Los vídeos incorporados no pueden enlazarse en una URL o en una imagen.
  • No se puede hacer el seguimiento de la duración de la visualización de cada destinatario.
  • No se puede hacer el seguimiento de los clics en el vídeo incrustado (play, pausa, etc.).

Los vídeos incrustados: Una guía práctica

Además de permitir la actualización de los clientes de correo y de los navegadores, la llegada del HTML5 ha hecho posible introducir vídeos en los mensajes de e-mail, así como su visualización en distintos clientes y navegadores, para poder elegir el mejor.

Históricamente, el uso Adobe Flash siempre se ha descartado, por su falta de compatibilidad con cualquier cliente de correo y, por tanto, por no ofrecer la posibilidad de introducir vídeos en un e-mail. El HTML5, en cambio, ofrece una mayor compatibilidad: tanto Apple Mail como Outlook (anteriormente conocido como Hotmail) nos permiten ver el vídeo directamente en la bandeja de entrada. Pero no acaban ahí las novedades. En los clientes que no permiten ver los vídeos, aparece una imagen alternativa – conocida como imagen de fallback – especificada en el código HTML, con la cual enlaza una página web para visualizar el vídeo en el navegador.

Ahora que HTML5 ofrece una solución para la introducción de vídeos en el e-mail, veamos cómo hacerlo.

  1. Prepara el archivo de vídeo en los formatos: MP4, OGG y WEBM.
  2. Crea una imagen alternativa de fallback que se mostrará si el vídeo no puede visualizarse inmediatamente.
  3. Usa un servicio como Video for Everybody Code Generator para generar el código HTML.
  4. Introduce el código en el editor HTML de tu proveedor de e-mail, como MailUp.
  5. Enlaza la imagen alternativa de fallback a la versión web de tu e-mail o, si lo prefieres, a otra página.

Cómo preparar el archivo de vídeo

La operación de copiar y pegar del código de YouTube (y similares) no es la solución ideal. La incorporación de un vídeo al e-mail requiere alguna operación adicional. El HTML5 nos será de gran ayuda porque el código permite visualizar los archivos en distintos formatos: el cliente (de correo o el navegador) puede elegir el más adecuado. Firefox, por ejemplo, prefiere el formato de vídeo .ogv.

¿Cómo se preparan estos archivos de vídeo y cuánto tiempo se necesita? Por fortuna, el vídeo puede convertirse en dos formatos distintos usando herramientas de conversión como Online Convert. Para muchos, las fases podrían ser:

  1. Encuentra el archivo original del vídeo: debería estar en MP4 (también puede guardarse como archivo MP4)
  2. Si el vídeo ya se ha cargado en YouTube, accede a tu cuenta y descarga la versión MP4
  3. Usa el archivo MP4 como base para generar los archivos en formato *.ogv y *.webm. Las tres versiones del vídeo son las necesarias para el código HTML
  4. Crea una imagen alternativa de fallback del video, con una extensión JPG, por ejemplo. En nuestra prueba, la imagen usada es la siguiente:

Como alternativa a los vídeos

Si bien son relativamente “seguros”, los vídeos en los e-mail todavía pueden dar lugar a posibles problemas de visualización, carga y experiencia. Por esa razón, muchas marcas prefieren sustituir los vídeos incrustados con una de las siguientes opciones alternativas, más seguras, más ligeras y de efectos colaterales ciertamente más fáciles de tener bajo control.

  • Animación GIF. La animación de un vídeo puede simularse también con una animación GIF, que en pocos cuadros muestre una vista previa del contenido. Dado que admite enlaces, la GIF puede llevar al vídeo completo en la página de aterrizaje.
  • Falso reproductor. Estamos tan habituados a asociar instintivamente el icono del reproductor a un vídeo efectivo, que cuando vemos el icono superpuesto a una imagen estática, casi no percibimos la diferencia. Usa este truco para simular el primer cuadro de un vídeo y llevar a quien hace clic a la página de aterrizaje con el vídeo propiamente dicho.

3, 2, 1, ¡ya!: la cuenta atrás

De los vídeos pasamos a otro contenido de animación a disposición de los profesionales del marketing: la cuenta atrás, una potente herramienta de narración visual, capaz de transmitir urgenciaincitar a la acción inmediata y atraer la atención de una forma mucho más incisiva que una imagen estática.

Al igual que con las GIF, es conveniente que el uso de los temporizadores de cuenta atrás se haga con mesura, a fin de no diluir su eficacia. Las finalidades para las que se puede emplear la cuenta atrás pueden ser muchas: desde animar a participar a un evento a promover una oferta antes de que caduque, pasando por solicitudes de donación o las más genéricas invitaciones a actuar. Son posibilidades que puedes explorar en una reciente entrada de blog dedicada. Si necesitas una guía práctica sobre cómo introducir el temporizador en los e-mail, lee nuestras instrucciones.

Una imagen para cada destinatario

Se trata de un elemento que conjuga animación y personalización. En este caso, el elemento dinámico está entre bastidores, y representa el input con el que las imágenes reciben animación dinámica según los datos de cada destinatario, de forma completamente automática.

Los pasos para integrar las imágenes dinámicas en el e-mail son esencialmente tres:

Paso 1
Diseña el e-mail en el editor BEE

Paso 2
Crea y personaliza la imagen con NiftyImages

Paso 3
Añade la imagen personalizada al e-mail

En esta entrada te daremos los detalles de cada fase operativa. Si introduces en tus e-mail las imágenes personalizadas, tendrás la posibilidad de enviar campañas que hablen de tú a tú al destinatario, no solo en el texto (gracias a los campos dinámicos), sino también en los complementos iconográficos.

Para terminar

Diseño de e-mail y elementos dinámicos: el potencial de conversión del marketing por e-mail pasa por esta sinergia. Te hemos acompañado por una panorámica de los pros, los contras y los cómo hacer para implementar este tipo de contenidos en tu estrategia. Ya solo tienes que pasar a la práctica… te recordamos que si no dispones todavía de una plataforma de marketing por e-mail y SMS, puedes solicitar una prueba gratuita de 30 días de MailUp.

Share this article

80x80
Andrea Serventi

Nací en 1986 en Milán, donde me gradué en literatura moderna y empecé a escribir sobre infinidad de temas para los periódicos online, las revistas y los noticieros de televisión. Convertido al marketing y al mundo digital, soy editor de contenido de MailUp: leo, escucho, tomo notas y escribo, para contar en qué consiste el email marketing y cómo conseguir que resulte estratégico.

    Mucho contenido original, cero spam. Suscríbete al boletín