Entrega del episodio 4: comprensión de las imágenes de fondo en el correo electrónico

En este episodio de Entregando, veremos una técnica esencial para los diseñadores de correo electrónico: la imagen de fondo humilde, pero poderosa. Aprenda por qué las imágenes de fondo son importantes, cómo codificarlas utilizando una variedad de técnicas y cómo se comparan esos métodos en diferentes clientes de correo electrónico. Este episodio es un complemento de nuestra guía definitiva actualizada recientemente para imágenes de fondo en correo electrónico. Échale un vistazo para obtener consejos, trucos y código.

Asegúrate de suscribirte a Delivering en iTunes o Spotify para escuchar episodios futuros y únete a la conversación en Twitter usando el hashtag #DeliveringPodcast.

Transcripción del episodio

Hay muchas formas de agregar imágenes interesantes a las campañas de correo electrónico.

Si bien CSS permite muchas opciones de estilo diferentes, a veces solo necesitas una buena imagen. Pero, ¿cuál es la mejor forma de utilizar imágenes en el correo electrónico? En este episodio de Entregando, veremos una técnica esencial para los diseñadores de correo electrónico: la imagen de fondo humilde, pero poderosa.

Soy Jason Rodríguez y bienvenido a Delivering, un podcast sobre marketing por correo electrónico y su lugar en el mundo. La entrega se la ofrece Litmus, la plataforma líder en la industria para los especialistas en marketing por correo electrónico. Únase a más de 600.000 profesionales del correo electrónico que utilizan Litmus para crear, revisar, probar y realizar un seguimiento de mejores campañas de marketing por correo electrónico. Obtenga más información y obtenga una prueba gratuita de 7 días en Litmus.com.

Las imágenes son un elemento básico de las campañas de marketing por correo electrónico. Se utilizan para fotografías de productos, ilustraciones bonitas, logotipos, iconos y, en algunos casos, para todo el correo electrónico. Especialmente en el mundo minorista, los especialistas en marketing tienden a diseñar campañas completamente en herramientas como Photoshop, dividiendo esas imágenes y volcándolas en HTML antes de enviarlas a los suscriptores. Toda la información (titulares, copia, llamadas a la acción, lo que sea) existe dentro de las imágenes.

Es una buena manera de adherirse a las pautas de la marca y producir correos electrónicos rápidamente, pero usar imágenes de esta manera tiene algunos inconvenientes importantes.

La primera es que muchos clientes de correo electrónico desactivan las imágenes de forma predeterminada. El cliente de correo electrónico deja literalmente descargado las imágenes (y todo el contenido) de un correo electrónico, lo que da como resultado campañas en blanco que a muchos suscriptores les parecen rotas.

La segunda es que los suscriptores que utilizan tecnología de asistencia, como el software lector de pantalla, no podrán experimentar el contenido del correo electrónico.

En ambos casos, todo el texto, las ofertas y el valor que dedicó a poner en su campaña de correo electrónico se han desperdiciado. Tiene que haber una mejor solución, ¿verdad?

Ingrese imágenes de fondo.

Las imágenes de fondo son simplemente imágenes, como cualquier otra en un correo electrónico. Son archivos cargados en un servidor y vinculados en código. La diferencia es que las imágenes de fondo no se aplican con una etiqueta de imagen HTML, sino como un atributo o CSS en otros elementos HTML.

Hay cuatro formas de codificar imágenes de fondo, cada una con sus ventajas y desventajas.

El primer método, y más tradicional, consiste en aplicar el atributo de fondo a una celda de la tabla. El valor del atributo es solo la URL que apunta a la imagen. Este método es genial porque es bastante compatible con los clientes de correo electrónico. Sin embargo, la principal desventaja es que no es muy flexible. No puede controlar el tamaño de su imagen de fondo y la imagen, de forma predeterminada, se repetirá en su elemento.

