Me pidieron que escriba sobre las imágenes de fondo en email marketing, como usarlas, dónde funcionan, así que de eso vamos a hablar hoy: background-image en email marketing.
Es bastante normal que los diseñadores de email utilicen degradados o imágenes debajo de textos. Esto usualmente nos lleva a utilizar el texto como imagen para no perder el diseño, lo que nos lleva al problema del bloqueo de imágenes y que nuestro mensaje no llegue al destinatario porque no descargó las imágenes en el email.
La solución seria utilizar background-image en nuestros emails, pero he aquí el mayor inconveniente de un maquetador de emails: Las imágenes de fondo no son compatibles con todos los clientes de correo.
Cómo se comportan las imágenes de fondo en los clientes de correo?
Si bien podemos setear un montón de comportamientos en background-image (posición, repetición, color/blanco y negro) en email no todos estos parametros son soportados, si lo son. Debemos saber que al utilizar una imagen de fondo tenemos dos variables en el comportamiento:
- La imagen de fondo se va a repetir en X e Y
- La imagen de fondo se alineará su borde izquierdo con el borde izquierdo de su contenedor.
Si bien algunos clientes como Apple Mail y algunos dispositivos/apps móviles van a soportar comportamientos asignados con css, lo mejor es tener en claro estas dos variables al momento de diseñar el email.
Entonces... Imágenes de fondo Si o No? Hay algunas formas de hacerlo!
Una forma de incluir background-image es incluirla en la etiqueta <body>. Incluirla en dicho tag permite que se visualice correctamente en la mayoría de los clientes de correo, incluyendo Outlook 2007, 2010 y 2013.
El problemita que tenemos con esta técnica es que si el destinatario quiere reenviar el email o respondernos, el color o imagen de fondo se aplica a todo el <body> del email y si utilizamos un color o imagen oscura podemos generar cierta molestia al obligar al usuario a cambiar el color de su tipografía a uno legible.
En segundo lugar, tenemos a los genios de campaign monitor que hicieron todo el trabajo sucio por nosotros y nos facilitan una herramienta en la cual ponemos la imagen de fondo que queremos, el color de respaldo y voilá, código listo para copiar y pegar.
La URL es esta >>> http://backgrounds.cm/
Tenemos dos opciones en esta herramienta, incluir la imagen en todo el fondo o incluirla sólo a nivel de celda y además incluye el código VML del que ya hablamos en esta nota.
Tenés alguna pregunta sobre como incluir imágenes de fondo en tus HTML? Preguntame en los comentarios!
Te gusto esta nota? Compartila!
¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.
También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen
No hay comentarios:
Publicar un comentario