Maquetar un email responsive puede parecer, al principio, una tarea parecida a crear una pequeña página web: tienes una estructura, imágenes, textos, botones, enlaces y una serie de estilos visuales que quieres respetar. Sin embargo, cuando empiezas a llevar ese diseño a código, aparece una realidad bastante incómoda: el email no funciona igual que la web.
En una página web moderna puedes apoyarte en CSS Grid, Flexbox, hojas de estilo externas, JavaScript, componentes reutilizables y un soporte bastante estable entre navegadores. En cambio, en la maquetación de emails, cada cliente de correo interpreta el HTML y el CSS a su manera. Gmail, Outlook, Apple Mail, Yahoo, Thunderbird o las apps móviles pueden comportarse de forma diferente ante el mismo código.
Aquí es donde entra en juego MJML, una herramienta pensada para simplificar la creación de emails responsive sin tener que pelearte línea por línea con todas las rarezas del HTML para email.
Dicho de forma sencilla: MJML te permite escribir una estructura más limpia, semántica y legible, y después la convierte en el HTML complejo que necesitan muchos clientes de correo.
Qué es MJML
MJML significa Mailjet Markup Language. Es un lenguaje de marcado específico para crear emails responsive de forma más sencilla. No sustituye al HTML en el resultado final, sino que actúa como una capa intermedia.
Tú escribes una estructura más clara, como esta:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>
Hola, este es mi primer email responsive con MJML.
</mj-text>
<mj-button href="https://martagonzalez.dev">
Leer más
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>Después, MJML compila ese código y lo transforma en un HTML mucho más extenso, con tablas, estilos inline, estructuras específicas y ajustes necesarios para que el email se visualice correctamente en diferentes clientes de correo.
La gran ventaja es que no tienes que escribir todo ese HTML manualmente. MJML se encarga de generar buena parte de la estructura técnica que normalmente hace que la maquetación de emails sea lenta, repetitiva y propensa a errores.
MJML no es HTML tradicional
Aunque visualmente se parece a HTML porque utiliza etiquetas, MJML tiene sus propios componentes: mj-section, mj-column, mj-text, mj-image, mj-button, mj-divider, mj-wrapper, entre muchos otros.
Estas etiquetas están pensadas para describir la intención del diseño:
mj-sectiondefine una sección horizontal del email.mj-columnpermite dividir una sección en columnas.mj-textañade texto.mj-imageinserta imágenes.mj-buttoncrea botones compatibles con email.mj-spacerañade separación vertical.
La idea se parece bastante al trabajo por componentes que usamos habitualmente en desarrollo frontend. Si te interesa este enfoque más estructurado, también puedes profundizar en cómo organizar mejor tus flujos de trabajo con herramientas como Visual Studio Code en el artículo Atajos y trucos para usar Visual Studio Code desde la terminal en Mac.
Por qué maquetar emails responsive es tan complicado
Para entender por qué MJML resulta tan útil, primero conviene comprender el problema que intenta resolver.
La maquetación de emails no sigue las mismas reglas que el desarrollo web moderno. En web, si quieres crear un layout responsive, puedes usar media queries, unidades flexibles, CSS Grid, Flexbox, variables CSS, imágenes adaptativas y componentes reutilizables. En email, muchas de esas herramientas tienen soporte limitado, parcial o directamente inconsistente.
Por eso, un email puede verse perfecto en un cliente de correo y romperse en otro.
El problema de los clientes de correo
Cuando maquetas una web, sueles pensar en navegadores: Chrome, Firefox, Safari o Edge. Aunque cada uno tiene sus particularidades, el soporte de estándares web suele ser razonablemente estable.
En email, el escenario es más complejo. Un mismo correo puede abrirse en Gmail desde navegador, Gmail en Android, Gmail en iOS, Outlook de escritorio, Outlook web, Apple Mail, Yahoo Mail, Thunderbird o incluso clientes corporativos antiguos.
Cada uno puede aplicar reglas distintas. Algunos respetan determinadas propiedades CSS. Otros las ignoran. Algunos eliminan partes del <head>. Otros gestionan las media queries de forma parcial.
Esto obliga a trabajar con mucho más cuidado. No basta con que el diseño se vea bien en una previsualización inicial: también hay que comprobar que la experiencia se mantiene de forma razonable en distintos dispositivos y clientes de correo.
El regreso de las tablas
Una de las cosas que más sorprende cuando vienes del desarrollo web es descubrir que muchos emails todavía se maquetan con tablas.
Sí, tablas.
No porque sean modernas, elegantes o semánticamente ideales, sino porque siguen siendo una de las formas más estables de conseguir layouts compatibles en clientes de correo. Especialmente cuando Outlook entra en escena, las tablas continúan siendo una herramienta habitual para controlar estructuras, anchos, alineaciones y columnas.
Esto hace que el HTML final de un email pueda ser bastante difícil de leer. Incluso un diseño aparentemente sencillo, con una cabecera, una imagen, un bloque de texto y un botón, puede convertirse en muchas líneas de código repetitivo.
Aquí MJML aporta una ventaja clara: te permite escribir con una sintaxis más limpia mientras genera por debajo el HTML necesario para email.
Cómo funciona MJML en la práctica
MJML funciona mediante un proceso de compilación. Tú creas un archivo .mjml, escribes tu estructura con componentes MJML y después generas el HTML final.
Ese HTML es el que puedes utilizar en una plataforma de email marketing, integrar en un sistema transaccional o adaptar a una plantilla concreta.
Estructura básica de un email con MJML
Un documento MJML suele tener esta estructura:
<mjml>
<mj-head>
<mj-title>Email de ejemplo</mj-title>
<mj-preview>Texto de previsualización del email</mj-preview>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text>
Contenido principal del email.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>La parte mj-head permite definir información general, como el título, el texto de previsualización, estilos globales o atributos reutilizables. La parte mj-body contiene el contenido visual del email.
Esta separación ayuda a trabajar de forma más ordenada, sobre todo cuando la plantilla empieza a crecer.
Un ejemplo sencillo de layout responsive
Imagina una newsletter con dos columnas: a la izquierda una imagen y a la derecha un texto con un botón.
En HTML tradicional para email, esto puede implicar tablas anidadas, anchos concretos, estilos inline y condiciones específicas para Outlook. En MJML, la estructura podría verse así:
<mj-section background-color="#F8E0EA" padding="32px">
<mj-column>
<mj-image src="imagen.jpg" alt="Ejemplo de email responsive" />
</mj-column>
<mj-column>
<mj-text font-size="20px" font-weight="bold">
Aprende a crear emails responsive
</mj-text>
<mj-text font-size="16px" line-height="1.6">
Con MJML puedes crear campañas más consistentes sin escribir todo el HTML manualmente.
</mj-text>
<mj-button href="https://martagonzalez.dev" background-color="#CC2B5E">
Leer el artículo
</mj-button>
</mj-column>
</mj-section>En escritorio, esas columnas pueden mostrarse una al lado de la otra. En móvil, MJML puede apilarlas para mejorar la lectura. Esta es una de las razones por las que resulta tan interesante para crear emails responsive sin empezar desde cero cada vez.
Ventajas de utilizar MJML
MJML no elimina por completo la necesidad de entender cómo funciona el email HTML, pero sí reduce mucho la fricción inicial. Para proyectos donde se envían newsletters, campañas promocionales, emails transaccionales o comunicaciones periódicas, puede ahorrar tiempo y mejorar la consistencia.
1. Sintaxis más legible
La primera gran ventaja de MJML es su legibilidad.
Un email escrito directamente en HTML puede volverse enorme muy rápido. Si además tienes que añadir estilos inline, tablas, condicionales y estructuras de compatibilidad, el código deja de ser cómodo de mantener.
MJML permite trabajar con una estructura más declarativa:
<mj-button href="#">Comprar ahora</mj-button>En lugar de tener que escribir manualmente toda la estructura de tablas y estilos necesaria para que ese botón se comporte razonablemente bien en diferentes clientes de correo.
2. Facilita la creación de emails responsive
El objetivo principal de MJML es ayudar a crear emails responsive. Es decir, emails que se adapten mejor a distintos tamaños de pantalla.
Esto es fundamental porque muchas personas leen el correo desde el móvil. Si el email tiene texto demasiado pequeño, columnas que no se adaptan, botones difíciles de pulsar o imágenes que desbordan el ancho de pantalla, la experiencia empeora.
Este punto conecta directamente con la usabilidad. Un email no solo debe verse bien: debe entenderse rápido, facilitar la lectura y guiar hacia una acción clara. Si quieres profundizar en este enfoque, puedes leer también Qué es la usabilidad web: claves para facilitar la navegación de usuario.
3. Reduce errores repetitivos
Cuando maquetas emails a mano, hay muchos pequeños detalles que pueden fallar:
- Un ancho mal calculado.
- Un padding que Outlook interpreta de forma diferente.
- Una imagen sin ancho definido.
- Un botón que no se centra.
- Un bloque que se rompe en móvil.
- Una media query que no se aplica donde esperabas.
MJML no garantiza perfección absoluta en todos los clientes, pero sí ayuda a evitar muchos errores comunes porque parte de componentes ya pensados para email.
4. Mejora la reutilización de plantillas
Otra ventaja importante es que puedes crear bloques reutilizables.
Por ejemplo, puedes tener una estructura base para newsletters con cabecera, hero principal, bloque de contenido, llamada a la acción, artículos destacados y footer. A partir de ahí, solo cambias textos, imágenes, enlaces y colores.
Esto resulta especialmente útil si trabajas con campañas frecuentes o si necesitas mantener una identidad visual coherente.
5. Es más amable para quien viene del desarrollo frontend
Si ya tienes experiencia con HTML y CSS, MJML resulta bastante intuitivo. No tienes que aprender una lógica completamente ajena, sino una sintaxis específica orientada al email.
Para una persona acostumbrada a componentes, secciones, columnas y atributos de estilo, MJML se siente más cercano que escribir tablas anidadas manualmente.
Además, te permite seguir pensando en estructura, jerarquía y experiencia de usuario, algo esencial tanto en páginas web como en emails.
Limitaciones de MJML que conviene conocer
Aunque MJML facilita mucho el trabajo, no conviene presentarlo como una solución mágica. Sigue habiendo límites.
MJML no elimina la necesidad de testear
Un email debería probarse antes de enviarse. Especialmente si forma parte de una campaña importante, un flujo de venta, un lanzamiento o una comunicación transaccional.
Aunque MJML genere HTML responsive, los clientes de correo siguen teniendo diferencias. Por eso, después de compilar tu MJML a HTML, sigue siendo recomendable probar el resultado en distintos entornos.
El objetivo realista no es que el email se vea exactamente igual en todas partes. El objetivo es que sea legible, funcional y coherente en los clientes principales para tu audiencia.
No todo lo que haces en web sirve en email
Este punto es clave.
MJML facilita la maquetación, pero el medio sigue siendo el email. Eso significa que no deberías plantear un email como si fuera una landing page moderna con animaciones complejas, JavaScript, layouts avanzados o interacciones sofisticadas.
En email conviene priorizar la claridad, la compatibilidad, el contraste, el peso razonable, los botones fáciles de pulsar y una jerarquía visual muy clara.
También es importante pensar en accesibilidad. Un email debería tener textos legibles, enlaces comprensibles, buen contraste y alternativas para las imágenes. Si este tema te interesa, puedes ampliar con el artículo La importancia de la accesibilidad web: haciendo Internet accesible para todos.
Puede generar HTML extenso
El HTML resultante de MJML puede ser bastante largo. Esto es normal, porque está generando estructuras compatibles con email.
No deberías valorar MJML por si el HTML final es bonito de leer, sino por si el archivo fuente MJML es mantenible y si el resultado renderiza correctamente.
La ventaja está en trabajar sobre una fuente más limpia y delegar en MJML la parte más repetitiva del marcado final.
MJML frente a maquetar emails a mano
La pregunta lógica es: ¿merece la pena usar MJML o es mejor aprender a maquetar emails directamente con HTML y CSS?
La respuesta depende del contexto.
Si estás aprendiendo desde cero cómo funciona el email HTML, puede ser útil entender las bases: tablas, estilos inline, imágenes, anchos, media queries, compatibilidad y limitaciones. Ese conocimiento te ayudará incluso cuando uses MJML.
Pero si necesitas producir emails responsive de forma eficiente, MJML puede ser una opción muy práctica.
Cuándo tiene sentido usar MJML
MJML tiene mucho sentido cuando necesitas crear newsletters recurrentes, mantener una plantilla base, trabajar con emails transaccionales, reducir errores de compatibilidad o entregar HTML final para una plataforma de email marketing.
También es una buena opción si estás creando un sistema interno de plantillas o si quieres documentar componentes visuales de email para reutilizarlos.
En proyectos donde el contenido se repite con frecuencia, trabajar con una estructura base puede ahorrarte mucho tiempo y ayudarte a mantener una identidad visual más consistente.
Cuándo quizá no necesitas MJML
Puede que no lo necesites si solo vas a crear un email muy puntual y extremadamente simple, o si ya utilizas un editor visual dentro de una plataforma de email marketing y no necesitas tocar código.
También puede no ser ideal si tu equipo ya tiene un sistema propio de plantillas HTML muy probado y mantenido.
Aun así, incluso en esos casos, MJML puede servir para prototipar más rápido y entender mejor la estructura de una plantilla responsive.
Buenas prácticas para crear emails responsive con MJML
Usar MJML no significa olvidarse de las buenas prácticas. Al contrario: cuanto mejor entiendas el diseño para email, mejores resultados obtendrás.
Diseña primero para la lectura
Un email no se consume igual que una página de blog. La persona suele revisarlo rápido, muchas veces desde el móvil y en medio de otras tareas.
Por eso, antes de pensar en efectos visuales, conviene hacerse algunas preguntas:
- ¿Se entiende el mensaje principal en pocos segundos?
- ¿El título es claro?
- ¿El botón principal destaca?
- ¿El texto se puede leer cómodamente?
- ¿La imagen aporta información o solo decora?
- ¿El email tiene una única acción principal?
Un buen email responsive no es solo el que se adapta al ancho de pantalla. Es el que reduce la carga cognitiva y ayuda a tomar una decisión sin esfuerzo.
Esta idea también se puede aplicar al diseño web en general. Por eso, si estás trabajando contenidos, interfaces o landings, puede resultarte útil leer Por qué diseñar primero lo esencial mejora la experiencia de usuario.
Mantén una estructura sencilla
En MJML es fácil crear secciones, columnas y bloques. Pero no conviene abusar.
Para muchos emails, una estructura sencilla funciona mejor:
- Logo o cabecera.
- Título principal.
- Texto introductorio.
- Imagen o bloque destacado.
- CTA principal.
- Contenido secundario.
- Footer.
Cuantas más columnas, variaciones y bloques añadas, más posibilidades hay de que algo se complique en clientes de correo concretos.
Cuida los botones y los enlaces
Los botones son uno de los elementos más importantes en un email. Si quieres que la persona lea un artículo, confirme una cuenta, compre un producto o descargue un recurso, el CTA debe ser claro.
Con MJML puedes usar mj-button, pero deberías prestar atención al texto, al contraste, al tamaño en móvil, al espaciado alrededor y al enlace final.
Un botón que dice “Leer más” puede funcionar, pero uno que dice “Leer la guía completa” aporta más contexto. Lo mismo ocurre con los enlaces dentro del texto: es mejor usar textos descriptivos que fórmulas genéricas. Sobre este tema, te recomiendo revisar Links accesibles: “haz click aquí” es un crimen.
No dependas solo de las imágenes
Muchos clientes de correo pueden bloquear imágenes por defecto o cargarlas con retraso. Por eso, el mensaje principal no debería depender exclusivamente de una imagen.
Incluye siempre texto real, no solo texto dentro de imágenes. Añade atributos alt descriptivos y asegúrate de que el email sigue teniendo sentido aunque las imágenes no se muestren.
Revisa el peso y la longitud
Un email demasiado pesado puede cargar lento o incluso recortarse en algunos clientes. Aunque MJML facilite la estructura, debes seguir cuidando el contenido final.
Comprime imágenes, evita bloques innecesarios, no añadas estilos excesivos y mantén el mensaje enfocado. En email, menos suele ser más.
MJML en español: por qué puede ser una buena puerta de entrada
Si estás buscando información sobre MJML en español, probablemente vienes de uno de estos escenarios: quieres aprender a crear emails responsive desde cero, te has cansado de pelearte con tablas HTML, necesitas adaptar diseños de newsletter a código o trabajas con marketing, frontend o automatizaciones.
MJML puede ser una muy buena puerta de entrada porque te permite entender la lógica de la maquetación de emails sin empezar directamente por el lado más áspero.
En lugar de escribir una estructura enorme de tablas desde el minuto uno, puedes empezar con componentes comprensibles. Después, poco a poco, puedes ir revisando el HTML compilado para entender qué está generando MJML por debajo.
Este enfoque es especialmente útil si ya tienes base de HTML y CSS, pero todavía no has trabajado en profundidad con email HTML.
Ejemplo de plantilla básica con MJML
A continuación tienes una estructura sencilla para una newsletter introductoria:
<mjml>
<mj-head>
<mj-title>Newsletter responsive con MJML</mj-title>
<mj-preview>Aprende a crear emails responsive de forma más sencilla.</mj-preview>
<mj-attributes>
<mj-all font-family="Arial, sans-serif" />
<mj-text font-size="16px" line-height="1.6" color="#020101" />
<mj-button background-color="#CC2B5E" color="#ffffff" border-radius="6px" />
</mj-attributes>
</mj-head>
<mj-body background-color="#F5F5F5">
<mj-section background-color="#ffffff" padding="32px">
<mj-column>
<mj-text font-size="24px" font-weight="bold">
Qué es MJML y por qué deberías conocerlo
</mj-text>
<mj-text>
MJML facilita la creación de emails responsive mediante una sintaxis más clara y componentes pensados para email.
</mj-text>
<mj-button href="https://martagonzalez.dev">
Leer artículo completo
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>Esta plantilla es básica, pero muestra la idea principal: defines una estructura clara, aplicas algunos estilos globales y trabajas con componentes específicos para email.
Errores comunes al empezar con MJML
Aunque MJML sea más amable que el HTML para email escrito a mano, hay algunos errores frecuentes que conviene evitar.
Creer que todo será idéntico en todos los clientes
La consistencia absoluta en email es difícil. La consistencia funcional, en cambio, sí es una meta razonable.
Tu email no tiene que verse milimétricamente igual en todos los clientes, pero sí debe ser comprensible, legible y funcional en los entornos principales.
Diseñar emails demasiado complejos
A veces se intenta llevar al email una lógica visual propia de una web completa. Eso puede generar problemas.
Un email debería tener una jerarquía clara y un objetivo concreto. Si necesitas explicar muchas cosas, quizá lo mejor sea llevar a la persona a una landing o a un artículo, no meterlo todo dentro del correo.
No revisar el HTML final
Aunque trabajes en MJML, el resultado final será HTML. Conviene revisarlo, probarlo y asegurarse de que se integra bien con la herramienta desde la que vas a enviar el email.
Algunas plataformas pueden modificar el código, añadir etiquetas propias o interpretar ciertos estilos de forma particular.
Preguntas frecuentes sobre MJML
¿Qué es MJML?
MJML es un lenguaje de marcado creado para facilitar la creación de emails responsive. Permite escribir una estructura más limpia mediante componentes como mj-section, mj-column, mj-text, mj-image o mj-button, y después compilar ese código a HTML compatible con email.
¿MJML sirve para crear emails responsive?
Sí. De hecho, ese es uno de sus principales objetivos. MJML ayuda a crear estructuras que se adaptan mejor a distintos tamaños de pantalla, especialmente mediante secciones y columnas que pueden reorganizarse en móvil.
¿Necesito saber HTML y CSS para usar MJML?
No necesitas ser experta en email HTML para empezar, pero sí es recomendable conocer las bases de HTML y CSS. MJML simplifica mucho la maquetación, pero entender conceptos como estructura, jerarquía, estilos, imágenes, enlaces y responsive design te ayudará a crear mejores emails.
MJML no hace magia, pero sí reduce mucho la fricción
MJML no convierte la maquetación de emails en algo perfecto ni elimina todas las peculiaridades de los clientes de correo. El email sigue siendo un entorno complejo, con reglas propias y muchas diferencias respecto al desarrollo web moderno.
Pero precisamente por eso MJML resulta tan valioso.
En lugar de obligarte a escribir desde cero estructuras largas, repetitivas y difíciles de mantener, te permite trabajar con una sintaxis más clara y orientada a componentes. Esto reduce errores, acelera el desarrollo y hace que crear emails responsive sea una tarea más accesible.
Si estás empezando con la maquetación de emails, MJML puede ser una excelente herramienta para entender cómo se estructuran las plantillas, cómo se organizan las columnas y cómo se prepara un email para verse correctamente en distintos dispositivos.
La clave está en usarlo con criterio: estructura sencilla, buen contenido, diseño claro, pruebas reales y una mentalidad adaptada al medio. Porque un buen email no es el más complejo, sino el que llega, se entiende y funciona.