Categorias

Criando newsletters para Microsoft Outlook

Você criou aquele layout perfeito de newsletter para enviar a todos os seus assinantes e testou o resultado nos principais serviços de email. Mas, quem usa o Microsoft Outlook está vendo tudo embaralhado. Sabe o porquê? Porque o Outlook não trabalha com o HTML da mesma forma que um navegador.

A versão 2003 do programa utilizava o motor de interpretação do arcaico Internet Explorer 6 para renderizar HTML e todos nós nos lembramos o quão problemático era o extinto IE6. Era de se esperar que a Microsoft melhorasse o suporte às regras do HTML nas novas versões do Outlook, mas ela tomou outro caminho. Tanto a versão 2007 quanto a versão 2010 do cliente de email adotaram o processador de texto Word como interpretador de código. A ideia, naturalmente, era oferecer uma boa integração entre a produção de documentos dentro de um escritório: um texto criado dentro do editor de textos seria rigorosamente idêntico a um texto escrito dentro do Outlook. Mas a web é aberta e para os criadores de newsletter o pesadelo continuou.

Sua newsletter pode aparecer perfeitamente formatada no Hotmail, no Yahoo, no Gmail, em PCs, Macs, iPhones, dispositivos Android ou consoles. Mas fica uma confusão incompreensível no Microsoft Outlook. E, para muitos, ele ainda é a ferramenta padrão para leitura de emails.

Qual seria a solução? Começar do zero. Pegue seu código bonito e brilhante e jogue fora. CSS3? jQuery? Z-Index? Parallax? Fontes do Google? Esqueça. Na verdade, esqueça também CSS2. Lembra-se da época em que o layout era feito usando tabelas? Então, tire o pó da memória e volte ao modo antigo de produzir páginas. Com as dicas abaixo, seu desenvolvimento terá menos obstáculos do que o caminho normal de quem tenta domar o Outlook.

Proibidos no Outlook

Imagens de fundo: O Outlook simplesmente não as exibe. Tampouco adianta tentar colocá-las em um DIV abaixo de outra, porque Z-Index também não funciona. Se seu layout está usando uma imagem de fundo que se repete, pense em uma cor sólida que possa ser utilizada no lugar.

GIFs animados: O Outlook irá congelá-los e exibir somente o primeiro frame da animação.

CSS: Se você colocar o seu código CSS no HEAD de sua página, pode dizer adeus a ele. E esse não é um problema exclusivo do Outlook. Escreva seu estilo sempre inline, porque o uso de classes e IDs também está bloqueado. Propriedades como padding, position e margin tendem a dar problemas. No final das contas, você terminará usando CSS apenas para definir propriedades de fonte mesmo.

Obrigatórios no Outlook

Largura: Não crie newsletters mais largas do que 600 pixels.

Defina o Doctype correto: Use sempre o XHTML 1.0 Transitional e escreva no cabeçalho de sua página:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Sempre use o caminho absoluto para as imagens: O correto é <img src=”https://www.website.com/html-email/images/image.gif”> e não <img src=”images/image.gif”>. Pode até funcionar no seu ambiente de produção, mas irá falhar online. E defina sempre largura e altura das imagens!

Feche todas as tags: Um cliente de email online pode até perdoar uma <TABLE> ou <B> que não fecha, mas o Outlook irá destruir seu layout.

Teste seu layout no Outlook: Esta dica é simples, mas crucial. Abra seu HTML em um navegador. Selecione a página inteira com CTRL+A e copie. Crie uma nova mensagem no Microsoft Outlook. Cole o conteúdo. Assuste-se com a diferença e vá corrigindo os problemas linha a linha. Para esta dica funcionar direito, as imagens já tem que estar disponíveis no servidor, para que o Outlook puxe-as da web.

Bugs e Erros

Existe uma série de bugs e erros no Outlook que já foram relatados por sobreviventes da fina arte de criar newsletters compatíveis para o leitor de email. Vamos dar uma olhada em alguns:

O Bug dos 1800 pixels: Se você cria emails longos, o Outlook pode quebrar seu layout por volta dos 1800 pixels. Uma vez que os Outlook 2007 e 2010 renderizam o conteúdo com o Word, o processador de textos está acrescentando quebras de páginas! Certifique-se de que seu layout tenha uma “folga” a cada 1800 pixels de altura, ou o Outlook irá forçar uma.

Altura de linha: O Outlook pode ter problemas com a propriedade line height, especificamente quando você utilizar um número menor do que 1, como 0.9, por exemplo. O Outlook irá cortar sua tipografia sem dó nem pena.

Conclusão

Se você está acostumado a escrever HTML desde o ano 2000, irá parecer extremamente limitante a implantação que o Outlook faz do CSS mais básico. Se você começou nos anos 90, terá que usar as velhas técnicas de layout com tabelas e GIFs vazios cujas minúcias fogem do escopo deste artigo. Prepare-se para testar, testar e testar.

Uma alternativa ainda mais retrô seria abolir por completo o envio de newsletters em HTML. Emails de texto puro, inclusive newsletters periódicas, eram comuns até 10 anos atrás. Desde que o conteúdo seja satisfatório para sua base de assinantes, o layout terá que ser deixado em segundo plano. Pelo menos, até o próximo Outlook.