#NoFailMail: los 5 errores más comunes en el diseño de correo electrónico (y cómo evitarlos)

El diseño puede ser lo más desconcertante del correo electrónico. Una de las principales razones para lanzar nuestra iniciativa #NoFailMail es ayudar a los diseñadores, desarrolladores y especialistas en marketing de correo electrónico a conquistar todas las cosas que pueden romper el correo electrónico, ya sean imágenes, formato o clientes de correo electrónico.

Es obvio, pero lo diremos de todos modos: debe encontrar y corregir los errores de diseño antes de enviar su próximo correo electrónico. Las fallas de diseño pueden evitar que sus lectores abran y actúen sobre sus mensajes y afectar la reputación de su marca.

En esta publicación, aprenderá acerca de cinco fallas comunes de diseño de correo electrónico que afectan al correo electrónico y cómo solucionar todas y cada una de ellas.

¡A las fallas!

Error de correo electrónico # 1. No diseña para varios tamaños de pantalla.

El mundo del correo electrónico ya no está dividido en escritorio y móvil. Sus suscriptores pueden leer su correo electrónico en todo, desde una pantalla de TV "inteligente" en la pared hasta un reloj inteligente en sus muñecas.

Puede que ni siquiera estén leyendo tus mensajes. En cambio, podrían estar escuchando mientras un asistente doméstico como Alexa o Google Home o un lector de pantalla lee sus correos electrónicos en voz alta.

Un estudio de 2016 realizado por Litmus y Fluid mostró que el 51% de todos los suscriptores se dan de baja del correo electrónico que no se muestra o no funciona bien en sus teléfonos inteligentes, y el 43% informa esos correos electrónicos como spam. Esas estadísticas demuestran que diseñar para múltiples pantallas ya no es algo agradable.

Un vistazo rápido a la cuota de mercado de clientes de correo electrónico le muestra cómo los dispositivos móviles dominan el panorama. Cuatro de los 10 principales clientes de correo electrónico son solo para dispositivos móviles y afirman un total de más del 40% de todos los correos electrónicos abiertos:

• IPhone de Apple, 29%
• IPad de Apple, 10%
• Correo Samsung 4%
• Google Android, 3%

El diseño receptivo e híbrido, que utiliza tablas e imágenes fluidas para hacer que el contenido fluya en diferentes tamaños, es la mejor opción para crear correos electrónicos que se procesen correctamente en clientes y plataformas.

Nuestro libro electrónico gratuito, La guía definitiva para la optimización y resolución de problemas del correo electrónico, lo ayudará a comprender qué enfoque probablemente funcionará mejor si está pasando de los formatos centrados en el escritorio a los optimizados para dispositivos móviles.

Mientras tanto, estas cinco soluciones alternativas harán que sus correos electrónicos sean más legibles y más fáciles de actuar si sus suscriptores los ven en computadoras de escritorio o dispositivos móviles:

1. Utilice un tamaño de fuente más grande.
   Suena loco, ¿una fuente más grande en una pantalla más pequeña? Pero funciona. La legibilidad sin obligar a las personas a pellizcar, acercar o desplazar sus mensajes de un lado a otro para ver su contenido es el objetivo. Recomendamos un tamaño de fuente mínimo de 14 px para el cuerpo del texto y 22 px para los titulares.
2. Diseña una CTA fácil de usar.
   El dedo no es tan preciso como el mouse de su computadora. Reemplace los enlaces en los que se puede hacer clic con botones. Luego, dimensione esos botones a un mínimo de 44px X 44px, que es aproximadamente el tamaño de la yema de un dedo promedio.
3. Adelgace hasta una columna.
   Los diseños de correo electrónico de dos o tres columnas no se leen bien en pantallas más pequeñas. Recuerde que su objetivo es hacer que el contenido de su correo electrónico sea fácil de leer sin pellizcar, hacer zoom o desplazarse lateralmente. Si no está listo para pasar al diseño receptivo, optar por un diseño de una sola columna hará que sus correos electrónicos sean más legibles en más tamaños de pantalla.
4. Optimice su contenido.
   ¿ Realmente necesitas todo ese contenido en tu correo electrónico para obtener clics o conversiones? Utilice el seguimiento de enlaces y otras herramientas para averiguar en qué están haciendo clic sus lectores y en qué están ignorando. Muévase a un bloque de copia principal, o dos como máximo. Llame la atención con una imagen de héroe fuerte en lugar de un grupo de fotos de productos más pequeñas.
   Además, apunte a oraciones más cortas y copie bloques. Cinco líneas de texto en un formato de escritorio estándar se pueden ajustar fácilmente a 10 o 15 en dispositivos móviles.
