Boas práticas de HTML para Email

Este documento oferece algumas orientações sobre como otimizar e-mails para eles não serem tratados como spam pelo destino Salientamos que o envio de E-mail Marketing (e-mails em massa) utilizando o serviço Revenda não é permitido

Conteúdo

1 Introdução
2 Boas Práticas para construção do código HTML
3 Resolução de alguns problemas conhecidos
- 3.1 Removendo espaço em branco entre linhas de uma tabela com imagens
4 Recomendações adicionais
5 Links Úteis
6 Veja também
7 Links

Introdução

Criar uma mensagem HTML não é o mesmo que criar uma página HTML, pois muitas tags costumam ser removidas pelos leitores de email como webmails e Outlook por exemplo. 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.

Boas Práticas para construção do código HTML

Tag's Não Recomendadas

<title> É utilizado somente para páginas HTML, evite usar em mensagens.

Tag's Aceitas

Somente as tags HTML abaixo são aceitas no Email Marketing. Todas as outras são removidas:

<a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdo><big><blockquote><br><button><canvas><caption><center><cite><code><col><colgroup><command>
<datalist><dd><del><details><dfn><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1><h2><h3><h4><h5><h6><head><hgroup><hr><i>
<img><input><ins><kbd><keygen><label><legend><li><link><map><mark><menu><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><pre><progress><q><rp><rt>
<ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><table><tbody><td><textarea><tfoot><th><thead><time><tr><tt><u><ul><var><video>

Evite utilizar no "Subject", "corpo" de sua mensagem ou do campo "De" 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

entre outros.

Imagens

Sempre utilize url absoluta da imagem quando for utilizar imagens externas, por exemplo:

<img src="http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg" border="0">

Nunca utilize URLs relativas, por exemplo:

<img src="images/logo_locamail_marketing-1.jpg" border="0" alt="A imagem" width="500" height="50" />

Evite utilizar uma única imagem grande como conteúdo do email pois isso é considerado como prática de spam.
Prefira utilizar mais textos na criação de sua mensagen, 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 email marketing, já que muitos clientes de email 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 organizadas.

evite usar gifs animados.

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>

Inserção de links

Utilize <a hef="url_destino">Texto</a>

Evite usar iframe em link's de mensagens. Alguns provedores de e-mail não tratam da forma esperada.

Estilos (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;"

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  dentro da tag <style> pois o editor HTML do Email Marketing irá distorcer todo código que estiver dentro dessas tags.</font>

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>

Dica de ferramenta para converter HTML em código com CSS inline: http://inlinestyler.torchboxapps.com

Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.

Formulários

Evite utilizar formulários pois estes são bloqueados no Outlook e por vários provedores

Imagem de fundo

Prefira utilizar a tag <td background>, por exemplo:

<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr>
<td background="http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg" width="767" height="830">lalal</td>
</tr>
</table>
</body>

OBS: 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.

Cor de fundo

Utilize a tag <div> com a propriedade background-color, e no style defina margin 0px para o body por exemplo:

<div>
<style>
body{
margin:0px;
}
</style>
</div>
<div style="background-color: red; width: 100%; height: 800px;">
	qualquer texto aqui
</div>

Obs.: Neste caso, ajuste o parametro height para definir a altura da cor de fundo

outra maneira é utilizar a tag <td> com a propriedade bgcolor, por exemplo:

<table>
 <tr>
  <td bgcolor="red">texto<br />dsadasdas </td>
 </tr>
</table>

Flash e Javascript

Nunca utilize Flash ou Javascript no corpo do Email pois estes são bloqueados pelos anti-virus dos principais provedores

Resolução de alguns problemas conhecidos

Removendo espaço 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/

retirado de http://blog.icontact.com/blog/mysterious-image-gaps-in-gmail/

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.

Links Úteis

Veja também

Links