Maquetar un email sigue siendo uno de los trabajos más peculiares del desarrollo front-end. Mientras que en una web moderna podemos apoyarnos en CSS Grid, Flexbox, animaciones o componentes complejos, en el mundo del correo electrónico la realidad es bastante distinta: muchos clientes de email interpretan el HTML y el CSS de forma limitada, inconsistente o directamente imprevisible.
Por eso, cuando alguien se pregunta cómo maquetar un email, la respuesta no suele ser única. Existen varias formas de hacerlo: desde la maquetación clásica con tablas HTML, hasta herramientas externas que generan código compatible, pasando por soluciones modernas como MJML o React Email. Cada enfoque tiene sus ventajas, sus limitaciones y su contexto ideal.
En esta guía vamos a repasar la historia del email HTML, los problemas habituales que encuentran los maquetadores, las distintas opciones disponibles hoy en día y una serie de buenas prácticas para crear correos funcionales, responsive y preparados para clientes como Gmail, Outlook o Apple Mail.
Por qué maquetar emails sigue siendo diferente a maquetar una web
Un error muy común es pensar que un email se puede construir igual que una landing page o una página corporativa. En la práctica, no es así. El email HTML vive en un entorno mucho más restringido. Cada cliente de correo tiene su propio motor de renderizado, y eso hace que un mismo diseño pueda verse de forma distinta según se abra en Gmail, Outlook, Yahoo Mail, Apple Mail o una app móvil.
Además, muchos clientes de correo:
- eliminan parte del CSS,
- limitan el uso de determinadas propiedades modernas,
- reducen el soporte de etiquetas semánticas,
- bloquean imágenes por defecto,
- modifican el código al procesarlo,
- y pueden ignorar elementos que en web damos por sentados.
Por ese motivo, el email HTML se ha mantenido durante años como un terreno donde la compatibilidad pesa más que la elegancia del código.
Breve historia de la maquetación de emails
Los primeros correos eran puramente texto. Más adelante llegaron los emails en HTML, que permitieron incluir colores, enlaces, imágenes y bloques visuales más atractivos. Sin embargo, el soporte nunca evolucionó al mismo ritmo que el de los navegadores web.
Mientras la web avanzaba hacia estándares más sólidos y tecnologías como CSS3, diseño responsive o frameworks front-end, el ecosistema del correo fue mucho más conservador. Durante muchos años, los maquetadores descubrieron que la forma más fiable de controlar la estructura de un email seguía siendo el uso de tablas HTML anidadas.
Eso explica por qué, incluso hoy, muchas plantillas de email siguen construyéndose con tablas: no porque sea la opción más moderna, sino porque sigue siendo una de las más resistentes cuando hablamos de compatibilidad.
La opción clásica: maquetar emails con tablas HTML
Cuando se habla de email marketing o correos transaccionales, las tablas siguen ocupando un lugar central. En web moderna suelen evitarse para maquetación, pero en emails continúan siendo útiles porque permiten estructurar el contenido de forma bastante estable entre clientes.
Ventajas de usar tablas en emails
- Compatibilidad elevada: muchos clientes interpretan mejor una estructura basada en tablas que un layout moderno.
- Control de columnas: facilitan dividir contenido en bloques previsibles.
- Mayor estabilidad visual: reducen sorpresas en clientes problemáticos.
- Amplia documentación: existe una enorme cantidad de ejemplos y plantillas basadas en este sistema.
Desventajas de usar tablas
- Código más pesado: las estructuras pueden volverse largas y difíciles de mantener.
- Menor legibilidad: el HTML es menos limpio que en una web moderna.
- Escalabilidad limitada: proyectos grandes con muchas plantillas pueden hacerse difíciles de gestionar.
- Responsive menos cómodo: adaptar diseños a móvil requiere más trabajo y más pruebas.
Aun así, si el objetivo es lograr la máxima compatibilidad, las tablas siguen siendo una base muy habitual.
Problemas habituales al maquetar un email
Quien ha trabajado con emails sabe que no basta con que el diseño “se vea bien” en local. El verdadero reto empieza al probarlo en distintos clientes. Estos son algunos de los problemas más habituales:
1. Incompatibilidades entre clientes
Lo que funciona en Apple Mail puede romperse en Outlook. Lo que se ve bien en Gmail web puede alterarse en una app móvil. Esta fragmentación obliga a diseñar con mentalidad defensiva.
2. Soporte CSS irregular
No todas las propiedades CSS están igual de soportadas. Márgenes, fondos, media queries, fuentes externas o ciertas reglas en <style> pueden comportarse de forma desigual según el cliente.
3. Outlook como caso especial
Outlook ha sido históricamente uno de los clientes más exigentes para los maquetadores. Muchos equipos terminan creando ajustes o soluciones específicas para asegurar que el correo no se rompa en ese entorno.
4. Imágenes bloqueadas
Muchos usuarios reciben los correos con las imágenes desactivadas por defecto. Por eso conviene usar textos alternativos, botones reales y una jerarquía visual que no dependa solo de banners.
5. Fuentes personalizadas
En email no siempre se puede confiar en que una tipografía externa cargue correctamente. Lo habitual es definir una pila tipográfica con alternativas seguras.
6. Responsive inconsistente
Un diseño responsive en web puede resolverse con pocas reglas. En email, a veces hay que simplificar mucho la estructura, usar anchos fijos controlados y probar el resultado varias veces antes de darlo por bueno.
7. Modo oscuro
El dark mode puede alterar colores de fondo, textos, bordes e incluso logos. Si el email no está preparado, la versión final puede perder contraste o legibilidad.
8. Peso del código
Un email demasiado complejo, con muchas capas, imágenes pesadas o estilos innecesarios, puede perjudicar tanto la carga como la mantenibilidad.
Buenas prácticas antes de elegir herramienta
Antes de decidir si usar tablas puras, un framework o un editor visual, conviene tener claras algunas reglas básicas:
- Diseñar con estructura simple.
- Usar un ancho de contenido controlado, normalmente centrado.
- Priorizar textos claros y llamadas a la acción visibles.
- No depender únicamente de imágenes para comunicar.
- Trabajar con botones bien definidos y enlaces claros.
- Probar el email en varios clientes y dispositivos.
- Optimizar imágenes y peso general del correo.
- Usar estilos compatibles y evitar experimentos excesivos.
Opciones actuales para maquetar un email
Hoy en día podemos hablar de varios enfoques principales para construir emails HTML. No hay uno universalmente perfecto: depende del proyecto, del perfil del equipo y de la frecuencia con la que se creen plantillas.
1. HTML manual con tablas
Es la opción más tradicional. Consiste en escribir directamente el email en HTML, estructurando el layout con tablas y aplicando estilos con mucho cuidado.
Cuándo encaja bien:
- cuando se busca control absoluto del código,
- cuando se necesita compatibilidad máxima,
- o cuando el equipo ya tiene experiencia previa en maquetación de emails.
Inconveniente principal: el mantenimiento puede volverse pesado si se crean muchas plantillas o variantes.
2. Editores visuales y herramientas externas
Muchas plataformas y editores permiten construir correos mediante bloques visuales. Son útiles para equipos de marketing o para proyectos donde prima la velocidad de producción.
Entre sus ventajas están la rapidez, la facilidad de uso y la posibilidad de delegar parte del trabajo a perfiles no técnicos. Sin embargo, a menudo generan código más pesado y dan menos control fino sobre la salida final.
También existen herramientas específicas para diseño y prueba de emails, así como plataformas de compatibilidad donde se puede consultar qué etiquetas o propiedades están soportadas.
Algunas referencias útiles:
- Can I Email, para consultar compatibilidad de HTML y CSS en clientes de correo.
- Litmus, muy conocida en testing y revisión de campañas.
3. MJML
MJML es una de las herramientas más conocidas dentro del desarrollo de emails. Su propuesta consiste en escribir una sintaxis más sencilla y semántica, que luego se transforma en HTML responsive preparado para email.
En lugar de construir a mano toda la complejidad de tablas y estilos, el desarrollador trabaja con componentes de alto nivel como secciones, columnas, botones o bloques de texto.
Ventajas de MJML:
- reduce bastante la complejidad del HTML final,
- agiliza la creación de layouts responsive,
- mejora la productividad en proyectos con varias plantillas,
- y cuenta con una comunidad y documentación muy consolidadas.
Posible inconveniente: aunque simplifica mucho el trabajo, el desarrollador depende del motor que genera el HTML final, por lo que a veces sigue siendo necesario revisar o ajustar la salida.
Más información: https://mjml.io/
4. React Email
React Email representa una aproximación más moderna, especialmente atractiva para equipos que ya trabajan con React, TypeScript o sistemas de componentes. La idea es crear emails a partir de componentes reutilizables y renderizarlos luego como HTML listo para enviar.
Esto permite tratar el correo como una pieza más del ecosistema front-end: con componentes, props, plantillas reutilizables y una organización más limpia del código.
Por qué está llamando la atención:
- permite trabajar con una mentalidad de componentes,
- facilita la reutilización entre plantillas,
- encaja bien en proyectos modernos con JavaScript o TypeScript,
- y resulta especialmente útil para emails transaccionales generados desde aplicaciones.
Qué hay que tener en cuenta: aunque el desarrollo sea más cómodo, el resultado final sigue siendo un email HTML y, por tanto, sigue sujeto a las limitaciones habituales de los clientes de correo. Es decir, usar React no elimina por arte de magia los problemas de compatibilidad.
Más información:
Entonces, ¿hay que dejar de usar tablas?
No necesariamente. De hecho, en muchos casos la respuesta práctica es no. Aunque hoy existan herramientas más modernas, la estructura final de muchos emails sigue apoyándose, directa o indirectamente, en patrones tradicionales de maquetación.
Lo importante no es demonizar las tablas, sino entender su papel. Si escribes el email a mano, probablemente seguirán siendo una base útil. Si usas MJML o React Email, buena parte de la complejidad acabará resolviéndose igualmente hacia un HTML pensado para soportar las limitaciones del canal.
La clave está en elegir la herramienta que mejor se adapte a tu flujo de trabajo sin perder de vista la compatibilidad.
Qué opción elegir según el tipo de proyecto
Si necesitas máxima compatibilidad y control
La maquetación manual con tablas puede seguir siendo una buena elección, sobre todo si el equipo domina el email HTML clásico.
Si quieres rapidez y un lenguaje más amigable
MJML es una opción muy sólida para simplificar la construcción de emails responsive.
Si tu equipo trabaja con React y componentes
React Email resulta especialmente interesante para centralizar plantillas, reutilizar piezas y mantener una estructura más moderna.
Si el equipo es más de marketing que de desarrollo
Un editor visual o una plataforma especializada puede acelerar mucho la creación de newsletters y campañas recurrentes.
Errores frecuentes al maquetar emails
- Diseñar el correo como si fuera una página web normal.
- Usar demasiadas columnas o estructuras complejas.
- Depender por completo de imágenes para transmitir el mensaje.
- No definir correctamente textos alternativos.
- No probar en varios clientes antes de enviar.
- Confiar demasiado en propiedades CSS modernas sin verificar soporte.
- Olvidar el comportamiento en móvil o en modo oscuro.
- No optimizar el peso de imágenes y recursos.
Recomendaciones finales para maquetadores
Maquetar emails exige paciencia, pruebas y criterio. No siempre gana la opción más moderna, ni tampoco la más antigua. En muchos proyectos, la mejor solución es híbrida: apoyarse en herramientas que aceleran el trabajo, pero sin olvidar los fundamentos del email HTML.
Si estás empezando, conviene entender primero cómo funciona un email construido con tablas. Después, herramientas como MJML o React Email se aprovechan mucho mejor porque ya conoces las limitaciones reales del medio.
Si vienes del mundo React o del desarrollo de aplicaciones, React Email puede resultar una vía muy interesante para integrar los correos dentro del mismo ecosistema del proyecto. Y si tu prioridad es producir emails responsive de forma más rápida, MJML sigue siendo una apuesta muy práctica.
En cualquier caso, la lección principal es clara: maquetar un email no consiste solo en que el diseño quede bonito, sino en que llegue bien, se lea bien y funcione bien en el mayor número posible de clientes.
Recursos externos recomendados
La maquetación de emails ha evolucionado mucho, pero sigue teniendo reglas propias. Las tablas continúan siendo una referencia por compatibilidad, MJML ayuda a simplificar la complejidad técnica y React Email abre una vía moderna para equipos acostumbrados a trabajar con componentes.
La mejor elección dependerá del tipo de proyecto, del nivel técnico del equipo y del equilibrio que busques entre velocidad, mantenimiento y compatibilidad. Lo importante es conocer bien el terreno para escoger la herramienta adecuada en cada caso.