Deliverability
Cómo aprovechar las pruebas de previsualización de la bandeja de entrada para un renderizado perfecto y una mayor interacción
El renderizado de emails es el proceso por el cual un mensaje de email se muestra en el dispositivo del destinatario a través del cliente de email que haya elegido, y cada cliente utiliza diferentes motores de renderizado que afectan a la forma en que se ven el HTML y los elementos de diseño del email. Dado que no todos los clientes de email y dispositivos renderizan los emails de la misma manera, la forma en que se cargan y funcionan tus emails afecta directamente a la experiencia del usuario, la interacción y la entregabilidad.
Los problemas de renderizado de emails pueden hacer que un mensaje se vea mal en diferentes dispositivos y clientes. Con una herramienta de previsualización de la bandeja de entrada, puedes probar cómo se renderiza tu email en Gmail, Outlook, iPhone, Pixel y otros clientes para ofrecer una experiencia responsive y coherente a cada suscriptor.
El renderizado de emails en diferentes clientes de email y dispositivos va mucho más allá de “si tiene buen aspecto”. Cómo se cargan y funcionan tus emails afecta a la experiencia del usuario y a la interacción, lo que repercute en tu entregabilidad. El problema es que no todos los tipos de dispositivos y clientes de email renderizan de la misma manera.
Entonces, ¿cómo puedes tener la seguridad de que un diseño de emails que se ve perfecto en tu editor se renderizará correctamente en Outlook? ¿Y cómo puedes evitar los problemas de renderizado de emails habituales en Gmail o iPhone que pueden estropear tu diseño en el móvil? Las pruebas de renderizado de emails y las herramientas de previsualización te proporcionan la visibilidad que necesitas antes de darle a enviar.
En este artículo, te contaremos cómo la previsualización de emails puede ayudarte a superar los obstáculos de renderizado y te enseñaremos a utilizar las herramientas de previsualización de emails para probar el renderizado antes de enviar.
¿Qué significa la previsualización de emails?
No debe confundirse con el texto de previsualización de emails, el texto que aparece junto al asunto en tu bandeja de entrada: una previsualización de emails es una vista de cómo se mostrará un mensaje de email en la bandeja de entrada antes de que se envíe, independientemente del dispositivo, el cliente de email o el sistema operativo que utilicen tus destinatarios para verlo. La pregunta es: ¿necesitas previsualizar tus mensajes?
La respuesta es sencilla si tenemos en cuenta las estadísticas. En lo que respecta al email, la capacidad de atención humana es cada vez menor, de unos 13 segundos en 2018 a nueve segundos en 2022 ; pronto será más corta que la regla de los cinco segundos de la comida. Si tu mensaje sufre problemas de renderizado de emails (como imágenes rotas, errores de formato de Outlook o un diseño para móviles que no se ajusta a la pantalla), los lectores perderán el interés aún más rápido. La mayoría de las personas dedican menos tiempo a un email mal renderizado del que pasan pensando en comerse ese sabroso bocado que se acaba de caer de su plato.
El rol de la previsualización de la bandeja de entrada en las pruebas de renderizado
El aspecto importa. Incluso en los emails. También en los emails. Piensa en una herramienta de previsualización de emails como en el espejo que miras antes de salir de casa: una última oportunidad para detectar errores antes de enviar. Más allá de la tranquilidad, la previsualización de emails ofrece dos ventajas clave: ayuda a identificar problemas de renderizado de emails en distintos clientes de email y garantiza un diseño responsive y coherente para cada suscriptor.
Ya que hablamos de la regla de los cinco segundos, seguiremos con la lección de modales y tomaremos nota del manual de las madres más estrictas. Las pruebas de previsualización de emails comprueban si tus mensajes se verán y se comportarán bien en la bandeja de entrada. No todo es cuestión de aspecto; tus mensajes deben comportarse y llegar a la bandeja de entrada en perfecto estado de funcionamiento.
Antes de hablar de por qué la previsualización de emails es importante para el renderizado, y de cuáles son algunos de los retos del sector, tenemos que entender un poco mejor la adaptabilidad de los emails.
¿Qué es la adaptabilidad de los emails?
La adaptabilidad de los emails se refiere a si un mensaje es compatible visualmente en distintos dispositivos, clientes de email y sistemas operativos, y si lo es desde el punto de vista funcional. ¿Funcionan todos los botones? ¿Funcionan los enlaces? Si has creado un email interactivo, ¿es accesible para todo el mundo?
¿Por qué la previsualización de emails es importante para el renderizado?
Ahora que hemos repasado el renderizado de emails, veamos cómo encaja la previsualización de emails. No todos los dispositivos y clientes de email renderizan los emails con los mismos estándares. Tu trabajo como remitente es crear un email que sea compatible con todos ellos. (Estuvimos a punto de incluir una referencia a El Señor de los Anillos aquí, pero nos la guardaremos).
Dado que los emails bien renderizados son sinónimo de coherencia, la previsualización de emails debe ser una práctica con múltiples perspectivas.
Dicho de otro modo, es esencial previsualizar tus emails en distintos dispositivos y clientes de email para detectar posibles problemas de renderizado. Cuando la mayoría de la gente piensa en clientes de email, le vienen a la mente los grandes nombres como Apple Mail, Gmail y Microsoft Outlook. Sin embargo, dentro de esas plataformas hay cientos de versiones y experiencias de pantalla, y cada una de ellas puede mostrar tu mensaje de forma diferente, lo que hace que las pruebas de renderizado de emails sean imprescindibles.
Aquí es donde las cosas empiezan a complicarse un poco.
El renderizado de emails en múltiples clientes de email es un reto constante para las empresas. Con la multitud de clientes de email y dispositivos que se utilizan hoy en día, los remitentes deben lidiar con las complejidades de la compatibilidad de HTML y CSS, el diseño responsive y las inconsistencias de renderizado para garantizar que los emails se reciban y se muestren correctamente en todas las plataformas. Las herramientas de previsualización de emails pueden ayudar a superar estos retos probando los emails antes de que se envíen para evitar elementos rotos que puedan dañar la imagen de la marca, hacer un downgrade de la experiencia del usuario y afectar a la interacción y las conversiones.
Los retos del renderizado de emails
El mayor reto del renderizado de emails es que no existe una estandarización entre los clientes de email. Ninguno. Cero. Nada de nada. De hecho, cada cliente tiene su propio motor de renderizado de emails que controla cómo se muestran tus mensajes enviados. Esto significa que si pruebas tus emails para Apple, puede que no se vean igual en Gmail. Pero la realidad es que va más allá.
Cada proveedor importante, como Gmail, en realidad incluye una serie de clientes de email diferentes para las vistas web, móvil y de escritorio. Además, hay más variaciones en función del sistema operativo, tanto si es Android como si es iPhone. Estas diferencias son una causa frecuente de los problemas de renderizado de emails en Gmail o en iPhone. Aquí tienes un ejemplo:
| Clientes de email móviles | Sistemas operativos |
|---|---|
| Clientes de email móviles | Sistemas operativos |
| App de Gmail para Pixel 2 | Android 8 |
| App de Gmail para Pixel 3 | Android 9 |
| App de Gmail para Pixel 4 | Android 10 |
| App de Gmail para Pixel 4 | Android 10 (modo oscuro) |
| App de Gmail para Pixel 5 | Android 11 |
| App de Gmail para Pixel 5 | Android 11 (modo oscuro) |
| App de Gmail para Pixel 6 | Android 12 |
| App de Gmail para Pixel 6 | Android 12 (modo oscuro) |
| App de Gmail para Pixel 6 | Android 13 |
| App de Gmail para Pixel 5 | Android 13 (modo oscuro) |
| iPad Pro (11 in) | iOS 15 |
| iPad Pro (12,9 in) | iOS 15 |
| iPhone XR | iOS 14 |
| iPhone XR | iOS 14 (modo oscuro) |
| iPhone SE de 2.ª generación | iOS 14 |
| iPhone SE de 2.ª generación | iOS 15 |
| iPhone 11 | iOS 14 |
Como los clientes de email no están estandarizados, lo mejor es crear mensajes con diseños responsive que sean capaces de adaptarse a distintos motores y estándares de renderizado. Antes en este artículo hemos incluido un enlace a nuestras mejores prácticas, pero aquí tienes algunos consejos clave:
- Adoptar principios de diseño orientados a los móviles (mobile-first) que funcionen dentro de los límites de las pantallas más pequeñas
- Utilizar consultas de medios (media queries) y diseños fluidos que sean adaptables
- Optimizar las imágenes para diferentes tamaños de pantalla
¿Te parece demasiado complicado? Echa un vistazo a nuestras plantillas de email responsive y utilízalas para crear las tuyas.
El laberinto del renderizado de emails es un túnel muy, muy largo. La mejor manera de recorrerlo es simplificar tus envíos aplicando las mejores prácticas y la previsualización de emails antes de enviarlos.
Por qué el renderizado de emails es complejo
El renderizado de emails es complicado porque cada cliente y dispositivo muestra los mensajes de forma diferente. Outlook utiliza el motor de renderizado de Word, mientras que Gmail y Apple Mail se basan en WebKit o Blink. La asistencia de HTML y CSS varía entre los clientes, y los sistemas operativos (desde iOS y Android hasta Windows y Mac) afectan a los diseños en las versiones de escritorio, tableta y móvil. Añade a eso los ajustes del usuario, como el modo oscuro, el bloqueo de imágenes o los lectores de pantalla, además de las modificaciones de código.
Problemas de renderizado habituales
Incluso los emails bien diseñados pueden tener problemas de renderizado. Algunos de los problemas más habituales son diseños rotos, elementos desalineados, medios no compatibles como los GIF o los vídeos, fallos en la imagen de fondo y botones o CTA que no se muestran correctamente. Las herramientas de prueba de renderizado de emails ayudan a detectar estos problemas antes de que tu mensaje llegue a la bandeja de entrada.
Previsualización de emails y entregabilidad
Ahora entraremos de lleno en las pruebas de previsualización de la bandeja de entrada y el impacto que tienen en tu entregabilidad.
La principal ventaja de un email que se renderiza perfectamente en todos los clientes y dispositivos es que la tasa de interacción aumenta. Los emails correctamente renderizados ofrecen asistencia a la interacción del usuario y a los clics porque todos los elementos funcionan y son visibles para el usuario.
Probar la adaptabilidad y asegurar el renderizado de las imágenes, fuentes, diseños, hipervínculos, etc., significa que estás enviando mensajes compatibles que pueden adaptarse a distintos motores de renderizado. Los emails renderizados correctamente tienen menos probabilidades de ser marcados como spam y también tienen más probabilidades de generar una interacción positiva: una señal excelente para los proveedores de servicios de email de que tu email es legítimo y deseado.
Utilizar plataformas de pruebas online para previsualizar emails en distintos dispositivos y en un gran volumen de clientes de email te permite solucionar cualquier problema de renderizado antes de enviar tus campañas, y protege tu entregabilidad del impacto negativo de los emails rotos.
¿Cómo puedo previsualizar mis emails en todos los tipos de dispositivos y clientes de email?
Bien, ahora que te hemos convencido de que previsualizar tus emails es lo que más te conviene, ¿cómo lo haces?
Hay muchos servicios de previsualización de emails disponibles, pero una cosa es segura: no hay una manera sencilla de probar manualmente tus mensajes en cada dispositivo y cliente. Sin una herramienta, necesitarías un arsenal de hardware: decenas de teléfonos, tabletas y ordenadores con distintos sistemas operativos, además de un equipo que analizara la inmensidad de emails de prueba. Por eso son esenciales las herramientas dedicadas a las pruebas de renderizado de emails.
Confía en nosotros: no solo necesitas la asistencia de una plataforma, sino que la deseas.
Previsualizaciones de emails con Mailgun
La previsualización de emails incluye una amplia gama de capacidades. Para sacar el máximo partido, busca una herramienta de pruebas de renderizado de emails que incluya estas funciones clave. Mailgun las combina todas para ayudarte a identificar problemas de renderizado, asegurar un diseño responsive y maximizar la interacción de los suscriptores.
- Clientes de email (hay muchísimos): Una herramienta superior de previsualización de emails debería permitirte hacer pruebas en la gama más amplia de dispositivos y clientes para detectar cualquier problema de renderizado. Con Mailgun, puedes previsualizar tus emails en más de 100 clientes en la web, el móvil y el escritorio, lo que garantiza un renderizado de emails coherente sin importar dónde los abran tus suscriptores.
- Los emails llamativos captan la atención de tus destinatarios, y las previsualizaciones de emails pueden ayudar a conseguirlo: Una buena herramienta de previsualización de emails te permite probar algo más que el cuerpo del mensaje. Asegúrate de que puedes ver cómo se renderizan tu línea de asunto, el nombre del remitente y el texto de preencabezado en Gmail, Outlook y iPhone para evitar problemas de renderizado de emails antes de que tu mensaje llegue a la bandeja de entrada.
- Optimiza tus emails para las preferencias del usuario: Más allá de tus diseños personalizados de CSS y HTML, los destinatarios pueden controlar cómo se muestran los emails en sus dispositivos. El modo oscuro es un buen ejemplo. Más del 82 % de los usuarios interactúa con él de alguna forma. Si tus mensajes no están optimizados para el modo oscuro, te arriesgas a tener problemas de renderizado de emails y una interacción deficiente. Asegúrate de que tu herramienta de previsualización de emails te permite probar cómo se muestran tus emails tanto en modo claro como oscuro.
Mailgun ofrece todo esto y mucho más. Si quieres obtener más información sobre la herramienta de previsualización de emails y sus características, echa un vistazo a nuestra página de producto.
Reflexiones finales
Bueno, no te comprarías una falda sin preguntar antes a tus amistades si te queda bien.
No te arriesgues a dañar tu marca con emails que no se renderizan correctamente. Las primeras impresiones importan, y una previsualización de emails actúa como tu segunda opinión. Incluso los mensajes mejor diseñados pueden encontrarse con problemas de renderizado de emails si no se prueban. Con tantas variaciones entre clientes de email, dispositivos y sistemas operativos, las pruebas de renderizado de emails son fundamentales para garantizar que tu mensaje se vea perfecto para todos los destinatarios.
Por eso los emails responsive son la clave del renderizado y las pruebas de previsualización de la bandeja de entrada son el secreto para garantizar que tus emails sean responsive. Que tenga buen aspecto en tu entorno no significa que lo tenga en el dispositivo móvil que tu cliente más importante tiene en la palma de la mano.
La previsualización de emails es eficaz, pero también sencilla. Prueba nuestra solución y experimenta cómo encaja la previsualización de tus emails en tu estrategia general de entregabilidad.
Preguntas frecuentes
Los clientes de email utilizan diferentes motores de renderizado, lo que afecta directamente a la forma en que se interpretan el HTML y el CSS. Las versiones de escritorio de Outlook en Windows se basan en el motor de renderizado de Microsoft Word, que tiene una asistencia limitada de CSS y requiere diseños basados en tablas. Apple Mail e iOS Mail utilizan WebKit, que ofrece una gran asistencia para el CSS moderno. Los clientes de webmail como Gmail y Outlook.com utilizan motores basados en navegador con distintos niveles de filtrado y saneamiento de CSS. Debido a estas diferencias, un email que se renderiza correctamente en Apple Mail puede estropearse en Outlook a menos que se haya programado de forma defensiva.
El CSS más seguro se basa en estilos en línea, selectores básicos y técnicas de diseño conservadoras. Entre las propiedades compatibles de forma generalizada se encuentran font-family, font-size, color, background-color, padding, border y text-align. Los diseños basados en tablas (table, tr y td) siguen siendo la estructura más fiable. Se deben evitar los selectores avanzados, las variables de CSS, los elementos flotantes (floats), los grid y la mayoría de las reglas de posicionamiento debido a su inconsistente asistencia.
Las imágenes deben estar comprimidas, tener el tamaño adecuado y servirse a través de HTTPS para garantizar una carga rápida. Siempre se debe incluir texto alternativo para garantizar la accesibilidad y para aquellos clientes que bloquean las imágenes por defecto. Los GIF animados deben ser ligeros y legibles en el primer fotograma, ya que algunos clientes solo muestran una imagen estática. El vídeo no debe incrustarse directamente en el email; en su lugar, utiliza una imagen estática en miniatura que enlace al contenido alojado.
Las pruebas en modo oscuro se pueden automatizar utilizando plataformas de pruebas de emails que simulan el comportamiento del modo oscuro específico del cliente. Las pruebas deben abarcar tanto los modos oscuros forzados como los no forzados, prestando atención a las relaciones de contraste y a la visibilidad de la imagen. Las técnicas CSS como las consultas de medios (media queries) prefers-color-scheme pueden ayudar a gestionar los estilos del modo oscuro, pero los resultados aún deben validarse en los distintos clientes debido a que las implementaciones son inconsistentes.
Un renderizado deficiente reduce la interacción al hacer que los emails sean difíciles de leer o interactuar con ellos, lo que reduce las tasas de apertura, las tasas de clics y las conversiones. Una menor interacción puede repercutir negativamente en la reputación como remitente a lo largo del tiempo, lo que aumenta la probabilidad de que los emails se filtren a la carpeta de spam. Los emails visualmente rotos también dañan la credibilidad de la marca, ya que transmiten a los destinatarios una baja calidad o falta de rigor técnico, y aumentan el riesgo de bajas y quejas.