Cross-client email: Outlook, Gmail clipping, Yahoo y Apple Mail Privacy Protection

Hacks reales para que un email se vea igual en Outlook (mso), Gmail (clipping 102KB), Yahoo y Apple Mail con MPP. CSS, conditional comments y limitaciones.

Cada cliente de correo es un motor de render distinto: Apple Mail aplica WebKit casi al día, Outlook 365 desktop Windows aplica el motor de Word de 2007, Gmail recorta mensajes a 102KB, Yahoo elimina selectivamente algunas etiquetas. Una plantilla que se ve bien en uno se rompe en otro. Las soluciones no son únicas: hay que combinar CSS conservador, conditional comments, limpieza de HTML y pruebas reales en cada cliente.

Las cuatro familias de motores de render

Webkit-based: Apple Mail, iOS Mail

Es el motor más permisivo. Soporta CSS3 razonable, media queries, fuentes web (incluso variables fonts), picture elemento y prefers-color-scheme. Es la referencia para diseñar y, si la plantilla se ve bien aquí, suele verse bien en Yahoo y Outlook.com web.

Gmail (Webkit modificado)

Gmail usa un motor propio que sanea el HTML. Permite CSS moderno con limitaciones:

• No prefers-color-scheme fiable.
• No position: fixed.
• No formularios <form> interactivos.
• Reescribe imágenes a través de su proxy.
• Aplica clipping si el HTML excede ~102KB.

Las clases CSS sí se respetan, pero suele convertir el HTML para que el <style> interno funcione solo dentro de un <div> específico (Gmail Web). En Gmail Android y iOS, soporta media queries.

Trident/Word (Outlook desktop Windows)

Outlook 365 desktop en Windows renderiza con el motor de Word, no con un navegador. Resultado:

• No soporta display: flex ni grid.
• No soporta border-radius (los botones aparecen cuadrados).
• Margins y paddings se interpretan inconsistentemente.
• Necesita <table> para todo el layout.
• Soporta CSS2 con peculiaridades, no CSS3.
• Necesita conditional comments para parches específicos.

Es el cliente que más tiempo consume en QA. La buena noticia: hay convenciones claras de qué hacer.

Outlook.com web, Outlook macOS, Outlook iOS/Android

Estos sí usan motores modernos. Outlook.com web es relativamente parecido a Gmail. Outlook macOS usa WebKit. Outlook móvil aplica reglas más cercanas a Gmail Android.

El problema de Outlook desktop Windows

Por qué rompe tantas cosas

Microsoft decidió en 2007 que el motor de Word fuera el render de Outlook. Word entiende HTML antiguo, no CSS moderno. Para Microsoft fue una decisión de seguridad y consistencia. Para los desarrolladores de email, supone vivir con limitaciones de hace 18 años.

Conditional comments para Outlook

La sintaxis <!--[if mso]> permite inyectar HTML que solo Outlook ve, y <!--[if !mso]> el resto.

<!--[if mso]>
<table role="presentation" width="600" cellpadding="0" cellspacing="0">
  <tr><td>
    <!-- Versión simplificada para Outlook -->
  </td></tr>
</table>
<![endif]-->
<!--[if !mso]><!-- -->
<div style="...">
  <!-- Versión moderna para el resto -->
</div>
<!--<![endif]-->

Casos típicos:

• Botones VML para conseguir border-radius y backgrounds que Outlook no respeta en CSS.
• Anchos forzados con <table width="600"> cuando el resto usa max-width.
• Tipografía de fallback (Outlook ignora fuentes web).
• Cuadros de color de fondo que sin VML quedan transparentes.

Botones bulletproof

El término “bulletproof button” describe un botón que se ve bien hasta en Outlook desktop. La técnica clásica combina VML con HTML de fallback:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://..." style="height:48px;v-text-anchor:middle;width:200px;" arcsize="12%" stroke="f" fillcolor="#0a66c2">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Ver pedido</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a href="https://..." style="display:inline-block;background:#0a66c2;color:#ffffff;padding:14px 28px;border-radius:6px;text-decoration:none;font-weight:bold;">Ver pedido</a>
<!--<![endif]-->

Para CTAs críticos, merece la pena. Para cuerpo del email, no es necesario en cada enlace.

Imágenes de fondo en Outlook

background-image en CSS no funciona en Outlook desktop. La solución es VML:

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="https://.../bg.png" color="#222222"/>
</v:background>
<![endif]-->

Si no necesitas la imagen como background y un color sólido vale, ahorras complejidad.

Gmail clipping (102KB)

Qué es y por qué importa

Gmail recorta cualquier email cuyo HTML pase de aproximadamente 102KB tras codificación. A partir de ahí muestra “View entire message” y el resto queda oculto. Las consecuencias:

• El píxel de tracking suele estar al final, así que las aperturas no se cuentan.
• CTAs por debajo del corte no son clicables sin clic adicional.
• El List-Unsubscribe en cabeceras sigue funcionando, pero el del cuerpo se pierde.
• Da imagen de mensaje desordenado.

Cómo medir el peso

El tamaño que Gmail mide es el del HTML codificado tras encoding base64 si lo aplica el ESP. En la práctica, el HTML “fuente” debe quedar bastante por debajo de 102KB. Apunta a 80-90KB máximo.

Cómo reducirlo

• Eliminar CSS no usado (frameworks completos suelen sobrar).
• Minificar HTML (espacios, comentarios, indentación).
• No incrustar imágenes en base64 dentro del HTML; servirlas remotas.
• Reducir tracking parameters duplicados en URLs.
• Eliminar atributos vacíos y estilos repetidos.

