Email Pixel Art: la táctica de diseño defensivo más rara y genial

El bloqueo de imágenes es común, algunos clientes de correo electrónico deshabilitan las imágenes de forma predeterminada y algunos suscriptores desactivan las imágenes para guardar datos móviles o por otras razones. Por eso, los especialistas en marketing por correo electrónico deben utilizar técnicas de diseño defensivas para garantizar que su mensaje se transmita cuando las imágenes están desactivadas.

El diseño defensivo, que también ayuda con la accesibilidad del correo electrónico, consta de tres tácticas clave:

1. Usar HTML o texto en vivo tanto como sea posible, en lugar de incrustar todo su texto en sus imágenes
2. Agregar texto ALT a sus imágenes, o mejor aún, texto ALT con estilo
3. Usar colores de fondo en las celdas de la tabla

Centrémonos en esa última táctica.

Una de las cosas más importantes que sucede cuando se bloquean las imágenes es que su correo electrónico pierde su estructura. El correo electrónico se aplana y todo comienza a difuminarse. El uso de texto HTML y el estilo del tamaño y el color de su texto ALT pueden ayudar a crear estructura y jerarquía, pero los colores de fondo son aún más poderosos.

Agregar un color de fondo a la celda de una tabla crea pancartas, bloques de contenido y es esencial para hacer botones a prueba de balas. Este correo electrónico de Twitter demuestra cómo los colores de fondo en las celdas de la tabla pueden mantener la integridad de un diseño de correo electrónico cuando las imágenes están bloqueadas.

Eso es genial, pero las celdas de la tabla con colores de fondo pueden hacer más, mucho más. Además de usarse junto con el texto HTML para crear contenido de correo electrónico que no se ve afectado por el bloqueo de imágenes, los colores de fondo de las celdas de la tabla se pueden usar como respaldo para las imágenes.

Para ello, crea un mosaico a partir de una serie de tablas anidadas con colores de fondo aplicados a las celdas de la tabla. Luego, corta la imagen para que cada rebanada encaje perfectamente en las celdas de la tabla de su mosaico. De esa forma, cuando la imagen superpuesta se bloquea y desaparece, aparece el mosaico subyacente de celdas de la tabla de colores.

Ejemplos de Pixel Art de correo electrónico

Para demostrar el poder de los mosaicos de correo electrónico, aquí hay algunos ejemplos, cada uno de los cuales muestra el correo electrónico con imágenes habilitadas a la izquierda e imágenes deshabilitadas a la derecha:

Mothercare crea el arte de píxeles de su cochecito en este correo electrónico, que también hace un uso generoso del texto ALT con estilo en todo momento.

Pizza Express utiliza pixel art en este correo electrónico de cumpleaños activado, que también incluye una imagen personalizada y el correspondiente texto ALT con estilo personalizado.

PlayStation New Zealand utiliza un mosaico de correo electrónico para crear el símbolo de los Autobots, jugando inteligentemente con el eslogan "robots disfrazados" de Transformers.

Benton Lingerie captura el sentimiento del mensaje del correo electrónico del Día de la Madre, utilizando el arte de píxeles del correo electrónico para crear un gran corazón rosa.

Diseño y consideraciones estratégicas

Antes de crear un mosaico de correo electrónico, considere los siguientes problemas de diseño y estrategia:

1. El pixel art del correo electrónico puede volverse pesado , lo que puede hacer que su correo electrónico se recorte en Gmail si el correo electrónico supera los 102 KB. Así que mantén las cosas simples, enfocándote en una imagen mínima de pixel art viable.

Por ejemplo, el corazón pixelado de Benton Lingerie podría haber sido mucho más contorneado con la duplicación o triplicación del número de celdas de la tabla. Pero su ejecución es claramente un corazón y, por lo tanto, es bastante efectiva como es.

2. El arte de píxeles de correo electrónico puede suponer mucho trabajo adicional , por lo que generalmente es mejor reservarlos para correos electrónicos de gran volumen o alto impacto. Eso significa quizás usarlos para correos electrónicos de transmisión clave para anuncios de nuevos productos, campañas de Cyber ​​Monday y grandes eventos similares. Pero también significa considerarlos para correos electrónicos activados de gran volumen, como el correo electrónico de cumpleaños de Pizza Express anterior.

Del mismo modo, puede considerarlos para elementos de correo electrónico de gran volumen, como su logotipo o un elemento de pie de página. Si hace esto, impleméntelos como parciales, para que pueda cambiar o actualizar el pixel art en todas las instancias de su logotipo o pie de página.

Cualquiera que sea el enfoque que elija, querrá asegurarse de cosechar el impacto de su esfuerzo de diseño adicional.

3. El arte de píxeles de correo electrónico no siempre es compatible con el diseño receptivo. Dependiendo de cómo codifique su correo electrónico receptivo, es posible que los mosaicos de correo electrónico no se traduzcan de la versión de escritorio a la versión móvil. Ocultar y apilar contenido de correo electrónico en su versión móvil puede romper el arte de píxeles de su correo electrónico. Asegúrese de considerar esto al diseñar su mosaico de correo electrónico.

