La verdad incomoda: el correo no es un navegador

En una pagina web moderna puedes usar CSS avanzado, layouts flexibles, JavaScript, fuentes externas y efectos. En email, muchas de esas piezas se bloquean o se interpretan a medias. Algunos clientes recortan el CSS, otros reescriben el HTML, y algunos directamente usan motores antiguos. El resultado: el mismo email se ve distinto segun donde se abra.

Por eso, el objetivo real no es “que se vea identico en todos lados”, sino “que se vea bien y legible en la mayoria”. La estrategia es construir de forma mas conservadora, anticipando los fallos tipicos.

Motivos mas comunes por los que un email HTML se rompe

1) CSS limitado o bloqueado

Muchos clientes no soportan bien selectores complejos, pseudo-clases, posicionamiento avanzado o ciertas propiedades. Y aunque soporten CSS, a veces lo filtran. Por ejemplo: estilos en <style> pueden ser ignorados, y estilos externos con link casi siempre se descartan.

Solucion practica: usa CSS simple, y prioriza estilos inline en los elementos clave. Si necesitas clases, asume que no todos los clientes las aplicaran igual.

2) Outlook y el motor de Word

Outlook de escritorio es el “jefe final” del email HTML. En muchas versiones renderiza con el motor de Microsoft Word, que entiende HTML/CSS de forma muy limitada. Flexbox, grid y muchas propiedades modernas se vuelven un campo minado.

Solucion practica: layouts con tablas (si, tablas) para estructura principal, y anchos fijos o semi-fijos. Suena retro, pero es estable. Si tu audiencia incluye empresas, Outlook importa mucho.

3) Imagenes bloqueadas y tamaños inesperados

Algunos usuarios tienen imagenes desactivadas por defecto. Otros clientes cargan imagenes con retraso. Si tu diseño depende de banners para comunicar lo esencial, el email parece vacio. Ademas, si no defines dimensiones, puede haber saltos de layout.

Solucion practica: siempre usa alt descriptivo, define width y height cuando sea posible, y evita texto importante dentro de imagenes. Piensa en “email legible sin imagenes”.

4) Fuentes externas que no cargan

Muchas fuentes web (Google Fonts, etc.) no funcionan de forma consistente en email. Cuando la fuente no carga, el cliente cambia a una alternativa con distinto ancho, y eso puede descuadrar botones, titulos o columnas.

Solucion practica: usa una pila de fuentes segura (system fonts) y diseña con tolerancia. Si quieres una fuente especial, acepta que en algunos clientes se vera otra.

5) Escalado automatico en movil

Algunos clientes aumentan el tamaño del texto automaticamente para “mejorar legibilidad”. Esto puede romper columnas, empujar botones o generar saltos extra.

Solucion practica: usa tamaños de fuente razonables, line-height generoso, y layouts que respiren. Evita bloques con altura fija. Asegura que los botones tengan padding amplio.

6) Modo oscuro que invierte colores

El dark mode es una causa enorme de “se ve raro”. Algunos clientes invierten fondos, ajustan colores de texto y cambian contrastes sin preguntarte. Un gris elegante puede volverse un tono raro, y un texto oscuro puede perderse.

Solucion practica: usa contraste alto, evita texto gris demasiado suave, y prueba el email en modo oscuro. Considera fondos y bordes que sigan siendo legibles cuando el cliente altere colores.

7) Reescritura del HTML por seguridad

Para proteger al usuario, los clientes pueden eliminar atributos, limpiar estilos, quitar scripts, bloquear iframes y desactivar ciertas interacciones. Incluso pueden reordenar partes del DOM. El resultado es que tu estructura “perfecta” cambia.

Solucion practica: mantén el HTML simple, evita trucos, y construye con componentes robustos (contenedor, tabla principal, bloques claros, botones sencillos).

Buenas practicas que casi siempre funcionan

Diseño con una columna como base

Dos o tres columnas se ven bien en web, pero en email aumentan el riesgo. Una columna principal con bloques apilados es la forma mas segura. Si necesitas columnas, úsalas solo en secciones cortas y con fallback a apilado.

Anchura tipica y espaciado consistente

Un contenedor central de 600px sigue siendo un estándar practico. En movil, el contenido debe adaptarse sin “apretar”. El espaciado es tu amigo: padding amplio, separadores suaves y line-height generoso hacen que el email se perciba estable.

Botones como tablas o enlaces con estilo simple

Un boton bonito en web puede fallar en email. Lo mas robusto suele ser un enlace con estilos inline y padding, o un “boton” montado con tabla para consistencia. Si el cliente rompe el estilo, al menos quedara un enlace claro.

Evitar dependencias fragiles

• No dependas de imagenes para el mensaje principal.
• No dependas de una fuente externa para que el diseño “encaje”.
• No uses altura fija en contenedores con texto variable.
• No uses CSS avanzado como si fuera una web moderna.

Texto primero, decoracion despues

Un email que se entiende aunque se pierda el 30% del diseño sigue cumpliendo su objetivo. Un email que depende del diseño para comunicar, se convierte en un puzzle. Prioriza claridad: titulo, resumen, llamada a la accion, y luego el resto.

Checklist rapido antes de enviar

• Legible sin imagenes: alt correcto, mensaje entendible solo con texto.
• Contraste alto: se entiende en modo claro y oscuro.
• Botones grandes: facil de tocar en movil, padding amplio.
• Anchos controlados: contenedor estable, sin desbordes laterales.
• Enlaces visibles: subrayado o color claro, no depender solo del estilo.
• Sin dependencias raras: nada de scripts, iframes, o CSS extremo.
• Texto con aire: line-height y margenes para evitar bloques apretados.

Pruebas que valen oro (y te ahorran verguenza)

Si vas a enviar a una lista real, prueba en varios escenarios: Gmail web, Outlook escritorio, Outlook web, iPhone Mail, Android (Gmail). No hace falta obsesionarse con 40 clientes, pero si cubrir los “grandes”. Lo importante es detectar problemas de estructura, escalado y dark mode.

Un truco practico: enviate el email a ti mismo y abrelo en el movil. Luego reenviatelo desde Gmail u Outlook y vuelve a abrirlo. El reenvio a veces altera estilos y revela debilidades.

Que puedes hacer cuando ya se ve roto

Si ya tienes una plantilla que se rompe, no necesitas tirarla entera. Haz una correccion por capas:

1. Primero estructura: asegúrate de que la columna principal es estable (tabla o contenedor simple).
2. Luego tipografia: elimina fuentes externas si descuadran, ajusta line-height.
3. Luego imagenes: define tamaños, añade alt y evita que sean el unico contenido.
4. Luego botones: simplifica estilos, prioriza el enlace clicable.
5. Luego dark mode: refuerza contrastes y revisa fondos y bordes.

Muchas veces el “email roto” se arregla con decisiones aburridas: menos magia, mas estabilidad. Y si tu objetivo es conversión, esa estabilidad vale mas que un efecto visual sofisticado.

Plantilla mental: diseño “a prueba de clientes”

Piensa tu email como si fuera un folleto simple: un titulo claro, un parrafo de contexto, una llamada a la accion evidente, y bloques secundarios bien separados. Si quieres un toque moderno, usa detalles que no dependan de soporte avanzado: bordes suaves, fondos sutiles, separadores, iconos simples (emoji incluidos 🙂) y jerarquia tipografica.

El objetivo no es impresionar al motor de render, sino al lector. Si el lector entiende el mensaje sin friccion, ganaste.