Guia completo para criação de templates de email marketing

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 Dicas e curiosidades...

Usaremos o template abaixo para exemplificar:
• 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


FORMATO Dicas e curiosidades...
• Para que a leitura não seja prejudicada por barras
de rolagem horizontais, limites de janelas pop-up ou • É possível personalizar o
endereço de preview
outros, utilize largura máxima de 600 pixels para os
(@PREVIEW) e de opt-out
templates de email marketing. (@OPTOUT) de acordo com o
design do template. A
• Na criação do layout, determine áreas para textos
formatação destes textos é
em fontes de sistema (Arial, Verdana, Times etc). feita dentro do próprio
Esses textos, posteriormente, poderão ser template, utilizando as tags de
reproduzidos em HTML e manter um equilíbrio entre a fonte e link.
quantidade de imagens. Esse equilíbrio é necessário
para evitar pontuação em testes antispam, que
• No template, insira um link
avaliam a proporção entre cada tipo de conteúdo.
para a Política de Privacidade
de seu website. Se você não
• Utilize imagens em formato JPEG ou GIF e com
tem uma, pode utilizar um
72DPI de resolução. Otimize a qualidade das imagens roteiro disponível no site da
de forma que todas elas somem, juntas, até 100Kb. DMA – Direct Marketing
Association (em inglês):
TOPO E RODAPÉ DA MENSAGEM http://www.the-dma.org/priv
acy/privacypolicygenerator.sht
Disponibilize sempre a opção de visualização da ml
comunicação no browser, fora da caixa de email, e um
link para o mecanismo de opt-out.

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


Inserir a imagem inteira no HTML e colocar o link. Dicas e curiosidades...

Se o template for produzido como uma imagem sem • O teste antispam avalia o
fatias e a imagem inteira for um link, a sua mensagem cabeçalho, assunto, remetente
poderá ser barrada pelas ferramentas anti-spam dos e código da mensagem –
servidores de email e, em muitos casos, ela não será inclusive a versão de texto -
entregue na caixa postal do usuário. em busca de expressões
suspeitas ou práticas comuns a
Abaixo, temos o resultado de um teste utilizando a spammers.
ferramenta SpamAssassin.

Content analysis details: (6.9 points, 5.0 required) • Não esqueça de preencher a
pts rule name description tag <title> do documento
HTML. Muitas ferramentas
-------------------------------------------------- antispam verificam o
conteúdo desta tag e, caso ela
1.2 HTML_IMAGE_RATIO_02 BODY: HTML has a low esteja vazia ou preenchida
ratio of text to image area com expressões suspeitas,
0.6 HTML_90_100 BODY: Message is 90% to 100% sua mensagem pode receber
HTML pontuação como spam.
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

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.
4

Com certeza, este tipo de template prejudica o tempo Dicas e curiosidades...
de conclusão de envios, apresenta muitos erros de
envio como conexões excessivas, classificação como • Se o template for composto
spam e na maioria das caixas postais, esta mensagem essencialmente por imagens e
chegará em “lixo eletrônico”. Isso terá impacto elementos que não podem ser
negativo no resultado da ação. reproduzidos em HTML, fatie a
arte em pedaços – ou slices –
Fatiar a imagem e colocar links nas fatias de imagens menores para que
sejam inseridas
Esta forma de produção de template também não é a separadamente no código.
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:

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.
5

Na utilização de imagens, utilize o atributo “alt” em Dicas e curiosidades...
cada fatia. Isso facilita o entendimento da mensagem
quando o cliente de email (Outlook Express, • Certifique-se de que, no
Thunderbird, etc.) ou webmail bloqueia a visualização código, o atributo de largura
das imagens. Esse artifício também ajuda a baixar a esteja especificado em todas
pontuação dos softwares anti-spam. as imagens. Do contrário, as
caixas que delimitam a
presença delas ocuparão a
Fatiar a imagem e produzir as partes de texto no largura de uma linha inteira
HTML no Microsoft Outlook 2007, na
visualização com as imagens
Esta é a forma mais eficaz de produção de templates, bloqueadas.
porque diminui visivelmente a possibilidade da
mensagem ser classificada como spam desde que Não esqueça de hospedar as
algumas sugestões de redação* de texto sejam imagens do template em um
seguidas. servidor web e alterar os
valores do “src” para seus
Para evitar a classificação como spam o seu template respectivos caminhos na web.
deve ter a maior área de texto possível. Se a sua Assim, ao invés de:
mensagem possui mais texto do que imagens, ela não
<img src=
é considerada spam. “imagens/logo.gif”>
Veja, abaixo, o resultado do teste efetuado na Altere para: <img src=
ferramenta Virtual Target: “http://www.seuservidorweb.c
om.br/imagens/logo.gif>
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.

