Hacer correos electrónicos HTML en lugar de los de imágenes es más fácil de lo que cree

El correo electrónico ha existido durante 50 años a partir de este año, pero al principio, todos eran correos electrónicos de texto sin formato. La idea del marketing por correo electrónico nació en 1978, pero no fue hasta la década de 1990 que el correo electrónico HTML se convirtió en algo. En el mundo temprano del marketing por correo electrónico, el correo electrónico no deseado era una molestia común y los clientes de correo electrónico usaban muchos filtros diferentes para ayudar a bloquear el correo no deseado. Uno de esos filtros bloqueó los correos electrónicos con todas las imágenes. Ya en 2007, Mailchimp descubrió que el uso de una imagen gigante en su correo electrónico podría bloquear su correo electrónico y aumentar su tasa de rebote hasta en un 23%.

A medida que el marketing por correo electrónico ha evolucionado, también lo han hecho los filtros de correo no deseado. En estos días, un correo electrónico con todas las imágenes no necesariamente lo marcará como SPAM, pero el hecho de que pueda crear correos electrónicos con todas las imágenes no significa que deba hacerlo.

Creo que es hora de tener una conversación honesta sobre los correos electrónicos con todas las imágenes para abordar las razones a favor y en contra de ellos. Y ya que estamos en eso, veremos lo fácil que puede ser convertir algunos correos electrónicos con imágenes en correos electrónicos de texto en vivo.

Evaluemos los correos electrónicos con todas las imágenes

Pros

"¿Qué quieres decir con que hay ventajas para los correos electrónicos con todas las imágenes?" usted pregunta. Bueno, los hay. Los correos electrónicos de imágenes no son el paso en falso de correo electrónico que solían ser. De hecho, cambiar las cosas y enviar un correo electrónico con todas las imágenes cuando normalmente envía correos electrónicos de texto en vivo puede aumentar su compromiso. Cualquier cosa nueva probablemente hará que sus suscriptores se animen. Pero hay otras cosas que hacen que los correos electrónicos con todas las imágenes sean la opción preferida para algunas empresas.

1. Mantener los estilos de marca
   Si está trabajando para una marca que es muy específica sobre el uso de sus estilos de marca, entonces los correos electrónicos de imagen completa probablemente sean el camino a seguir. Puede asegurarse de que las fuentes sean correctas en todas partes. Y puede asegurarse de que todos los estilos de marca se mantengan en todos los clientes de correo electrónico. Con los correos electrónicos de imágenes, no necesita preocuparse por la rotura del correo electrónico tanto como lo haría con un correo electrónico de texto en vivo.
2. Impactante visualmente
   Personalmente, no creo mucho en esto, ya que creo que puedes crear correos electrónicos visualmente impactantes sin tener que recurrir a correos electrónicos con imágenes. Pero hay algunas cosas que no puedes hacer en todas partes con un correo electrónico de texto en vivo (aunque no mucho si tienes un gran desarrollador de correo electrónico). ReallyGoodEmails está lleno de inspiración de correo electrónico increíble y una gran parte de ellos son correos electrónicos con imágenes porque, honestamente, son muy bonitos.
3. Más económico
   Algunas personas argumentarían que los correos electrónicos con todas las imágenes son más baratos porque no es necesario pagarle a un diseñador ni a un desarrollador. (En algunos casos, estoy bastante seguro de que estas empresas ni siquiera utilizan un diseñador). Puede crear las imágenes en su programa de edición de fotos favorito y luego guardarlas y ponerlas directamente en su ESP. Es una forma rápida y fácil de enviar un hermoso correo electrónico a sus suscriptores.

Contras

Nuestra propia Magan Le me preguntó lo que pensaba sobre los correos electrónicos con todas las imágenes y, honestamente, no soy tan anti-solo con imágenes como solía ser. Todavía no creo que puedas brindar una excelente experiencia de correo electrónico para todos con un correo electrónico con imágenes. Pero, para algunas empresas, un correo electrónico con todas las imágenes puede tener sentido. Pero antes de tomar la decisión, asegúrese de haber tenido en cuenta las desventajas:

