Escribir HTML para correo equivale a programar para una treintena de motores de renderizado, ninguno de los cuales sigue las mismas reglas que los navegadores. Outlook en Windows sigue usando el motor de Microsoft Word. Gmail reescribe los estilos. Apple Mail aplica las preferencias del sistema. Esto es lo que funciona realmente en 2026, y lo que conviene seguir evitando.
La tabla sigue siendo la estructura de referencia
La desaparición anunciada de las tablas de maquetación no se ha producido. Las versiones de escritorio de Outlook en Windows siguen apoyándose en el motor de Word, que ignora float, display: flex y display: grid. Una maquetación basada en esas propiedades se desploma en una sola columna — a veces de forma aceptable, a menudo no.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 24px 16px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
<tr><td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px;">
Contenido
</td></tr>
</table>
</td>
</tr>
</table>El atributo role="presentation" no es decorativo: indica a los lectores de pantalla que la tabla estructura la maquetación y no contiene datos, lo que evita una lectura celda por celda.
Lo que está realmente disponible
| Técnica | Estado en 2026 | Observación |
|---|---|---|
Estilos en línea (style="") | Imprescindible | Algunos clientes siguen eliminando los bloques <style> |
<style> en el <head> | Ampliamente soportado | Usar para media queries, no para los estilos críticos |
| Media queries | Buen soporte | Ignoradas por Outlook Windows, de ahí el enfoque «móvil primero degradado» |
| Fuentes web | Parcial | Prever siempre una pila de respaldo del sistema |
| WebP | Parcial | No soportado por algunos Outlook — preferir JPEG o PNG |
| SVG | Evitar | Bloqueado por Gmail y la mayoría de clientes |
position, flex, grid | Evitar | No gestionados por el motor de Word |
| Modo oscuro | Heterogéneo | prefers-color-scheme funciona, pero algunos clientes invierten los colores por su cuenta |
El modo oscuro, principal cambio reciente
Es el asunto que produce más resultados inesperados. Coexisten tres comportamientos: clientes que respetan prefers-color-scheme, los que invierten automáticamente los colores claros y los que no aplican nada. Un fondo blanco con texto negro escritos en duro pueden convertirse en un fondo oscuro con el texto todavía negro — ilegible.
<style>
:root { color-scheme: light dark; supported-color-schemes: light dark; }
@media (prefers-color-scheme: dark) {
.cuerpo { background-color: #14181d !important; }
.texto { color: #e8edf3 !important; }
.logo-claro { display: none !important; }
.logo-oscuro { display: block !important; }
}
</style>Dos reglas prácticas limitan los daños: no usar nunca un logotipo PNG transparente negro (desaparece sobre fondo oscuro — prever una versión clara) y evitar los contrastes extremos que los clientes inversores tratan de forma agresiva.
Un correo se concibe para seguir siendo legible aunque se ignoren todas sus reglas CSS. Lo que quede entonces debe seguir funcionando.
Imágenes: imprescindibles, nunca esenciales
Una parte importante de los destinatarios lee los mensajes con las imágenes bloqueadas por defecto. Tres consecuencias operativas:
- Atributo
altsistemático, redactado para ser leído — es el texto que se muestra en su lugar. - Ninguna información esencial en una imagen sola: un botón de acción debe seguir siendo un enlace con estilo HTML, no una imagen clicable.
- Dimensiones explícitas (
widthyheightcomo atributos) para evitar el reajuste al mostrarse.
El botón, caso de manual
El botón «bulletproof» sigue siendo la técnica de referencia: un enlace con estilo dentro de una celda de tabla, con respaldo condicional para Outlook.
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr><td bgcolor="#0a6cff" style="border-radius:6px;">
<a href="https://ejemplo.es/"
style="display:inline-block; padding:14px 28px; font-family:Arial,sans-serif;
font-size:16px; color:#ffffff; text-decoration:none;">
Leer el artículo
</a>
</td></tr>
</table>Los controles antes del envío
- Peso total por debajo de 102 kB para el HTML: por encima, Gmail trunca el mensaje y muestra un enlace «ver mensaje completo», lo que rompe el seguimiento y la presentación.
- Versión en texto plano incluida: su ausencia es una señal negativa para los filtros.
- Renderizado verificado al menos en Outlook Windows, Gmail web, Gmail móvil y Apple Mail — ese cuarteto cubre lo esencial de las divergencias.
- Enlaces absolutos y en HTTPS, imágenes incluidas.
- Enlace de baja visible y funcional, además de la cabecera
List-Unsubscribe.
Lo que hay que retener
El HTML de correo no converge hacia el HTML web, y apostar por esa convergencia produce mensajes rotos en una parte de los destinatarios. El método que aguanta consiste en escribir una estructura de tablas, aplicar estilos en línea, tratar el modo oscuro explícitamente y considerar cada mejora CSS como un extra que puede desaparecer.
He dedicado más tiempo del razonable a reparar plantillas que se veían perfectas en un navegador y se desplomaban en Outlook. La regla que aplico desde entonces: pruebo el renderizado en Outlook antes de escribir el contenido, no después. Una plantilla validada una vez se reutiliza durante años. — Simon Janvier
