FAQ > Email Marketing > Criando um e-mail marketing dentro das normas anti-spam

Glossário

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

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

Evite utilizar no "Subject", "corpo" de sua mensagem, além 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.

Obs.: O assunto em letras maiúsculas também faz com que o e-mail receba pontuação

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

Evite utilizar uma única imagem grande como conteúdo do email pois isso é considerado como prática de spam.
Prefira quebrar a imagem em pedaços menores caso seu conteúdo só seja esse, e além disso utilizar mais textos na criação de suas mensagens.

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

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
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>

Inserção de links

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

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>

Formulários

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

Imagem de fundo

Sempre utilize a tag <div style> com a propriedade background-image, para delimitar a imagem de fundo, por exemplo:

<div style="width: 100%; height: 100%;BACKGROUND-IMAGE: url(http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg)">Texto aqui</div>

OBS: Evite utilizar imagens de fundo, pois alguns provedores 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>

Encoding

Prefira utilizar character encoding como UTF-8 ou encoding mais simples como ASCII ou ISO-8859-1

Flash e Javascript

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

Em resumo temos :

Certos cuidados ao montar seu e-mail marketing evitam muitas dores de cabeça futuras, principalmente quando tem-se que usar um subject longo e o template é apenas uma imagem.

Para começar, limite o subject a não mais que 50 caracteres. Evite termos de baixa reputação (promoção, imperdível, crédito, etc), não use acentos gráficos (!, ?) e nunca, nunca use um subject em caixa alta. Dê uma idéia geral em poucas letras. Se for uma promoção, dê o nome da promoção, sem acentos e evite as expressões fiscalizadas pelos programas anti-spam (divulgue, consulte-nos, frete grátis) além das já citadas.

Se for uma newsletter, escolha um assunto principal e coloque-o no subject. Os demais, deixe na mensagem, apenas.

Fatie a imagem do template. Insira as Alt Tags, que permitirão que seu e-mail seja compreendido antes do carregamento das imagens. Mapeie, insira hiperlinks e nos endereços das imagens, não use as palavras marcadas. Uma imagem hospedada em uma pasta chamada marketing, promo ou e-mailmkt vai pontuar e muito o seu template. Por que não nomear as pastas como images ou simplesmente imgs? Cai muito melhor assim, não? E não pontua.

Equilibre seu template. Use imagens, mas também use textos. O ideal é 50% para cada.

Deixe seu HTML puro. Nada de CSSs, DIVs, Styles e Javascripts, pois todos são bloqueados nos webmails.

Seguindo estas dicas, você monta um "e-mail adequado", que segue as regras do mercado de relacionamento digital. Seus contatos irão perceber isto quando os e-mails começarem a cair direto em suas caixas de entrada, ao invés das caixas de lixo eletrônico. E você ganha confiabilidade nos provedores, que, no fim das contas, são os portões de acesso aos seus clientes.

Fonte: Wiki Locaweb e Virtual Target

voltar