Más detalle en la guía de peso del email.

Apple Mail Privacy Protection (MPP)

Qué hace

Desde iOS 15, Apple Mail descarga las imágenes de los emails en background a través de un proxy, antes incluso de que el usuario los abra. Esto:

• Genera “open” en tu sistema aunque el usuario no haya abierto.
• Oculta la IP real del destinatario.
• Cachea las imágenes (los píxeles de tracking dejan de servir).
• Aplica a todos los usuarios de Apple Mail con MPP activo.

Impacto en métricas

• Open rate sobreestimado (muchos opens fantasma).
• Geolocation por IP imposible para usuarios Apple.
• Apertura como criterio de re-engagement deja de ser fiable.
• Send-time optimization basada en aperturas pierde precisión.

Cómo adaptarse

• Cambiar el KPI principal de open a click cuando sea posible.
• Para sunset de inactivos, apoyarse en clics, conversiones y otros eventos.
• No usar el píxel como heurística para “está leyendo ahora”: Apple lo dispara antes.
• Aceptar que el open rate de Apple Mail es ruido. Tomar tendencias relativas, no absolutas.

Yahoo Mail

Yahoo es uno de los clientes menos problemáticos:

• Soporta CSS moderno y media queries.
• Aplica dark mode visual sin invertir HTML salvo casos puntuales.
• No corta por longitud (no clipping equivalente al de Gmail).
• Elimina o sanea formularios <form> y JavaScript.
• Algunas versiones renombran clases CSS o IDs (prefijo yiv...), lo que puede romper selectores específicos.

Lo razonable es probar el render en Yahoo Mail web y, si funciona en Apple Mail y Gmail, en Yahoo casi siempre funciona.

Outlook.com web

Es el cliente “olvidado” pero importante. Algunos quirks:

• Aplica un dark mode propio que invierte fondos claros sin avisar.
• Ignora algunos @media queries específicos.
• Reescribe ciertos atributos (style internos).
• Soporta prefers-color-scheme parcialmente, no en todas las versiones de navegador.

Conviene probarlo separadamente del Outlook desktop, porque son motores muy distintos.

Estrategia general

CSS conservador

Como base, usa CSS2 con extensiones cuidadas:

• <table> para layout principal.
• Inline styles + <style> en <head> (Gmail no respeta el <style> en algunos casos, pero los inline siempre se respetan).
• @media (max-width: 480px) para mobile.
• display: none y mso-hide:all combinados para ocultar bloques.

Hojas de estilo limpias

Evita atributos no soportados como flex, grid, transform, animation. Si los usas, asegúrate de tener fallback en <table>.

Tablas dentro de tablas

El layout robusto de email se construye con tablas anidadas. Aunque visualmente equivalga a un div con flex, la tabla funciona en todos los clientes.

<table role="presentation" width="100%">
  <tr>
    <td align="center">
      <table role="presentation" width="600" style="max-width:600px;">
        <tr><td>...</td></tr>
      </table>
    </td>
  </tr>
</table>

Inline vs head styles

• Los estilos inline siempre se respetan.
• Los estilos en <head> son útiles para media queries y pseudo-clases.
• Algunos ESP “in-line-an” automáticamente los estilos antes del envío.
• Conviene tener ambos: head para media queries, inline para todo lo demás.

Errores frecuentes

Confiar solo en Litmus o Email on Acid

Las capturas son útiles para detectar fallos visuales, pero no detectan problemas de filtros antispam, reescritura de Gmail, ni interacciones reales. Suma cuentas reales de prueba.

Probar solo en una versión de Outlook

Outlook 2016, 2019, 2021 y 365 tienen variaciones. La regla práctica: probar en el último Office 365 y, si tu audiencia es enterprise antigua, también en una versión más vieja.

Ignorar Outlook desktop por “ya nadie lo usa”

En entornos B2B europeos, Outlook desktop sigue siendo dominante. Ignorarlo lleva a quejas de clientes que ven el email roto y, además, daña la reputación porque suele ser el cliente con más complaints cuando algo se rompe.

No medir el peso final

El HTML “fuente” puede ser de 60KB pero, tras renderizar variables, código de tracking del ESP y wrappers, llegar a 110KB. Mide siempre el HTML final.

Confiar en open rate como única métrica

Con MPP, la apertura ya no significa lo que significaba. Diversifica métricas con clics, conversiones y respuestas.

Cómo integrarlo en el workflow

• Maquetar la versión “moderna” pensando en Apple Mail y Gmail.
• Sumar bloques <!--[if mso]> para Outlook desktop.
• Validar peso < 90KB.
• Probar en al menos seis clientes reales antes de cada envío grande.
• Documentar los hacks usados para que no se pierdan en mantenimiento.

El email es el último gran territorio donde el HTML antiguo y el moderno conviven. La compatibilidad cross-client se gana con disciplina, no con frameworks. Los marcos como MJML o Maizzle ayudan, pero conviene entender qué hacen por dentro para diagnosticar cuando algo falla.

Recursos relacionados

Si quieres profundizar, prueba estas herramientas gratuitas: Domain Health, mail tester, validador SPF y validador DMARC.

¿Necesitas que alguien lleve tu canal de email entero? Abalola Mail es la agencia de email marketing en España de Abalola para ecommerce: estrategia, producción y operación del stack sobre Klaviyo, Mailchimp o Brevo.