Renderizar tus emails en los clientes de correo: desafíos y soluciones
La mayoría de los correos electrónicos recibidos en la bandeja de entrada muestran lo siguiente:
- El cliente de correo muestra «Haz clic aquí para descargar imágenes» o «Mostrar imágenes: para este mensaje / siempre para este remitente».
- 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.
Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.
Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.
¡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.
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 deiPhone se actualizan con pantallas más grandes, se producen problemas de renderizaciónde los correos. Para superar esto y garantizar que el correo electrónico se veabien en todos los dispositivos iPhone, actualiza tus consultas de medios con unpunto de quiebre de 320px a 414px para iPhone 8 plus. Además de mantener unancho de dispositivo fijo, incluso puedes mantener el ancho fluido.
No hay soporte para el selector ~ cuando es usado con losselectores :hover or :checked: iOS9 carece de soporte para el selector de hermanosgeneral ~ cuando se combina con los selectores de pseudo-clase :checked y :hover.Para obtener resultados similares, se puede usar el selector de hermanosadyacente + en lugar de ~.
El texto se redimensiona: el texto minúsculo se redimensionaautomáticamente. Mantiene el tamaño de fuente mínimo en 22 píxeles para losencabezados y 14 píxeles para el texto del cuerpo.
Los correos electrónicos responsivos se escalanautomáticamente en iOS10 y iOS11: la autoescala en correos electrónicos responsivoshace que los correos electrónicos aparezcan descentrados o alejados. Pararesolver esto, agrega «padding: 0;» a la etiqueta <body> y paradeshabilitar el autoescalado, use <meta name =”x-apple-disable-message-reformatting”>.
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 demensajes: Gmailrecorta mensajes con un tamaño mayor a 102kb y oculta el contenido detrás de unenlace «Ver mensaje completo». Para evitar esto, mantiene eltamaño del mensaje por debajo de 102kb y evita usar atributos y etiquetas de estiloinnecesarias.
No hay soportepara el selector de atributos: el selector de atributos utilizado para seleccionarelementos no está soportado. En su lugar, utiliza el selector .class.
Elimina CSSen el bloque <style>: si el bloque <style> supera los 8142 caracteres oincluye @declaraciones anidadas, Gmail lo elimina. Para resolver esto, usaestilos 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 paraGmail aumentan en casi un 50%. Como solución alternativa, usa contenidoespecí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 laflotación. Para renderizar el margen y el relleno, use el diseño basado entablas con <td>.
Gmail para Móvil
<style> y <link> no son compatibles con lacabecera:a veces, la cabecera no admite las etiquetas <style> o <link>. Pararesolver esto, sobrescribe el color de enlace predeterminado agregando unestilo de color a cada etiqueta <a> dentro del código.
Imágenes cortadas por una línea blanca: aparece una línea blancaentre dos o más imágenes cortadas. Utiliza “display: block” en la etiqueta deimagen para eliminar la línea blanca.
Las fechas y los números se vuelven azules en iPhone: Gmail para iPhoneconvierte los números y las fechas en azul automáticamente. Usa elno-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 correoselectrónicos fluidos no llaman para nada la atención. Para resolver esto, creauna 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 admitemax-width y min-width en CSS. Para superar esto, usa diseños fluidos con unancho fijo dentro de una consulta de medios.
CSS no soportado en la sección de cabecera: el CSS usado en lasección de cabecera del HTML se elimina automáticamente. Usa CSS en línea pararesolver este problema.
Se elimina el espacio entre párrafos y márgenes: Outlook elimina delcódigo el espacio entre párrafos y márgenes. Usa el diseño basado en tablas ytd / tr para agregar espacio adicional.
GIF no son compatibles: Outlook muestra solo el primer fotogramade GIF en los correos electrónicos. Asegúrate de que el primer fotograma transmitael 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 agregaespacios en blanco innecesarios después de las imágenes. Para eliminar elrelleno, configura la propiedad de visualización como «img {display:block;}».
Yahoo! Mail
No hay soporte para min-device-width and max-device-width enlas consultas de medios: para el correo web y la aplicación de Android, usa elatributo width y / o in style en lugar del min o max-device-width. Estocontrolará el diseño.
Las etiquetas flotantes no funcionan: las etiquetas flotantesno 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ónes la causa principal detrás de las diferentes visualizaciones que los clientes de correo electrónico hacendel mismo correo electrónico. El motor de renderización es el cerebro decualquier cliente de correo electrónico. Cuando un cliente de correo electrónicorecibe un email, es una larga secuencia de código HTML envuelta por la animaciónCSS. Un motor de renderización crea una estructura basada en el códigoespecificado 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 deprocesamiento posterior.
Algunos clientes de correoelectrónico como Apple Mail, Microsoft Outlook (hasta 2003) adoptaron el motorde renderización patentado que utilizan en su navegador. El correo web utilizaun híbrido de su propio motor de renderización mezclado con el navegador en elque se abre. Debido a esto, el mismocó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
- Evita laimagen de fondo detrás de una CTA importante: la imagen de fondo no es compatiblecon la mayoría de los clientes de correo electrónico. Los clientes de correoelectrónico no compatibles reemplazan la imagen con un color de fondo. Esto esparticularmente problemático si el color de fondo coincide con el color defuente del texto en primer plano.
- Usa siempre CSS en línea: algunos clientes decorreo electrónico eliminan las hojas de estilo especificadas entre la etiqueta<style> mientras que casi todos admiten el estilo CSS en línea. Así quesiempre juega seguro insertando tu código CSS en línea.
- Outlooksoporta dimensiones de imagen en porcentajes y el resto en píxeles: afortunadamente, elcódigo específico de Outlook se puede agregar entre un código condicional deOutlook, es decir, <! – [if gte mso 9]> … Código aquí … …</endif> que es ignorado por otros clientes de correo electrónico.
- Codifica elemail con <table> en lugar de <div>: mientras que la codificación de sitiosweb ha progresado hacia la creación de estructura con <div>, ciertosclientes de correo electrónico como Outlook 2007 todavía tienen problemas paraprocesar <div> y, por lo tanto, los desarrolladores de correo electrónicosiguen usando la codificación a prueba de fallos <table>. Aunque es uninconveniente, 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.
Share this article
