1. Home
  2. E-mail Marketing
  3. Boas práticas de HTML – Email Marketing

Boas práticas de HTML – Email Marketing

Este artigo tem como objetivo orientar sobre como otimizar o conteúdo de e-mails para eles não sejam tagueados como Spam.
Criar uma mensagem HTML não é o mesmo que criar uma página HTML, pois muitas tags costumam ser removidas pelos leitores de e-mail como Webmails e Outlook.
Existem algumas práticas que devem ser seguidas para que a mensagem não apareça distorcida para seus destinatários.
Porém não há como garantir que ao seguir essas práticas a mensagem chegará sem distorções para todos os provedores, pois estes alteram suas regras constantemente principalmente por motivo de segurança.

Tags HTML

Se você desenvolve o seu conteúdo por código HTML, há algumas tags não recomendadas e outras tags que são aceitas, segue as listas das mesmas.

  • Tags não recomendadas:

    <meta>
     Não serve para mensagens em HTML.
    <title> 
    É utilizado somente para páginas HTML, evite usar em mensagens.
    <link> 
    Evite usar ela para referenciar arquivos de css, o certo é usar css inline ou colocar as classes de css dentro do <style></style>.
    <style> 
    Alguns webmails como o Gmail por exemplo, removem esta tag.
  • Tags aceitas:
<a> <col> <h1> <meter> <small>
<abbr> <colgroup> <h2> <nav> <source>
<acronym> <command> <h3> <noframes> <span>
<address> <datalist> <h4> <noscript> <strike>
<applet> <dd> <h5> <object> <strong>
<area> <del> <h6> <ol> <style>
<article> <details> <head> <optgroup> <sub>
<aside> <dfn> <hgroup> <option> <summary>
<audio> <dir> <hr> <output> <sup>
<b> <div> <i> <p> <table>
<base> <dl> <img> <param> <tbody>
<basefont> <dt> <input> <pre> <td>
<bdo> <em> <ins> <progress> <textarea>
<big> <embed> <kbd> <q> <tfoot>
<blockquote> <fieldset> <keygen> <rp> <th>
<br> <figcaption> <label> <rt> <thead>
<button> <figure> <legend> <ruby> <time>
<canvas> <font> <li> <s> <tr>
<caption> <footer> <link> <samp> <tt>
<center> <form> <map> <script> <u>
<cite> <frame> <mark> <section> <ul>
<code> <frameset> <menu> <select> <var>
<video>
Formatação – Imagens
  • Sempre utilize url absoluta da imagem quando for utilizar imagens externas, por exemplo:
<img src="http://mkt.locaweb.com.br/images/logo.jpg" border="0">
  • Nunca utilize URLs relativas, por exemplo:
<img src="images/logo_mkt.jpg" border="0" alt="A imagem"/>

 

  • Evite utilizar uma única imagem grande como conteúdo do e-mail pois isso é considerado como prática de SPAM.
  • Prefira utilizar mais textos na criação de sua mensagem, para que assim diminua a probabilidade da mesma ser considerada SPAM.
  • Coloque sempre o atributo border=”0″ nas tags de imagem <img>, pois assim como os browsers, os programas de e-mail costumam colocar uma borda azul ao redor de imagens que tenham link.
  • Não use imagens com extensão PNG que possuem áreas transparentes, pois não são aceitas em versões do Outlook anteriores a 2007, pois seu render engine é o mesmo que o do IE6, que não suporta PNG transparente. As áreas que deveriam ser transparentes são exibidas em cinza.
  • O atributo ALT oferece um texto alternativo quando alguma imagem não carrega ou não pode ser visualizada. Esse atributo é muito usado para melhorar a acessibilidade de uma página na web e principalmente de um E-mail Marketing, já que muitos clientes de e-mail bloqueiam as imagens enviadas por remetentes desconhecidos do destinatário. Nesta situação, a função do atributo é facilitar a “pré-leitura” para o usuário. O atributo alt pode ser formatado para a leitura ficar mais organizada.
  • Evite usar gifs animados.
Formatação – Tabelas
  • Utilize layouts baseados em tabelas ao invés de divs, como no padrão tableless, por mais que essa prática não seja recomendada na construção de sites, uma vez que a maior parte dos programas de e-mail não renderiza os atributos das tags <div> corretamente.
  • Evite utilizar as propriedades colspan e rowspan nas tags <td>, pois alguns programas de e-mail não tratam da forma esperada.
  • Prefira utilizar a propriedade width nas tags <td> ao invés de utilizar nas tags <table>, como no exemplo abaixo:
<table cellspacing="0" cellpadding="10" border="0">
 <tr>
  <td width="120"></td>
  <td width="480"></td>
 </tr>
</table>
  • Utilize sempre o atributo valig=”top” para alinhar o conteúdo:
<table cellspacing="0" cellpadding="10" border="0">
 <tr>
  <td width="120" valign="top"></td>
  <td width="480" valign="top"></td>
 </tr>
</table>
  • Utilize <a hef=”url_destino”>Texto</a>.
  • Evite usar iframe em links de mensagens. Alguns provedores de e-mail não tratam da forma esperada.
Formatação – Estilo CSS
  • Nunca utilize a tag <link> para referenciar um arquivo de estilos (.css), pois a maioria dos provedores removem essa tag.
  • Nunca utilize forma reduzida para definir um estilo, por exemplo ao invés de:
style="font: 12px/16px Arial, Helvetica"

utilize:

