Julho de 2010.

Manual para a produo de templates de email marketing

Dicas e curiosidades...
Devido ao Cdigo de Autorregulamentao do Email Marketing, www.virtualtarget.com. br/documentacao/codigo-autorregulamentacao-email-marketing, os provedores passaram submeter os emails a uma lista de regras, com o intuito de barrar ao mximo spam na rede. Desenvolver um template adequado de extrema importncia para evitar bloqueios por spam, ampliando a taxa de entrega e gerando uma boa reputao para seu domnio, no cando caracterizado como spammer. O Hotmail e o Gmail, acrescenta um espaamento de quase 5 pixels ao redor de todas as imagens. Isso pode prejudicar a correta visualizao de templates compostos essencialmente por imagens. Esse problema pode ser corrigido atravs do atributo style=display:block inserido em todas as tags de imagem do HTML.

Introduo
Este manual foi desenvolvido para auxiliar nossos leitores a desevolverem o HTML de um template de forma a melhorar o resultado nal dos envios efetuados atravs da ferramenta.

Desenvolvimento do template
Usaremos o template abaixo para exemplicar:

O Microsoft Outlook 2007 e o Outlook 2010 no suportam imagens em GIF animado. Se utilizar alguma no template, atente para o fato de que estes clientes de email exibiro apenas uma imagem esttica do primeiro frame da animao.

Para otimizar a entrega das mensagens, desenvolva o cdigo HTML para que tenha at 30 kb.

Formato
Para que a leitura no seja prejudicada por barras de rolagem horizontais, limites de janelas pop-up ou outros, utilize largura mxima de 600 pixels para os templates de email marketing.

 Na criao do layout, determine reas para textos em fontes de sistema (Arial, Verdana, Times etc). Esses textos, posteriormente, podero ser reproduzidos em HTML e manter um equilbrio entre a quantidade de imagens. Esse equilbrio necessrio para evitar pontuao em testes antispam, que avaliam a proporo entre cada tipo de contedo. Utilize imagens em formato JPEG ou GIF e com 72DPI de resoluo. Otimize a qualidade das imagens de forma que todas elas somem, juntas, at 100Kb.

Dicas e curiosidades...
possvel personalizar o endereo de preview (@PREVIEW) e de opt-out (@OPTOUT) de acordo com o design do template. A formatao destes textos feita dentro do prprio template, utilizando as tags de fonte e link.

Topo e rodap da mensagem

Disponibilize sempre a opo de visualizao da comunicao no browser, fora da caixa de email, e um link para o mecanismo de opt-out. No template, insira um link para a Poltica de Privacidade de seu website. Se voc no tem uma, pode utilizar um roteiro disponvel no site da DMA Direct Marketing Association (em ingls): http://www.thedma.org/privacy/privacypolicygenerator. shtml

TOPO
Se voc no 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 catlogo de endereos. A (nome da empresa) respeita a sua privacidade e contra o spam na rede. Se voc no deseja mais receber nossos e-mails, cancele sua inscrio 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.

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 no ser entregue na caixa postal do usurio. 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 cabealho, assunto, remetente e cdigo da mensagem inclusive a verso de texto - em busca de expresses suspeitas ou prticas comuns a spammers. No esquea de preencher a tag <title> do documento HTML. Muitas ferramentas antispam vericam o contedo desta tag e, caso ela esteja vazia ou preenchida com expresses suspeitas, sua mensagem pode receber pontuao 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 signica que a mensagem composta por 90% de cdigo 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 cdigo HTML cuja extenso ultrapassa 76 caracteres, o que considerado uma boa prtica de desenvolvimento. Portanto, usar a tcnica de condensar todo o HTML da mensagem em uma nica linha para reduzir o tamanho nal 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 informaes, cuja imagem no foi fatiada adequadamente. Manual para a produo de templates de email marketing Com certeza, este tipo de template prejudica o tempo de concluso de envios, apresenta muitos erros de envio como conexes excessivas, classicao como spam e na maioria das caixas postais, esta mensagem chegar em lixo eletrnico. Isso ter impacto negativo no resultado da ao.

Fatiar a imagem e colocar links nas fatias

Esta forma de produo de template tambm no a mais indicada porque mesmo que no teste a pontuao que abaixo de 5.0 pontos, muitas ferramentas anti-spam classicam 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 presena da tag <tbody> ao longo do cdigo 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 signica que a mensagem composta por 90% de cdigo HTML, e apenas 10% de texto propriamente dito. 4 - A regra HTML_IMAGE_ONLY_12 BODY signica que a mensagem composta por um cdigo HTML que totaliza entre 800 e 1200 caracteres, que um valor baixo e indica que a mensagem curta (uma caracterstica de mensagens de spam). Para conseguir um bom resultado nos envios, a pontuao deve ser a mais baixa possvel. Neste caso ela ainda est muito alta.

