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
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
<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
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><iframe> <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">
- 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
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>
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 <!-- 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>
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/
Links Úteis
- Validador de CSS e HTML da Microsoft para Outlook
- Lista de propriedades de CSS que são aceitas nos principais provedores
- Relatórios sobre tags aceitas pelos principais provedores
