Manual para a produção de templates de marketing

Transcrição

1 Manual para a produção de templates de marketing Introdução Este manual foi desenvolvido para auxiliar os usuários da Virtual Target 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: Outubro de O Hotmail, quando acessado a partir do Firefox, 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 não suporta imagens em GIF animado. Se utilizar alguma no template, atente para o fato de que este cliente de exibirá 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. 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 marketing.

2 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 , e um link para o mecanismo de opt-out. A Virtual Target insere, automaticamente, as seguintes frases na mensagem: É 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. Se optar pela formatação dos textos de acordo com seu design, não esqueça de desabilitar a inserção automática deles na plataforma, na aba Dados Gerais do envio. Para habilitar a versão personalizada, entre em contato através do suporte@virid.com.br 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 ( remetente) ao seu catálogo de endereços. 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): A (nome da empresa) respeita a sua privacidade e é contra o spam na rede. Se você não deseja mais receber nossos s, 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 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 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 HTML_IMAGE_RATIO_02 BODY: HTML has a low ratio of text to image area HTML_90_100 BODY: Message is 90% to 100% HTML 2.6 HTML_IMAGE_ONLY_08 BODY: HTML: images with bytes of words 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 3 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. Principais problemas encontrados pelo anti-spam: 1 - O item HTML_IMAGE_RATIO_02 BODY é apontado pelo anti-spam pois sua mensagem possui uma quantidade maior de imagem do que texto. 2 - O item HTML_IMAGE_ONLY_08 BODY é apontado pelo anti-spam pois a sua mensagem é uma imagem que não foi fatiada e possui texto dentro da imagem. 3 - O item HTML_SHORT_LINK_IMG_1 HTML é apontado pelo anti-spam pois sua mensagem possui um link único em uma imagem que não foi fatiada. 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:

4 Content analysis details: (4.3 points, 5.0 required) pts rule name description 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 HTML_90_100 BODY: Message is 90% to 100% HTML 2.3 HTML_IMAGE_ONLY_12 BODY: HTML: images with bytes of words 2 Principais problemas encontrados pelo anti-spam: 1 - O item HTML_IMAGE_RATIO_02 BODY é apontado pelo anti-spam pois sua mensagem possui uma quantidade maior de imagem do que texto. 2 - O item HTML_IMAGE_ONLY_12 BODY é apontado pelo anti-spam pois a sua mensagem é uma imagem fatiada com texto dentro da imagem. Para conseguir um bom resultado nos envios, a pontuação deve ser a mais baixa possível. Neste caso ela ainda está muito alta. Na utilização de imagens, utilize o atributo alt em cada fatia. Isso facilita o entendimento da mensagem quando o cliente de (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. 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. 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= seuservidorweb.com.br/imagens/logo.gif> Veja, abaixo, o resultado do teste efetuado na ferramenta Virtual Target: Content analysis details: (0.5 points, 5.0 required) pts rule name description 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 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.

5 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 tendem a centralizar todo tipo de conteúdo da mensagem, o que pode prejudicar a leitura pelo destinatário. No HTML, reproduza o design idealizado para o 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 Isso irá prejudicar a renderização correta da mensagem neste cliente de . Verifique se o código HTML está de acordo com as recomendações do W3C utilizando o validador disponível no site: 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 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 . Alguns clientes de 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. Alguns clientes de suportam apenas uma destas formas e, utilizando ambas, é possível garantir a exibição da cor de fundo nos clientes de exceto os que não suportam cor de fundo de nenhuma maneira. Como no exemplo: <body bgcolor= #96bc33 style= background-color: rgb(150, 188, 51); >

6 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. Este é um exemplo de como ficaria o marketing sem o fundo, visualizado no Gmail, já que ele não aceita apenas o atributo bgcolor A formatação de textos com a tag <font> é recomendada devido a altíssima aceitação dos clientes de . 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 . Estudos recentes provaram que os clientes de já suportam corretamente propriedades CSS relacionadas a textos, tais como família e tamanho de fonte. Para não restringir o design do marketing aos tamanhos 1 e 2 do atributo size da tag <font>, você pode utilizar a propriedade font-size do CSS para utilizar tamanhos intermediários como 11px e 12px, desta forma: <font face= Arial, Verdana, sans-serif color= # style= font-size:11px; >

7 Propriedades de HTML e CSS que são aceitas pelos clientes de 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 . Propriedades IG/Ibest Zipmail Gmail Hotmail Liv Uol/Bol background-color border font-size font-family font-weight padding table-layout text-align text-decoration text-indent 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 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 <br> ou uma célula vazia de tabela <td> em que você pode controlar a altura do espaçamento. Veja a tabela completa com todos clientes de acessando este link: 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 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 s

8 - Trabalhe em casa - Para retirar seu 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 1 - Subject 1 : xx kg - Subject 1 : Vagas Abertas - Texto e confira - Agência de Aproximação/Modelos - Especialmente para você - Fala para não responder o - Fala sobre perder peso - Fala sobre perder peso no Subject 1 - 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 s - 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 1 - Curso no subject 1 - Curso no body 2 - Inclui Mala Direta - Inclui Mala Direta de - Inclui a palavra Grátis - Inclui o texto Frete Grátis - Inclui texto para remover - Inclui a frase Tempo Limitado - Contém o texto Clique aqui - Texto sobre Renda Extra - Ganhe Dinheiro no Subject 1 - Texto sobre Renda Extra no Subject 1 - From com a palavras-chave 3 - Subject 1 com a palavra Promoção - Contém a palavra você no Subject 1 - Link para sites no cjb.net Sempre teste a visualização do template nos navegadores mais utilizados por seus destinatários. Os mais comuns são Firefox e Internet Explorer.

9 - 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 1 - Texto A partir de $xx.xx - Texto apenas $xx.xx - Texto apenas $xx.xx no Subject 1 - Preço no Subject 1 O Gmail transforma em links todos os textos que se assemelham a links: endereços de e quaisquer textos que terminem em.com, mesmo que não comecem com 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 ou web no template e já transforme-os em links com a mesma formatação dos outros links da mensagem. 1 - Assunto do 2 - Corpo do 3 - Campo De: do contém as palavras CADASTRO, PROMOÇÃO, OPORTUNIDADE, MELHOR. 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 marketing. Por exemplo: você está recebendo esta mensagem porque se cadastrou no site X, no dia dd/mm//aaaa com o nome@exemplo.com.br. Esse pequeno texto 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 . 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 >

10 Links Para alterar a cor dos links, insira a formatação de fonte dentro da tag <a>, como neste exemplo: <a href= target= _blank > Crie contas em diversos webmails para testar a visualização de seus templates em cada um. <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.