1. Escasa accesibilidad
   Los correos electrónicos con todas las imágenes no son tan accesibles como los correos electrónicos de texto en vivo. "¡Pero puse un texto ALT preciso, Carin!" Eso es genial. Y hay algunas empresas que envían correos electrónicos con todas las imágenes con un texto ALT realmente bueno. Pero la accesibilidad no se trata solo de incluir texto ALT. Tener un correo electrónico accesible para todos significa que todos pueden leerlo . El texto ALT no es de ninguna ayuda para las personas con dislexia o los usuarios con baja visión que utilizan la configuración para aumentar el tamaño de fuente. Esos son solo algunos de los problemas que los correos electrónicos de texto en vivo pueden manejar mucho mejor que los correos electrónicos con imágenes.
2. Mala experiencia de usuario
   Incluso para los suscriptores que tienen sus imágenes habilitadas, los correos electrónicos con todas las imágenes pueden ser una experiencia de usuario peor que un correo electrónico de texto en vivo. Los suscriptores con conexiones a Internet más lentas pueden experimentar largos tiempos de espera para que se carguen las imágenes. El uso de imágenes grandes sin comprimir puede consumir los datos de sus suscriptores si revisan sus correos electrónicos mientras leen en el móvil. ¡Y piensa en la personalización! Puedo asegurarle que es mucho más fácil colocar una etiqueta de combinación en un correo electrónico de texto en vivo que obtener imágenes personalizadas para toda su lista.
3. Llamadas a la acción perdidas o perdidas (CTA)
   Con los correos electrónicos con todas las imágenes, cualquier suscriptor que tenga sus imágenes desactivadas perderá cualquier CTA que esté en su imagen. Sin mencionar todo lo demás que pueda tener en su correo electrónico. Puede pensar que debido a que tiene un número bajo de suscriptores que hacen clic sin abrir su correo electrónico, no necesita preocuparse por esto. Pero, ¿cuántos suscriptores están viendo su correo electrónico con imágenes apagadas y no hacen clic porque no pueden ver su CTA?

Esos son solo un panorama general de las desventajas. Si necesita más convencimiento (o su cliente lo necesita), Magan profundiza mucho más en el motivo por el que no debe enviar correos electrónicos con imágenes.

¿Qué tienen de bueno los correos electrónicos en vivo?

Ha estado enviando correos electrónicos con todas las imágenes durante toda su carrera de marketing por correo electrónico y ha escuchado el estribillo de "no enviar correos electrónicos con todas las imágenes" una y otra vez, pero ¿no ha tenido más que éxito? Eso es genial. Pero, ¿puedo contarte algunas de las cosas asombrosas de los correos electrónicos en vivo?

Pros

1. Más fácil de actualizar
   Los correos electrónicos con todas las imágenes son difíciles de actualizar. Debe actualizar la imagen, volver a guardarla, volver a cargarla y luego agregarla a su correo electrónico. Y probablemente también tengas algunas aprobaciones. Con un correo electrónico en vivo, es muy sencillo actualizar una palabra mal escrita o una fecha incorrecta. Todo lo que tiene que hacer es encontrar el error y corregirlo. No es necesario volver al tablero de dibujo -literal-.
2. Mejor experiencia de suscriptor
   Con un correo electrónico en vivo, la copia cambiará de tamaño para los suscriptores con pantallas de mayor resolución, el texto no termina siendo muy pequeño en los dispositivos móviles, y en el modo oscuro tienes cierto control sobre cómo se invierten los colores. E incluso si sus suscriptores tienen imágenes apagadas por algún motivo, el contenido del correo electrónico y las llamadas a la acción seguirán siendo visibles.

Contras

1. Más caro
   "Es demasiado caro contratar a un desarrollador por cada correo electrónico que enviamos". Sí, probablemente lo sea. Es por eso que no debe contratar a un desarrollador para que haga cada correo electrónico que envía. Contrate a un desarrollador para crear un sistema modular que luego pueda implementar usted mismo. Muchos proveedores de servicios de correo electrónico (ESP) ofrecen sistemas de plantillas, así que contrate a un desarrollador para que cree un sistema de plantillas personalizado para su empresa. Si su ESP no tiene eso, puede hacer que un desarrollador cree parciales y fragmentos en Litmus Builder y luego use la funcionalidad Arrastrar y soltar y Editor visual para crear el correo electrónico en Litmus. Le prometo que ahorrará tiempo a largo plazo con menos ida y vuelta para realizar ediciones en sus correos electrónicos.
