Programando Plantillas de Email con MJML

Este post es una guía para principiantes sobre cómo programar emails responsive, compatibles y atractivos usando MJML. ¡Espero que pueda ser útil para alguien!

La tecnología sigue mejorando, pero es sabiduría aceptada que escribir (programar) plantillas de email sigue siendo una experiencia dolorosa para los desarrolladores, incluso mientras cerramos la década.

¿Por qué?

No puedo resumir el problema mejor que esta introducción, de campaignmonitor.com:

"Desafortunadamente, mientras se libraban [las guerras de navegadores], clientes de email como Outlook y Lotus Notes [...] se quedaron atrás.

Peor aún que no intentar mejorar su renderizado de HTML y CSS, algunos clientes de email han ido hacia atrás. Hace tres años, Microsoft decidió que Outlook 2007 dejaría de usar Internet Explorer para renderizar emails HTML. Antes de que te emociones, lo estaban reemplazando con Microsoft Word. Sí, ese Microsoft Word, el procesador de texto. En una versión, Outlook pasó de ser decente y comprensible a absolutamente terrible mostrando emails HTML de cualquiera excepto otros usuarios de Outlook.

Outlook 2007 es un cliente de email enormemente popular, pero ese no es el único problema: construir HTML para email significa que estás tratando con más de cuatro o cinco navegadores principales, y 12 a 15 clientes de email diferentes, cada uno con una cuota de mercado sólida.

Algunos de ellos son geniales, como Apple Mail. Un diseño que funciona en Safari será perfecto en Apple Mail. Algunos, como Outlook, son horribles y causarán mareos, pérdida de cabello y palpitaciones cardíacas. Entre medio hay un montón de diferentes restricciones de renderizado, peculiaridades e inconsistencias."

Si echas un vistazo al resto de su (excelente) artículo, verás que—comparado con hacer una página web normal—programar emails sigue siendo una pesadilla.

MJML

Mailjet es un "Proveedor de Servicios de Email todo-en-uno con sede en París". Su negocio es el email, y uno de sus servicios es un editor WYSIWYG para que sus clientes no técnicos produzcan sus emails. En el proceso de desarrollar este editor, Mailjet tuvo que aprender sobre todas las horribles peculiaridades mencionadas arriba, y crear un sistema para abstraer todo eso. Maravillosamente, eligieron hacer open source el resultado, y eso es MJML (el foco de este tutorial).

Su tutorial introductorio es bueno, pero siento que asume bastante, especialmente para principiantes, así que este tutorial es paso a paso, de manera opinionada. Puedes usar su servicio de varias formas. Lo siguiente es lo que funcionó para mí. Estoy asumiendo, como yo, que llegarás a esto habiendo recibido ya un diseño por parte de un cliente. Mi experiencia fue, quizás, no inusual, en que solo me dieron el diseño de pantalla completa—se esperaba que infiriera cómo debía implementarse la vista móvil.

Recomiendo escanear los pasos antes de empezar, ya que hay algunas cosas que pueden forzar un replanteamiento, o incluso un rediseño, y de esta manera, no perderás el tiempo que perderías si siguieras los pasos y luego tuvieras que deshacer todo.

Configuración e instalación

Si solo quieres verlo en acción, tienen un bonito editor "pruébalo en vivo". Eso es genial para probar sintaxis, pero probablemente querrás usar tus propias imágenes, así que recomiendo instalar localmente.

Instala Node (si no lo tienes ya), luego desde el terminal/consola:

1npm install mjml

Yo uso, y recomiendo el editor de código VS Code. Es gratis, realmente genial, y hay una extensión gratuita para MJML, que puedes obtener aquí o encontrar fácilmente usando la función de búsqueda de extensiones de VS Code. Luego puedes crear tu archivo MJML y abrir un panel de vista previa al lado para mostrar tu output mientras programas.

Ideas clave

