La razon principal: no existe un solo navegador para email

Un email no se renderiza como una pagina web normal. Cada cliente de correo usa su propio motor. Algunos se parecen a navegadores modernos, otros son mas limitados y otros, como ciertas versiones de Outlook en escritorio, usan motores heredados que tratan el HTML como si fuera documento, no como web.

Resultado: el mismo codigo puede verse distinto en Gmail, Outlook, Apple Mail, Yahoo, clientes Android, apps de terceros, etc. Por eso un correo que se ve perfecto en un lugar puede romperse en otro sin que cambies nada.

Problema 1: CSS bloqueado, recortado o ignorado

En email, el CSS no se respeta como en web. Muchas propiedades se ignoran, algunas se recortan y otras se reescriben. Ademas, algunos clientes eliminan estilos en el head o aplican sanitizado.

Que hacer

• Usa estilos inline en la mayoria de elementos importantes: tipografia, tamanos, colores, padding y alineacion.
• Evita layouts complejos con flex y grid. En email, lo mas estable sigue siendo tablas para estructura.
• Define un ancho maximo para el contenedor principal y centra el contenido de forma tradicional.
• No confies en margenes. Muchos clientes los tratan raro. Prefiere padding dentro de celdas o contenedores.

Si vienes de web moderna, suena feo usar tablas, pero en email son el equivalente a un casco: no se ven cool, pero te salvan del golpe.

Problema 2: Outlook y su mania con el espaciado

Outlook escritorio es famoso por interpretar el HTML a su manera. Cambia line-height, ignora border-radius en algunos casos, trata imagenes y tablas distinto, y puede meter espacios extra sin avisar.

Que hacer

• Usa tablas anidadas para secciones y columnas. Si necesitas dos columnas, arma una tabla de dos celdas.
• Define line-height de forma explicita en texto y botones para evitar saltos.
• Evita divs apilados con estilos raros. En Outlook, lo simple gana.
• Prueba siempre en Outlook si tu audiencia corporativa es fuerte.

Problema 3: imagenes que no cargan o rompen el layout

En muchos clientes, las imagenes pueden bloquearse por privacidad. O bien cargan lento. O se descargan con tamanos distintos. Si tu diseno depende de una imagen para verse bien, se va a sentir incompleto cuando esa imagen no aparezca.

Que hacer

• Siempre pon alt text claro y util. Si la imagen no carga, al menos el usuario entiende el mensaje.
• Define width y height en la etiqueta de imagen para evitar brincos y reflow.
• No uses imagen como unico boton. Usa un boton con texto real y, si quieres, acompana con icono.
• Optimiza peso: imagenes grandes se sienten pesadas y en datos moviles es peor.

Tip rapido: si el correo se basa en un banner enorme, ten un encabezado con texto real arriba para que el mensaje exista incluso cuando no hay imagen.

Problema 4: fuentes personalizadas que desaparecen

En web, pones una fuente y listo. En email, muchas apps no cargan fuentes externas o solo las soportan en ciertos entornos. Entonces tu tipografia se reemplaza por una fuente del sistema y el diseno cambia de golpe.

Que hacer

• Usa una pila de fuentes: una fuente preferida y varias alternativas seguras.
• Disena pensando en la fuente fallback. Si se ve bien con la fuente del sistema, ya ganaste.
• Evita depender del peso exacto. Algunas fuentes fallback cambian el ancho del texto.

Problema 5: botones que no parecen botones

El tipico: en un cliente el boton se ve bien y en otro se vuelve un link azul subrayado, o pierde borde, o el padding se rompe. Esto pasa cuando el boton es un elemento que no todos interpretan igual.

Que hacer

• Construye botones con tablas: una celda con background, padding y un link dentro.
• Define color del texto y decoracion en el link para evitar el estilo default.
• Haz el area clickeable grande. Un boton pequeno en movil es castigo.

Si el usuario tiene que atinarle con lupa al CTA, lo mas probable es que lo ignore.

Problema 6: el modo oscuro te cambia los colores

El modo oscuro no solo invierte fondos. Algunos clientes ajustan colores de texto automaticamente para mejorar contraste. Eso puede hacer que tu texto pierda legibilidad o que un fondo claro se vuelva oscuro sin que tu lo pidas.

Que hacer

• Evita texto oscuro sobre fondos transparentes. Usa fondos definidos donde sea critico.
• Revisa contraste como si tu diseno fuera a ser reinterpretado.
• No confies en sombras suaves para separar secciones; en oscuro se pierden.
• Usa bordes sutiles y espaciado generoso para que el layout sea legible en cualquier tema.

Es frustrante, si. Pero si tu correo se entiende aun con colores alterados, ya estas del otro lado.

Problema 7: Gmail y la limpieza del HTML

Gmail puede reescribir partes del HTML, eliminar estilos que considera riesgosos o moverlos. Tambien puede cortar el mensaje si es demasiado largo o si detecta estructuras repetidas.

Que hacer

• Mantén el HTML limpio y evita codigo redundante.
• No uses scripts, iframes, ni cosas tipo web app. En email no van.
• Reduce anidacion excesiva. Layout estable no significa infinito nesting.
• Cuida el peso total del correo: demasiado largo o pesado puede recortarse.

Problema 8: responsive que falla en celular

En movil, el correo puede aplicar escalado automatico, zoom, o reacomodo. A veces una tabla ancha fuerza scroll horizontal o hace que el texto se vea minusculo.

Que hacer

• Usa un contenedor de ancho fijo razonable y permite que en movil se adapte con max-width.
• Evita columnas demasiado estrechas. Si necesitas dos columnas, considera apilarlas en movil.
• Tipografia legible: tamanos de texto comodos y line-height claro.
• Espaciado amplio: dedos grandes, paciencia poca.

Checklist practico antes de enviar

Si quieres que tu email no se rompa, aplica este checklist rapido. No es teoria, es supervivencia.

• Layout con tablas para estructura principal y secciones.
• Estilos inline en lo que importa: texto, padding, background, alineacion.
• Imagenes optimizadas con alt text, width y height definidos.
• Boton CTA robusto con area clickeable grande y texto real.
• Contraste revisado para modo oscuro y fondos inesperados.
• Pruebas cruzadas al menos en Gmail, Outlook y Apple Mail.
• Version sin imagenes que siga teniendo sentido si todo se bloquea.

Plantilla mental: disena para lo peor y te sorprende lo mejor

El secreto del email HTML no es hacer el diseno mas moderno. Es hacerlo resistente. Piensa que alguien lo va a abrir con mala senal, con modo oscuro, con fuentes bloqueadas y con un cliente que odia tu CSS. Si aun asi se entiende, se ve ordenado y el CTA se puede tocar facil, entonces ya ganaste. 🔥

Y si te sirve como regla final: en email, lo simple casi siempre vence a lo fancy. 😄