Vous êtes sur la page 1sur 13

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.

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

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

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

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

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

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.

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 • 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);”>

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

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 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 <br> 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/

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

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

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

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

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

Para mais informações, acesse www.virid.com.br


Copyright © 2010 Virid Interatividade Digital - Todos os direitos reservados

Vous aimerez peut-être aussi