6

CONSTRUÇÃO DO CÓDIGO Dicas e curiosidades...

• Certifique-se de que todos os objetos do template • No HTML, reproduza o design
tenham seu alinhamento definido, especialmente idealizado para o email
células de tabela que contêm elementos como imagem marketing. Diagrame o
e textos. Os clientes de email tendem a centralizar conteúdo com tabelas. Evite
todo tipo de conteúdo da mensagem, o que pode mesclar linhas e colunas
prejudicar a leitura pelo destinatário. 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
• Alguns clientes de email têm restricões quando à
inline, estas propriedades não
exibição de cor de fundo nas mensagens. Para inserir
são muito bem aceitas pelos
cor de fundo no template, utilize tanto o atributo clientes de email.
bgcolor do HTML quanto o background-color de CSS.

Como no exemplo:

<body bgcolor=”#96bc33” style=”background-color:
rgb(150, 188, 51);”>

7

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 é
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:



8

PROPRIEDADES DE HTML E CSS QUE SÃO ACEITAS PELOS CLIENTES Dicas e curiosidades...
DE EMAIL
• Evite utilizar imagens do tipo
• De acordo com os testes realizados pela equipe de “spacer”, com dimensões de
suporte Virtual Target , foi constatado que alguns 1px na largura e/ou altura.
atributos não são visualizados corretamente em alguns Muitos spammers utilizam esta
clientes de email. As principais considerações acerca técnica para checar endereços
dos tópicos analisados são: de email ativos e, por isso, é
uma prática considerada como
Suporte a CSS spam. Se precisar inserir um
Dentre as três formas de utilizar CSS em layouts para espaço vazio entre elementos,
a web, a inline é a mais aceita pelos clientes de email. utilize a quebra de linha
CSS em folhas de estilo externas são aceitas apenas simples ou uma célula
por clientes de email desktop, como Thunderbird, vazia de tabela <td> em que
Outlook e Windows Mail. 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/analises-
de-email-marketing-em-clientes-de-email-conclusao/

9


HTML GERADOS POR SOFTWARES DO PACOTE MICROSOFT OFFICE Dicas e curiosidades...

Evite utilizar os softwares do Pacote Microsoft Office • Sempre teste a visualização
(Word, Excel, Publish) para gerar o código HTML de do template nos navegadores
seu template. Normalmente, eles utilizam várias tags mais utilizados por seus
que “sujam” o código e, no caso do Word, gera códigos destinatários. Os mais comuns
são Firefox e Internet Explorer.
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
- 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



- Fala sobre ‘Telemarketing’ Dicas e curiosidades...
- Fala sobre ‘Trabalhar em Casa’
- Fala sobre ‘e saiba mais’ • Crie contas em diversos
- Fala sobre ‘Imperdível’ webmails para testar a
- Palavras como Marketing, Formulário, Form, Script, visualização de seus templates
Inscreva-se. em cada um.
- 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

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
nome@exemplo.com.br”. Esse pequeno texto
11


demonstra transparência em sua política opt-in e pode Dicas e curiosidades...
ser muito útil para evitar que o destinatário clique no
botão de reportar spam. • O Gmail transforma em links
todos os textos que se
CSS assemelham a links: endereços
de email e quaisquer textos
• Utilize apenas CSS inline, que é suportado pela grande que terminem em “.com”,
maioria dos clientes de email. mesmo que não comecem com
“http://www”. Os novos links
• Além das propriedades de posicionamento, o Outlook terão a aparência padrão de
2007 não suporta width ou height de CSS. Prefira atribuir cor azul e sublinhado. Verifique
larguras e alturas aos elementos através de seus se há alguma referência a
respectivos atributos HTML. endereços de email ou web no
template e já transforme-os
• Você pode utilizar CSS para remover o efeito de em links com a mesma
sublinhado dos links. Para isso, basta inserir o seguindo formatação dos outros links da
mensagem.
trecho de CSS na tag <a>:

<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”>



Virtual Target </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

Brasil Estados Unidos Portugal, Espanha e México
Rua Funchal 263, 5° andar 23R Elm Street Gloucester, 019304 Av. Engenheiro Arantes e Oliveira, 01
Vila Olímpia - 04551-060 MA, Boston 3B - 1900-221
São Paulo - SP kirstin@globond.com Lisboa - Portugal
contato@virtualtarget.com.br anunciantes@canalmail.pt
Tel +1 857 222 9343
Tel 55 11 4084-5084 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


Guia completo para criação de templates de email marketing

Recommandé

Recommandé

Contenu connexe

Plus de Flavia de Araujo Vieira

Plus de Flavia de Araujo Vieira (14)

Guia completo para criação de templates de email marketing