Frameworks de e-mail responsivo: comparativo

Além dos vários editores de e-mail de arrastar e soltar, existe outro jeito de facilitar e acelerar a criação de e-mails: os frameworks. Eles otimizam a programação sem substituí-la por um ambiente sem código. Já escrevemos um artigo sobre um dos frameworks mais populares, o MJML, e desta vez queremos olhar para os concorrentes dele e compará-los.

Frameworks de e-mail responsivo com e sem tags próprias: qual é a diferença?

Antes de tudo, vamos definir o que é um framework. Um framework é uma espécie de modelo, uma base pronta para desenvolver mais rápido. A partir dessa base, você escreve o seu próprio código. Os frameworks definem a estrutura, estabelecem as regras e oferecem o conjunto de ferramentas necessário para criar um projeto.

A diferença entre frameworks com e sem tags próprias é simples: um framework de e-mail com tags próprias costuma ser só uma linguagem de marcação especializada, que vem a calhar quando a sua equipe programa bem, mas não quer perder tempo com HTML/CSS e/ou quer automatizar o trabalho.

Os frameworks de e-mail sem tags próprias são conjuntos de componentes prontos, sem tags especiais, só HTML/CSS limpo. Essa é a única diferença.

Claro que algumas ferramentas ficam no meio do caminho. Vamos ver as opções mais populares e contar os prós e contras de cada uma, para você decidir qual usar.

Frameworks de e-mail com tags próprias

1. MJML

O MJML é um framework de e-mail gratuito e de código aberto que permite criar e-mails em HTML mais rápido com a ajuda de componentes prontos. O framework tem um aplicativo para desktop e uma galeria de modelos, permite enviar e-mails direto dele e tem integração com Outlook, Apple Mail, Gmail, Yahoo Mail e Office 365. E, como cereja do bolo, o MJML tem seu próprio editor de e-mail, que permite editar o e-mail na parte esquerda da tela e ver a pré-visualização na parte direita.

Se quiser conhecer melhor essa ferramenta, leia o nosso artigo sobre ela.

2. Foundation For Emails 2

Os recursos do Foundation for Emails 2 são parecidos com os do MJML: ele tem componentes próprios, uma coleção de modelos de e-mail e a possibilidade de criar campanhas responsivas. Há duas formas de trabalhar com o Foundation for Emails 2: as versões CSS e Sass. O framework não tem editor de e-mail, e nesse ponto o MJML leva a melhor.

Já comparamos o Foundation for Emails 2 com o MJML. É uma comparação bem óbvia, já que esses dois frameworks de e-mail têm muito em comum. Veja os principais recursos em comum:

• uma coleção de componentes próprios reutilizáveis;
• uma galeria de modelos de e-mail em HTML responsivos;
• um inliner de CSS online.

O Foundation for Emails 2 usa seu próprio motor de processamento de modelos, chamado Inky. No fim das contas, ele faz o mesmo que o motor de modelos do MJML: simplifica o trabalho com tabelas aninhadas complexas usando tags abreviadas. É assim que fica o seu código quando você usa o Inky:

E esta é a forma final, em HTML limpo:

São cerca de 10 tags: três delas servem para criar o grid, e a tag block-grid serve para criar… um grid de blocos. Os nomes das tags menu, title, button e callout falam por si.

Ao contrário do MJML, o Foundation for Emails 2 cria duas versões do e-mail: uma para desktop e outra para dispositivos móveis. Você decide em qual breakpoint alternar entre elas e também pode ligar ou desligar alguns blocos no código com as tags .hide-for-large e .show-for-large.

Embora o Foundation for Emails 2, assim como o MJML, tenha um conjunto de modelos prontos, falta a ele um editor de e-mail sem código, então não dá para pré-visualizar e editar o e-mail ali mesmo. Você pode recorrer a outras soluções, como o Blocks 😉.

3. HEML

O HEML é uma linguagem de marcação baseada em XML, distribuída como um módulo NPM para Node.js. Ela é bem parecida com HTML/CSS, então você não precisa aprender nenhuma regra especial para usá-la.

Esse framework de e-mail foi pensado para que programar e-mails se pareça com desenvolvimento web. Você pode criar elementos e regras de estilo próprios. O HEML também é, digamos, bem social: dá para compartilhar seus recursos personalizados com outros usuários e usar os trabalhos deles.

Estes são os principais recursos do HEML:

• fácil de usar: foi pensado para parecer HTML e funcionar como HTML, então o seu cérebro não precisa reorganizar padrões já conhecidos nem aprender uma nova linguagem;
• inline de CSS por padrão (dá para desativar);
• HTML limpo não interfere na linguagem do HEML, e os dois podem ser usados ao mesmo tempo;
• um guia de início rápido logo na página inicial.

Um exemplo de código escrito em HEML

Frameworks de e-mail sem tags próprias

1. Maizzle

O Maizzle é um framework de e-mail que usa o framework Tailwind CSS e Node.js em vez de tags próprias. Você não precisa aprender uma nova linguagem, só HTML limpo e as classes utilitárias do Tailwind. Por outro lado, isso tira de você os atalhos.