2. Más difícil de crear
   ¿O son? Este es uno de esos inconvenientes que escucho de muchas empresas. No tenemos un desarrollador, por lo que no podemos enviar correos electrónicos en vivo. Como se señaló anteriormente, muchos ESP tienen plantillas y soluciones de construcción modular. Y si su ESP no lo hace, Litmus tiene un editor visual y la comunidad Litmus tiene muchas plantillas y fragmentos que puede usar para crear sus propios correos electrónicos. Incluso tenemos una plantilla modular y fragmentos para que pueda comenzar.
3. El diseño no es idéntico en todos los clientes de correo electrónico
   Bueno, no, la mayoría de los correos electrónicos no son idénticos en todos los clientes de correo electrónico. Si tiene un desarrollador y mucho tiempo, probablemente pueda acercarse bastante. Pero, ¿realmente necesita que sus correos electrónicos sean idénticos en todos los clientes de correo electrónico? Sí, los colores deben ser los mismos, pero tener esquinas redondeadas en los botones, tener una fuente ligeramente diferente o tener el mismo diseño en una pantalla más pequeña no son problemas que afectarán las experiencias de sus suscriptores tanto como ilegibles. el texto sería.

Conversión de correos electrónicos con todas las imágenes

Ahora llegamos a la parte divertida. Convirtiendo esos hermosos correos electrónicos de imágenes en texto en vivo. Hay un par de técnicas que puede utilizar para asegurarse de que su correo electrónico siga siendo tan sorprendente y llamativo como un correo electrónico con imágenes.

Imágenes de fondo

Una de las razones más comunes para enviar un correo electrónico con todas las imágenes es que tener fondos interesantes que no sean solo blancos o de un color sólido crea un correo electrónico más visualmente interesante. Pero no es necesario que utilice un color sólido como fondo en su correo electrónico. Puede usar imágenes de fondo y son compatibles con la mayoría de los clientes de correo electrónico si las codifica correctamente. El correo de Windows 10 es la mayor excepción. Si tiene una gran base de suscriptores que se abre en el correo de Windows 10, entonces debe mantenerse alejado de las imágenes de fondo.

Hay una gran diferencia entre un correo electrónico codificado con una imagen de fondo y un correo electrónico codificado solo como una imagen. Si está utilizando una imagen de fondo, todo el texto sigue siendo visible incluso cuando las imágenes están apagadas, por lo que el suscriptor aún puede hacer clic en la llamada a la acción inicial, así como tener una idea de qué trata el correo electrónico y de quién es. :

A diferencia de un correo electrónico en el que se utiliza una imagen para crear un efecto de imagen de fondo. En este caso, la CTA inicial se pierde (al igual que el logotipo y el nombre de la empresa). El correo electrónico no es tan impactante y, aunque la sección de "más vendidos" todavía es visible y procesable, el objetivo del correo electrónico (ahorrar dinero en paquetes organizativos) se pierde:

La pieza de héroe se crea con todas las imágenes: imágenes activadas (Fuente: Really Good Emails )	La pieza de héroe se crea con todas las imágenes: imágenes desactivadas

Codificar imágenes de fondo no es lo más fácil, pero tenemos una publicación de blog para ayudarlo con eso. Si tiene plantillas configuradas con imágenes de fondo en Litmus, puede cambiar las imágenes de fondo en Visual Editor sin siquiera tocar el código. Asegúrese de que los tamaños de la imagen coincidan con la imagen que está reemplazando y que haya comprimido la imagen que está usando para que no sea demasiado grande.

Desplazamiento de imágenes y texto

Cualquier cosa que se aparte de lo esperado o lo habitual tiende a llamar nuestra atención y puedes ver ejemplos de esto en todas partes, incluso en el correo electrónico.

El ejemplo anterior tiene el desplazamiento de la imagen, que puede hacer fácilmente como una imagen completa, pero ¿qué sucede si desea compensar un bloque de texto? Bueno, tienes un par de opciones. Puede compensarlo solo un poco para que el texto no esté realmente compensado, simplemente haga que parezca que el elemento está compensado, como en este correo electrónico:

