Crear una newsletter responsive puede parecer sencillo hasta que llega el momento de maquetarla de verdad. En una página web trabajas con CSS moderno, media queries, flexbox, grid y navegadores bastante predecibles. En cambio, cuando diseñas un email, entras en un entorno mucho más delicado: cada cliente de correo interpreta el HTML y el CSS a su manera.
Gmail, Outlook, Apple Mail o Yahoo Mail no siempre se comportan igual. Algunas propiedades CSS funcionan bien en unos clientes y fallan en otros. Además, muchos emails siguen dependiendo de estructuras basadas en tablas para garantizar una visualización aceptable. Por eso, crear un email responsive HTML desde cero puede ser bastante más complejo de lo que parece.
Aquí es donde entra en juego MJML, una herramienta pensada para simplificar la maquetación de emails responsive. En lugar de escribir directamente todo el HTML final, puedes trabajar con una sintaxis más clara, basada en componentes, y dejar que MJML genere el código compatible con email.
Antes de continuar: si todavía no tienes claro qué es esta herramienta o por qué se utiliza tanto en email marketing, te recomiendo leer primero el artículo Qué es MJML y por qué facilita la maquetación de emails responsive. Te ayudará a entender mejor el contexto antes de empezar con este tutorial práctico.
En esta guía vamos a ver cómo crear tu primera newsletter responsive con MJML paso a paso, desde la estructura inicial hasta algunas buenas prácticas para que el resultado sea más limpio, legible y fácil de adaptar.
Qué necesitas antes de crear una newsletter responsive con MJML
Antes de abrir el editor y empezar a escribir etiquetas, conviene aclarar una idea importante: una newsletter no es una página web en miniatura. Aunque utilice HTML, CSS, imágenes y enlaces, sus reglas son diferentes.
En una web puedes apoyarte en muchas propiedades modernas y confiar en que los navegadores actuales las van a interpretar correctamente. En email marketing, en cambio, tienes que pensar en compatibilidad, peso del archivo, legibilidad, estructura, accesibilidad y comportamiento en móvil.
MJML ayuda precisamente porque reduce parte de esa complejidad. En vez de escribir tablas anidadas, estilos inline y condicionales específicos, puedes trabajar con componentes como <mj-section>, <mj-column>, <mj-text>, <mj-image> o <mj-button>.
Después, MJML se encarga de convertir ese marcado en un HTML más preparado para clientes de correo. Esto no significa que puedas olvidarte por completo de las pruebas, pero sí que partes de una base mucho más cómoda.
Herramientas que puedes utilizar
Para crear tu primera newsletter responsive con MJML tienes varias opciones. Puedes usar el editor online de MJML, instalarlo en tu equipo con Node.js o integrarlo en un flujo de trabajo con npm scripts.
Si estás empezando, el editor online puede ser suficiente para probar la sintaxis y entender cómo se comportan los componentes. Si ya trabajas habitualmente con desarrollo web, probablemente te resulte más cómodo instalar MJML en local y compilar tus archivos desde la terminal.
Un flujo básico de instalación podría ser este:
npm install mjmlDespués, podrías compilar un archivo .mjml a HTML con un comando como este:
npx mjml newsletter.mjml -o newsletter.htmlDe esta forma puedes trabajar sobre un archivo más limpio y generar el HTML final cuando lo necesites para pegarlo en tu plataforma de email marketing.
Estructura básica de una newsletter en MJML
Una newsletter responsive suele tener una estructura bastante reconocible. Normalmente incluye un texto de previsualización, una cabecera, un bloque principal, contenido destacado, una llamada a la acción y un footer con información legal o enlace de baja.
La ventaja de MJML es que esta estructura se puede traducir de forma bastante natural a bloques visuales organizados dentro de <mj-body>.
El esqueleto mínimo de una newsletter con MJML
Este sería un ejemplo muy básico para empezar:
<mjml>
<mj-head>
<mj-title>Mi primera newsletter responsive</mj-title>
<mj-preview>Una newsletter sencilla creada con MJML</mj-preview>
</mj-head>
<mj-body background-color="#f5f5f5">
<mj-section background-color="#ffffff" padding="32px">
<mj-column>
<mj-text font-size="24px" font-weight="bold" color="#020101">
Mi primera newsletter responsive
</mj-text>
<mj-text font-size="16px" line-height="1.6" color="#333333">
Hola, esta es una newsletter creada con MJML para verse bien en escritorio y móvil.
</mj-text>
<mj-button background-color="#CC2B5E" color="#ffffff" href="https://tusitio.com">
Leer más
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>Este ejemplo ya contiene las piezas fundamentales de una newsletter sencilla:
<mjml>: etiqueta raíz del documento.<mj-head>: zona para metadatos, estilos globales y vista previa.<mj-preview>: texto que algunos clientes muestran junto al asunto.<mj-body>: cuerpo visual del email.<mj-section>: bloque horizontal de contenido.<mj-column>: columna dentro de una sección.<mj-text>: bloque de texto.<mj-button>: botón de llamada a la acción.
La idea principal es sencilla: tú escribes una estructura más semántica y mantenible, y MJML genera el HTML final necesario para que el email se comporte mejor en diferentes clientes de correo.
Cómo planificar el contenido de tu primera newsletter responsive
Antes de añadir más bloques, conviene detenerse en la estrategia de contenido. Una newsletter no funciona solo porque sea responsive. También necesita tener una jerarquía clara.
El diseño debe ayudar a que la persona entienda rápidamente qué le estás contando, por qué le interesa y qué puede hacer a continuación. Si el mensaje no está claro, el código puede estar perfecto y aun así la newsletter no cumplirá su objetivo.
Define un único objetivo principal
Una buena newsletter suele tener un objetivo dominante. Puede ser llevar tráfico a un artículo, presentar un nuevo servicio, anunciar una promoción, invitar a un evento o compartir novedades de marca.
El problema aparece cuando intentas incluir demasiados objetivos en el mismo email. Si hay muchos mensajes compitiendo entre sí, la persona que recibe la newsletter tiene que hacer más esfuerzo para decidir dónde mirar o en qué enlace hacer clic.
Por eso, para una primera newsletter responsive con MJML, lo ideal es empezar con una estructura sencilla:
- Un título claro.
- Una introducción breve.
- Una imagen o bloque visual si aporta valor.
- Un cuerpo de texto directo.
- Un botón de acción principal.
- Un cierre breve.
Esta estructura permite que el email sea fácil de leer, fácil de escanear y más sencillo de adaptar a móvil.
Piensa primero en móvil
Aunque MJML facilite la adaptación responsive, las decisiones de diseño siguen siendo tuyas. Por eso es importante pensar desde el principio en pantallas pequeñas.
En móvil, una newsletter debe leerse sin esfuerzo. Los titulares tienen que ser claros, los párrafos no deberían ser demasiado largos y los botones deben tener un tamaño cómodo para pulsar con el dedo.
También conviene evitar composiciones demasiado complejas. Las columnas pueden funcionar bien en escritorio, pero en móvil suelen apilarse. Si cada bloque no tiene sentido por sí mismo, la lectura puede volverse confusa.
Un buen email se escanea antes de leerse
Muchas personas no leen una newsletter de arriba abajo. Primero la escanean. Miran el asunto, el preheader, el título principal, algún elemento visual, los subtítulos y el botón.
Por eso, cada bloque debería responder a una pregunta concreta:
- ¿De qué trata este email?
- ¿Por qué debería importarme?
- ¿Qué puedo hacer ahora?
- ¿Dónde tengo que hacer clic?
Si estas respuestas no están claras, el diseño puede resultar atractivo, pero la newsletter no será tan efectiva.
Ejemplo completo de newsletter responsive con MJML
Ahora vamos a crear una newsletter algo más realista. Imaginemos que quieres enviar un email para compartir un nuevo artículo de tu blog sobre MJML.
<mjml>
<mj-head>
<mj-title>Nuevo artículo sobre MJML</mj-title>
<mj-preview>Aprende a crear tu primera newsletter responsive con MJML.</mj-preview>
<mj-attributes>
<mj-all font-family="Arial, sans-serif" />
<mj-text color="#333333" font-size="16px" line-height="1.6" />
<mj-button border-radius="8px" font-size="16px" font-weight="bold" />
</mj-attributes>
</mj-head>
<mj-body background-color="#f5f5f5">
<mj-section background-color="#ffffff" padding="24px 32px 16px">
<mj-column>
<mj-text font-size="14px" color="#753A88" font-weight="bold">
Marta González · Desarrollo web
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" padding="16px 32px 24px">
<mj-column>
<mj-text font-size="28px" line-height="1.3" font-weight="bold" color="#020101">
Cómo crear tu primera newsletter responsive con MJML
</mj-text>
<mj-text>
Si alguna vez has intentado maquetar un email responsive a mano, sabrás que no siempre se comporta como una web normal. Por eso MJML puede ayudarte a crear newsletters más limpias, mantenibles y adaptadas a móvil.
</mj-text>
<mj-button background-color="#CC2B5E" color="#ffffff" href="https://martagonzalez.dev/blog/como-crear-tu-primera-newsletter-responsive-con-mjml/">
Leer el artículo completo
</mj-button>
</mj-column>
</mj-section>
<mj-section background-color="#F8E0EA" padding="24px 32px">
<mj-column>
<mj-text font-size="20px" font-weight="bold" color="#020101">
Qué aprenderás en esta guía
</mj-text>
<mj-text>
Verás cómo funciona la estructura básica de MJML, qué componentes necesitas para empezar y qué buenas prácticas conviene aplicar antes de exportar el HTML final de tu newsletter.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" padding="24px 32px">
<mj-column>
<mj-text font-size="18px" font-weight="bold" color="#020101">
Consejo rápido
</mj-text>
<mj-text>
No empieces diseñando una newsletter demasiado compleja. Primero crea una versión sencilla, comprueba que se lee bien en móvil y después añade bloques secundarios solo si aportan valor.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#020101" padding="24px 32px">
<mj-column>
<mj-text color="#ffffff" font-size="13px" line-height="1.5">
Recibes este email porque te has suscrito a las novedades del blog.
Puedes darte de baja en cualquier momento.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>Este ejemplo ya se parece mucho más a una newsletter real. Tiene identidad, título, introducción, CTA, bloque destacado, consejo adicional y footer. No es una estructura recargada, pero sí suficiente para comunicar un mensaje con claridad.
Si quieres profundizar en la lógica que hay detrás de estos componentes, puedes complementar esta guía con el artículo sobre qué es MJML y cómo facilita la maquetación de emails responsive, donde se explica mejor por qué esta herramienta resulta tan útil frente a la maquetación manual de emails.
Buenas prácticas para una newsletter responsive con MJML
Crear el archivo MJML es solo una parte del proceso. Para que la newsletter funcione bien, también tienes que cuidar la experiencia de lectura, la accesibilidad y la compatibilidad.
Utiliza una anchura segura
En email marketing es habitual trabajar con un ancho aproximado de 600 píxeles para el contenedor principal. Esta medida ayuda a mantener una lectura cómoda en escritorio y facilita la adaptación posterior a móvil.
MJML ya está pensado para trabajar con convenciones habituales en email, pero aun así conviene evitar diseños excesivamente anchos o estructuras con demasiadas columnas.
En una primera newsletter, menos suele ser mejor. Una sección principal, una llamada a la acción y uno o dos bloques secundarios pueden ser más efectivos que una composición demasiado larga.
Cuida el texto alternativo de las imágenes
Si incluyes imágenes en tu newsletter, no dependas de ellas para comunicar todo el mensaje. Algunos clientes de correo pueden bloquearlas por defecto o cargarlas con retraso.
Por eso es importante usar el atributo alt de forma descriptiva:
<mj-image
src="https://tusitio.com/imagen-newsletter.jpg"
alt="Ilustración sobre newsletter responsive creada con MJML"
/>El texto alternativo ayuda a contextualizar la imagen cuando no se carga y mejora la accesibilidad del email.
No abuses de los botones
Una newsletter puede tener varios enlaces, pero debería tener una acción principal muy clara. Si todos los botones tienen el mismo peso visual, ninguno destaca realmente.
Una buena práctica es reservar el botón principal para la acción más importante y utilizar enlaces de texto para acciones secundarias. Así ayudas a que la persona entienda qué esperas que haga después de leer el email.
Revisa el preheader
El preheader es el texto de vista previa que muchos clientes de correo muestran junto al asunto. Es una pieza pequeña, pero puede influir mucho en la apertura del email.
Un preheader genérico como este aporta poco:
<mj-preview>Newsletter de marzo</mj-preview>En cambio, este otro resulta más concreto:
<mj-preview>Aprende a crear una newsletter responsive con MJML paso a paso.</mj-preview>La diferencia está en que el segundo anticipa el valor del contenido y refuerza la promesa del asunto.
Errores comunes al crear tu primera newsletter con MJML
Aunque MJML simplifica mucho la maquetación, hay algunos errores habituales que conviene evitar desde el principio.
Tratar el email como si fuera una landing page
Una newsletter no debería tener la misma densidad visual que una página de venta completa. La persona que recibe el email está dentro de su bandeja de entrada, probablemente revisando mensajes de forma rápida.
Por eso conviene reducir la fricción. Menos bloques, menos mensajes simultáneos y una llamada a la acción más clara suelen funcionar mejor que una newsletter demasiado cargada.
No probar el HTML final
MJML genera HTML responsive, pero eso no significa que debas enviar la newsletter sin revisarla. Siempre conviene hacer pruebas antes del envío real.
Revisa especialmente cómo se ve el email en Gmail, Outlook, Apple Mail y en móvil. Comprueba también el modo oscuro, la carga de imágenes, los enlaces, el texto del botón y el footer.
El objetivo no es buscar la perfección visual absoluta en todos los clientes, sino asegurarte de que el mensaje se entiende, se puede leer bien y la acción principal funciona.
Usar imágenes demasiado pesadas
Las imágenes grandes pueden ralentizar la carga del email y empeorar la experiencia, sobre todo en móvil. Además, si el contenido depende demasiado de una imagen, el mensaje puede perder sentido cuando esa imagen no se muestra.
Lo recomendable es optimizar las imágenes antes de subirlas, utilizar dimensiones adecuadas y acompañarlas siempre con texto suficiente.
Olvidar la accesibilidad
Una newsletter responsive también debería ser accesible. No basta con que se adapte al móvil. Tiene que poder leerse con comodidad.
Algunas pautas básicas son utilizar buen contraste entre texto y fondo, elegir tamaños de fuente legibles, escribir botones descriptivos y evitar enlaces poco claros como “haz clic aquí”.
También es importante no comunicar información únicamente mediante color. Si algo es importante, debe quedar claro también por el texto o por la estructura del contenido.
Cómo pasar de MJML a HTML para enviar tu newsletter
Cuando termines tu archivo .mjml, tendrás que convertirlo a HTML. Ese será el código que podrás pegar o importar en tu herramienta de email marketing.
Si trabajas desde la terminal, el proceso puede ser tan sencillo como este:
npx mjml newsletter.mjml -o newsletter.htmlDespués puedes abrir el archivo newsletter.html, revisar el resultado y llevar ese código a la plataforma desde la que vayas a enviar tu campaña.
Checklist antes de enviar tu newsletter
Antes de enviar tu primera newsletter responsive con MJML, revisa esta lista:
- El asunto es claro y concreto.
- El preheader complementa el asunto.
- El diseño se entiende bien en móvil.
- El CTA principal destaca sin resultar invasivo.
- Todos los enlaces funcionan correctamente.
- Las imágenes tienen texto alternativo.
- El email no depende únicamente de imágenes.
- El footer incluye la información necesaria.
- El HTML final se ha probado antes del envío.
- La newsletter tiene un objetivo principal bien definido.
Esta revisión puede parecer básica, pero evita muchos errores de última hora. En email marketing, los pequeños detalles importan mucho porque, una vez enviado el correo, ya no puedes corregirlo como harías con una página web.
Preguntas frecuentes sobre crear una newsletter responsive con MJML
¿MJML sustituye al HTML en email marketing?
No exactamente. MJML no sustituye al HTML final, sino que te permite escribir una versión más sencilla y legible que después se compila a HTML. Es decir, tú trabajas con MJML, pero la herramienta genera el email responsive HTML que utilizarás en tu plataforma de envío.
¿Necesito saber programar para usar MJML?
No necesitas ser una persona experta, pero sí ayuda tener nociones básicas de HTML y CSS. MJML es más accesible que maquetar emails responsive directamente con tablas, pero sigue siendo una herramienta técnica. Si entiendes la lógica de etiquetas, atributos, secciones y columnas, puedes empezar con ejemplos sencillos e ir avanzando poco a poco.
¿Puedo usar MJML para cualquier tipo de newsletter?
Sí, puedes utilizar MJML para newsletters editoriales, emails promocionales, comunicaciones internas, emails transaccionales o avisos automatizados. Aun así, cada tipo de email necesita una estructura diferente. Una newsletter de blog no debería plantearse igual que una campaña comercial o un email de recuperación de carrito.
Una última idea antes de crear tu primera newsletter
Crear tu primera newsletter responsive con MJML es una forma muy práctica de entrar en el mundo del email marketing sin tener que pelearte desde el primer minuto con tablas anidadas, estilos inline y comportamientos extraños entre clientes de correo.
MJML te permite trabajar con una sintaxis más limpia, ordenar mejor tus bloques y generar un HTML más preparado para email. Sin embargo, la herramienta no lo hace todo por ti.
La calidad de una newsletter depende también de tus decisiones de comunicación: qué mensaje priorizas, cómo estructuras el contenido, qué acción quieres que realice la persona que recibe el email y cómo reduces la fricción para que pueda hacerlo.
Una buena newsletter no es la que tiene más bloques, más botones o más elementos visuales. Es la que se entiende rápido, se lee bien en móvil y acompaña a la persona hacia una acción clara.
Por eso, si estás empezando, mi recomendación es sencilla: crea una primera versión mínima, pruébala, ajústala y aprende de cada envío. Y si quieres reforzar la base antes de seguir avanzando, puedes volver al artículo sobre qué es MJML y por qué facilita la maquetación de emails responsive para entender mejor cómo encaja esta herramienta dentro de un flujo de trabajo de email marketing.