MJML: ¡Creamos un nuevo lenguaje de código abierto para codificar emails!

Cómo empezó todo

Hemos ayudado a empresas a mandar más de 20 mil millones de correos electrónicos en los últimos cinco años, siempre con el mismo objetivo en mente: la entregabilidad. Es vital que los correos electrónicos enviados por nuestros clientes lleguen a ojos de sus suscriptores, sobretodo si tenemos en cuenta el impacto directo que la entregabilidad tiene en el retorno sobre la inversión (ROI, por sus siglas en inglés).

Además de la entregabilidad, otro de los elementos indispensables para lograr implicación es la experiencia de los usuarios. En un mundo en el que el 50% de los correos electrónicos son leídos desde plataformas móviles, crear mensajes responsivos es cada vez más importante. Por eso en 2015 lanzamos Passport, una herramienta con función de “arrastrar y soltar” que facilita aún más a nuestros usuarios la creación de correos electrónicos responsivos.

De cara al usuario, Passport ofrece una forma rápida de crear emails de forma sencilla, simplemente arrastrando y soltando los elementos, pero en las entrañas de la herramienta, un motor convierte esas acciones en una plantilla HTML responsiva. Técnicamente hablando, el correo electrónico es “descrito” al motor en JSON y luego el motor lo convierte en un código HTML responsivo. 

No tardamos en darnos cuenta de que este motor podía tener un efecto aún más potente fuera de Passport. ¿Qué tal si ponemos la esencia de la herramienta en manos de los usuarios? ¿Qué tal si les dejamos hablar directamente con el motor? ¡Pues eso es lo que decidimos hacer! Y, para hacerlo aún más fácil de usar, decidimos reemplazar la descripción JSON con un lenguaje de marcas, para que sea casi como HTML. De este modo, los principios son conocidos (tanto como el archiconocido HTML), pero el código es responsivo por defecto, semánticos y sin quebraderos de cabeza. Hemos creado etiquetas como <mj-section> y <mj-column> que simplifican y hacen más rápido el proceso de diseñar emails tal y como los quieres.

De un lenguaje de marcas a una biblioteca de componentes

El correo electrónico tiene una gran variedad de usos: resúmenes semanales, emails de bienvenida, facturas… y muchos más. Aunque no es posible resumir todos los tipos de campañas por correo electrónico diferentes, la estructura del contenido es muy similar. La esencia del correo electrónico responsivo está en la disposición a una columna. Sin embargo, al construirlo con HTML puede alargarse, volverse repetitivo y, sinceramente, convertirse en un quebradero de cabeza.

Echemos un vistazo a esta factura, por ejemplo. En el mejor de los casos, tendremos algo así:

La buena noticia es que el motor de MJML se basa en React.js, que permite usar y crear componentes. ¿Ves lo que hemos hecho? Sí, MJML te permite reemplazar ese código tan aterrador de ahí arriba con:

Además, todos los códigos HTML generados seguirán los estándares de los clientes de correo electrónico más populares.

Devolviéndole algo a la comunidad

Al fin y al cabo, no habríamos sido capaces de construir MJML sin lo que hemos aprendido de vosotros, nuestra comunidad. Guardarnos esa tecnología para nosotros mismos no habría sido justo. Por eso hicimos de MJML un lenguaje de código abierto bajo licencia MIT, para que la comunidad pueda ayudar a desarrollar el potente motor que lleva viviendo dentro de Passport un año. La licencia MIT es increíblemente abierta y sencilla. A diferencia de la licencia GPL, te permite usar MJML en una aplicación mayor sin tener que hacer toda la aplicación de código abierto.

Esto significa que puedes usar MJML para diseñar correos electrónicos HTML o incluso integrar el motor MJML en un producto de tu elección, pero también puedes seguir ayudándonos a mejorarlo y desarrollarlo. Si quieres saber más sobre cómo funciona MJML, pásate por la página de documentación.

Para hacerlo aún mejor, puedes contribuir al desarrollo del motor y ayudarnos a estar seguros de que el HTML generado por MJML es perfecto y consistente con el mayor número de clientes de email posible. Esperamos que la variedad y la riqueza en componentes de MJML te inspire para continuar creando otros aún más emocionantes, que se ajusten a tus necesidades (desde un encabezado corporativo para incluir en todas tus comunicaciones a otros aún más específicos para tu propio negocio). Si echas en falta algún componente, ¡lo mejor que puedes hacer es crearlo para que otros puedan usarlo también! Además, revisaremos las solicitudes en Github para ir añadiendo componentes para la comunidad.

Nuestra intención es que MJML crezca a medida que lo haga nuestra comunidad, para que vaya mejorando con el paso del tiempo. También será actualizado de forma periódica para integrar cualquier cambio en la renderización HTML de los clientes de email más populares, para que puedas jugar con ventaja.