Por qué el HTML de email no es como el HTML de una web

Un navegador moderno interpreta estándares relativamente consistentes: HTML, CSS, flexbox, grid, fuentes web, JavaScript y un largo etcétera. En email, en cambio, el “motor” que renderiza el contenido depende del cliente y del sistema operativo. Hay clientes que usan motores antiguos, otros aplican filtros de seguridad agresivos y otros reescriben tu HTML para adaptarlo a su interfaz. El resultado: la compatibilidad es fragmentada y las técnicas de maquetación se vuelven más conservadoras.

Además, el correo es un canal históricamente atacado. Por eso muchos clientes bloquean elementos que podrían ejecutar código, rastrear al usuario de forma invasiva o romper la experiencia. Si vienes de desarrollo web, la sensación puede ser frustrante: lo que en web es “normal”, en email puede estar prohibido o funcionar a medias.

El principal enemigo: soporte inconsistente de CSS

En email, el CSS es el gran campo de batalla. Algunas propiedades se respetan en Apple Mail pero fallan en Outlook; Gmail puede mover estilos, eliminar selectores o limitar ciertas reglas; y ciertos clientes móviles cambian márgenes y tamaños para “optimizar” la lectura. Por eso el enfoque más fiable suele ser un estilo más clásico y explícito.

Inline CSS: el estándar de facto

Muchos clientes manejan mejor los estilos en línea (style="") que hojas internas o externas. En proyectos serios, es común desarrollar con CSS más legible y luego “inlinearlo” en el proceso de envío. No es elegante, pero aumenta la compatibilidad.

Layouts modernos: flex y grid, con pinzas

Flexbox y CSS Grid no son una apuesta segura en email. Si tu layout depende de ellos, habrá clientes donde se desarme. La práctica clásica para compatibilidad es maquetar con tablas para la estructura principal (sí, tablas) y usar CSS solo para detalles. Aunque suene a retroceso, en email es un “avance” en estabilidad.

Posicionamiento, floats y márgenes

Propiedades como position (especialmente fixed o sticky) pueden ignorarse. Algunos clientes también tratan los márgenes de forma inconsistente, sobre todo en móviles. Una táctica habitual es preferir padding dentro de celdas y contenedores, y usar separadores controlados en lugar de confiar en márgenes complejos.

Imágenes: bloqueo, carga diferida y tamaños “caprichosos”

Muchas bandejas bloquean imágenes por defecto, o las cargan solo cuando el usuario lo permite. Eso impacta directamente en el diseño: tu email debe seguir siendo comprensible sin imágenes. Aquí entran dos decisiones clave: usar texto real (no texto dentro de imágenes) y añadir alt descriptivo en cada imagen.

Dimensiones: define ancho y alto siempre

Un error típico es confiar en que la imagen se adaptará bien sola. Algunos clientes estiran, otros encogen y otros redondean tamaños. Definir width y height ayuda a estabilizar el layout y evitar saltos de contenido. También conviene usar estilos simples como display:block para eliminar espacios extra alrededor de imágenes.

Imágenes de fondo: soporte limitado

Los fondos con background-image son tentadores, pero no siempre se respetan. Si un diseño depende de una imagen de fondo para contraste o legibilidad, en algunos clientes el texto puede quedar sobre un fondo blanco y perderse. Solución: usa colores de fondo sólidos como “fallback” y evita depender solo del background para la estructura.

Fuentes: lo bonito no siempre llega

En web usamos Google Fonts o fuentes personalizadas con tranquilidad. En email, muchos clientes no cargan fuentes externas o lo hacen de forma parcial. Eso significa que debes diseñar con una pila de fuentes seguras (system fonts) y aceptar que el aspecto final variará. Si la tipografía es parte crítica de tu marca, asume un “mejor esfuerzo” y prueba cómo se ve con fuentes de reemplazo.

Lo importante es priorizar la legibilidad. Tamaños consistentes, interlineado cómodo y un contraste correcto suelen aportar más que una fuente especial que solo verá una parte de tu audiencia.

Interactividad: JavaScript y formularios, prácticamente fuera