Dicas e curiosidades...
Se o template for composto esenecialmente por imagens e elementos que no podem ser reproduzidos em HTML, fatie a arte em pedaos ou slices de imagens menores para que sejam inseridas separadamente no cdigo.

Certique-se de que, no cdigo, o atributo de largura esteja especicado em todas as imagens. Do contrrio, as caixas que delimitam a presena delas ocuparo a largura de uma linha inteira no Microsoft Outlook 2007, na visualizao com as imagens bloqueadas. No esquea de hospedar as imagens do template em um servidor web e alterar os valores do src para seus respectivos caminhos na web. Assim, ao invs de: <img src= imagens/logo.gif> Altere para: <img src= http://www.seuservidorweb.com.br/ imagens/logo.gif>

Na utilizao 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 visualizao das imagens. Esse artifcio tambm ajuda a baixar a pontuao dos softwares anti-spam.

Fatiar a imagem e produzir as partes de texto no HTML

Esta a forma mais ecaz de produo de templates, porque diminui visivelmente a possibilidade da mensagem ser classicada como spam desde que algumas sugestes de redao* de texto sejam seguidas. Para evitar a classicao como spam o seu template deve ter a maior rea de texto possvel. Se a sua mensagem possui mais texto do que imagens, ela no 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 pontuao deste template muito boa. Isso facilita a entrega da mensagem e a possibilidade do email chegar na caixa de lixo eletrnico muito pequena. O tempo para a concluso do envio menor, h um aumento sensvel na taxa de enviados com sucesso, abertos e clicados e um impacto positivo no resultado da ao.

Construo do cdigo
Certique-se de que todos os objetos do template tenham seu alinhamento denido, especialmente clulas de tabela que contm elementos como imagem e textos. Os clientes de email tendem a centralizar todo tipo de contedo da mensagem, o que pode prejudicar a leitura pelo destinatrio.

Dicas e curiosidades...
No HTML, reproduza o design idealizado para o email marketing. Diagrame o contedo com tabelas. Evite mesclar linhas e colunas atravs dos atributos rowspan e colspan, pois so atributos no suportados pelo Microsoft Outlook 2007. Isso ir prejudicar a renderizao correta da mensagem neste cliente de email.

Verique se o cdigo HTML est de acordo com as recomendaes do W3C utilizando o validador disponvel no site: http://validator. w3.org. Para o DOCTYPE, recomenda-se o uso de HTML 4.01 Transitional ou XHTML 1.0 Transitional. As especicaes do tipo Transitional contm elementos que j caram em desuso - frequentemente utilizados em email marketing - e, ainda assim, permitem a validao do cdigo junto ao W3C. Evite o uso das propriedades de posicionamento, como position, left, top, clear e oat. Apesar de suportarem CSS inline, estas propriedades no so muito bem aceitas pelos clientes de email.

Alguns clientes de email tm restrices quando exibio 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. Como no exemplo: <body bgcolor=#96bc33 style=background-color: rgb(150, 188, 51);>

Dicas e curiosidades...
Evite criar imagens de fundo para o corpo da mensagem, pois se inseridas atravs do atributo background de HTML ou background-image de CSS, no sero visualizadas por destinatrios que utilizam Gmail, Outlook e Hotmail. Por isso, antes de optar por usar ou no imagens de fundo no template, bom que o remetente conhea sua base pra saber se pode prejudicar a maioria dos destinatrios.

Este um exemplo de como caria o email marketing sem a imagem de fundo, visualizado no Gmail, j que ele no aceita background-image.

A formatao de textos com a tag <font> recomendada devido a altssima aceitao dos clientes de email. Porm, o atributo size que possui valores restritos nos tamanhos de fonte pode ser substitudo pelo estilo equivalente em CSS: style= font-size: 11px;. Como os tamanhos 11px e 12px no 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;>

Propriedades de HTML e CSS que so aceitas pelos clientes de email

De acordo com os testes realizados pela equipe de suporte Virtual Target , foi constatado que alguns atributos no so visualizados corretamente em alguns clientes de email. As principais consideraes acerca dos tpicos analisados so:

Dicas e curiosidades...
Evite utilizar imagens do tipo spacer, com dimenses de 1px na largura e/ou altura. Muitos spammers utilizam esta tcnica para checar endereos de email ativos e, por isso, uma prtica considerada como spam. Se precisar inserir um espao vazio entre elementos, utilize a quebra de linha simples <br> ou uma clula vazia de tabela <td> em que voc pode controlar a altura do espaamento.

Suporte a CSS
Dentre as trs formas de utilizar CSS em layouts para a web, a inline a mais aceita pelos clientes de email. CSS em folhas de estilo externas so aceitas apenas por clientes de email desktop, como Thunderbird, Outlook e Windows Mail.

Suporte a HTML
A grande maioria das tags suportada, com poucas excees. O Terra Mail (verso clssica) o nico que no suporta as tags strong, em e del. O Outlook 2007 no suporta nenhuma tags de nenhum componente de formulrio.