Tus filas serán secciones MJML. Dentro de esas siempre tendrás al menos una columna MJML, aunque si tienes algunos elementos lado a lado en escritorio, pero que quieres apilar en la vista responsive, los tendrías cada uno en su propia columna. Recuerda, te estás molestando en aprender esta sintaxis para que el framework pueda renderizar el código complicado necesario para que tu diseño funcione bien en cualquier lugar. Esta es la forma (relativamente) sin dolor.

1<mjml>
2  <mj-body>
3    <mj-section>
4      <mj-column>
5        <mj-text>Hello World!</mj-text>
6      </mj-column>
7    </mj-section>
8  </mj-body>
9</mjml>

Aquí hay un ejemplo del enfoque de dos columnas de la documentación.

Sintaxis

1/* en css normal: */
2background-color: #ffffff;
3color: white;
4/* en mjml: */
5background-color="#ffffff" color="white"

Hay muchos ejemplos en la documentación, pero es fácil quedarse atascado simplemente porque esperas que tu CSS use ":" y MJML quiere "=".

Responsive y breakpoints

A diferencia de una página web normal, la mayoría de los diseños de email solo tienen un único breakpoint, donde la vista cambia de un diseño móvil a uno de escritorio. Así que solo se requieren dos diseños. Como verás en la documentación, puedes establecer tu breakpoint (donde tus columnas se apilarán) en el encabezado MJML:

1<mjml>
2  <mj-head>
3    <mj-breakpoint width="320px" />
4  </mj-head>
5  <mj-body>
6    <mj-section>
7      <mj-column>
8        <mj-text>
9          Hello World!
10        </mj-text>
11      </mj-column>
12    </mj-section>
13  </mj-body>
14</mjml>

Estilos y clases personalizadas

En el pasado, todo el CSS de email se hacía inline, pero eso no es necesario aquí. Consulta los detalles aquí.

1<mjml>
2  <mj-head>
3    <mj-attributes>
4      <mj-text padding="0" />
5      <mj-class name="blue" color="blue" />
6      <mj-class name="big" font-size="20px" />
7      <mj-all font-family="Arial" />
8    </mj-attributes>
9  </mj-head>
10  <mj-body>
11    <mj-section>
12      <mj-column>
13        <mj-text mj-class="blue big">
14          Hello World!
15        </mj-text>
16      </mj-column>
17    </mj-section>
18  </mj-body>
19</mjml>

Toda tu lógica CSS normal aplica; es solo un cambio de sintaxis.

Generando el HTML de salida

Una vez que estés más o menos satisfecho con tu diseño, querrás convertir realmente este archivo MJML a HTML. De vuelta en tu terminal o consola, navega al mismo directorio (carpeta) que tu archivo de plantilla MJML y ejecuta lo siguiente:

1mjml -r nombreplantilla.mjml -o nombreoutput.html

donde nombreplantilla es como guardaste tu MJML, y ahora estás nombrando la salida como nombreoutput.html.

Si luego encuentras el archivo HTML en tu explorador puedes abrirlo en un navegador y verificar el resultado. Ejecutar el mismo comando otra vez sobrescribiría la salida, que probablemente es lo que quieres si has hecho mejoras, pero podrías hacer

1mjml -r nombreplantilla.mjml -o segundaversion.html

si hubieras hecho alguna, eh, versión diferente.

Estas instrucciones probablemente parecen innecesariamente explícitas, pero la mayoría de los tutoriales sufren más de saltarse pasos importantes que de tener demasiados.

Ajustes finales y entrega al cliente

Tuve algunos problemas con mi diseño que no pude resolver con el motor de plantillas. Eso probablemente es más un reflejo de mi inexperiencia que un problema con MJML. Si miras el archivo HTML de salida, verás que todo se ha convertido a tablas. Esto estará lleno de código if ie8... y similar para lidiar con esas pesadillas por ti. No tengas miedo de sumergirte y añadir cualquier estilo adicional que puedas necesitar a ese HTML de salida. Lo difícil está hecho.

Con eso, puedes comprimir el HTML y los assets (imágenes) en un zip y enviarlo a tu cliente.

Como dije al principio, espero que esto pueda ser útil para alguien. Avísame si algo debería clarificarse o corregirse.