Frameworks de email adaptables: comparativa

Además de los distintos editores de emails de arrastrar y soltar, hay otra forma de simplificar y acelerar la creación de emails: los frameworks. Optimizan tu forma de programar sin sustituirla por un entorno sin código. Ya escribimos un artículo sobre uno de los frameworks más populares, MJML, pero esta vez queremos fijarnos en sus competidores y compararlos.

Frameworks de email adaptables con y sin etiquetas propias: ¿en qué se diferencian?

Antes de nada, definamos qué es un framework. Un framework es una especie de plantilla, un modelo ya hecho para desarrollar más rápido. A partir de ese modelo escribes tu propio código. Los frameworks fijan la estructura, marcan las reglas y ofrecen el conjunto de herramientas necesario para crear un proyecto.

La diferencia entre los frameworks con etiquetas propias y los que no las tienen es sencilla: un framework de email con etiquetas propias suele ser simplemente un lenguaje de marcado especializado, que viene muy bien si tu equipo sabe programar pero no quiere pelearse con HTML/CSS o quiere automatizar su trabajo.

Los frameworks de email sin etiquetas propias son conjuntos de componentes ya hechos sin etiquetas especiales, solo HTML/CSS limpio. Esa es la única diferencia.

Por supuesto, algunas herramientas se quedan a medio camino. Vamos a repasar las opciones más populares y a contarte sus ventajas y desventajas para que decidas cuál usar.

Frameworks de email con etiquetas propias

1. MJML

MJML es un framework de email gratuito y de código abierto que te permite crear emails HTML más rápido gracias a sus componentes ya hechos. Tiene una app de escritorio y una galería de plantillas, permite enviar emails directamente desde él y está integrado con Outlook, Apple Mail, Gmail, Yahoo Mail y Office 365. Y, como guinda del pastel, MJML tiene su propio editor de emails: editas el email en la parte izquierda de la pantalla y ves la vista previa en la derecha.

Si quieres conocer esta herramienta más a fondo, lee nuestro artículo sobre ella.

2. Foundation For Emails 2

Las funciones de Foundation for Emails 2 se parecen a las de MJML: tiene componentes propios, una colección de plantillas de email y la posibilidad de crear campañas adaptables. Con Foundation for Emails 2 se puede trabajar de dos maneras: con la versión CSS o con la versión Sass. El framework no tiene editor de emails, así que en esto MJML gana a su competidor.

Ya hemos comparado Foundation for Emails 2 con MJML. Es una comparación bastante lógica, porque estos dos frameworks de email tienen mucho en común. Estas son sus principales funciones compartidas:

• una colección de componentes propios reutilizables;
• una galería de plantillas de email HTML adaptables;
• un inliner web para CSS.

Foundation for Emails 2 usa su propio motor de procesamiento de plantillas, llamado Inky. En resumen, hace lo mismo que el motor de plantillas de MJML: simplifica el trabajo con tablas anidadas complejas gracias a etiquetas abreviadas. Así se ve tu código cuando usas Inky:

Y esta es su forma final en HTML limpio:

Hay unas 10 etiquetas: tres sirven para crear una cuadrícula y la etiqueta block-grid sirve para crear… una cuadrícula de bloques. Los nombres de las etiquetas menu, title, button y callout hablan por sí solos.

A diferencia de MJML, Foundation for Emails 2 crea dos versiones del email: una para escritorio y otra para móvil. Puedes decidir en qué punto de corte se cambia de una a otra y también activar o desactivar algunos bloques del código con las etiquetas .hide-for-large y .show-for-large.

Aunque Foundation for Emails 2, igual que MJML, tiene un conjunto de plantillas ya hechas, le falta un editor de emails sin código propio, así que no puedes ver la vista previa ni editar el email ahí mismo. Puedes recurrir a otras soluciones, por ejemplo, Blocks 😉.

3. HEML

HEML es un lenguaje de marcado basado en XML que se distribuye como módulo de NPM para Node.js. Se parece bastante a HTML/CSS, así que no necesitas aprender reglas especiales para usarlo.

Este framework de email está pensado para que programar emails se parezca al desarrollo web. Puedes crear elementos y reglas de estilo propios. HEML también es bastante social, por así decirlo: puedes compartir tus recursos con otros usuarios y usar los suyos.

Estas son las principales funciones de HEML:

• fácil de usar: está pensado para verse y funcionar como HTML, así que tu cerebro no tendrá que romper sus esquemas ni aprender un lenguaje nuevo;
• inlining de CSS por defecto (se puede desactivar);
• el HTML limpio no interfiere con el lenguaje de HEML, se pueden usar los dos a la vez;
• una guía de inicio rápido en la misma portada.

Ejemplo de código escrito en HEML

Frameworks de email sin etiquetas propias

1. Maizzle

Maizzle es un framework de email que usa el framework Tailwind CSS y Node.js en lugar de etiquetas propias. No tienes que aprender un lenguaje nuevo, solo HTML limpio y las clases utilitarias de Tailwind. Eso sí, te quedas sin atajos.

Maizzle usa configuraciones de entorno que te permiten montar escenarios a medida para tu flujo de trabajo mediante archivos de configuración JS. Para la lógica de las plantillas usa PostHTML, así que tienes a tu disposición parciales, bucles y contenido remoto.

Las funciones clave de Maizzle son:

• el lenguaje de plantillas Nunjucks, creado por Mozilla;
• compatibilidad con GitHub Flavored Markdown;
• inlining del código mediante transformadores;
• un diseño por defecto ajustado a los requisitos de AMP.

