10 min.

Como marca que utiliza el marketing por correo electrónico, debes asegurarte de que tus correos electrónicos se muestren exactamente de la forma que deseas.

La mayoría de los correos electrónicos recibidos en la bandeja de entrada muestran lo siguiente:

  1. El cliente de correo muestra “Haz clic aquí para descargar imágenes” o “Mostrar imágenes: para este mensaje / siempre para este remitente”.
  2. El email contiene un enlace “Ver el correo electrónico en el navegador” o “Haga clic aquí para ver el correo electrónico en línea” en la parte superior.

El primero de los dos se debe a que los clientes de correo electrónico deshabilitan imágenes de remitentes desconocidos para mayor seguridad. El segundo es un paso dado por los desarrolladores de correo electrónico para asegurarse de que los correos electrónicos que envíes se muestren sin ningún problema y se transmita el mensaje, independientemente de los diversos clientes o dispositivos de correo electrónico que utilizan los suscriptores.

Allí está el desafío.

¡Los clientes de correo electrónico juegan según sus propias reglas y procesan los correos electrónicos de manera diferente!

El Email Client Market Share de Litmus muestra que Apple Mail (44% incluyendo iOS Mail para iPhone y iPad), seguido de Gmail (29% incluyendo escritorio y móvil), Outlook (12% incluyendo Outlook y Outlook.com) y Yahoo! Mail (el 6% incluyendo escritorio y móvil) son los clientes de correo electrónico más utilizados (dato actualizado a octubre de 2018). Todos estos clientes de correo electrónico enfrentan algunos desafíos para mostrar el correo electrónico exactamente como está diseñado.

Fuente: Litmus


Veamos más en detalle los distintos desafíos con que podrías enfrentarte al renderizar tus emails en distintos clients de correo, y las soluciones.

Clientes de correo: desafíos y soluciones

Apple iPhone

El iPhone de Apple soporta elementos interactivos como cinemagraph, GIF, videos, cuentas regresivas, controles deslizantes, imágenes de retina, etc. y, por lo tanto, brinda una experiencia de usuario impecable. Es, por lo tanto, el cliente de correo electrónico más popular.

Problemas de visualización en modelos actualizados: cuando los modelos de iPhone se actualizan con pantallas más grandes, se producen problemas de renderización de los correos. Para superar esto y garantizar que el correo electrónico se vea bien en todos los dispositivos iPhone, actualiza tus consultas de medios con un punto de quiebre de 320px a 414px para iPhone 8 plus. Además de mantener un ancho de dispositivo fijo, incluso puedes mantener el ancho fluido.

No hay soporte para el selector ~ cuando es usado con los selectores :hover or :checked: iOS9 carece de soporte para el selector de hermanos general ~ cuando se combina con los selectores de pseudo-clase :checked y :hover. Para obtener resultados similares, se puede usar el selector de hermanos adyacente + en lugar de ~.

El texto se redimensiona: el texto minúsculo se redimensiona automáticamente. Mantiene el tamaño de fuente mínimo en 22 píxeles para los encabezados y 14 píxeles para el texto del cuerpo.

Los correos electrónicos responsivos se escalan automáticamente en iOS10 y iOS11: la autoescala en correos electrónicos responsivos hace que los correos electrónicos aparezcan descentrados o alejados. Para resolver esto, agrega “padding: 0;” a la etiqueta <body> y para deshabilitar el autoescalado, use <meta name = ”x-apple-disable-message-reformatting”>.

Litmus Forums

Gmail

Gmail soporta GIFs y otros elementos visuals que contribuyen al atractivo estético de los correos electrónicos. Gmail es uno de los clients de correo más convenientes tanto para escritorio como para móvil en terminos de usabilidad.

Gmail para escritorio

Recorte de mensajes: Gmail recorta mensajes con un tamaño mayor a 102kb y oculta el contenido detrás de un enlace “Ver mensaje completo”. Para evitar esto, mantiene eltamaño del mensaje por debajo de 102 kb y evita usar atributos y etiquetas de estiloinnecesarias.

No hay soporte para el selector de atributos: el selector de atributos utilizado para seleccionar elementos no está soportado. En su lugar, utiliza el selector .class.