Aquí la parte superior del correo electrónico está desplazada, pero como puede ver, es solo un poco de azul lo que en realidad está en la parte blanca, no hay texto ni imágenes. Entonces puede usar una celda de tabla vacía. O si desea esquinas redondeadas que funcionen en todas partes, puede usar una imagen decorativa. Pero más sobre esas técnicas más adelante. En este caso, el contenido real de su correo electrónico no se compensa, pero parece que sí.

La otra opción es tener todo compensado como en este correo electrónico:

Este correo electrónico tiene toda la sección de llamada desplazada en un bloque sobre una imagen. Esto es fácil de hacer en la web con un posicionamiento absoluto, pero como no se admite en todas partes en el correo electrónico, se vuelve un poco más complicado. Hay dos métodos diferentes que conozco. Si tienes más, ¡háznoslo saber en los comentarios!

Primero, está el posicionamiento absoluto falso. Steven Sayo y Mark Robbins han escrito excelentes guías paso a paso para aprender a hacer esta técnica. Steven y Mark proporcionan alternativas para que funcione en Outlook y, desde mi experiencia limitada con él, tiene un soporte bastante bueno.

Si no se siente tan cómodo con el código, también puede crear este efecto cortando imágenes y colocándolas alrededor del elemento que desea compensar. Un poco más desordenado, pero funciona. Debe asegurarse de probar, probar, probar, ya que existe una mayor probabilidad de que algo salga mal y que la imagen no se alinee correctamente.

Soy un fanático del posicionamiento absoluto falso porque permite que los correos electrónicos tengan ese desplazamiento dramático mientras se mantiene el texto en vivo del correo electrónico y no tengo que preocuparme por alinear las imágenes cortadas, pero cualquiera de los métodos funcionará.

Webfonts y texto en vivo

Mantener los estándares de la marca es otra gran razón para usar correos electrónicos con todas las imágenes, porque simplemente no puede hacer que las fuentes aparezcan en todas partes. Lo entiendo. Sin embargo, hay muchas más opciones de respaldo que Helvetica y Arial. Anime a su empresa o sus clientes a buscar una fuente alternativa estándar en las pautas de su marca para que pueda asegurarse de que su mensaje llegue a todos los clientes de correo electrónico.

Samsung lo mantiene interesante al usar Trebuchet MS como fuente alternativa para sus titulares. No es exactamente la fuente de la marca Samsung One, pero aún es más interesante y llamativa que Helvetica, Arial, texto ALT o nada:

Correo electrónico con fuente web habilitada e imágenes en	Correo electrónico con respaldo mostrado e imágenes desactivadas

Agregar fuentes web con alternativas interesantes es una de las formas más rápidas de ayudar a que su correo electrónico se destaque cuando no depende de las imágenes para su correo electrónico. Son fáciles de agregar una vez y luego implementar en todo su sistema de diseño de correo electrónico. Y una vez que sus plantillas de correo electrónico estén configuradas con las fuentes web, incluso los no codificadores pueden beneficiarse de ellas si está utilizando un sistema basado en plantillas.

Texto ALT con estilo

Al aplicar estilo al texto ALT, puede hacer que el correo electrónico conserve algo de su apariencia incluso con las imágenes apagadas. Usamos texto ALT con estilo aquí en Litmus para mantener una versión aproximada de nuestro logotipo, pero también puede usar esto en esos botones basados ​​en imágenes para que se destaquen si tiene que crear correos electrónicos con todas las imágenes. Puede aplicar estilo al texto ALT agregando CSS a la etiqueta de la imagen y puede cambiar los colores de fondo y la mayoría de los aspectos de la fuente para el texto ALT. No se admite en todas partes, pero diríjase a nuestra Guía definitiva para texto ALT con estilo para ver dónde se admite y cómo hacerlo.

Imágenes, celdas de tabla vacías y reglas horizontales con estilo como elementos de diseño

No es necesario tener la imagen completa para crear elementos interesantes. A veces, el simple hecho de usar partes de la imagen para terminarlo y combinarlo con las celdas de la tabla se puede usar para crear interés visual.

