Manual para a produção de
templates de email marketing
Este manual foi desenvolvido para auxiliar nossos leitores a
desevolverem o HTML de um template de forma a melhorar o
resultado final dos envios efetuados através da ferramenta.
www.virid.com.br
avirid
Manual para a produção de templates de email marketing
Este manual foi desenvolvido para auxiliar nossos leitores 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 e o Gmail,
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 e o
Outlook 2010 não suportam
imagens em GIF animado. Se
utilizar alguma no template,
atente para o fato de que estes
clientes de email exibirão
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.
2
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
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.
• 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.
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.
• 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.the-dma.org/priv
acy/privacypolicygenerator.sht
ml
Sugestões de textos:
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.
3
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
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
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
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
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.
Principais problemas encontrados pelo anti-spam:
1 - A regra HTML_IMAGE_RATIO_02 BODY é apontada
pelo antispam pois sua mensagem possui uma
quantidade maior de imagem do que texto.
2 - A regra "HTML_90_100 BODY" significa que a
mensagem é composta por 90% de código HTML, e
apenas 10% de texto propriamente dito.
3 - A regra HTML_IMAGE_ONLY_08 BODY é apontada
pelo antispam pois sua mensagem possui uma
quantidade maior de imagem do que texto.
4 - A regra "MIME_QP_LONG_LINE RAW" é apontada
pelo antispam pois há linhas de código HTML cuja
extensão ultrapassa 76 caracteres, o que é considerado
uma boa prática de desenvolvimento. Portanto, usar a
técnica de "condensar" todo o HTML da mensagem em
uma única linha para reduzir o tamanho final do arquivo
pode render 0.2 pontos no teste antispam.
5 - A regra HTML_SHORT_LINK_IMG_1 HTML é
apontada pelo antispam pois sua mensagem apenas
uma imagem com link, indicando que pode ser um
grande folder cheio de informações, cuja imagem não
foi fatiada adequadamente.
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
4
Manual para a produção de templates de email marketing
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.
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.
Veja o resultado do teste efetuado na ferramenta
SpamAssassin:
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
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
Principais problemas encontrados pelo anti-spam:
1 - A regra "HTML_Tag_EXIST_TBODY BODY" é
apontada pelo antispam devido à presença da tag
<tbody> ao longo do código HTML.
2 - A regra "HTML_IMAGE_RATIO_02 BODY" é
apontada pelo antispam pois sua mensagem possui
uma quantidade maior de imagem do que texto.
3 - A regra "HTML_90_100 BODY" significa que a
mensagem é composta por 90% de código HTML, e
apenas 10% de texto propriamente dito.
4 - A regra "HTML_IMAGE_ONLY_12 BODY" significa
que a mensagem é composta por um código HTML que
totaliza entre 800 e 1200 caracteres, que é um valor
baixo e indica que a mensagem é curta (uma
característica de mensagens de spam).
Para conseguir um bom resultado nos envios, a
pontuação deve ser a mais baixa possível. Neste caso
ela ainda está muito alta.
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
5
Manual para a produção de templates de email marketing
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.
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
Dicas e curiosidades...
• 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”>
Altere para: <img src=
“http://www.seuservidorweb.c
om.br/imagens/logo.gif>
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.
6
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
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.
• 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.
• 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.
Como no exemplo:
<body bgcolor=”#96bc33” style=”background-color:
rgb(150, 188, 51);”>
7
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
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.
Por isso, antes de optar por
usar ou não imagens de fundo
no template, é bom que o
remetente conheça sua base
pra saber se pode prejudicar a
maioria dos destinatários.
Este é um exemplo de como ficaria o email marketing sem a imagem de
fundo, visualizado no Gmail, já que ele não aceita background-image.
• 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.
Veja no exemplo:
<font face=“Arial, Verdana, sans-serif”
color=“#000000” style=“font-size:11px;”>
8
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
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. As principais considerações acerca
dos tópicos analisados são:
Suporte a CSS
Dentre as três formas de utilizar CSS em layouts para
a web, a inline é a mais aceita pelos clientes de email.
CSS em folhas de estilo externas são aceitas apenas
por clientes de email desktop, como Thunderbird,
Outlook e Windows Mail.
Dicas e curiosidades...
• 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.
Suporte a HTML
A grande maioria das tags é suportada, com poucas
exceções. O Terra Mail (versão clássica) é o único que
não suporta as tags strong, em e del. O Outlook 2007
não suporta nenhuma tags de nenhum componente de
formulário.
Suporte a formulários
Os webmails BOL, UOL e Hotmail, assim como o
desktop Outlook 2007, não suportam formulários. Os
primeiros até exibem os campos corretamente, mas
não permitem o envio das informações. O Outlook
2007 não exibe nem os campos dos formulários,
trocando-os por caracteres como [] e () para impedir o
preenchimento e envio das informações.
Suporte a vídeos e animações
Talvez uma grande evolução no suporte a conteúdo
multimídia dentro do email tenha sido conseguida com
o fato dos webmails BOL e UOL (nova interface)
passarem a suportar mensagens com vídeos e
animações SWF. O Gmail também deu um pequeno
passo nessa direção quando anunciou o suporte a
vídeos do Youtube dentro das mensagens.
Os demais clientes de email não oferecem suporte a
vídeos e nem animações SWF. O único tipo de
animação aceita é a imagem em formato GIF animado.
O Outllok 2007, porém, não suporta este tipo de
imagem.
Veja a tabela completa com todos clientes de
email acessando este link:
http://emailmarketing.virid.com.br/template/analisesde-email-marketing-em-clientes-de-email-conclusao/
9
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
HTML GERADOS POR SOFTWARES DO PACOTE MICROSOFT OFFICE
Dicas e curiosidades...
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.
• Sempre teste a visualização
do template nos navegadores
mais utilizados por seus
destinatários. Os mais comuns
são Firefox e Internet Explorer.
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
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 Subject
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 Subject
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
10
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Manual para a produção de templates de email marketing
- 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 subject
- Curso no subject
- Curso no body
- 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 Subject
- Texto sobre ‘Renda Extra’ no Subject
- From com a palavras-chave
- Subject1 com a palavra ‘Promoção’
- Contém a palavra ‘você’ no Subject
- Link para sites no cjb.net
- 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 subject
- Texto ‘A partir de $xx.xx’
- Texto ‘apenas $xx.xx’
- Texto ‘apenas $xx.xx’ no Subject
- Preço no Subject
Dicas e curiosidades...
• Crie contas em diversos
webmails para testar a
visualização de seus templates
em cada um.
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
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
11
Manual para a produção de templates de email marketing
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>:
Dicas e curiosidades...
• 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.
<a href= “#” target=“_blank”
style=“text-decoration:none”>
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.
12
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
Brasil
Estados Unidos
Portugal, Espanha e México
Rua Funchal 263, 5° andar
Vila Olímpia - 04551-060
São Paulo - SP
[email protected]
23R Elm Street Gloucester, 019304
MA, Boston
[email protected]
Av. Engenheiro Arantes e Oliveira, 01
3B - 1900-221
Lisboa - Portugal
[email protected]
Tel 55 11 4084-5084
Tel +1 857 222 9343
Tel +351 2141 35840
A Virid
A Virid Interatividade Digital é especialista em envio, gestão e estratégias de email marketing.
Proprietária das plataformas de email marketing Virtual Target e Zartana, a Virid traz forte conhecimento das principais funcionalidades tecnológicas
para email marketing e, por conta de seu know how, também fornece tecnologia para a plataforma UOL HOST Email Marketing.
A Virid atende a uma carteira de mais de três mil clientes ativos, que utilizam o canal email marketing como estratégia de comunicação digital. Conta
com o serviço de DI - Data Intelligence para email marketing -, que tem como objetivo aprimorar as campanhas de email marketing, tornando a
rotina de envios melhor sucedida.
No mercado desde 1996, a empresa trabalha ativamente na disseminação das boas práticas na comunicação digital.
13
Para mais informações, acesse www.virid.com.br
Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados