Compatibilidad CSS en emails para Outlook: qué cambiar cuando se rompe el diseño

Un email puede verse equilibrado en el navegador y desordenarse al llegar a Outlook. A veces no falla de forma espectacular: desaparece un espacio, dos columnas dejan de relacionarse bien, una tarjeta pierde su jerarquía o un botón deja de parecer un botón.

La solución no es memorizar una tabla interminable de compatibilidad. Es separar el CSS que sostiene el mensaje del CSS que solo mejora el aspecto.

Abre gratis EasyAImail Email HTML Preflight para pegar o subir el HTML final y revisar el informe en tu navegador.

Por qué Outlook necesita una comprobación propia

Outlook no es un único entorno de renderizado. Outlook Classic, el nuevo Outlook y Outlook en la web no se comportan igual, y tampoco se comportan como un navegador. Por eso que un email se vea bien en Chrome no demuestra que se vea igual en la bandeja de entrada de un cliente.

El comprobador agrupa los riesgos de Outlook y muestra señales por cliente. En el ejemplo aparecen gap, display:flex, max-width, margin, padding, fondos, border-radius y box-shadow.

No todos tienen la misma importancia. Perder una sombra es un cambio visual. Perder la estructura de columnas, el contraste o el área de un botón puede impedir que la persona entienda qué hacer.

Distingue entre diseño base y mejora progresiva

El diseño base contiene lo indispensable: título legible, texto, fecha o importe relevante, acción principal y enlace usable. Debe seguir funcionando aunque un cliente ignore una mejora.

Una mejora progresiva puede ser una sombra suave, una esquina redondeada, un degradado o un ajuste fino de respuesta. Es agradable cuando aparece, pero no debe llevar por sí sola la estructura del mensaje.

Si una propiedad solo añade una mejora, puede ser aceptable después de revisarla. Si controla el orden del contenido, el espaciado esencial, la legibilidad o la acción principal, conviene reemplazarla antes de enviar.

Patrones CSS que merecen revisión

Flexbox y grid

En una web, display:flex y grid son opciones naturales para alinear columnas. En un email, si la relación entre columnas o el orden de lectura dependen de ellos, una tabla de presentación suele ofrecer una base más estable.

No se trata de usar tablas por costumbre. Se trata de usarlas cuando el diseño necesita una estructura que clientes menos capaces no deberían perder.

gap, margin y padding

El espaciado parece menor hasta que es lo único que separa dos acciones o un título de su explicación. El informe señala estos casos porque su comportamiento puede variar según el elemento y el cliente.

Coloca el espaciado crítico en una estructura fiable. Si la base es una tabla, prueba el padding de la celda que sostiene el contenido. No dejes que una disposición propia del navegador sea la única razón por la que el email se entiende.

max-width

max-width puede hacer que la vista previa del navegador sea elegante, pero algunos clientes lo interpretan de otro modo. Para contenido esencial, utiliza anchuras y una estructura que sigan teniendo sentido si el cliente decide otro ancho.

Bordes redondeados, sombras y fondos

border-radius y box-shadow suelen ser mejoras, no estructura. Puedes conservarlos, pero un botón debe seguir siendo reconocible sin ellos. Lo mismo vale para un fondo: si al perder el fondo el texto o el botón dejan de tener contraste, el diseño base necesita trabajo.

Un patrón de sustitución más seguro

Cuando un componente web usa una fila flex, gap, sombra y bordes redondeados, no copies cada propiedad sin más. Traduce su función a una estructura de email más estable.

        Actualización del proyecto


        Los archivos revisados están listos para su revisión.

No es tan conciso como un componente web moderno, pero protege la jerarquía de información. Después puedes añadir detalles visuales que no afecten a la lectura básica.

Usa el informe para priorizar, no para reescribir a ciegas

EasyAImail Email HTML Preflight ofrece una revisión progresiva y otra de compatibilidad estricta. La primera ayuda a proteger un diseño base y trata muchas mejoras del head como notas de menor prioridad. La segunda sirve cuando un equipo quiere reducir todavía más diferencias entre clientes.

En ninguno de los dos casos conviene tratar todas las advertencias igual. Abre la vista previa segura, localiza el bloque afectado y pregúntate: si esta propiedad falla, ¿la persona todavía puede leer, comprender y usar la acción principal?

Lo que un análisis estático no promete

El comprobador no envía el email a cada versión de Outlook, sistema operativo y configuración de destinatario. No promete un resultado idéntico píxel a píxel ni predice la llegada a la bandeja de entrada.

Su utilidad es hacer visible el código arriesgado antes de enviar. Para una campaña con consecuencias de ventas, plazos o cuentas, usa primero el informe y luego una prueba real en los clientes que utiliza tu audiencia.

No olvides los riesgos de contenido

Una maquetación razonable puede seguir fallando si una imagen no tiene alt, un botón apunta a # o una variable llega sin reemplazar. El informe reúne problemas de contenido y accesibilidad junto con los de Outlook para que el CSS no eclipse lo que realmente recibe la persona.

Para entender mejor la diferencia entre navegador y bandeja de entrada, consulta Por qué el correo se desordena en Outlook: del navegador a la bandeja de entrada.

Preguntas frecuentes

¿El nuevo Outlook admite el mismo CSS que Outlook Classic?

No conviene asumirlo. Trátalos como objetivos distintos y prioriza un diseño base legible antes que una coincidencia perfecta en una sola vista.

¿Debo eliminar todas las propiedades señaladas?

No. Corrige primero lo que pueda romper el orden, la lectura, el contraste o la acción principal. Una sombra o una esquina redondeada pueden seguir como mejora progresiva.

¿Puedo usar flexbox en un email HTML?

Puedes usar CSS moderno como mejora si el email conserva una alternativa legible. No hagas que el orden esencial o el espacio crítico dependan por completo de flexbox para una audiencia con Outlook.

¿Una vista previa en navegador demuestra que Outlook está bien?

No. Sirve para revisar tu intención visual, pero Outlook tiene un comportamiento propio. Para mensajes importantes, combina el informe con una prueba de inbox real.

Corrige primero lo que transporta el mensaje

Pasa el HTML final por EasyAImail Email HTML Preflight, corrige los riesgos que afectan a estructura, lectura, acción y contraste, y deja los detalles decorativos para después.