• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,513
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
128
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Manual para a produção detemplates de email marketingEste manual foi desenvolvido para auxiliar nossos leitores adesevolverem o HTML de um template de forma a melhorar oresultado final dos envios efetuados através da ferramenta. www.virid.com.br avirid
  • 2. 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
  • 3. Manual para a produção de templates de email marketingFORMATO Dicas e curiosidades...• Para que a leitura não seja prejudicada por barrasde rolagem horizontais, limites de janelas pop-up ou • É possível personalizar o endereço de previewoutros, utilize largura máxima de 600 pixels para os (@PREVIEW) e de opt-outtemplates 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óprioEsses textos, posteriormente, poderão ser template, utilizando as tags dereproduzidos em HTML e manter um equilíbrio entre a fonte e link.quantidade de imagens. Esse equilíbrio é necessáriopara evitar pontuação em testes antispam, que • No template, insira um linkavaliam 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 um72DPI de resolução. Otimize a qualidade das imagens roteiro disponível no site dade 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.shtDisponibilize sempre a opção de visualização da mlcomunicação no browser, fora da caixa de email, e umlink para o mecanismo de opt-out.Sugestões de textos:TOPOSe você não estiver visualizando a mensagemcorretamnete, acesse esse link.RODAPÉPara garantir que nossos comunicados cheguem emsua caixa de entrada,adicione o email (email remetente) ao seu catálogo deendereç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 TEMPLATEExistem 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 noHTML. 3 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 marketingInserir 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 ofatias e a imagem inteira for um link, a sua mensagem cabeçalho, assunto, remetentepoderá 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 aAbaixo, 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 apts rule name description tag <title> do documento HTML. Muitas ferramentas-------------------------------------------------- antispam verificam o conteúdo desta tag e, caso ela1.2 HTML_IMAGE_RATIO_02 BODY: HTML has a low esteja vazia ou preenchidaratio of text to image area com expressões suspeitas,0.6 HTML_90_100 BODY: Message is 90% to 100% sua mensagem pode receberHTML pontuação como spam.2.6 HTML_IMAGE_ONLY_08 BODY: HTML: images with400-800 bytes of words0.2 MIME_QP_LONG_LINE RAW: Quoted-printable linelonger than 76 chars2.3 HTML_SHORT_LINK_IMG_1 HTML is very short witha linked imagePrincipais problemas encontrados pelo anti-spam:1 - A regra HTML_IMAGE_RATIO_02 BODY é apontadapelo antispam pois sua mensagem possui umaquantidade maior de imagem do que texto.2 - A regra "HTML_90_100 BODY" significa que amensagem é composta por 90% de código HTML, eapenas 10% de texto propriamente dito.3 - A regra HTML_IMAGE_ONLY_08 BODY é apontadapelo antispam pois sua mensagem possui umaquantidade maior de imagem do que texto.4 - A regra "MIME_QP_LONG_LINE RAW" é apontadapelo antispam pois há linhas de código HTML cujaextensão ultrapassa 76 caracteres, o que é consideradouma boa prática de desenvolvimento. Portanto, usar atécnica de "condensar" todo o HTML da mensagem emuma única linha para reduzir o tamanho final do arquivopode render 0.2 pontos no teste antispam.5 - A regra HTML_SHORT_LINK_IMG_1 HTML éapontada pelo antispam pois sua mensagem apenasuma imagem com link, indicando que pode ser umgrande folder cheio de informações, cuja imagem nãofoi fatiada adequadamente. 4 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 marketingCom certeza, este tipo de template prejudica o tempo Dicas e curiosidades...de conclusão de envios, apresenta muitos erros deenvio como conexões excessivas, classificação como • Se o template for compostospam e na maioria das caixas postais, esta mensagem essencialmente por imagens echegará em “lixo eletrônico”. Isso terá impacto elementos que não podem sernegativo 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 inseridasEsta forma de produção de template também não é a separadamente no código.mais indicada porque mesmo que no teste a pontuaçãofique abaixo de 5.0 pontos, muitas ferramentasanti-spam classificam como spam o templateproduzido com imagens fatiadas e links inseridos nasfatias.Veja o resultado do teste efetuado na ferramentaSpamAssassin:Content analysis details: (4.3 points, 5.0 required)pts rule name description0.2 HTML_Tag_EXIST_TBODY BODY: HTML has “tbody”tag1.2 HTML_IMAGE_RATIO_02 BODY: HTML has a lowratio of text to image area0.6 HTML_90_100 BODY: Message is 90% to 100%HTML2.3 HTML_IMAGE_ONLY_12 BODY: HTML: images with800-1200 bytes of wordsPrincipais 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 possuiuma quantidade maior de imagem do que texto.3 - A regra "HTML_90_100 BODY" significa que amensagem é composta por 90% de código HTML, eapenas 10% de texto propriamente dito.4 - A regra "HTML_IMAGE_ONLY_12 BODY" significaque a mensagem é composta por um código HTML quetotaliza entre 800 e 1200 caracteres, que é um valorbaixo e indica que a mensagem é curta (umacaracterística de mensagens de spam).Para conseguir um bom resultado nos envios, apontuação deve ser a mais baixa possível. Neste casoela ainda está muito alta. 5Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 6. Manual para a produção de templates de email marketingNa utilização de imagens, utilize o atributo “alt” em Dicas e curiosidades...cada fatia. Isso facilita o entendimento da mensagemquando o cliente de email (Outlook Express, • Certifique-se de que, noThunderbird, etc.) ou webmail bloqueia a visualização código, o atributo de larguradas imagens. Esse artifício também ajuda a baixar a esteja especificado em todaspontuação dos softwares anti-spam. as imagens. Do contrário, as caixas que delimitam a presença delas ocuparão aFatiar a imagem e produzir as partes de texto no largura de uma linha inteiraHTML no Microsoft Outlook 2007, na visualização com as imagensEsta é a forma mais eficaz de produção de templates, bloqueadas.porque diminui visivelmente a possibilidade damensagem ser classificada como spam desde que Não esqueça de hospedar asalgumas sugestões de redação* de texto sejam imagens do template em umseguidas. servidor web e alterar os valores do “src” para seusPara 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 description0.3 HTML_60_70 BODY: Message is 60% to 70% HTML0.2 HTML_Tag_EXIST_TBODY BODY: HTML has “tbody”tagA pontuação deste template é muito boa. Isso facilita aentrega da mensagem e a possibilidade do emailchegar na caixa de lixo eletrônico é muito pequena. Otempo para a conclusão do envio é menor, há umaumento sensível na taxa de “enviados com sucesso”,“abertos” e “clicados” e um impacto positivo noresultado da ação. 6Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 7. Manual para a produção de templates de email marketingCONSTRUÇÃO DO CÓDIGO Dicas e curiosidades...• Certifique-se de que todos os objetos do template • No HTML, reproduza o designtenham seu alinhamento definido, especialmente idealizado para o emailcélulas de tabela que contêm elementos como imagem marketing. Diagrame oe textos. Os clientes de email tendem a centralizar conteúdo com tabelas. Evitetodo tipo de conteúdo da mensagem, o que pode mesclar linhas e colunasprejudicar 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ãoexibição de cor de fundo nas mensagens. Para inserir são muito bem aceitas peloscor 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);”> 7Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 8. 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;”> 8Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 9. Manual para a produção de templates de email marketingPROPRIEDADES 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 desuporte Virtual Target , foi constatado que alguns 1px na largura e/ou altura.atributos não são visualizados corretamente em alguns Muitos spammers utilizam estaclientes de email. As principais considerações acerca técnica para checar endereçosdos tópicos analisados são: de email ativos e, por isso, é uma prática considerada comoSuporte a CSS spam. Se precisar inserir umDentre 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 linhaCSS em folhas de estilo externas são aceitas apenas simples <br> ou uma célulapor clientes de email desktop, como Thunderbird, vazia de tabela <td> em queOutlook e Windows Mail. você pode controlar a altura do espaçamento.Suporte a HTMLA grande maioria das tags é suportada, com poucasexceções. O Terra Mail (versão clássica) é o único quenão suporta as tags strong, em e del. O Outlook 2007não suporta nenhuma tags de nenhum componente deformulário.Suporte a formuláriosOs webmails BOL, UOL e Hotmail, assim como odesktop Outlook 2007, não suportam formulários. Osprimeiros até exibem os campos corretamente, masnão permitem o envio das informações. O Outlook2007 não exibe nem os campos dos formulários,trocando-os por caracteres como [] e () para impedir opreenchimento e envio das informações.Suporte a vídeos e animaçõesTalvez uma grande evolução no suporte a conteúdomultimídia dentro do email tenha sido conseguida como fato dos webmails BOL e UOL (nova interface)passarem a suportar mensagens com vídeos eanimações SWF. O Gmail também deu um pequenopasso nessa direção quando anunciou o suporte avídeos do Youtube dentro das mensagens.Os demais clientes de email não oferecem suporte avídeos e nem animações SWF. O único tipo deanimação aceita é a imagem em formato GIF animado.O Outllok 2007, porém, não suporta este tipo deimagem.Veja a tabela completa com todos clientes deemail acessando este link:http://emailmarketing.virid.com.br/template/analises-de-email-marketing-em-clientes-de-email-conclusao/ 9Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 10. Manual para a produção de templates de email marketingHTML 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 navegadoresseu template. Normalmente, eles utilizam várias tags mais utilizados por seusque “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 seutemplate.PALAVRAS E EXPRESSÕES BARRADAS EM FERRAMENTAS ANTI-SPAMPara esclarecer alguns mistérios relacionados aoanti-spam, elaboramos uma lista com algumaspalavras e expressões que são fiscalizadas por ele. Seo seu email marketing está sendo direcionado para acaixa 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 devemaparecer 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 10Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 11. 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 11Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados
  • 12. Manual para a produção de templates de email marketingdemonstra transparência em sua política opt-in e pode Dicas e curiosidades...ser muito útil para evitar que o destinatário clique nobotão de reportar spam. • O Gmail transforma em links todos os textos que seCSS 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 de2007 não suporta width ou height de CSS. Prefira atribuir cor azul e sublinhado. Verifiquelarguras e alturas aos elementos através de seus se há alguma referência arespectivos 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 mesmasublinhado 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 defonte 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 doslinks através de CSS. Na tag <a>, insira o trecho style=“text-decoration:none;”. Isso irá remover o efeito desublinhado do link.• Em todos os links, insira o atributo target = “blank”,para assegurar que todos os links de destino serãoabertos em novas janelas. Essa ação parece óbvia, masalguns webmails carregam as páginas de destino namesma 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
  • 13. 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 35840A ViridA 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ógicaspara 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. Contacom o serviço de DI - Data Intelligence para email marketing -, que tem como objetivo aprimorar as campanhas de email marketing, tornando arotina de envios melhor sucedida.No mercado desde 1996, a empresa trabalha ativamente na disseminação das boas práticas na comunicação digital. 13Para mais informações, acesse www.virid.com.brCopyright © 2010 Virid Interatividade Digital - Todos os direitos reservados