Boas práticas para o HTML de email marketing

Publicado por Lívia Amorim no dia design

Fazer um bom HTML de email marketing é uma tarefa complicada. Para que uma campanha abra em diferentes clientes de email é necessário, além de fazer um template em tabela, deixar vários vícios de lado. Por exemplo: deixar de reduzir um hexadecimal para três dígitos (adeus, #FFF). É como voltar a ser webmaster nos Anos 90!

Aqui na Resultados Digitais lidamos com vários problemas em tabelas de email no Suporte. Dentro do nosso principal software, o RD Station, temos uma ferramenta de Email Marketing. Nela, nossos usuários escolhem modelos de email, personalizam conforme a necessidade e disparam suas campanhas. Logo, o cliente dos nossos clientes é afetado pelas campanhas disparadas. Ele usa desde AOL Mail até Outlook 2000.

Funcionalidade de Email Marketing no RD Station

Levantamos os principais problemas gerados nas campanhas personalizadas de Email Marketing e, a partir desses dados, listamos formas de substituir atributos invalidados em clientes de email. Estão listadas abaixo as novas práticas usadas em nossos modelos:

Não use a tag <style> dentro da tag <head>

O Gmail não dá suporte ao estilo apontado dentro da tag <style>, somente estilos inline. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <!--RUIM-->
  <html>
    <head>
      <title>Meu Modelo de Email</title>
      <style>
        a { color: #28608f; }
      </style>
    </head>
    <body>
      <a href="http://google.com" title="Google">Google</a>
    </body>
  </html>

  <!--BOM-->
  <html>
    <head>
      <title>Meu Modelo de Email</title>
    </head>
    <body>
      <a href="http://google.com" title="Google" style="color: #28608f;">Google</a>
    </body>
  </html>

Não use os atributos max-width ou width no CSS.

A maior parte dos clientes de email (Outlook, Hotmail, Yahoo, entre outros) não dão suporte a esses atributos. Para alinhar a tabela e selecionar um tamanho máximo para ela, basta fazer como o exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <!--RUIM-->
  Grande demais, simplesmente não faça.

  <!--BOM-->
  <table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
      <td>
        <table cellspacing="0" cellpadding="0" width="600" border="0">
          <tr>
            <td width="300">Célula 1</td>
            <td width="300">Célula 2</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

Não use os atributos padding e margin no CSS de qualquer elemento.

O Outlook não dá suporte ao uso de margens internas e externas. Para isso, tente usar os atributos cellpadding e cellspacing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <!--RUIM-->
  <table>
    <tr>
      <td style="margin: 5px;">Deu zica.</td>
      <td style="margin: 5px;">Deu zica.</td>
    </tr>
  </table>

  <!--BOM-->
  <table cellspacing="10">
    <tr>
      <td>Deu boa.</td>
      <td>Deu boa.</td>
    </tr>
  </table>

Não use os atributos background-color e background-image no CSS.

Usar o bgcolor dá suporte a todos os clientes de email. Já as imagens devem estar dentro das células da tabela. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <!--RUIM-->
  <tr bgcolor="#FFF"></tr>
  <tr style="background-color: #FFFFFF;"></tr>

  <!--RUIM-->
  <tr style="background-image: url('http://dreamatico.com/data_images/kitten/kitten-2.jpg');"></tr>

  <!--BOM-->
  <tr bgcolor="#FFFFFF"></tr>

  <!--BOM-->
  <tr>
    <td>
      <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" border="0">
    </td>
  </tr>

O elemento <table> deve especificar valores, incluindo os nulos.

Alguns clientes de email atribuem valores diferentes de 0 quando não há especificação. Isso pode trazer espaçamentos indesejados. Por exemplo:

1
2
3
4
5
  <!--RUIM-->
  <table>

  <!--BOM-->
  <table cellspacing="0" cellpadding="0" border="0">

Cores de fonte devem estar em hexadecimal de 6 dígitos.

A maior parte dos clientes de email não dá suporte a hexadecimal com três dígitos. Por exemplo:

1
2
3
4
5
6
7
8
9
  <!--RUIM-->
  <tr>
    <td style="color: #FFF;"></td>
  </tr>

  <!--BOM-->
  <tr>
    <td style="color: #FFFFFF;"></td>
  </tr>

Todas as imagens devem ter o atributo border="0".

Alguns clientes de email colocam uma borda azul ao redor das imagens. Por exemplo:

1
2
3
4
5
  <!--RUIM-->
  <img src="https://d335luupugsy2.cloudfront.net/images/email_mkt/iphone.jpg">

  <!--BOM-->
  <img src="https://d335luupugsy2.cloudfront.net/images/email_mkt/iphone.jpg" border="0">

Dê preferência a imagens em JPG ou GIF.

Versões antigas do Outlook não suportam imagens em PNG. Use JPG para imagens maiores, como fotos e ilustrações, e GIF para logos.

Todas as imagens devem estar comprimidas.

O usuário pode tentar abrir o email numa rede 3G, então faz todo o sentido comprimir as imagens. Você pode usar o Tiny.png para isso!

Mais dicas!

Se quiser usar CSS 3 e dar mais estilo para a sua campanha, a Campaign Monitor criou uma lista com o que é aceito em cada cliente de email! O The Ultimate Guide to CSS está no ar desde 2006 e é atualizado constantemente. Além disso, você também pode experimentar o Litmus para testar o HTML de seu modelo de email. É uma ótima pedida se a sua empresa costuma disparar campanhas personalizadas com frequência!

Lívia Amorim

Lívia Amorim

UI/UX Designer

Comentários