Como fazer um e-mail responsivo + template de exemplo

ūüáßūüá∑

Trabalhando como desenvolvedor(a) Front-end em uma empresa de pequeno porte, em algum momento você vai se deparar com uma task relacionada a criação de um template de e-mail. Essa pode parecer uma tarefa muito básica, mas ela requer atenção em alguns pontos para que o e-mail chegue na caixa de entrada e com o Front-end fiel ao layout.

Primeiramente √© importante identificar qual ferramenta ser√° utilizada para enviar, pois em alguns casos temos ainda mais limita√ß√Ķes e em outros, n√£o precisamos nos preocupar sequer com a constru√ß√£o do template em si. Por√©m, para este post, vamos levar em considera√ß√£o que voc√™ precisa construir o seu template baseado em um layout que um designer fez, exclusivamente para este envio, certo?

De volta aos anos 90

Mesmo com todas as tecnologias que conseguimos usufruir no front-end atualmente, nossos clientes de e-mails são muito limitados em relação a interpretação de código. Por isso, para ter suportar o máximo de clientes possíveis, nossos e-mails devem ser construídos utilizando tabelas como estrutura. Nada de Grid Layout ou FlexBox. Além disso, devemos utilizar 100% do nosso estilo inline (ou o máximo possível).

Isso pode parecer bem estranho, mas esta é a técnica mais utilizada para que todos os clientes/usuários tenham a melhor experiência possível em seus respectivos clientes de e-mail. Veja um exemplo de como seria a estrutura de um e-mail marketing bem básico:

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="left">
  <tr>
    <td style="text-align: center;">
      <h3 style="color: #000;">Ol√°,</h3>
      <p style="color: #000; line-height: 1.7em; margin-bottom: 0;">Obrigado por nos visitar ontem. Como foi sua experiência?</p>
      <a style="margin-top: 16px; max-width: 230px; color: #FFF; background: #FF5E00; font-size: 16px; font-weight: bold; padding: 16px 60px; text-decoration: none; border-bottom: 2px solid #D04D01; border-radius: 5px;" href="https://www.meusite.com">
        Avaliar
      </a>
    </td>
  </tr>
</table>

Com o estilo sendo 100% inline e a marcação HTML da estrutura precisando ser feita apenas com tabelas, vamos utilizar alguns truques para deixar nosso e-mail responsivo.

Resets, Media queries e Mobile first

Alguns clientes de e-mail aceitam alguns estilos gerais, mas isso n√£o √© regra. √Č comum termos alguns "resets" de CSS em uma tag <style> para tentar deixar o e-mail mais parecido para todos.

Além dos resets, alguns clientes de e-mail também aceitam @media queries. Isso é um pouco recente, se considerarmos a evolução dos clientes de e-mail. Veja um exemplo utilizando uma media query:

<style type="text/css">
  body {
    font-size: 14px;
  }

  @media only screen and (max-device-width: 480px) {
    table a {
      background: #333 !important;
      border-bottom-color: #CCC !important;
    }
  }
</style>

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="left">
  <tr>
    <td style="text-align: center;">
      <h3 style="color: #000;">Ol√°,</h3>
      <p style="color: #000; line-height: 1.7em; margin-bottom: 0;">Obrigado por nos visitar ontem. Como foi sua experiência?</p>
      <a style="display: inline-block; margin-bottom: 22px; margin-top: 16px; max-width: 230px; color: #FFF; background: #FF5E00; font-size: 16px; font-weight: bold; padding: 16px 60px; text-decoration: none; border-bottom: 2px solid #D04D01; border-radius: 5px;" href="https://www.google.com">
        Avaliar
      </a>
    </td>
  </tr>
</table>

Infelizmente, para sobrescrever nossos estilos inline, precisamos utilizar o !important em todos os atributos que adicionarmos ao nosso CSS, que é bem comum nesse ambiente de e-mails marketing.

Por quê usar estilo inline, então?

Uma coisa muito interessante de se saber sobre esse resets √© que, mesmo que o seu cliente de e-mail suporte estes recursos: ao tentar encaminhar ou responder um e-mail que contenha estes estilos "extra", nesse momento todo esse estilo "extra" √© descartado e s√≥ os estilos inline s√£o utilizados. Sabendo disso, √© importante avaliar seu p√ļblico alvo e qual vers√£o do seu e-mail pode ser compartilhada tanto no formato desktop quanto no mobile, e a partir disso definir a regra da sua media query.

Boilerplate

Depois de muito pesquisar a respeito, acabei fazendo uma análise mais detalhada dos e-mails enviados pelo iFood, e achei que ele tinha um código muito bem estruturado.

Acabei montando um modelo baseado no que eles utilizavam na √©poca (mantendo os cr√©ditos, assim como eles o faziam), por√©m com algumas adapta√ß√Ķes. Decidi publicar ele em um gist e compartilhar.

Clique aqui para visualizar o Gist com o template. Agora, nos raros casos que preciso criar um e-mail "do zero", recorro a este template.

Lembrando que o max-device-width utilizando com regra da minha media query, pode ser substituído por qualquer outra regra que faça mais sentido pro seu caso.