¿Odias los anuncios? Ir Sin publicidad Hoy 

Conversor de MJML a HTML para Correos Responsivos

DesarrolladorTexto

[iotools_mjml_to_responsive_email_html_converter]

Guía

Conversor MJML a HTML de correo electrónico responsive

Conversor de MJML a HTML para Correos Responsivos

Pega el marcado MJML y obtén inmediatamente HTML de correo electrónico responsive y listo para producción, con condiciones de Outlook (MSO), estilos internos y una vista en tiempo real de escritorio y móvil. La compilación se realiza completamente en tu navegador usando el motor oficial de MJML, por lo que tus plantillas nunca abandonan tu máquina.

Cómo Usar

Pega o escribe tu código MJML en el editor de la izquierda (o haz clic Prueba un ejemplo para cargar una plantilla de inicio).
Elige un estilo de salida: Agradable para HTML legible, Minificado para el tamaño más pequeño, o Bruto para el formato predeterminado del motor.
Elige un nivel de validación: Suave muestra problemas sin bloquear, Estricto abandona al encontrar errores, Skip desactiva la validación.
Inspecciona el HTML compilado a la derecha y utiliza el interruptor de dispositivos para ver los diseños en escritorio y móvil.
Haz clic en Copiar HTML para copiar el código, o Descargar .html para guardarlo para tu ESP o cliente de correo.

Características

Soporte completo de la especificación de MJML – secciones mj-section, columnas mj-column, botones mj-button, imágenes mj-image, texto mj-text, separadores mj-divider, atributos mj-head y más.
Salida lista para Outlook – comentarios condicionales de MSO y diseño basado en tablas para clientes de Outlook de escritorio antiguos.
Previsualización en tiempo real – iframe encajado con anchuras de dispositivo de escritorio (600px) y móvil (360px).
Detección de errores y advertencias – mensajes internos con números de línea y nombres de etiquetas afectadas.
Salida agradable, compactada o bruta – elige el formato que coincida con tu editor o canal de envío.
100% del lado del cliente – Tu código MJML y el HTML compilado nunca tocan un servidor.
Copiar y descargar – Copia en un solo clic al portapapeles o guarda como archivo .html independiente.

 Preguntas frecuentes

¿Qué es MJML y por qué se utiliza para correos electrónicos?

MJML (Mailjet Markup Language) es un lenguaje de marcado abierto diseñado para hacer el desarrollo de correos electrónicos responsivos más accesible. Codificar correos electrónicos en HTML por mano es doloroso porque los clientes de correo (especialmente versiones antiguas de Outlook) requieren tablas anidadas, estilos internos y comentarios condicionales de MSO para renderizarse correctamente. MJML ofrece un vocabulario de componentes más alto (mj-section, mj-column, mj-button, mj-image, mj-text) que se compila automáticamente en HTML basado en tablas, dándote una única fuente que se renderiza de forma consistente en clientes modernos y antiguos.
¿Por qué el HTML de correo necesita tablas y estilos internos en lugar de CSS moderno?

Los clientes de correo están en un entorno aislado y reescriben el HTML que reciben. Muchos clientes eliminan estilos, ignoran hojas de estilo externas y solo reconocen un subconjunto limitado de propiedades de CSS. Outlook para Windows utiliza el renderizador de HTML de Microsoft Word, que no tiene soporte para flexbox, grid ni incluso para flotadores. La única primitiva de diseño que se renderiza de forma confiable en todos los lugares es la tabla HTML con atributos de anchura explícita y estilos internos en cada elemento. MJML oculta esta estructura verbosa y propensa a errores detrás de componentes limpios.
¿Qué son los comentarios condicionales de MSO y por qué incluyen los resultados de MJML estos comentarios?

Los comentarios condicionales de MSO son comentarios especiales en HTML del tipo que solo procesa Microsoft Outlook (Windows). Permiten enviar un marcado alternativo para Outlook — por ejemplo, formas en VML (Vector Markup Language) para botones resistentes que se renderizan como rectángulos incluso en el renderizador defectuoso de Outlook. Los resultados compilados de MJML incluyen estos comentarios para que una sola plantilla se adapte de forma suave desde Apple Mail y Gmail hasta Outlook 2007 y versiones posteriores.
¿Qué significa realmente un correo electrónico responsive dada la limitación de CSS en los clientes de correo?

Un correo electrónico responsive suele combinar dos estrategias: un diseño fluido basado en tablas para escritorio (anchura máxima alrededor de 600px, centrado) y un conjunto de consultas CSS que alinean columnas verticalmente y reducen el tamaño de las fuentes en pantallas estrechas. Como algunos clientes ignoran las consultas CSS, MJML emite un diseño que se adapta automáticamente a anchuras comunes mediante tablas basadas en porcentajes, y luego capa sobreposiciones de consultas CSS para los clientes que las reconocen. El resultado es un correo que se ve intencional en un teléfono incluso cuando el soporte de CSS es parcial.
¿Cuál es la diferencia práctica entre la salida agradable y la salida compactada de HTML?

La salida agradable conserva las indentaciones y saltos de línea, lo cual es útil al inspeccionar el marcado, comparar cambios de plantilla o pegar en una revisión de código. La salida compactada elimina espacios en blanco y comentarios para reducir el tamaño del payload — útil porque algunos proveedores de servicios de correo (ESPs) cobran por kilobyte y Gmail trunca los mensajes de aproximadamente 102 KB. Funcionalmente, ambas producen el mismo correo electrónico renderizado; elige la salida agradable al crear y la compactada al enviar.