Maquetación de correos HTML: guía completa
Todo lo necesario para que el correo se vea igual en todas partes
Mailvex · 30 agosto 2026 · 4 min de lectura
Maquetar un correo difiere de maquetar un sitio lo bastante como para ser otro oficio. Los clientes de correo no admiten HTML moderno: la maquetación va sobre tablas, los estilos en línea y los botones de Outlook necesitan su propio código. A continuación, todo lo que tratamos en artículos separados, con enlaces al detalle.
Por qué maquetar correos es un oficio aparte
El motivo es que los clientes de correo evolucionaron aparte de los navegadores. Algunos usan motores de hace diez años o más, y varios eliminan del mensaje todo lo que consideran inseguro.
La consecuencia práctica: lo que se ve perfecto en un navegador puede romperse en una bandeja. La revisión ocurre en tres o cuatro sitios, no en uno.
Y una cosa más: la mayoría de los correos se abren en el teléfono. Así que diseñar para pantalla ancha y comprimir después es el orden equivocado.
Ocho reglas que no cambian
Estos valores están asentados por la práctica y apenas cambian entre proyectos. Conviene tenerlos a la vista mientras se monta.
| Qué | Valor | Por qué |
|---|---|---|
| Ancho del correo | 600 píxeles | cabe en el panel de vista previa y en el móvil |
| Maquetación | tablas, no bloques | la maquetación moderna falla en clientes antiguos |
| Estilos | en línea | las hojas de estilo externas se eliminan |
| Tamaño del texto | desde 16 píxeles | por debajo de 13 el sistema lo amplía |
| Altura del botón | 44 mínimo, mejor 48 | el mínimo para el pulgar |
| Peso del correo | menos de 100 KB | por encima los clientes recortan el contenido |
| Márgenes | en celdas de tabla | si no, algunos clientes los eliminan |
| Imágenes | con texto alternativo | muchos clientes no cargan imágenes |
Outlook: la principal dificultad
El Outlook clásico para Windows usa el motor de un procesador de textos en lugar de uno de navegador. Ignora las media queries, no entiende esquinas redondeadas ni degradados, y los botones montados de forma normal solo se pulsan sobre el texto.
Se resuelve con código VML aparte, un marcado que solo entiende Outlook. Los demás clientes lo ignoran, así que un mismo correo funciona en todas partes.
Asunto aparte son los plazos de soporte. Las publicaciones del sector repiten que el motor se apaga en 2026. En realidad lo que termina es el soporte de versiones concretas del paquete ofimático, y el Outlook clásico vive bastante más.
Modo oscuro
Más de una cuarta parte de los correos se abren en modo oscuro, y los clientes lo tratan de tres formas: dejan los colores intactos, los invierten parcialmente o los invierten del todo.
Puedes influir con dos metaetiquetas en la cabecera y una media query con tus propios colores. No funciona en todas partes, pero donde funciona da control total.
Pantallas móviles
La maquetación móvil no consiste en encoger la versión de escritorio sino en el orden inverso: primero se decide cómo se ve en pantalla estrecha y después se añade la versión ancha.
Hay una trampa sobre la que casi nadie escribe: un iPhone amplía a la fuerza cualquier fuente menor de 13 píxeles mientras el contenedor sigue igual. El texto deja de caber y la maquetación se descoloca.
Peso del correo y recorte
Los proveedores de correo recortan los mensajes por encima de cierto peso. Todo lo que queda más allá, incluido el enlace de baja y el píxel de seguimiento, no llega al destinatario.
Apunta no al límite sino a un margen: tu plataforma de envío añade su propio código de seguimiento después de ti, y un correo de noventa kilobytes puede cruzar la línea.
Importar un diseño de Figma
Un diseño de Figma no se traslada al correo directamente: usa posicionamiento libre y funciones modernas de maquetación que el correo no tiene. Hace falta una reconstrucción estructural, no una exportación.
Revisar antes de enviar
Pasa una lista de comprobación antes de enviar: un correo no se puede retirar, y un error en el enlace principal arruina todo el trabajo.
El conjunto mínimo es abrir el correo en el teléfono, pulsar cada enlace, verlo en modo oscuro y desactivar la carga de imágenes para confirmar que el mensaje se mantiene.
Por dónde empezar
Montarlo a mano significa tener todo esto en la cabeza. Un constructor asume la parte técnica: tablas, estilos en línea, la alternativa para Outlook, márgenes en celdas y un contador de peso aparecen solos al compilar.
La biblioteca de Mailvex tiene 160 plantillas listas para diez sectores, todas montadas sobre bloques compatibles con los clientes de correo.
Monta un correo con bloques listos.
Ver plantillas