Suporte a formulrios
Os webmails BOL, UOL e Hotmail, assim como o desktop Outlook 2007, no suportam formulrios. Os primeiros at exibem os campos corretamente, mas no permitem o envio das informaes. O Outlook 2007 no exibe nem os campos dos formulrios, trocando-os por caracteres como [] e () para impedir o preenchimento e envio das informaes.

Suporte a vdeos e animaes

Talvez uma grande evoluo no suporte a contedo multimdia dentro do email tenha sido conseguida com o fato dos webmails BOL e UOL (nova interface) passarem a suportar mensagens com vdeos e animaes SWF. O Gmail tambm deu um pequeno passo nessa direo quando anunciou o suporte a vdeos do Youtube dentro das mensagens. Os demais clientes de email no oferecem suporte a vdeos e nem animaes SWF. O nico tipo de animao aceita a imagem em formato GIF animado. O Outllok 2007, porm, no 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-clientesde-email-conclusao/

HTML gerados por softwares do pacote Microsoft Ofce

- Evite utilizar os softwares do Pacote Microsoft Ofce (Word, Excel, Publish) para gerar o cdigo HTML de seu template. Normalmente, eles utilizam vrias tags que sujam o cdigo e, no caso do Word, gera cdigos em XML que prejudicam a visualizao do seu template.

Dicas e curiosidades...
Sempre teste a visualizao do template nos navegadores mais utilizados por seus destinatrios. Os mais comuns so Firefox e Internet Explorer.

Palavras e expresses barradas em ferramentas anti-spam

Para esclarecer alguns mistrios relacionados ao anti-spam, elaboramos uma lista com algumas palavras e expresses que so scalizadas por ele. Se o seu email marketing est sendo direcionado para a caixa de spam ou se o seu click through no est sendo satisfatrio, o problema pode diminuir se voc melhorar o texto. As palavras abaixo no devem aparecer no corpo da mensagem, no nome de imagem, nome de diretrio ou em links: - Todos os direitos reservados - Links para arquivos exe,pif,scr e outros - Sigilo Absoluto - Dvidas 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 no perder tempo - 24 Horas - Contm de/para sua empresa - Contm a palavra hospedagem - Contm a palavra hospedagem no Subject1 - Subject1: xx kg - Subject1: Vagas Abertas - Texto e conra - Agncia de Aproximao/Modelos - Especialmente para voc - Fala para no 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 - Contm ponto de exclamao 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 Imperdvel - Palavras como Marketing, Formulrio, Form, Script, Inscreva-se. - Fala sobre Aproveite nossa promoo - 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 Grtis - Inclui o texto Frete Grtis - Inclui texto para remover email - Inclui a frase Tempo Limitado - Contm 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 Promoo - Contm a palavra voc no Subject1 - Link para sites no cjb.net - Link para sites no kit.net - Chamando url no kit.net (src=) - Link para sites de hospedagem grtis - 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 no um spam - Interrogao no subject1 - Texto A partir de $xx.xx - Texto apenas $xx.xx - Texto apenas $xx.xx no Subject1 - Preo no Subject1
1 - Assunto do email 2 - Corpo do email 3 - Campo De: do email contm as palavras CADASTRO, PROMOO, OPORTUNIDADE, MELHOR.

Dicas e curiosidades...
Sempre teste a visualizao do template nos navegadores mais utilizados por seus destinatrios. Os mais comuns so Firefox e Internet Explorer.

Whitelist
Solicite ao destinatrio que adicione seu endereo remetente ao catlogo de endereos. Isso far com que suas prximas mensagens sejam entregues na caixa de entrada e com as imagens j desbloqueadas. Prximo mensagem de whitelist e de opt-out -, tambm vlido inserir um lembrete de como e/ou quando o destinatrio 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 demonstra transparncia em sua poltica opt-in e pode ser muito til para evitar que o destinatrio clique no boto de reportar spam.

Dicas e curiosidades...
O Gmail transforma em links todos os textos que se assemelham a links: endereos de email e quaisquer textos que terminem em .com, mesmo que no comecem com http://www. Os novos links tero a aparncia padro de cor azul e sublinhado. Verique se h alguma referncia a endereos de email ou web no template e j transforme-os em links com a mesma formatao dos outros links da mensagem.

CSS
Utilize apenas CSS inline, que suportado pela grande maioria dos clientes de email. Alm das propriedades de posicionamento, o Outlook 2007 no suporta width ou height de CSS. Prera atribuir larguras e alturas aos elementos atravs 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>de CSS. Prera atribuir larguras e alturas aos elementos atravs 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>

Links
Para alterar a cor dos links, insira a formatao 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 necessrio, voc pode remover o sublinhado dos links atravs 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 sero abertos em novas janelas. Essa ao parece bvia, mas alguns webmails carregam as pginas de destino na mesma janela - ou at mesmo dentro de sua interface.