O Maizzle usa configurações de ambiente que permitem montar cenários personalizados para o seu fluxo de trabalho com arquivos de configuração em JS. A lógica dos modelos fica por conta do PostHTML, o que significa que partials, loops e conteúdo remoto estão à sua disposição.

Os principais recursos do Maizzle são:

• a linguagem de modelos Nunjucks, criada pela Mozilla;
• suporte ao GitHub Flavored Markdown;
• inline do código com a ajuda de transformers;
• layout padrão ajustado aos requisitos do AMP.

2. Pine

O Pine é um framework de e-mail responsivo feito para desenvolvedores de e-mail. O foco é código limpo, com HTML5 como base. O melhor jeito de começar com o Pine é pelo boilerplate, que já tem todo o CSS, as tags e os atributos necessários:

<!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>

Os principais recursos do Pine são:

• wrappers, containers e colunas;
• grid de 12 colunas;
• componentes interativos (acordeão, tabela de preços, depoimentos etc.);
• suporte a imagens de fundo no Outlook;
• suporte a imagens Retina.

3. Acorn

O Acorn é uma versão mais leve do Pine. Ele também tem HTML5 como base, mas usa um grid de 4 colunas, ao contrário do Pine, que usa um de 12 colunas.

Os principais recursos do Acorn são:

• grid de 4 colunas;
• utilitários responsivos, conteúdo e componentes interativos;
• galeria moderna de fontes do sistema;
• suporte a imagens de fundo Retina no Outlook e no Windows Mail.

4. Bojler

O Bojler é um framework CSS/Sass. Ele é construído com Sass.

O Bojler exige Node.js e NPM. No site oficial há uma documentação completa que guia você por toda a instalação e configuração.

Principais recursos do Bojler:

• inliner embutido;
• transpilação automática de Sass para CSS, inline de CSS e lint de Sass;
• tipografia, sistema de grid, classes utilitárias e componentes prontos;
• servidor web com recarregamento automático (live reload).

Clientes e dispositivos suportados pelo Bojler

Outras ferramentas para facilitar a criação de HTML

Há várias soluções que costumam ser chamadas de frameworks HTML, mas não são: por exemplo, padrões HTML, modelos e boilerplates. Sim, elas facilitam o trabalho, mas são mais indicadas para quem já tem experiência com HTML. Essas ferramentas são para quem quer trabalhar com o código sem nenhum intermediário.

Cerberus

O Cerberus é uma coleção de modelos e padrões HTML responsivos e gratuitos para facilitar a criação de e-mails. Cada modelo traz as informações necessárias sobre ele e é testado nos clientes de e-mail mais populares.

Lista de todos os clientes de e-mail suportados pelo Cerberus

Uma curiosidade: o criador do Cerberus é contra o uso de inliner de CSS, já que o produto deve ser simples e não deveria depender de algo como um inliner de CSS. Ele também acredita que o inline incha o código e, como argumento final, diz que o posicionamento do CSS do Cerberus já está otimizado.

Exemplo de código no Cerberus

Kilogram

O Kilogram é construído sobre o Nunjucks, o motor de modelos criado pela Mozilla. Ele também traz ferramentas extras para desenvolver e-mails responsivos. Ao instalar o Kilogram, você recebe modelos de e-mail, um inliner de CSS e um minificador de HTML.

Esta é a lista de clientes de e-mail compatíveis com o Kilogram:

• Todas as versões do Outlook para desktop;
• 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, OSX);
• Apple Mail (iOS, OSX);
• Spark (iOS);
• Polymail (iOS, OSX).

Inkcite

O Inkcite é um sistema de design modular para criar e-mails modernos e responsivos. Ele não usa tags próprias, mas usa algo parecido. São os chamados “Helpers”, que parecem tags HTML comuns entre chaves.

Veja como eles ficam:

O Inkcite tem três ambientes: Development, Preview e Production.

No ambiente Development, você desenvolve o e-mail e o conteúdo dele localmente.

O ambiente Preview serve para enviar versões de teste dos seus e-mails.

Production é a etapa final do desenvolvimento do e-mail. As imagens são enviadas para a CDN, as URLs são inseridas no HTML, o rastreamento de links e as tags são ativados, o HTML é minificado e as verificações de segurança entram em ação.

Afinal, qual framework de e-mail escolher?

Se você procura uma solução que facilite e acelere muito a programação e está disposto a aprender uma nova lógica, novas estruturas e regras, os frameworks de e-mail com tags próprias são para você.

Se você procura uma ferramenta ou plataforma que acompanhe você na programação, traga mais estrutura ao trabalho e não exija aprender uma nova linguagem e novas regras, a sua opção são os frameworks de e-mail sem tags próprias.

Se precisar de uma espécie de assistente, recorra a outras ferramentas (às vezes também chamadas de frameworks): boilerplates HTML, modelos e padrões.

E, se você encontrar algum erro ou inconsistência neste artigo ou em qualquer outro do nosso blog, fique à vontade para nos escrever em support@useblocks.io. Vamos responder e corrigir tudo o quanto antes.