Divulgação do web site
Atividades relacionadas (marketing online)
Malas diretas online
Emails em HTML
Mensagens em HTML têm taxa de cliques ligeiramente maior que a de emails em formato texto - 3,05% contra 2,95% (1). Embora muitas vezes seu projeto se assemelhe ao de uma página web, cada programa de email interpreta as mensagens de modo diferente, o que exige cuidados especiais na programação. Outlook e programas de webmail, como YahooMail, Hotmail, Gmail, além de programas para dispositivos móveis, têm regras próprias para mostrar as mensagens recebidas.
Alguns procedimentos facilitam o envio e a leitura de newsletters em HTML, como:
■ Uso de layout "líquido", com largura ajustável para a configuração de cada usuário. O bloco de texto da mensagem se expande e se contrai de acordo com a largura do monitor ou da janela do programa, facilitando a visualização em diversos dispositivos.
Este recurso deve ser usado com cuidado, para que as linhas de texto não fiquem extensas demais em monitores muito grandes ou com resolução muito alta.
■ Estruturação dos blocos de conteúdo com tabelas, especialmente para layouts com mais de uma coluna (o Gmail remove as marcações "div").
É preciso deixar uma pequena margem lateral para as marcações proprietárias de cada serviço de web mail, para garantir um posicionamento correto na maioria dos programas. Em vez de assinalar uma largura total de 100% para a tabela que contém todos os elementos, 98% provê uma margem de segurança suficiente.
■ Uso de CSS para formatar os textos. O código aplicado no corpo da mensagem (para evitar que programas como GMail apaguem ou ignorem os estilos na cabeça <head> do arquivo), permite que o layout não dependa de arquivos externos e se mantenha estruturado mesmo que o usuário não esteja conectado à internet.
-> Por exemplo
<td style=" font-family: Georgia, Times, serif; margin: 10px 5px 10px 0;">
O mesmo se aplica para elementos como links e títulos. Os estilos de fontes de textos situados no elemento td na tabela não são substituídos pelos estilos proprietários dos programas de email.
■ Independência de CSS para posicionar elementos de layout. O Outlook oferece suporte proprietário para este recurso, especialmente para o posicionamento dos elementos. O Gmail aplica muitos estilos próprios que se superpõem aos estilos do arquivo.
■ Inserção apenas do título na cabeça (<head>) da mensagem. Informações <meta> não são muito necessárias em emails, a não ser em casos especiais, em que precisem ser indexadas por sistemas corporativos.
■ Endereçamento das imagens e links com a URL completa. http://www.nomedosite.com.br/imagem.gif e não o posicionamento da página em relação à página Principal, ../../manutencao_programa.htm.
Os links devem ter o atributo target=”_blank”, para que os usuários de web mail não sejam surpreendidos pelo aparecimento de uma página web dentro da própria página do serviço de mail.
■ Inserção de imagens com pequenos textos alternativos <alt>, que expliquem o seu significado, pois muitos programas de email têm bloqueadores automáticos que impedem a sua visualização. No caso de mala direta para venda de produtos, o texto pode também servir de reforço para a mensagem publicitária.
Prover link para a versão online da mensagem, para os leitores que tiverem problemas com a carregação das imagens possam vê-los.
Para evitar grandes espaços vazios no caso de bloqueamento das imagens, balancear textos e imagens ao longo da mensagem.
■ Manutenção dos arquivos pequenos, mesmo com imagens, para evitar que alguns provedores bloqueiem a mensagem. Além disso, o tamanho pequeno facilita o recebimento e não deixa os receptores impacientes com o download, o que pode levar à suspenção da assinatura de newsletters, a longo prazo. 12 Kb é um tamanho razoável.
■ Teste do formato das mensagens nos principais programas de email, tanto de desktop, como OutLook e Thunderbird, como de webmail, como Gmail, Yahoo, UOL, MSN, IG. Destes, o Yahoo! e o Hotmail usam CSSs que se sobrepõem à programação dos emails comuns.
Serviços como Campaign Monitor e MailChimp permitem visualizar a visualização em diversos programas de email – funcionam melhor para público internacional, não incluem provedores brasileiros, mas proveem suporte ao Windows Mobile.
O layout deve ser testado também em browsers, se a newsletter ficar publicada no mesmo formato em um website.
■ Controle das imagens publicadas nos emails, arquivando-as em pastas separadas das imagens do site. Muitos usuários guardam as mensagens para acesso posterior e só as abrem meses depois de recebê-las. As imagens precisam estar ainda disponíveis.
■ Teste das mensagens em diversos dispositivos móveis, se possível editar uma versão dedicada, com textos mais curtos, sem imagens e resolução de tela adaptada. É importante considerar que estes usuários vão ler as mensagens em telas estreitas, e que a configuração de larguras fixas com diversas colunas pode gerar rolagem horizontal, o que as torna difíceis de ler.
■ Teste dos links antes do envio das mensagens.
■ Teste do encaminhamento do email para terceiros. Muitas pessoas redirecionam as mensagens que recebem por mala direta para amigos e conhecidos, que potencialmente podem significar novos visitantes ou assinantes para a mala direta.
É importante que nas mensagens de reenvio o layout e o texto se mantenham estruturados, compreensíveis.
■ Teste das soluções de layout e edição. Segmentar as mensagens e os grupos de usuários, enviá-las para grupos diferentes e avaliar os resultados. É importante também segmentar os usuários de acordo com os tipos de programa de email: usuários com programas compatíveis com HTML, usuários cujos programas podem apresentar problemas de leitura e usuários cuja recpção é incerta e difícil de prever.
■ Pouco uso de scripts, que apresentam resultados muito heterogêneos em diferentes programas de email, o que pode ser um fator impeditivo do seu uso em malas diretas de público muito heterogêneo.
■ Não uso de frames, formulários e mapas de imagens, que podem prejudicar a funcionalidade da mensagem.
■ Não publicação de arquivos auto-executáveis, como Flash por exemplo, que os programas de email têm dificuldade de interpretar e cujos efeitos são difíceis de prever. Evitar também o uso de formulários, que funcionam de modo desigual nos diferentes programas.
■ Uso de GIFs animados somente depois depois de testes exaustivos e pesquisa de mercado. O recurso não deve ser usado demais, para não cansar os leitores regulares. As imagens devem ficar pequenas, para evitar o bloqueio por alguns servidores.
■ Aplicação de imagens de fundo somente se indispensáveis para a compreensão do conteúdo. Nem o Outlook nem o Gmail oferecem suporte para este recurso. Se for necessário usá-las, aplicar a marcação "background" das tabelas, em vez de CSS.
■ Não aplicar imagens neutras 1x1 para forçar a abertura de espaços, pois muitos remententes de spam usam imagens como estas para verificar se as mensagens foram abertas. Se um programa de filtro de emails encontra uma imagem como esta, há muitas chances de impedir que a mensagem chegue ao destinatário.
Para verificar se a mensagem pode parecer spam para muitos programas de email, serviços como o SpamCheck ajudam a verificar motivos para a ativação de um filtro.
Assuntos relacionados
► Envio de mala direta para usuários e clientes autorizados para divulgação do lançamento e das atualizações periódicas de conteúdo
Referências online sobre emails em HTML
► The principles of HTML email design, de Mathew Patterson (Sitepoint, acesso em 14.5.2010)
1) Email marketing metrics report, PDF, 38 páginas (acesso em 8.7.2009)
► How to code HTML email newsletters, de Tim Slavin (SitePoint, acesso em 2.7.2006)
► Simple animated Gif in email lifts conversions 49% - test results (MarketingSherpa, acesso em 13.4.2007)
Mais informação sobre o assunto (links externos)
► Email standards project - descreve os principais programas clientes de email e sua compatibilidade com marcações de HTML (acesso em 6.12.2007)
► Associação Brasileira de Marketing Direto - "Boas maneiras" nas ações de e-mail marketing (acesso em 2.8.2005)
► CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail ()
► A guide to CSS support in email (Campaign Monitor)
► How to code HTML email newsletters (all new version) (Reach Customers Online)
► CSS and email, kissing in a tree (A List Apart)
Termos utilizados:
► Opt-in