4. El arte de píxeles de correo electrónico no tiene que intentar reemplazar las imágenes bloqueadas. Como vimos en los ejemplos de PlayStation y Benton Lingerie, el pixel art del correo electrónico puede ser totalmente diferente de las imágenes del correo electrónico. No sienta que siempre tiene que crear la versión de 8 bits de su imagen de héroe. A veces, transmitir el espíritu de una imagen es igualmente efectivo, y puede ser más fácil de codificar y menos de entregar.

5. Es más probable que algunos correos electrónicos tengan imágenes bloqueadas. La posibilidad de tener bloqueadas las imágenes de un correo electrónico no es uniforme. La posibilidad de bloqueo de imágenes es mayor tanto al comienzo de una relación por correo electrónico como hacia el final.

Para los primeros correos electrónicos que envíe a un suscriptor, es posible que tengan imágenes bloqueadas para remitentes desconocidos. Eso significa que es posible que desee dedicar más esfuerzo al diseño defensivo de sus correos electrónicos de bienvenida y de sus correos electrónicos transaccionales.

Para los correos electrónicos que llegan tarde en una relación, es decir, después de un período considerable de inactividad, las imágenes pueden bloquearse porque están en la carpeta de correo no deseado del suscriptor. Eso significa que es posible que desee realizar un esfuerzo de diseño defensivo adicional en sus correos electrónicos de reenganche y en los correos electrónicos de nueva autorización.

En ambos casos, ese esfuerzo adicional puede incluir arte de píxeles de correo electrónico, además del uso liberal de texto HTML y texto ALT con estilo.

Optimizar para bloqueo de imágenes Litmus Builder le permite codificar fácilmente correos electrónicos y obtener una vista previa de ellos en más de 70 aplicaciones y dispositivos de correo electrónico. Active y desactive las imágenes con un solo clic para perfeccionar el arte de píxeles de su correo electrónico. Crea excelentes correos electrónicos →

Cómo hacer Pixel Art de correo electrónico

Con estas consideraciones en mente, ¿cuál es la mejor manera de crear arte de píxeles de correo electrónico?

Para empezar, recomendamos:

• Convertidor de imagen a tabla
• Perros optimizados para correo electrónico
• Aplicación HTML de imagen

Sin embargo, es posible que no los encuentre útiles en todos los casos. La mayoría de las veces, esperamos que desee crear su arte de píxeles de correo electrónico manualmente.

Si esa es la ruta que sigue, estos son los pasos principales que deberá seguir:

1. Esboce una imagen de pixel art de correo electrónico mínima viable en papel cuadriculado o en el software de diseño que elija.
2. Utilice la herramienta de división en Photoshop u otro software de diseño para dividir su imagen en los tamaños de bloque necesarios para crear su mosaico de correo electrónico y guardarlos como imágenes separadas. Utilice una convención de nomenclatura de archivos que facilite la reconstrucción de la imagen general.
3. Usando una serie de tablas anidadas dentro de una tabla, cree los bloques en las posiciones que necesita para acomodar su diseño.
4. Para asegurarse de que sus imágenes cortadas encajen a la perfección, especifique que cellpadding = "0", cellspacing = "0" y border = "0" estén configurados para sus tablas.
5. Aplique el bgcolor necesario a cada una de las celdas de su tabla.
6. Obtenga una vista previa de su correo electrónico con las imágenes desactivadas para asegurarse de que se esté procesando según lo previsto.

Aquí hay un gran ejemplo de arte de píxeles de correo electrónico del boletín de noticias EmailWeekly de Action Rocket. Seleccione "Alternar imágenes" en la interfaz de Litmus Builder para ver el correo electrónico con las imágenes apagadas.

Una táctica rara e inesperada

Los especialistas en marketing por correo electrónico comprenden la necesidad de diseñar con imágenes apagadas. Lo sabemos porque el 83% de las marcas usan texto ALT para sus imágenes de correo electrónico siempre o con frecuencia, según la Encuesta sobre el estado del correo electrónico de 2018 de Litmus entre casi 3.000 especialistas en marketing.

Sin embargo, aunque agregar texto ALT es bastante simple, crear arte de píxeles de correo electrónico es todo lo contrario. Como resultado, casi el 77% de las marcas nunca usan mosaicos de correo electrónico.

Para las marcas intrépidas, es una oportunidad. La rareza de esta táctica significa que es una forma eficaz de sorprender y deleitar a los suscriptores al ofrecer lo inesperado, y más marcas se están dando cuenta. Más del 23% de las marcas usan pixel art de correo electrónico al menos en raras ocasiones, lo que representa un aumento del 18% en 2017.

¿Quieres más recursos como este?

Suscríbase a Litmus Weekly para recibir su dosis semanal de inspiración, consejos y trucos por correo electrónico, directamente en su bandeja de entrada.

Inscríbete en la lista →