2. Pine

Pine es un framework de email adaptable pensado para desarrolladores de email. Se centra en un código limpio con HTML5 como base. La mejor forma de empezar con Pine es su boilerplate (plantilla base), que ya incluye todo el CSS, las etiquetas y los atributos necesarios:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Pine Email Framework</title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      table {border-collapse: collapse;}
      td,th,div,p,a {font-size: 16px; line-height: 26px;}
      .spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
    </style>
    <![endif]-->

    <style type="text/css">

      /*Framework CSS - removed for demo purposes */
    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

    <div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>

    <table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center" bgcolor="#EEEEEE">
          <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
            <tr>
              <td align="left" bgcolor="#FFFFFF">

                <!-- ADD ROWS HERE -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Las funciones clave de Pine son:

• wrappers, contenedores y columnas;
• cuadrícula de 12 columnas;
• componentes interactivos (acordeón, tabla de precios, testimonios, etc.);
• compatibilidad con imágenes de fondo en Outlook;
• compatibilidad con imágenes Retina.

3. Acorn

Acorn es una versión más ligera de Pine. También se basa en HTML5, pero usa una cuadrícula de 4 columnas, a diferencia de Pine, que usa una de 12.

Las funciones clave de Acorn son:

• cuadrícula de 4 columnas;
• utilidades adaptables, contenido y componentes interactivos;
• una galería de fuentes de sistema modernas;
• compatibilidad con imágenes de fondo Retina en Outlook y Windows Mail.

4. Bojler

Bojler es un framework CSS/Sass. Está construido con Sass.

Bojler necesita Node.js y NPM. En la web oficial encontrarás toda la documentación para seguir el proceso completo de instalación y configuración.

Funciones clave de Bojler:

• inliner integrado;
• transpilación automática de Sass a CSS, inlining de CSS y linting de Sass;
• tipografía, sistema de cuadrícula, clases utilitarias y componentes ya hechos;
• un servidor web con recarga en vivo.

Clientes y dispositivos compatibles con Bojler

Otras herramientas para crear HTML más fácilmente

Hay varias soluciones a las que se suele llamar frameworks HTML, aunque no lo son: por ejemplo, los patrones, las plantillas y los boilerplates HTML. Sí, te facilitan el trabajo, pero encajan mejor con programadores de HTML con experiencia. Son herramientas para quienes quieren trabajar con el código sin intermediarios.

Cerberus

Cerberus es una colección de plantillas y patrones HTML adaptables y gratuitos para crear emails con más facilidad. Cada plantilla incluye la información necesaria sobre ella y está probada en los clientes de correo más populares.

Lista de todos los clientes de correo compatibles con Cerberus

Un dato curioso: el creador de Cerberus está en contra de usar un inliner de CSS, porque su producto debe ser sencillo y no debería depender de algo como un inliner. También cree que el inlining infla el código y, como argumento final, dice que la colocación del CSS de Cerberus ya está optimizada.

Ejemplo de código en Cerberus

Kilogram

Kilogram está construido sobre Nunjucks, el motor de plantillas creado por Mozilla. Además, incluye herramientas extra para desarrollar emails adaptables. Al instalar Kilogram obtienes plantillas de email, un inliner de CSS y un minificador de HTML.

Esta es la lista de clientes de correo compatibles con Kilogram:

• todas las versiones de Outlook para escritorio;
• Office 365 (web);
• Outlook.com (web, iOS, Android, Windows Phone);
• Thunderbird (Windows);
• AOL Mail (iOS);
• Yahoo! Mail (web, iOS, Android);
• Google Inbox (web, iOS, Android);
• Gmail (web, iOS, Android);
• Mail.ru (web, iOS, Android);
• myMail (iOS, Android);
• Rambler Mail (web, iOS, Android);
• Yandex Mail (web, iOS, Android);
• Airmail (iOS, OS X);
• Apple Mail (iOS, OS X);
• Spark (iOS);
• Polymail (iOS, OS X).

Inkcite

Inkcite es un sistema de diseño modular para crear emails modernos y adaptables. No usa etiquetas propias, pero sí algo parecido: los llamados «Helpers», que parecen etiquetas HTML normales entre llaves.

Así es como se ven:

Inkcite tiene tres entornos: Development, Preview y Production.

En el entorno Development puedes desarrollar el email y su contenido en local.

El entorno Preview sirve para enviar versiones de prueba de tus emails.

Production es la etapa final del desarrollo del email. Las imágenes se suben a la CDN, las URL se insertan en el HTML, se activan el seguimiento de enlaces y las etiquetas, el HTML se minifica y se activan las comprobaciones de seguridad.

Entonces, ¿qué framework de email elijo?

Si buscas una solución que simplifique y acelere muchísimo tu forma de programar y estás dispuesto a aprender una lógica, unas estructuras y unas reglas nuevas, los frameworks de email con etiquetas propias son para ti.

Si buscas una herramienta o plataforma que te acompañe mientras programas, le dé más estructura a tu trabajo y no te obligue a aprender un lenguaje ni reglas nuevas, tu opción son los frameworks de email sin etiquetas propias.

Y si lo que necesitas es una especie de asistente, recurre a otras herramientas (a las que a veces también se llama frameworks): boilerplates, plantillas y patrones HTML.

Y si encuentras algún error o incoherencia en este artículo o en cualquier otro de nuestro blog, escríbenos a support@useblocks.io. Lo revisaremos y lo corregiremos lo antes posible.