5. Sube el espacio en blanco.
   El espacio en blanco es el área en blanco alrededor de las imágenes y los bloques de copia. Úselo generosamente para centrar la atención en áreas de contenido, para dar más espacio al botón CTA y para dividir párrafos en un bloque de copia.

Error de correo electrónico n. ° 2: dejar que los enlaces azules rompan su diseño

La vinculación automática es un rasgo útil pero a veces molesto tanto en iOS como en Gmail. Esto se ve cuando las fechas, los números de teléfono y las direcciones se convierten automáticamente en enlaces azules en los que se puede hacer clic / tocar.

Estos pueden ser útiles en mensajes de texto sin formato o correos electrónicos personales porque son convenientes: un toque puede abrir un mapa o hacer clic para llamar, o guardar un evento en un calendario. Pero también pueden ser difíciles de leer sobre un fondo que no sea blanco. También interfieren con su marca para ese correo electrónico.

Afortunadamente, hay formas de desactivar esos enlaces azules. En iOS Mail, puede sobrescribir los enlaces azules configurando el selector de detector de datos de Apple Mail (Aprenda cómo). Los enlaces azules en Gmail se pueden arreglar usando el método (es decir, envolver direcciones o números de teléfono en una etiqueta y definir el estilo para ese intervalo, o puede sobrescribir todo el estilo predeterminado agregando una declaración de estilo específica de Gmail a su CSS (aquí se explica cómo ).

¿SUS CORREOS ELECTRÓNICOS TIENEN ENLACES AZULES? Obtenga una vista previa de sus correos electrónicos en más de 90 clientes y dispositivos de correo electrónico populares y detecte errores, incluidos los enlaces azules, antes de enviarlos. Más información →

Error de correo electrónico n. ° 3: las imágenes salieron mal

Ah, imágenes. Pueden salir mal de muchas maneras, pero cuando los usas correctamente, dan vida a tus correos electrónicos. Por lo tanto, vale la pena dedicar tiempo a comprobar las fallas de imagen que vemos todos los días y cómo puede evitar que rompan su diseño:

1. Usando el formato de imagen incorrecto
   La solución aquí no es utilizar el formato de imagen "correcto", ya sea JPEG, GIF, PNG o SVG, porque no hay un solo formato correcto. Cada formato se diferencia de los demás en el tamaño del archivo, la compresión, la calidad y el mejor caso de uso. Para obtener una comparación detallada de los pros y los contras de los formatos de imagen más comunes, consulte “¿PNG, GIF o JPEG? ¿Cuál es el mejor formato de imagen para correo electrónico? " en el blog de Litmus.
2. No optimizando para la pantalla Retina
   “Pantalla Retina” es un término acuñado por Apple para referirse a las pantallas de alto DPI que se ven en dispositivos móviles. Las imágenes que no están optimizadas para la pantalla Retina a menudo se muestran borrosas o borrosas, lo que genera una experiencia visual insatisfactoria.
   

   

   Para que sus imágenes estén listas para la retina, cree su imagen en aproximadamente el doble del tamaño que planea mostrar, luego defina el tamaño de la imagen como su tamaño deseado en el HTML. Si desea mostrar una imagen de 300 × 200 píxeles, créela a 600 × 400 y defínala como 300 × 200 utilizando atributos HTML o propiedades CSS.

   Sin embargo, asegúrese de estar atento al tamaño del archivo. Si bien el uso de imágenes retina mejora el aspecto de sus imágenes, también aumenta el tamaño de los archivos, lo que significa que sus imágenes podrían tardar más en cargarse en la bandeja de entrada. Si usa varias imágenes optimizadas para Retina, podría activar el recorte de mensajes en Gmail.

Pruebe el tamaño del archivo de su imagen + el tiempo de carga Con la lista de verificación de Litmus, puede probar el tamaño del archivo, el tiempo de carga y los enlaces rotos de sus imágenes. Además, vea instantáneamente cómo se ven sus campañas en clientes de correo electrónico populares. Iniciar una lista de verificación →

Error de correo electrónico n. ° 4: no diseñar para imágenes desactivadas

El otro problema con las imágenes surge cuando no se procesan. Algunos clientes de correo electrónico bloquean automáticamente la carga de imágenes hasta que el usuario lo permite. O bien, los propios usuarios prefieren bloquear imágenes de forma predeterminada y elegir cuáles quieren ver.

De cualquier manera, el bloqueo de imágenes reduce la capacidad de su correo electrónico para comunicarse tan pronto como se abre el mensaje. Aunque no puede obligar a los usuarios a desbloquear imágenes, puede tomar medidas para que un mensaje sin imágenes se vea bien. Los botones de texto ALT y a prueba de balas son fáciles de implementar y pueden ayudarlo a rescatar conversiones que podría haber perdido sin imágenes para impulsarlas:

1. Utilice texto ALT básico o con estilo. El texto ALT es la combinación de palabras que eliges para describir la imagen y que aparece cuando la imagen está bloqueada. Debería ser una práctica estándar (la mayoría de los editores de correo electrónico te dan un espacio para escribir la descripción de la imagen), pero un recorrido rápido por la bandeja de entrada revela que casi todos los demás correos electrónicos tenían imágenes pero no texto ALT. Así es como se ve un correo electrónico con muchas imágenes sin texto ALT, cuando las imágenes están deshabilitadas:
   Aquí está el mismo correo electrónico con las imágenes habilitadas. ¿Ve lo que su cliente se habría perdido?
   Una buena práctica con el texto ALT es escribir una descripción eficaz, no solo una etiqueta de imagen. Para ir un paso más allá, pruebe el texto ALT con estilo. Aquí, agrega un poco de CSS en línea para cambiar la fuente, el color, el tamaño, el estilo y el peso del texto ALT.
2. Usa botones a prueba de balas
   Si pones tu llamado a la acción dentro de una imagen, será invisible cuando las imágenes estén apagadas. Un botón a prueba de balas utiliza HTML y CSS en lugar de formatos de imagen como JPG y GIF. No dependen de la representación de imágenes para aparecer en el correo electrónico. Y aquí está el mismo correo electrónico con imágenes habilitadas:

Jason Rodríguez, evangelista de productos y comunidad de Litmus, describe cuatro enfoques básicos para el diseño de botones en su guía, "La guía definitiva para botones a prueba de balas para el diseño de correo electrónico". Compruébelo para ver la codificación, los ejemplos y los pros y los contras de cada enfoque.

Error de correo electrónico n. ° 5. No optimizar para correo electrónico de texto sin formato

No, no vamos a revivir el gran debate sobre texto versus HTML de principios de la década de 2000. Pero el correo electrónico de texto plano todavía juega un papel importante en su estrategia de correo electrónico, especialmente con el crecimiento de relojes inteligentes, lectores de pantalla y asistentes domésticos, ninguno de los cuales procesa HTML.

Estos consejos lo ayudarán a crear un correo electrónico de texto sin formato atractivo, ya sea un mensaje independiente o la versión de texto de un mensaje MIME de varias partes:

• Escribe titulares cortos pero claros. Use al menos una línea de espacio en blanco para diferenciar cada título del bloque de copia debajo de él. Aplíquelo con dispositivos tipográficos como guiones o signos iguales.
• Divida los bloques de copia largos. Utilice más bloques de copia, pero más cortos, para evitar el temido e ilegible río gris de la copia.
• Crea una jerarquía de información con listas. Todo el tipo en un correo electrónico de texto sin formato tiene la misma fuente y tamaño en puntos. Por lo tanto, debe trabajar más duro para guiar a su lector a sus puntos clave. Use listas para resaltar información en una serie. Seleccione cada elemento con una designación compatible con texto, como un guión (-) o un asterisco (*). (Las viñetas no funcionan en texto sin formato).
• Utilice el espacio en blanco generosamente. El espacio en blanco organiza la información relacionada para facilitar el escaneo. Utilice márgenes amplios y saltos de línea adicionales entre bloques de copia, llamadas a la acción y encabezados o pies de página administrativos.
• Definir CTA. ¿Qué hacía la gente antes de tener botones de llamada a la acción? Utilizaron elementos llamativos como espacios en blanco para separarlos de otras copias y con dispositivos tipográficos como flechas (>> y <<) para resaltarlos. Evite las listas largas de llamadas a la acción y rodeelas con espacios en blanco para que se puedan hacer clic o hacer clic en ellas.

Este correo electrónico ilustra todas estas prácticas recomendadas para los correos electrónicos de texto sin formato:

Cubrimos más formas de enviar #NoFailMail en estas publicaciones de blog anteriores: Más consejos y recursos para #NoFailMail

• #NoFailMail: Por qué evitar errores es la clave para el éxito del correo electrónico
• Cómo las pruebas le ayudan a evitar los 5 errores más importantes del correo electrónico
• 5 errores de redacción publicitaria que debe evitar

¿Quieres más recursos como estos? Suscríbase a nuestro boletín para mantenerse al día con lo último en correo electrónico.