Para crear esquinas redondeadas que se muestran en todos los clientes de correo electrónico, agregaré imágenes de esquinas redondeadas en la parte superior e inferior de los contenedores. Puede hacer cosas similares para crear ángulos o formas como transiciones entre secciones de su correo electrónico. En lugar de crear la forma completa con una imagen, use colores de fondo para la parte con texto y luego agregue una imagen en la parte superior o inferior de una sección para resaltarla.

También puede diseñar sus reglas horizontales para crear transiciones interesantes o divisores entre secciones. Usamos estilos simples en Litmus para crear una línea, pero hay muchas técnicas diferentes que puedes probar para crear divisores interesantes con solo una regla horizontal. (¡Háganos saber cómo va!).

También tenemos un divisor de colores que usamos para dividir el contenido. Esto se hace completamente con colores de fondo y celdas de tabla:

¡Sea creativo con su código y vea lo que puede hacer sin imágenes!

Botones a prueba de balas

Este es mi mayor motivo de preocupación por los correos electrónicos con todas las imágenes. Las llamadas a acciones basadas en imágenes son difíciles de realizar para sus suscriptores si no pueden verlas. Si todo lo demás es demasiado difícil de implementar, al menos comience a usar botones de texto en vivo para sus llamadas a la acción.

Estos son dos correos electrónicos diferentes, uno que usa un botón de texto en vivo y el otro es un correo electrónico de imágenes con el botón en una de las imágenes. El correo electrónico de la izquierda es mucho más procesable que el correo electrónico de la derecha.

Correo electrónico con botón de texto en vivo con imágenes desactivadas (Fuente: Really Good Emails )	Correo electrónico con botón basado en imágenes con imágenes desactivadas (Fuente: Really Good Emails )

Si su argumento para usar correos electrónicos con imágenes es que no obtiene muchos clics sin abrir, por lo que no debe tener una gran audiencia con imágenes apagadas, mire cómo se ven sus CTA sin imágenes. No muchas personas harían clic si no supieran en qué están haciendo clic.

Hay varias formas diferentes de crear botones de texto en vivo, así que asegúrese de utilizar un método que funcione para su audiencia y, como siempre: ¡Prueba, prueba, prueba!

Conversión de esos correos electrónicos de imágenes

Me comuniqué con algunos compañeros desarrolladores de correo electrónico para que me ayudaran a mostrarle cómo se pueden usar algunas de estas técnicas para convertir correos electrónicos de imágenes en texto en vivo. Notarás que convertir estos correos electrónicos en texto en vivo no solo mejoró la versión del correo electrónico con imágenes apagadas, sino que también mejoró el móvil y la versión en modo oscuro del correo electrónico.

S'well conversión de correo electrónico

Anne K. Tomlin es la fundadora de Email's Y'all. Una codificadora experimentada que conoce los entresijos de las peculiaridades del correo electrónico, ella se dedicaba a mostrar la diferencia que el texto en vivo puede hacer en un correo electrónico.

En sus propias palabras: los correos electrónicos con todas las imágenes no envían su mensaje a las personas que tienen imágenes bloqueadas de forma predeterminada y a cualquiera que use un lector de pantalla o un asistente digital (Siri, Alexa, etc.). Si su objetivo son las conversiones, ni siquiera les ha dado a esas personas la oportunidad de realizar una conversión. El correo electrónico de S'well era 10 veces más malo que un correo electrónico normal de solo imagen porque no había ningún texto alternativo. Un lector de pantalla o un asistente digital leería: “¡Celebre los movimientos audaces, las grandes ideas y la alegría! Ver esta dirección de correo electrónico en su navegador. Tienda. Cuentos. Sobre nosotros. Hinchar." y luego salte inmediatamente para leer el pie de página. ¡Qué experiencia tan horrible! Los suscriptores que tienen imágenes bloqueadas literalmente ven una página en blanco. Nadie va a mirar una página en blanco y pensar: "¡Debería comprobar esto en un navegador!" y haga clic en el enlace "ver en el navegador". Tiene 5 segundos para captar la atención de un suscriptor, por lo que si tiene un correo electrónico con todas las imágenes y esas imágenes no se cargan de forma predeterminada, es posible que no haya enviado un correo electrónico en absoluto. De hecho, ese suscriptor podría verlo como que no les está enviando nada en absoluto, por lo que deberían darse de baja.