También puede cargar imágenes de fondo usando CSS. Las siguientes dos técnicas utilizan el mismo método, pero se aplican de manera diferente.

CSS tiene varias propiedades de fondo, las más notables son: background-image, background-repeat, background-position, background-size y background-color. También está la propiedad de taquigrafía de fondo súper útil.

Con estas propiedades, puede incluir la URL de una imagen, controlar cómo se coloca esa imagen y si se repite o no, así como incluir un color de respaldo para cuando las imágenes no se cargan.

La primera forma de utilizar fondos CSS es incrustando esas propiedades en un bloque de estilo en el encabezado de su correo electrónico. Simplemente apunte a un elemento HTML como una celda de tabla o div, y listo. Este método es fácil de codificar, leer y mantener, pero los estilos incrustados no son compatibles con todos los clientes de correo electrónico.

Un método más sólido es incluir esas propiedades en línea en su elemento HTML. Esto puede complicarse si está usando imágenes de fondo en varios elementos, pero como somos fanáticos del correo electrónico y estamos acostumbrados a usar imágenes en línea, aún es perfectamente manejable.

La última forma de incluir imágenes de fondo en un correo electrónico es utilizando lo que se denomina "fondos a prueba de balas". Los fondos a prueba de balas se basan en el método de atributo HTML al incluir también VML, o Vector Markup Language, en el código. VML es un lenguaje propietario de Microsoft que se utiliza en productos de Office como Outlook. Al aplicar imágenes de fondo en VML, funcionarán en Microsoft Outlook, lo que no es necesariamente cierto para los otros métodos discutidos anteriormente.

La principal desventaja de usar VML es que no es muy accesible ni está bien documentado, y agrega una gran cantidad de código que, francamente, es difícil de entender. Para hacerlo más fácil, nuestros amigos de Campaign Monitor han creado una herramienta increíble para generar fondos a prueba de balas. Puede encontrarlo, cómodamente, en backgrounds.cm.

Independientemente del método que elija, existen ventajas sorprendentes al utilizar imágenes de fondo en el correo electrónico sobre las imágenes codificadas tradicionalmente.

El principal beneficio es la accesibilidad. Al usar imágenes de fondo, puede confiar en texto HTML en vivo en lugar de imágenes para todo su contenido. El texto no sufre el bloqueo de imágenes similares, por lo que incluso cuando las imágenes están desactivadas, su mensaje seguirá siendo legible para los suscriptores. Y, para los usuarios que requieren lectores de pantalla, podrán escuchar el contenido que se les lee, a diferencia de las imágenes tradicionales.

Puede usar CSS para diseñar ese contenido HTML de modo que se vea bien diseñado, como las imágenes que salen de Photoshop, e incluso puede incluir botones de llamada a la acción allí también.

Las imágenes de fondo, entonces, se utilizan para incluir un estilo visual adicional, ya sea un degradado simple, algunas fotos de productos elegantes o un patrón repetido. Trabajan en conjunto con texto HTML para crear correos electrónicos atractivos y útiles.

Lo que es aún mejor es que puede hacer cosas más avanzadas, como incluir GIF animados como imágenes de fondo, intercambiar imágenes según el tamaño de la pantalla o el dispositivo, o incluso codificar un fondo de video como lo hicimos hace unos años para nuestro correo electrónico de anuncio de Litmus Live.

Hay mucho que implica utilizar imágenes de fondo al máximo. Recientemente publicamos una actualización de nuestra Guía definitiva para imágenes de fondo en el correo electrónico en el blog de Litmus que vale la pena consultar. Es una excelente manera de ver el código que impulsa las imágenes de fondo, así como de obtener inspiración para actualizar sus propias campañas. Solo dirígete a las notas del programa de hoy para ver el enlace.

Y asegúrese de suscribirse a Delivering on iTunes o Spotify para escuchar episodios futuros en los que profundizaremos en más técnicas para crear mejores correos electrónicos HTML.