Outubro de 2009.
Manual para a produção de templates de email marketing
Introdução
Este manual foi desenvolvido para auxiliar os usuários da Virtual Target a desevolverem o
HTML de um template de forma a melhorar o resultado final dos envios efetuados através
da ferramenta.
Desenvolvimento do template
Usaremos o template abaixo para exemplificar:
Dicas e curiosidades...
• O Hotmail, quando acessado a partir do
Firefox, acrescenta um espaçamento de
quase 5 pixels ao redor de todas as imagens.
Isso pode prejudicar a correta visualização
de templates compostos essencialmente por
imagens. Esse problema pode ser corrigido
através do atributo style=”display:block”
inserido em todas as tags de imagem do
HTML.
• O Microsoft Outlook 2007 não suporta
imagens em GIF animado. Se utilizar alguma
no template, atente para o fato de que este
cliente de email exibirá apenas uma imagem
estática do primeiro frame da animação.
• Para otimizar a entrega das mensagens,
desenvolva o código HTML para que tenha
até 30 kb.
Formato
• Para que a leitura não seja prejudicada por barras de rolagem horizontais, limites de
janelas pop-up ou outros, utilize largura máxima de 600 pixels para os templates de email
marketing.
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
• Na criação do layout, determine áreas para textos em fontes de sistema (Arial,
Verdana, Times etc). Esses textos, posteriormente, poderão ser reproduzidos em HTML
e manter um equilíbrio entre a quantidade de imagens. Esse equilíbrio é necessário
para evitar pontuação em testes antispam, que avaliam a proporção entre cada tipo de
conteúdo.
• Utilize imagens em formato JPEG ou GIF e com 72DPI de resolução. Otimize a
qualidade das imagens de forma que todas elas somem, juntas, até 100Kb.
Topo e rodapé da mensagem
Disponibilize sempre a opção de visualização da comunicação no browser, fora da
caixa de email, e um link para o mecanismo de opt-out.
A Virtual Target insere, automaticamente, as seguintes frases na mensagem:
Dicas e curiosidades...
• É possível personalizar o endereço
de preview (@PREVIEW) e de opt-out
(@OPTOUT) de acordo com o design do
template. A formatação destes textos é feita
dentro do próprio template, utilizando as tags
de fonte e link. Se optar pela formatação
dos textos de acordo com seu design, não
esqueça de desabilitar a inserção automática
deles na plataforma, na aba Dados Gerais do
envio. Para habilitar a versão personalizada,
entre em contato através do email:
[email protected]
TOPO
Se você não estiver visualizando a mensagem corretamnete, acesse esse link.
RODAPÉ
Para garantir que nossos comunicados cheguem em sua caixa de entrada,
adicione o email (email remetente) ao seu catálogo de endereços.
A (nome da empresa) respeita a sua privacidade e é contra o spam na rede.
Se você não deseja mais receber nossos e-mails, cancele sua inscrição aqui.
Montagem do template
Existem 3 formas de produzir o template:
1- Inserir a imagem inteira no HTML e colocar o link;
2- Fatiar a imagem e colocar links nas fatias;
3- Fatiar a imagem e produzir as partes de texto no HTML.
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
• No template, insira um link para a
Política de Privacidade de seu website.
Se você não tem uma, pode utilizar um
roteiro disponível no site da DMA – Direct
Marketing Association (em inglês): http://
www.dmaresponsibility.org/PPG/
Inserir a imagem inteira no HTML e colocar o link
Se o template for produzido como uma imagem sem fatias e a imagem inteira for um
link, a sua mensagem poderá ser barrada pelas ferramentas anti-spam dos servidores
de email e, em muitos casos, ela não será entregue na caixa postal do usuário.
Abaixo, temos o resultado de um teste utilizando a ferramenta SpamAssassin.
Content analysis details: (6.9 points, 5.0 required)
pts rule name description
---- ---------------------- -------------------------------------------------1.2 HTML_IMAGE_RATIO_02 BODY: HTML has a low ratio of text to image area 1
0.6 HTML_90_100 BODY: Message is 90% to 100% HTML
2.6 HTML_IMAGE_ONLY_08 BODY: HTML: images with 400-800 bytes of words 2
0.2 MIME_QP_LONG_LINE RAW: Quoted-printable line longer than 76 chars
2.3 HTML_SHORT_LINK_IMG_1 HTML is very short with a linked image 3
Principais problemas encontrados pelo anti-spam:
1 - O item HTML_IMAGE_RATIO_02 BODY é apontado pelo anti-spam pois sua mensagem
possui uma quantidade maior de imagem do que texto.
2 - O item HTML_IMAGE_ONLY_08 BODY é apontado pelo anti-spam pois a sua mensagem é
uma imagem que não foi fatiada e possui texto dentro da imagem.
3 - O item HTML_SHORT_LINK_IMG_1 HTML é apontado pelo anti-spam pois sua mensagem
possui um link único em uma imagem que não foi fatiada.
Com certeza, este tipo de template prejudica o tempo de conclusão de envios,
apresenta muitos erros de envio como conexões excessivas, classificação como spam
e na maioria das caixas postais, esta mensagem chegará em “lixo eletrônico”. Isso
terá impacto negativo no resultado da ação.
Fatiar a imagem e colocar links nas fatias
Esta forma de produção de template também não é a mais indicada porque mesmo
que no teste a pontuação fique abaixo de 5.0 pontos, muitas ferramentas anti-spam
classificam como spam o template produzido com imagens fatiadas e links inseridos
nas fatias.
Veja o resultado do teste efetuado na ferramenta SpamAssassin:
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
Dicas e curiosidades...
• O teste antispam avalia o cabeçalho,
assunto, remetente e código da mensagem
– inclusive a versão de texto - em busca de
expressões suspeitas ou práticas comuns a
spammers.
• Não esqueça de preencher a tag <title>
do documento HTML. Muitas ferramentas
antispam verificam o conteúdo desta tag
e, caso ela esteja vazia ou preenchida com
expressões suspeitas, sua mensagem pode
receber pontuação como spam.
Content analysis details: (4.3 points, 5.0 required)
pts rule name description
---- ---------------------- -------------------------------------------------0.2 HTML_Tag_EXIST_TBODY BODY: HTML has “tbody” tag
1.2 HTML_IMAGE_RATIO_02 BODY: HTML has a low ratio of text to image area 1
0.6 HTML_90_100 BODY: Message is 90% to 100% HTML
2.3 HTML_IMAGE_ONLY_12 BODY: HTML: images with 800-1200 bytes of words 2
Principais problemas encontrados pelo anti-spam:
1 - O item HTML_IMAGE_RATIO_02 BODY é apontado pelo anti-spam pois sua
mensagem possui uma quantidade maior de imagem do que texto.
2 - O item HTML_IMAGE_ONLY_12 BODY é apontado pelo anti-spam pois a sua
mensagem é uma imagem fatiada com texto dentro da imagem.
Para conseguir um bom resultado nos envios, a pontuação deve ser a mais baixa
possível. Neste caso ela ainda está muito alta.
Na utilização de imagens, utilize o atributo “alt” em cada fatia. Isso facilita o
entendimento da mensagem quando o cliente de email (Outlook Express, Thunderbird,
etc.) ou webmail bloqueia a visualização das imagens. Esse artifício também ajuda a
baixar a pontuação dos softwares anti-spam.
Dicas e curiosidades...
• Se o template for composto
essencialmente por imagens e elementos
que não podem ser reproduzidos em HTML,
fatie a arte em pedaços – ou slices – de
imagens menores para que sejam inseridas
separadamente no código.
• Certifique-se de que, no código, o
atributo de largura esteja especificado em
todas as imagens. Do contrário, as caixas
que delimitam a presença delas ocuparão
a largura de uma linha inteira no Microsoft
Outlook 2007, na visualização com as
imagens bloqueadas.
Não esqueça de hospedar as imagens do
template em um servidor web e alterar
os valores do “src” para seus respectivos
caminhos na web. Assim, ao invés de:
<img src= “imagens/logo.gif”>
Fatiar a imagem e produzir as partes de texto no HTML
Esta é a forma mais eficaz de produção de templates, porque diminui visivelmente a
possibilidade da mensagem ser classificada como spam desde que algumas sugestões
de redação* de texto sejam seguidas.
Para evitar a classificação como spam o seu template deve ter a maior área de texto
possível. Se a sua mensagem possui mais texto do que imagens, ela não é considerada
spam.
Veja, abaixo, o resultado do teste efetuado na ferramenta Virtual Target:
Content analysis details: (0.5 points, 5.0 required)
pts rule name description
-- -------------------- -----------------------------------------------0.3 HTML_60_70 BODY: Message is 60% to 70% HTML
0.2 HTML_Tag_EXIST_TBODY BODY: HTML has “tbody” tag
A pontuação deste template é muito boa. Isso facilita a entrega da mensagem e a
possibilidade do email chegar na caixa de lixo eletrônico é muito pequena. O tempo
para a conclusão do envio é menor, há um aumento sensível na taxa de “enviados com
sucesso”, “abertos” e “clicados” e um impacto positivo no resultado da ação.
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
Altere para: <img src= “http://www.
seuservidorweb.com.br/imagens/logo.gif>
Construção do código
Dicas e curiosidades...
• Certifique-se de que todos os objetos do template tenham seu alinhamento definido,
especialmente células de tabela que contêm elementos como imagem e textos. Os
clientes de email tendem a centralizar todo tipo de conteúdo da mensagem, o que
pode prejudicar a leitura pelo destinatário.
• No HTML, reproduza o design idealizado
para o email marketing. Diagrame o conteúdo
com tabelas. Evite mesclar linhas e colunas
através dos atributos rowspan e colspan,
pois são atributos não suportados pelo
Microsoft Outlook 2007. Isso irá prejudicar
a renderização correta da mensagem neste
cliente de email.
• Verifique se o código HTML está de acordo
com as recomendações do W3C utilizando o
validador disponível no site: http://validator.
w3.org. Para o DOCTYPE, recomenda-se o
uso de HTML 4.01 Transitional ou XHTML
1.0 Transitional. As especificações do tipo
Transitional contêm elementos que já caíram
em desuso - frequentemente utilizados em
email marketing - e, ainda assim, permitem a
validação do código junto ao W3C.
• Evite o uso das propriedades de
posicionamento, como position, left, top,
clear e float. Apesar de suportarem CSS
inline, estas propriedades não são muito bem
aceitas pelos clientes de email.
• Alguns clientes de email têm restricões quando à exibição de cor de fundo nas
mensagens. Para inserir cor de fundo no template, utilize tanto o atributo bgcolor do
HTML quanto o background-color de CSS. Alguns clientes de email suportam apenas
uma destas formas e, utilizando ambas, é possível garantir a exibição da cor de
fundo nos clientes de email – exceto os que não suportam cor de fundo de nenhuma
maneira.
Como no exemplo:
<body bgcolor=”#96bc33” style=”background-color: rgb(150, 188, 51);”>
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
Dicas e curiosidades...
• Evite criar imagens de fundo para o
corpo da mensagem, pois se inseridas
através do atributo background de HTML
ou background-image de CSS, não serão
visualizadas por destinatários que utilizam
Gmail, Outlook e Hotmail.
Este é um exemplo de como ficaria o email marketing sem o fundo, visualizado no Gmail, já que
ele não aceita apenas o atributo bgcolor
• A formatação de textos com a tag <font> é recomendada devido a altíssima
aceitação dos clientes de email. Porém, o atributo size – que possui valores restritos
nos tamanhos de fonte – pode ser substituído pelo estilo equivalente em CSS: style=
“font-size: 11px;”. Como os tamanhos 11px e 12px não podem ser reproduzidos com o
atributo size, o uso de CSS é permitido na forma inline, a mais aceita pelos clientes de
email.
• Estudos recentes provaram que os clientes de email já suportam corretamente
propriedades CSS relacionadas a textos, tais como família e tamanho de fonte. Para não
restringir o design do email marketing aos tamanhos 1 e 2 do atributo size da tag <font>,
você pode utilizar a propriedade font-size do CSS para utilizar tamanhos intermediários
como 11px e 12px, desta forma:
<font face=“Arial, Verdana, sans-serif” color=“#000000” style=“font-size:11px;”>
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
Dicas e curiosidades...
Propriedades de HTML e CSS que são aceitas pelos clientes de email
• De acordo com os testes realizados pela equipe de suporte Virtual Target , foi
constatado que alguns atributos não são visualizados corretamente em alguns clientes
de email.
Propriedades
IG/Ibest
Zipmail
Gmail
Hotmail
Livemail
Uol/Bol
background-color
border
font-size
font-family
font-weight
padding
table-layout
text-align
text-decoration
text-indent
Veja a tabela completa com todos clientes de email acessando este link:
http://virtualtarget.com.br/biblioteca.php/35/analises-de-email-marketing-em-clientesde-email-conclusao
HTML gerados por softwares do pacote Microsoft Office
- Evite utilizar os softwares do Pacote Microsoft Office (Word, Excel, Publish) para gerar
o código HTML de seu template. Normalmente, eles utilizam várias tags que “sujam” o
código e, no caso do Word, gera códigos em XML que prejudicam a visualização do seu
template.
Palavras e expressões barradas em ferramentas anti-spam
Para esclarecer alguns mistérios relacionados ao anti-spam, elaboramos uma lista com
algumas palavras e expressões que são fiscalizadas por ele. Se o seu email marketing
está sendo direcionado para a caixa de spam ou se o seu click through não está sendo
satisfatório, o problema pode diminuir se você melhorar o texto. As palavras abaixo não
devem aparecer no corpo da mensagem, no nome de imagem, nome de diretório ou em
links:
- Todos os direitos reservados
- Links para arquivos exe,pif,scr e outros
- Sigilo Absoluto
- Dúvidas Conjugais
- Grampo?
- Tenha seu site na Internet
- Ganhe dinheiro enviando emails
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
• Evite utilizar imagens do tipo “spacer”,
com dimensões de 1px na largura e/ou
altura. Muitos spammers utilizam esta
técnica para checar endereços de email
ativos e, por isso, é uma prática considerada
como spam. Se precisar inserir um espaço
vazio entre elementos, utilize a quebra de
linha simples <br> ou uma célula vazia de
tabela <td> em que você pode controlar a
altura do espaçamento.
Dicas e curiosidades...
- Trabalhe em casa
- Para retirar seu email da lista
- Divulgue sua/seu
- Fala sobre não perder tempo
- 24 Horas
- Contém ‘de/para sua empresa’
- Contém a palavra ‘hospedagem’
- Contém a palavra ‘hospedagem’ no Subject1
- Subject1: xx kg
- Subject1: Vagas Abertas
- Texto ‘e confira’
- Agência de Aproximação/Modelos
- Especialmente para você
- Fala para não responder o email
- Fala sobre perder peso
- Fala sobre perder peso no Subject1
- Saved from URL
- Pede desculpas pelo incomodo/transtorno
- Consulte-nos!
- Detetive ou Espionagem
- Despachamos para todo o Brasil
- Contém ponto de exclamação no From
- Provavelmente e’ sobre venda de listas de emails
- Fala sobre ‘Telemarketing’
- Fala sobre ‘Trabalhar em Casa’
- Fala sobre ‘e saiba mais’
- Fala sobre ‘Imperdível’
- Palavras como Marketing, Formulário, Form, Script, Inscreva-se.
- Fala sobre ‘Aproveite nossa promoção’
- XXXXX agora/já’
- Curso on-line’ no subject1
- Curso no subject1
- Curso no body2
- Inclui ‘Mala Direta’
- Inclui ‘Mala Direta de email’
- Inclui a palavra ‘Grátis’
- Inclui o texto ‘Frete Grátis’
- Inclui texto para remover email
- Inclui a frase ‘Tempo Limitado’
- Contém o texto ‘Clique aqui’
- Texto sobre ‘Renda Extra’
- Ganhe Dinheiro no Subject1
- Texto sobre ‘Renda Extra’ no Subject1
- From com a palavras-chave3
- Subject1 com a palavra ‘Promoção’
- Contém a palavra ‘você’ no Subject1
- Link para sites no cjb.net
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
• Sempre teste a visualização do template
nos navegadores mais utilizados por seus
destinatários. Os mais comuns são Firefox e
Internet Explorer.
Dicas e curiosidades...
- Link para sites no kit.net
- Chamando url no kit.net (src=)
- Link para sites de hospedagem grátis
- Link para sites no HPG
- Link para produtos no Mercado Livre
- Texto sobre nao receber mais a mensagem
- Dizendo que a msg será enviada apenas uma vez
- Dizendo que a msg não é um spam
- Interrogação no subject1
- Texto ‘A partir de $xx.xx’
- Texto ‘apenas $xx.xx’
- Texto ‘apenas $xx.xx’ no Subject1
- Preço no Subject1
1 - Assunto do email
2 - Corpo do email
3 - Campo “De:” do email contém as palavras CADASTRO,
PROMOÇÃO, OPORTUNIDADE, MELHOR.
Whitelist
• Solicite ao destinatário que adicione seu endereço remetente ao catálogo de endereços.
Isso fará com que suas próximas mensagens sejam entregues na caixa de entrada e com
as imagens já desbloqueadas.
• Próximo à mensagem de whitelist – e de opt-out -, também é válido inserir um
lembrete de como e/ou quando o destinatário efetuou cadastro em seu website para
receber email marketing. Por exemplo: “você está recebendo esta mensagem porque se
cadastrou no site X, no dia dd/mm//aaaa com o email [email protected]”. Esse
pequeno texto demonstra transparência em sua política opt-in e pode ser muito útil para
evitar que o destinatário clique no botão de reportar spam.
CSS
• Utilize apenas CSS inline, que é suportado pela grande maioria dos clientes de
email.
• Além das propriedades de posicionamento, o Outlook 2007 não suporta width ou
height de CSS. Prefira atribuir larguras e alturas aos elementos através de seus respectivos
atributos HTML.
• Você pode utilizar CSS para remover o efeito de sublinhado dos links. Para isso, basta
inserir o seguindo trecho de CSS na tag <a>:
<a href= “#” target=“_blank” style=“text-decoration:none”>
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
• O Gmail transforma em links todos os
textos que se assemelham a links: endereços
de email e quaisquer textos que terminem
em “.com”, mesmo que não comecem
com “http://www”. Os novos links terão a
aparência padrão de cor azul e sublinhado.
Verifique se há alguma referência a
endereços de email ou web no template
e já transforme-os em links com a mesma
formatação dos outros links da mensagem.
Dicas e curiosidades...
Links
• Para alterar a cor dos links, insira a formatação de fonte dentro da tag <a>, como
neste exemplo:
<a href= “http://www.virtualtarget.com.br” target= “_blank”>
<font face= “Arial, Verdana, Sans-serif” size= “2” color = “#bbd034”>
Virtual Target </font> </a>
• Caso necessário, você pode remover o sublinhado dos links através de CSS. Na
tag <a>, insira o trecho style= “text-decoration:none;”. Isso irá remover o efeito de
sublinhado do link.
• Em todos os links, insira o atributo target = “blank”, para assegurar que todos os
links de destino serão abertos em novas janelas. Essa ação parece óbvia, mas alguns
webmails carregam as páginas de destino na mesma janela - ou até mesmo dentro de
sua interface.
Virid - Envio e Gestão de Email Marketing
www.virid.com.br
• Crie contas em diversos webmails para
testar a visualização de seus templates em
cada um.