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 seus e-mails para eles não sejam tagueados como spam.

Para isso, algumas práticas devem ser seguidas, a fim de que sua mensagem não apareça distorcida para seus destinatários.

No entanto, mesmo que você siga essas práticas não há como garantir que a mensagem chegará sem distorções para todos os provedores, pois os mesmos alteram suas regras constantemente por motivo de segurança.

Bom, vamos as dicas…

Se você desenvolve o seu conteúdo por código HTML, há algumas tags não recomendadas e outras tags que são aceitas, veja quais são:

  • 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"/>

 

  • Eviteutilizar uma única imagem grande como conteúdo do e-mail, pois isso é considerado como prática de SPAM.
  • Prefirautilizar mais textos na criação de sua mensagem.
  • 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. As áreas que deveriam ser transparentes são exibidas em cinza.
  • O atributo ALToferece 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. Nesta situação, a função do atributo é facilitar a “pré-leitura” para o usuário.
  • Evite usar gifs animados.
Formatação – Tabelas
  • Utilizelayouts 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, a maior parte dos programas de e-mail, não renderiza os atributos das tags <div>
  • Eviteutilizar as propriedades colspan e rowspan nas tags <td>, pois alguns programas de e-mail não reconhecem a forma certa.
  • Prefirautilizar 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>.
  • Eviteusar iframe em links de mensagens. Alguns provedores de e-mail não tratam da forma esperada.
Formatação – Estilo CSS
  • Nuncautilize 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.
  • Não utilize a tag <style> como definição das classes de estilo, pois alguns provedores removem essa tag. Caso, insista em utilizar, coloque essa tag dentro da tag <body> e não dentro da tag <head>, sendo necessário testar a mensagem em diversos programas de e-mail, a fim de verificar se ela estará distorcida.
  • Evite utilizar as tags de comentário HTML <!––> 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
  • Eviteutilizar 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 de e-mail 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 parâmetro 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 e-mail, pois estes são bloqueados pelos antivírus dos principais provedores.
Formatação – Expressões

Evite textos, expressões ou mensagens que contenham:

  • Termos quantitativos com a palavra “mais” seguida de uma reticências (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
  • Eviteutilizar 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.
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>
  • Em seguida, efetue a conversão de todo o código para que o 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.
  • Para otimizar a entrega das mensagens, desenvolva o código HTML para que tenha até 30KB.
  • Para remover um sublinhado basta usar css inline: style=”text-decoration: none;”direto no link.
  • Ao criar um site é necessário que você teste em vários navegadores. Para e-mail marketing isso não é diferente, os destinatários usam uma ampla variedade de provedores (hotmail, gmail, yahoo, etc) e que podem apresentar o seu template de diversos formatos.

Agora que você já conferiu as boas práticas de HTML para Email Marketing, conheça nosso serviço de E-mail marketing!

Atualizado em 16 de abril de 2019

Este artigo foi útil ?

Artigos relacionados