Emails em HTML têm taxa de cliques ligeiramente maior que 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 na programação. Outlook e programas de webmail, como Gmail, YahooMail, Hotmail, além de programas para dispositivos móveis, têm regras próprias para mostrar as mensagens.
Alguns recursos facilitam o envio e a leitura de newsletters em HTML, como:
■ Layout “responsivo”, 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.
Esse recurso deve evitar também que as linhas de texto não fiquem extensas demais em monitores muito grandes ou com resolução muito alta, por isso deve limitar a largura máxima.
■ Blocos de conteúdo estruturados com tabelas, especialmente para layouts com mais de uma coluna. O Outlook, o Yahoo e o Hotmail não oferecem suporte seguro ao posicionamento e ao <float> de <div>, assim os elementos podem aparecer em lugares diferentes de acordo com o programa do cliente.
É preciso deixar uma pequena margem lateral para as marcações proprietárias de cada serviço de web mail e 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.
Como alguns programas de email simplesmente eliminam a tag <body>, deve-se definir a cor de fundo com uma tabela separada, com largura de 100%, em volta da tabela com o conteúdo. Uma distância de segurança entre esta tabela de fundo e a tabela com o conteúdo ajuda a criar um pouco de espaço vazio para facilitar a visualização de textos e imagens.
■ CSS “inline” 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. O Gmail para desktop e para Android dá suporte apenas a CSS inline nos atributos do HTML. Os sistemas de email do iOS e Mac OS X têm suporte para media queries e para diversos recursos de CSS.
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.
De qualquer forma, <media queries> usados para adaptação a dispositivos móveis não podem ser usados “inline”. Neste caso, as marcações precisam ficar localizados em um CSS geral no <head> do arquivo, deixando margem para erros de leitura em programas como o Gmail, não muito amigável a estes recursos
■ Independência do 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.
■ Apenas o título na cabeça (<head>) da mensagem, se possível. 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.
■ Poucos scripts, que apresentam resultados heterogêneos em diferentes programas de email, o que pode ser um fator impeditivo de seu uso em malas diretas de público muito heterogêneo.
■ Imagens e links com URL completo. http://www.nomedosite.com.br/imagem.gif e não o posicionamento da página em relação à página Principal, ../../manutencao_programa.htm.
■ Imagens com pequenos textos alternativos <alt>, que explicam seu significado, pois muitos programas de email têm bloqueadores automáticos que impedem 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.
■ Arquivos pequenos, mesmo com imagens, para evitar que alguns provedores bloqueiem a mensagem.
■ Teste do formato das mensagens nos principais programas de email, tanto de desktop, como OutLook, como de webmail, como Gmail, Yahoo, UOL, MSN, IG. A maioria dos programas de webmail e aplicativos móveis dedicados usam CSSs que se sobrepõem à programação dos programas desktop.
Serviços como Campaign Monitor e MailChimp permitem visualizar a visualização em diversos programas de email e proveem suporte ao Windows Mobile.
O layout deve ser testado também em browsers, se a newsletter ficar publicada no mesmo formato em um site. Ver exemplos de previews de neswsletter em diversos dispositivos e programas.
■ Testar também em diversos dispositivos e sistemas operacionais, como Android, iOs. Com design responsivo pode-se simplificar as mensagens ao máximo, melhorando a usabilidade, a taxa de abertura e de cliques nos links.
Emails não responsivos não eram compatíveis (abril de 2014) com o Gmail para iPhone, app Mailbox para iPhone, Yahoo! para iPhone, apps Gmail e Yahoo para Android, Blackberry OS5, Windows Mobile 6.1, Windows Phone 7 e 8.
A compatibilidade com design responsivo é determinada pelo aplicativo, e não pelo dispositivo, por isto, é importante testar as mensagens em diversos aplicativos do mesmo dispositivo.
■ Controlar as 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.
■ Testar os links antes do envio das mensagens.
■ Testar o 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.
■ Testar as 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.
■ Não publicar arquivos auto-executáveis que os programas de email tenham dificuldade de interpretar e cujos efeitos sejam difíceis de prever. Evitar também o uso de formulários, que funcionam de modo desigual nos diferentes programas.
■ Não usar muitos GIFs animados para não cansar os leitores. As imagens devem ficar pequenas, para evitar o bloqueio por alguns servidores.
■ Aplicar 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 1x1px para forçar a abertura de espaços, pois muitos remetentes de spam usam imagens como estas para verificar se as mensagens foram abertas. Se um programa de filtro de emails encontra este tipo de imagem, há 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.
(Atualizado em 8.3.2015)
Referências
→ Responsive email layouts for Gmail app (Julie.io, acesso em 8.3.2015)
→ Rules for best practice email design: coding practices, Lauren Ribando
(Sitepoint, acesso em 23.8.2014)
1) Email marketing metrics report, PDF, 38 páginas (acesso em 8.7.2009)
→ How to code HTML email newsletters, Tim Slavin (SitePoint, acesso em 2.7.2006)
→ Responsive emails that really work – design de emails compatíveis com diversos dispositivos e programas (acesso em 8.3.2015)