Elimina CSS en el bloque <style>: si el bloque <style> supera los 8142 caracteres o incluye @declaraciones anidadas, Gmail lo elimina. Para resolver esto, usa estilos incrustados que sean cortos y sin errores.

Imágenes de fondo no compatibles con ID que no sean de Gmail: si una ID que no es de Gmail está configurada en Gmail, no es compatible con imágenes de fondo. Asegúrate de utilizar un respaldo adecuado para el fondo en tales casos.

Tamaño de fuente aumentado en un 50%: los tamaños de fuente para Gmail aumentan en casi un 50%. Como solución alternativa, usa contenido específico para dispositivos móviles con imágenes más grandes y menús concisos, y mantiene un diseño de una sola columna sin necesidad de acercar o pellizcar.

No hay soporte para margen, relleno, flotación y párrafo: Gmail no renderiza el párrafo y la flotación. Para renderizar el margen y el relleno, use el diseño basado en tablas con <td>.

Gmail para Móvil

<style> y <link> no son compatibles con la cabecera: a veces, la cabecera no admite las etiquetas <style> o <link>. Para resolver esto, sobrescribe el color de enlace predeterminado agregando un estilo de color a cada etiqueta <a> dentro del código.

Imágenes cortadas por una línea blanca: aparece una línea blanca entre dos o más imágenes cortadas. Utiliza “display: block” en la etiqueta de imagen para eliminar la línea blanca.

Las fechas y los números se vuelven azules en iPhone: Gmail para iPhone convierte los números y las fechas en azul automáticamente. Usa el no-ensamblador de ancho cero, ” text-decoration:” y amplía con ” text-decoration: none ” alrededor. Además, para evitar la línea azul, define importante para anular el estilo en línea.

Los emails fluidos se ven feos: en la app de Gmail, los correos electrónicos fluidos no llaman para nada la atención. Para resolver esto, crea una ilusión de elementos flotantes utilizando “display: inline-block” junto con “text-align: center”.

Outlook

Outlook y Outlook.com son clientes de correo electrónico ampliamente utilizados en entornos corporativos. Estos clientes de correo electrónico enfrentan varios problemas de visualización que hacen que sea una tarea difícil para los que maquetan emails.

No hay soporte para max-width y min-width: Outlook no admite max-width y min-width en CSS. Para superar esto, usa diseños fluidos con un ancho fijo dentro de una consulta de medios.

CSS no soportado en la sección de cabecera: el CSS usado en la sección de cabecera del HTML se elimina automáticamente. Usa CSS en línea para resolver este problema.

Se elimina el espacio entre párrafos y márgenes: Outlook elimina del código el espacio entre párrafos y márgenes. Usa el diseño basado en tablas y td / tr para agregar espacio adicional.

GIF no son compatibles: Outlook muestra solo el primer fotograma de GIF en los correos electrónicos. Asegúrate de que el primer fotograma transmita el mensaje o establece un repliegue adecuado utilizando una imagen estática.

Los bordes RGB no son compatibles con Outlook.com: para el color de fondo, usa el código HEX en lugar de los bordes RGB.

Se agregan espacios blancos innecesarios: Outlook.com agrega espacios en blanco innecesarios después de las imágenes. Para eliminar el relleno, configura la propiedad de visualización como “img {display: block;}”.

Yahoo! Mail

No hay soporte para min-device-width and max-device-width en las consultas de medios: para el correo web y la aplicación de Android, usa el atributo width y / o in style en lugar del min o max-device-width. Esto controlará el diseño.

Las etiquetas flotantes no funcionan: las etiquetas flotantes no funcionan para Yahoo! Mail. Para resolver esto, asigna align = “top” a la imagen en cuestión.

Razones detrás de las discrepancias entre diferentes clientes de correo electrónico

El motor de renderización es la causa principal detrás de las diferentes visualizaciones  que los clientes de correo electrónico hacen del mismo correo electrónico. El motor de renderización es el cerebro de cualquier cliente de correo electrónico. Cuando un cliente de correo electrónico recibe un email, es una larga secuencia de código HTML envuelta por la animación CSS. Un motor de renderización crea una estructura basada en el código especificado en el HTML y agrega un estilo específico de acuerdo con el CSS. Cualquier código innecesario se elimina y no se procesa en la etapa de procesamiento posterior.

