Manual para produção de templates de E-mail Marketing VIRID

Manual para a produção de templates de email marketing

www.virid.com.br avirid

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.

Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados

2


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

Dicas e curiosidades...

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


3


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.

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.


• É 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/privacy/privacypolicygenerator.shtml

4

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 area0.6 HTML_90_100 BODY: Message is 90% to 100% HTML2.6 HTML_IMAGE_ONLY_08 BODY: HTML: images with 400-800 bytes of words0.2 MIME_QP_LONG_LINE RAW: Quoted-printable line longer than 76 chars2.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.



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

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:

Content analysis details: (4.3 points, 5.0 required)pts rule name description

0.2 HTML_Tag_EXIST_TBODY BODY: HTML has “tbody” tag1.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% HTML2.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


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

6


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

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.


• 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.com.br/imagens/logo.gif>

7

CONSTRUÇÃO DO CÓDIGO

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

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

Como no exemplo:

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


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

8

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:




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

9


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

Suporte a HTMLA 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áriosOs 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çõesTalvez 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/


• 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 ou uma célula vazia de tabela <td> em que você pode controlar a altura do espaçamento.


10


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


• Sempre teste a visualização do template nos navegadores mais utilizados por seus destinatários. Os mais comuns são Firefox e Internet Explorer.


11


- 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

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


• Crie contas em diversos webmails para testar a visualização de seus templates em cada um.

12


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

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.


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

Brasil

Rua Funchal 263, 5° andar Vila Olímpia - 04551-060São Paulo - SP [email protected]

Tel 55 11 4084-5084

Estados Unidos

23R Elm Street Gloucester, 019304 MA, Boston [email protected]

Tel +1 857 222 9343

Portugal, Espanha e México

Av. Engenheiro Arantes e Oliveira, 01 3B - 1900-221Lisboa - [email protected]

Tel +351 2141 35840


13

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.

Manual para produção de templates de E-mail Marketing VIRID

Documents

Transcript of Manual para produção de templates de E-mail Marketing VIRID