Criação de sites e SEO

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

Palavras chave

E-mail marketing, boas práticas, html, javascript, anti, spam

Glossário

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


Fonte Wiki Locaweb