21/9/2014

Boas prticas de HTML para Email - Wiki Locaweb

Boas prticas de HTML para Email

De Wiki Locaweb

Este documento oferece algumas orientaes sobre como otimizar e-mails para eles no serem tratados como spam pelo destino.
Salientamos que o envio de E-mail Marketing (e-mails em massa) utilizando o servio Revenda no permitido

Criar uma mensagem HTML no o mesmo que criar uma pgina HTML, pois muitas tags costumam ser removidas pelos leitores de email como
webmails e Outlook, por exemplo.
Existem algumas prticas que devem ser seguidas para que a mensagem no aparea distorcida para seus destinatrios.
Porm no h como garantir que ao seguir essas prticas a mensagem chegar sem distores para todos os provedores, pois estes alteram suas
regras constantemente principalmente por motivo de segurana.

Tags
Tags no recomendadas Tags aceitas
Tags no recomendadas
<meta> No serve para mensagens em HTML
<title> utilizado somente para pginas 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

Formatao
Evite utilizar no Assunto, Corpo ou Remetente de sua mensagem, palavras que possam ser interpretadas como SPAM
Exemplos:
clique aqui
mailmkt
crdito
grtis
curso
de/para sua empresa
promoo
entre outros
Imagens Tabelas Insero de links Estilos (CSS) Formulrios Imagem de fundo Cor de fundo Flash e Javascript
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 contedo do email pois isso considerado como prtica de spam
Prefira utilizar mais textos na criao 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.
No use imagens com extenso PNG que possuem reas transparentes, pois no so aceitas em verses do outlook anteriores a 2007,
pois seu render engine o mesmo que o do IE6, que no suporta PNG transparente. As reas que deveriam ser transparentes so exibidas em
cinza
O atributo ALT oferece um texto alternativo quando alguma imagem no carrega ou no pode ser visualizada. Esse atributo muito usado
para melhorar a acessibilidade de uma pgina na web e principalmente de um email marketing, j que muitos clientes de email bloqueiam as
imagens enviadas por remetentes desconhecidos do destinatrio. Nesta situao, a funo do atributo facilitar a pr-leitura para o usurio.
O atributo alt pode ser formatado para a leitura ficar mais organizadas
http://wiki.locaweb.com.br/pt-br/Boas_pr%C3%A1ticas_de_HTML_para_Email

1/2

21/9/2014

Boas prticas de HTML para Email - Wiki Locaweb

Evite usar gifs animados

Resoluo de alguns problemas conhecidos

Removendo espao em branco entre linhas de uma tabela com imagens
Basta adicionar esse estilo no cdigo fonte:
<style>img {display:block}</style>

Logo aps, efetuar a converso do cdigo, para que todo o cdigo 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/

Recomendaes adicionais
O ideal que o layout no ultrapasse 600px de largura, assim evita rolagem horizontal
Use a ferramenta slice do Photoshop e faa recortes em blocos horizontais
Evite mesclar colunas e linhas pelos atributos rowspan e colspan, ja que eles no so suportados pelo Microsoft Outlook 2007. Isso ir prejudicar a
renderizao correta da mensagem. (nesse caso use tabela dentro de tabela)
Para otimizar a entrega das mensagens, desenvolva o cdigo HTML para que tenha at 30 kb. (evita pontuar no ranking de spam)
Se usar imagens de fundo para o corpo da mensagem, atravs de css inline background-image, saiba que elas no sero visualizadas por
destinatrios que utilizam Outlook e Hotmail, a soluo usar tambem background-color:#corSolida (cor prxima da imagem) pra no 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 vrios navegadores. Para email
marketing isso no diferente, os destinatrios usam uma ampla variedade de clientes de email e, voc deve desenvolver um template que seja
perfeitamente visualizado na maioria deles

Links teis
Validador de CSS e HTML da Microsoft para Outlook (http://www.microsoft.com/downloads/details.aspx?familyid=0b764c08-0f86-431e-8bd5ef0e9ce26a3a&displaylang=en)
Lista de propriedades de CSS que so aceitas nos principais provedores
(http://www.locaweb.com.br/downloads/Guia_Boas_Praticas_CSS_para_Email.zip)
Relatrios sobre tags aceitas pelos principais provedores (http://www.email-standards.org)

Veja tambm
Exportando contatos do Email Marketing para um arquivo .CSV (/pt-br/Exportando_contatos_do_Email_Marketing_para_um_arquivo_.CSV)
Criando mensagens no Email Marketing (/pt-br/Criando_mensagens_no_Email_Marketing)
Controle de bounces (/pt-br/Controle_de_bounces)
Adicionando remetente prprio no Email Marketing (/pt-br/Adicionando_remetente_pr%C3%B3prio_no_Email_Marketing)
Relatrios do E-mail Marketing (/pt-br/Relat%C3%B3rios_do_E-mail_Marketing)
Gerando cdigo para formulrio de inscrio (/pt-br/Gerando_c%C3%B3digo_para_formul%C3%A1rio_de_inscri%C3%A7%C3%A3o)

(http://centraldocliente.locaweb.com.br/)
(http://painel.locaweb.com.br/)

(http://atendimento.locaweb.com.br/)

Central do Cliente
Painel de Controle
Central de Atendimento
(http://centraldocliente.locaweb.com.br/)
(http://painel.locaweb.com.br/) (http://atendimento.locaweb.com.br/)
Disponvel em "http://wiki.locaweb.com.br/index.php?title=Boas_pr%C3%A1ticas_de_HTML_para_Email&oldid=67067
(http://wiki.locaweb.com.br/index.php?title=Boas_pr%C3%A1ticas_de_HTML_para_Email&oldid=67067)"
Categorias (/pt-br/Especial:Categorias): Revenda E-mail (/pt-br/Categoria:Revenda_E-mail) Revenda Webmail (/pt-br/Categoria:Revenda_Webmail)
E-mail (/pt-br/Categoria:E-mail) Email Marketing (/pt-br/Categoria:Email_Marketing) Novo Email Marketing (/pt-br/Categoria:Novo_Email_Marketing)
Esta pgina foi modificada pela ltima vez (s) 17h02min de 27 de agosto de 2014.
Esta pgina foi acessada 128 872 vezes.

http://wiki.locaweb.com.br/pt-br/Boas_pr%C3%A1ticas_de_HTML_para_Email

2/2