JavaScript está ampliamente bloqueado por razones de seguridad. Si intentas incluir scripts, lo más común es que sean eliminados o ignorados. Los formularios y elementos interactivos avanzados también tienen soporte irregular. Si necesitas interacción, el patrón recomendado es: email simple + acción en web. Es decir, botones y enlaces que llevan al usuario a una landing donde sí controlas el entorno.

Responsive en email: menos magia, más disciplina

El responsive en email se basa en un conjunto reducido de técnicas. Los @media queries funcionan en muchos clientes, pero no en todos. Por eso se suele construir primero un diseño que sea razonable en móvil (una columna) y después mejorar en escritorio si el cliente lo permite.

Una columna como base

Un diseño de una columna con ancho máximo controlado (por ejemplo, un contenedor centrado) suele verse bien en casi todas partes. Luego puedes introducir dos columnas con tablas y “stacking” en móvil, pero siempre con fallback: si el stacking falla, el contenido no debería volverse ilegible.

Botones grandes y táctiles

En móvil, un botón pequeño se convierte en una mala experiencia. Usa padding generoso, texto claro y un área de toque cómoda. Además, evita enlaces muy juntos. El email se lee rápido: cada fricción reduce conversiones.

Modo oscuro: el cambio de colores que nadie te pidió

El modo oscuro es una fuente frecuente de sorpresas. Algunos clientes invierten colores automáticamente, otros ajustan fondos y textos, y otros dejan tu diseño tal cual. Esto puede romper contrastes: texto oscuro sobre fondo oscuro, logos que desaparecen, botones que pierden el borde.

La estrategia práctica es diseñar con contrastes fuertes y evitar depender de grises muy sutiles. Si tu marca usa colores delicados, prueba variantes. También ayuda usar imágenes con transparencia cuando sea posible y asegurarte de que el logo tiene versiones que funcionan en fondo claro y oscuro.

Reescritura del HTML: cuando el cliente “mete mano”

Algunos clientes reescriben tu HTML: añaden envoltorios, cambian atributos, mueven estilos, sustituyen etiquetas o normalizan el contenido para su sistema de visualización. Esto es común en Gmail y en apps móviles que intentan “simplificar” el email.

Por eso conviene usar una estructura limpia, con anidaciones moderadas y sin depender de selectores frágiles. Cuanto más complejo sea tu DOM, más probabilidades de que algo se rompa al ser transformado.

Accesibilidad y entregabilidad: dos caras del mismo correo

Un email bonito que no llega a la bandeja de entrada no sirve. Y un email que llega pero no se entiende tampoco. Hay prácticas que benefician ambas cosas: jerarquía clara con títulos y párrafos, texto alternativo en imágenes, enlaces descriptivos y un equilibrio sano entre texto e imágenes.

Si tu email es una sola imagen gigante, además de ser inaccesible, puede activar filtros de spam. Un buen diseño suele mezclar texto real, bloques visuales ligeros y llamadas a la acción claras.

Buenas prácticas para emails que “aguantan”

• Diseña para fallos: asume que algunas imágenes no cargarán y que ciertos estilos se perderán.
• Maqueta con tablas para estructura principal si buscas máxima compatibilidad.
• Usa CSS inline y evita dependencias complejas de selectores.
• Define tamaños en imágenes y controla el ancho del contenedor.
• Prioriza una columna y mejora progresivamente donde sea posible.
• Contraste fuerte para sobrevivir al modo oscuro y a variaciones de cliente.
• Botones simples: un enlace con estilo consistente suele funcionar mejor que inventos interactivos.
• Prueba en varios clientes: lo que no se prueba, se rompe en producción.

Checklist antes de enviar

1. ¿Se entiende el email sin imágenes?
2. ¿El CTA principal es visible y clicable en móvil?
3. ¿Hay texto alternativo en todas las imágenes relevantes?
4. ¿El ancho del layout está controlado y no se desborda?
5. ¿El contraste sigue siendo correcto en modo oscuro?
6. ¿Los enlaces llevan a una landing estable y segura?