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. Este 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. 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 muito 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. Não uso de frames, formulários e mapas de imagens, que podem prejudicar a funcionalidade da mensagem. 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. 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. 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. Além disso, o tamanho pequeno facilita o recebimento e não deixa os destinatários 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. 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 website. Ver exemplos de previews de neswsletter em diversos dispositivos e programas. Testar também em diversos dispositivos e sistemas operacionais, como Android, iOs, Windows Phone, Blackberry. Com o auxílio de 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, 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. Usar GIFs animados somente depois depois de testes 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. 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 1×1 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á 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. (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) The how-to guide to responsive email design, Justine Jordan (Litmus, acesso em 19.4.2014) The principles of HTML email design, 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, 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) Responsive emails that really work – design de emails compatíveis com diversos dispositivos e programas (acesso em 8.3.2015) Email standards project – descreve os principais programas clientes de email e sua compatibilidade com marcações de HTML (acesso em 6.12.2007) CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail () A guide to CSS support in email (Campaign Monitor) CSS and email, kissing in a tree (A List Apart)