Diseñar correos electrónicos responsive fácilmente con MJML

• Artículos
• Miércoles, 21 de diciembre de 2016

Todo el mundo sabe que diseñar para el correo electrónico es complicado. Más que complicado, casi un auténtico coñazo. Los avances en el diseño web y en los navegadores no llegan por igual a los clientes de correo. Estos además que son un número enorme y variado, los clientes de correo electrónico no suelen reconocer muchas de las funciones que hacen que el contenido de nuestra web sean atractivo y dinámico. Diseñar para correo electrónico es hacerlo igual que el diseño web de hace años, con tablas y estilos en línea sobre las etiquetas HTML.

Por si fuera poco, ahora se añade la necesidad de que los correos electrónicos se lean bien en cualquier dispositivo, con especial atención a los móviles. El “email responsive design” en el móvil se hace todavía más complicado porque la limitación de espacio es considerable. Durante mucho tiempo diseñar correos electrónicos ha sido una tarea pesada y proclive a errores. Mailjet se propuso cambiar esto con una plataforma de código abierto que permite crear con facilidad correos electrónicos para cualquier plataforma. Este “framework para responsive email” se llama MJML.

MJML es un framework para generar fácilmente correo electrónico responsive

MJML (siglas de MailJet Markup Language) es un lenguaje de etiquetas diseñado para solventar el problema de diseñar correos electrónicos adaptados a cualquier dispositivo. Posee una sintaxis clara y fácil de comprender basada en una completa librería de componentes. En lugar de pelearte con un farragoso marcado de etiquetas HTML, el marcado del correo electrónico se realiza con la etiquetas MJML. De esta forma te concentras en el contenido de tu correo, agilizas la fase de maquetación para posteriormente, dejar al motor de MJML que lo convierta todo a un HTML optimizado para su uso en la mayoría de clientes de correo electrónico.

Al principio puede que pienses que el paso adicional de etiquetar en MJML es innecesario, pero en cuanto empiezas a practicar con algún proyecto, te das cuenta de que MJML es altamente productivo y eficaz. Se acabó lo de anidar tablas y pelearte con las filas y las columnas. Para ello lo primero que tienes que hacer es conocer el marcado MJML que es sumamente sencillo y está basado en un sistema de “rejilla”. Maquetar con correo electrónico es muy sencillo con etiquetas como and .

Como se puede ver, para crear una estructura lo fundamental es crear secciones y columnas dentro de la etiqueta contenedora. Por defecto el número de las columnas representa el ancho de cada columna. Así una sóla columna equivale a un 100% y dos columnas a un 50%. ¡Más fácil imposible! Por lo que he estado probando y debido a que la mayoría de correos ya se leen en móviles, prefiero optar por diseños de columna única. Son más legibles especialmente en pantallas pequeñas.

Gracias a los componentes, la facilidad con la que es posible utilizar elementos y patrones de diseño es absolutamente asombrosa.

Una vez que ya tienes una estructura determinada, toca explorar la enorme cantidad de componentes que puedes aprovechar. Entre los más interesantes tenemos navegación, tablas, botones, listas, enlaces a redes sociales y hasta la posibilidad de insertar carruseles en nuestros correos electrónicos. La facilidad con la que es posible utilizar elementos y patrones de diseño es absolutamente asombrosa. Maquetar un correo electrónico pasa a ser una tarea trivial.

Un motor que genera HMTL perfecto para correos electrónicos

Actualmente para usar MJML es necesario contar con un sistema linux o Mac. El motor de MJML está escrito en NodeJS aprovechando ReactJS. Instalar MJML es fácil a través de NPM. El flujo de trabajo como se indicaba es maquetar con las etiquetas y los componentes, para después dejar que MJML compile todo eso a un HTML listo para producción. El resultado es un HTML optimizado para mostrarse correctamente en la mayoría de programas de correo electrónico.

Esta transformación puede hacerse de una vez o lo que resulta de enorme utilidad, ejecutar un comando “watch” que se ejecute cada vez que hacemos algún cambio en nuestro código. De esta forma es fácil ver los cambios y como comentaba concentrarse en el diseño de nuestro correo. Asimismo MJML proporciona paquetes para ser usados en los principales editores de código (Atom, Sublime Text) y también permite validar el código, con la posibilidad de establecer diferentes niveles de validación del código (por defecto viene como soft).

Completa documentación y capacidad de ser extendido

Uno de los aspectos más sobresalientes del framework MJML es su excelente documentación. Todos los componentes de la librería están muy bien documentados y los ejemplos son fáciles de seguir. Otro aspecto estupendo de la plataforma es la gran cantidad de plantillas que permiten aprender y por supuesto desarrollar tus propias ideas a partir de las mismas. El correo electrónico es un campo generalmente descuidado y estas plantillas son una estupenda inspiración.

El hecho de que sea de código abierto ha propiciado que existan otros proyectos que permitan extender el framework, como otras librerías que complementan o integran MJML en sus plataformas. También es posible crear componentes personalizados a nuestras necesidades. Sin duda, MJML representa un avance de gran interés y una sólida herramienta para todas las personas que necesitan construir correos electrónicos atractivos en cualquier dispositivo. El imparable crecimiento de los móviles y la necesidad de hacer nuestro contenido accesible en ellos a través del correo, hacen de MJML una herramienta imprescindible para cualquier diseñador.