style="font-size:12px; line-height:16px; 
font-family:Arial, Helvetica;"
  • Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.
  • Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.
  • Não utilize a tag <style> com a definição das classes de estilo, pois alguns provedores removem essa tag (e diversos programas de e-mail não tratam esta tag). Caso insista em utilizar, coloque essa tag dentro da tag <body> e não dentro da tag <head>, mas neste caso você deve testar a mensagem em diversos programas de e-mail, para ver que ela não será distorcida. (não utilize as tags de comentário HTML <!– e –> dentro da tag <style> pois o editor HTML do Email Marketing irá distorcer todo código que estiver dentro dessas tags.)Errado:
    <style type="text/css">
    <!--
    .bloco1_titulo 
    {font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px; 
    color:#FFFFFF; font-weight:bold; background-color:#333366;
    padding-left:10px; } -->
    </style>

    Certo:

    <style type="text/css">
    .bloco1_titulo {font-family:Verdana, Arial, Helvetica,
    sans-serif; font-size:10px; 
    color:#FFFFFF; font-weight:bold; background-color:#333366; 
    padding-left:10px; }
    </style>

    Prefira utilizar o CSS em sua forma inline ou seja, direto no código HTML, por exemplo:

    <p style="font-family:Arial; font-weight:bold;
    font-size:11px; color:red;">texto</p>
  • Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.
Formatação – Formulários
  • Evite utilizar formulários pois estes são bloqueados no Outlook e por vários provedores.
Formatação – Imagens de Fundo
  • Prefira utilizar a tag <td background>, por exemplo:
    <body> 
    <table border="0" cellpadding="0" cellspacing="0"> 
    <tr>
    <td background="http://mkt.locaweb.com.br/images.jpg" 
    width="767" height="830">lalal</td>
    </tr>
    </table>
    </body>

    Evite utilizar imagens de fundo, pois alguns provedores (como o Gmail por exemplo) e clientes de email não permitem a visualização da imagem.

Formatação – Cor de fundo
  • Utilize a tag <div> com a propriedade background-color, e no style defina margin 0px para o body por exemplo ( Obs: Neste caso, ajuste o parametro height para definir a altura da cor de fundo):
    <div>
    <style>
    body{
    margin:0px;
    }
    </style>
    </div>
    <div style="background-color: red; width: 100%; 
    height:800px;">
      qualquer texto aqui
    </div>
  • Outra maneira é utilizar a tag <td> com a propriedade bgcolor, por exemplo:
    <table>
     <tr>
      <td bgcolor="red">texto<br />dsadasdas </td>
     </tr>
    </table>
Formatação – Flash e Javascript
  • Nunca utilize Flash ou Javascript no corpo do email pois estes são bloqueados pelos anti-virus dos principais provedores.
Formatação – Expressões

Evite textos, expressões ou mensagens que contenham:

  • Termos quantitativos com a palavra “mais” seguida de uma exclamação (ex.: venda mais… durma mais… ganhe mais… )
  • Sorte acompanhado de interrogações
  • Termos sobre pechincha ou oportunidade única
  • Texto contendo termos sobre grande quantidade de pessoas (ex.: junte-se a comunidade do Facebook)
  • Termos sobre exclusividade como se a mensagem fosse apenas para você
  • Trocadilho do tipo 4you (for you)
  • Texto no assunto separado por pontos para burlar a filtragem (ex.: palavras do tipo P.R.O.M.O.Ç.Ã.O)
  • Satisfação garantida
  • Informando que não é um spam
  • Oportunidade única
  • Venda de listas de emails
  • Telemarketing
Resolução de alguns problemas conhecidos
  • Para remover espaços em branco entre linhas de uma tabela com imagens basta adicionar esse estilo no código fonte:
    <style>img {display:block}</style>
  •  Logo após, efetuar a conversão do código, para que todo o código CSS fique no formato inline!
  • Para isso, sugerimos a ferramenta:  http://inlinestyler.torchboxapps.com/styler/convert/
Recomendações adicionais
  • O ideal é que o layout não ultrapasse 600px de largura, assim evita rolagem horizontal.
  • Use a ferramenta slice do Photoshop e faça recortes em blocos horizontais.
  • Evite mesclar colunas e linhas pelos atributos rowspan e colspan, ja que eles não são suportados pelo Microsoft Outlook 2007. Isso irá prejudicar a renderização correta da mensagem. Nesse caso use tabela dentro de tabela.
  • Para otimizar a entrega das mensagens, desenvolva o código HTML para que tenha até 30 kb. (evita pontuar no ranking de SPAM)
  • Se usar imagens de fundo para o corpo da mensagem, através de css inline background-image, saiba que elas não serão visualizadas por destinatários que utilizam Outlook e Hotmail, a solução é usar tambem background-color:#corSolida (cor próxima da imagem) pra não fugir muito do layout.
  • Para remover um sublinhado basta usar css inline: style=”text-decoration: none;” direto no link.
  • Teste seu template em diversos clientes de email. Ao criar um site, qualquer desenvolvedor deve testá-lo em vários navegadores. Para email marketing isso não é diferente, os destinatários usam uma ampla variedade de clientes de email e, você deve desenvolver um template que seja perfeitamente visualizado na maioria deles.
  • Evite utilizar no Assunto, Corpo ou Remetente de sua mensagem, palavras que possam ser interpretadas como SPAM, exemplos: clique aqui, mailmkt, crédito, grátis, curso, de/para sua empresa, promoção e entre outros.
Atualizado em 4 de julho de 2018

Este artigo foi útil ?

Artigos relacionados