Algunos clientes de correo electrónico como Apple Mail, Microsoft Outlook (hasta 2003) adoptaron el motor de renderización patentado que utilizan en su navegador. El correo web utiliza un híbrido de su propio motor de renderización mezclado con el navegador en el que se abre. Debido a esto, el mismo código debe escribirse en diferentes sintaxis para evitar que lo eliminen.

Los siguientes son clientes de correo electrónico populares y el motor de renderización utilizado por cada uno:

Apple Mail → Motore Safari Webkit
iOS Mail → Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (Trident)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trident) e Notes Rich Text (solo per IMAP / POP3)
Outlook 2007 e versioni successive → Microsoft Word
Outlook per MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail e Yahoo! Mail → Motore di rendering proprietario combinato con il motore di rendering del browser

Errores comunes que deben evitarse al enviar a distintos clientes de correo electrónico

  1. Evita la imagen de fondo detrás de una CTA importante: la imagen de fondo no es compatible con la mayoría de los clientes de correo electrónico. Los clientes de correo electrónico no compatibles reemplazan la imagen con un color de fondo. Esto es particularmente problemático si el color de fondo coincide con el color de fuente del texto en primer plano.
  2. Usa siempre CSS en línea: algunos clientes de correo electrónico eliminan las hojas de estilo especificadas entre la etiqueta <style> mientras que casi todos admiten el estilo CSS en línea. Así que siempre juega seguro insertando tu código CSS en línea.
  3. Outlook soporta dimensiones de imagen en porcentajes y el resto en píxeles: afortunadamente, el código específico de Outlook se puede agregar entre un código condicional de Outlook, es decir, <! – [if gte mso 9]> … Código aquí … … </endif> que es ignorado por otros clientes de correo electrónico.
  4. Codifica el email con <table> en lugar de <div>: mientras que la codificación de sitios web ha progresado hacia la creación de estructura con <div>, ciertos clientes de correo electrónico como Outlook 2007 todavía tienen problemas para procesar <div> y, por lo tanto, los desarrolladores de correo electrónico siguen usando la codificación a prueba de fallos <table>. Aunque es un inconveniente, sigue codificando los emails como si fuera 1999 …

En resumen

Tus emails no se verán igual en todos los clientes de correo electrónico. Considera estos desafíos y soluciones mientras construyes tu próxima campaña, para asegurarte de aprovechar al máximo tus emails.

¿Te gustó este artículo? Tenemos muchos otros para ti.

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

¿Qué nos pueden enseñar las mejores campañas de email marketing?

Ya sea que esté ejecutando una empresa local o una empresa digital internacional, poseer una lista de correo electrónico es crucial. El marketing por correo ...

Sigue leyendo

La gestión de las desuscripciones: cómo crear tu flujo con Páginas

Hemos puesto por escrito los 5 pasos para configurar la modalidad de baja, opt-out, las páginas de post-baja, el Centro de preferencias y el pie ...

Sigue leyendo

Cómo crear el flujo de suscripción para el canal e-mail: del registro a la bienvenida

Vamos a guiarte, paso a paso, en la creación de formularios, páginas y mensajes de e-mail que te permitirán gestionar el registro de nuevos destinatarios ...

Sigue leyendo

Nuevo manejo de rebotes para una mejor entregabilidad

Rebotes duros. Filtros anti-spam. Carga de entrega. Entregabilidad (capacidad de entrega). Todos aquellos que trabajan en e-mail marketing y que nunca han tenido que enfrentar estos problemas que evocan ...

Sigue leyendo

Amplía tu audiencia: en MailUp nace el área Páginas

En un único espacio, todas las herramientas y funciones que te permiten aumentar y mejorar la gestión de los destinatarios de tus mensajes de e-mail. ...

Sigue leyendo

La importancia de desarrollar el liderazgo: 5 habilidades principales

¿Es usted un experto en marketing en una alta posición en la jerarquía del equipo, o simplemente está cuidando el contenido del correo electrónico y ...

Sigue leyendo