Correo electrónico original:

Versión de texto en vivo de Anne:

Prefiero mucho la versión de Anne, principalmente por los gatos, pero también por la mayor accesibilidad en el móvil y en el modo oscuro. El texto no está atrapado en una imagen, por lo que, en lugar de encogerse, permanece legible. La versión del modo oscuro es en realidad oscura y no será una luz cegadoramente brillante si la miro en una habitación oscura, además, cualquiera que tenga su teléfono configurado en modo oscuro para reducir la fatiga visual, no se enfrentará a el modo de luz que intentaban evitar.

Versión móvil original	Versión móvil de Anne
Versión original del modo oscuro	Versión del modo oscuro de Anne

Y para la conversión de todas las imágenes…. [redoble de tambores por favor]

¡Tada! No se pierde nada cuando se apagan las imágenes (excepto los lindos gatitos). Los suscriptores aún pueden tomar medidas y, lo más importante: aún pueden leer su mensaje .

Mira como Anne lo hace

Conversión de correo electrónico de Magic Spoon

Carin Slater es la especialista en marketing por correo electrónico y la desarrolladora de correo electrónico detrás de todos los correos electrónicos de Litmus. ¡Espera, ese soy yo! Bien, bueno, ya conoces mi postura sobre los correos electrónicos con todas las imágenes.

Me encantan los correos electrónicos de Magic Spoon (y el cereal Magic Spoon también, muy delicioso) pero siempre me entristece cuando llegan a mi bandeja de entrada como correos electrónicos con imágenes. Por lo general, son bastante buenos al incluir el texto de la imagen como texto ALT para que aún pueda saber lo que está sucediendo en el correo electrónico si no hay imágenes, pero este correo electrónico no fue tan descriptivo o inclusivo como otros correos electrónicos que enviaron. Pensé en abordar este, ya que hay un botón GIF que es muy divertido y puede parecer difícil de hacer sin usar imágenes.

Correo electrónico original:

Versión de texto en vivo de Carin:

Tuve que comprometerme en que no se ve perfecto en el modo oscuro en los clientes de escritorio de Outlook 365 en Windows, por lo que sería algo que puede ser importante o no dependiendo de dónde abran sus correos electrónicos los suscriptores de Magic Spoon. Y como estaba trabajando desde un correo electrónico con todas las imágenes y no desde el archivo de diseño, no pude crear un Modo oscuro o una versión móvil del GIF, los cuales habría pedido para poder intercambiarlos si Estaba trabajando con los archivos originales. A pesar de esos problemas, el modo oscuro y las versiones móviles se mejoraron en la versión de texto en vivo. La animación GIF se conserva en la versión móvil y el texto es más legible, aunque solo un poco, ya que Magic Spoon creó una versión de todas las imágenes que cambiaron para dispositivos móviles (yay para dispositivos móviles, pero abucheo por tener el correo electrónico codificado. dos veces).

Versión móvil original	Versión móvil convertida
Versión original del modo oscuro	Versión convertida en modo oscuro

Para la versión de imagen completa, utilicé texto ALT estilizado para mantener cierta semejanza con el logotipo y el lema en el pie de página, por lo que el correo electrónico se ve similar a la versión de imagen cuando las imágenes están desactivadas. La versión de texto en vivo, nuevamente, es mucho más atractiva visualmente, procesable y atractiva que la versión de imágenes.

Mira como lo hace Carin

* Todos los correos electrónicos para la conversión fueron extraídos de mi bandeja de entrada.

Haga que sus correos electrónicos brillen sin importar las circunstancias

Una cosa que he aprendido de mis años en el correo electrónico es que los suscriptores siempre harán lo inesperado. Ya sea que busque en correos electrónicos en lugar de usar carpetas o abra un correo electrónico en un navegador en su teléfono, no sabe cómo las personas van a experimentar su correo electrónico. Por lo tanto, haga todo lo posible para asegurarse de que brinden a sus suscriptores una experiencia óptima sin importar dónde abran su correo electrónico.