Muitas das dúvidas que recebo por email dos leitores deste blog ou dos artigos que publico no iMasters são relacionados à renderização do email marketing nos clientes de email. Problemas como “No Outlook chega correto, mas no Gmail fica estranho” e “a imagem de fundo não carrega” são frequentemente reportados pelos profissionais da área. Neste post, espero fornecer respostas a estas e outras possíveis dúvidas sobre o assunto.

Mecanismos de renderização ou rendering engines

Assim como os navegadores, todas as aplicações de email são diferentes entre si, e essa diferença se deve, em grande parte, ao mecanismo de renderização de HTML que elas utilizam. Um mecanismo de renderização (ou rendering engine) é, muito resumidamente, um sistema que interpreta informações de formatação (CSS, XSL) e de marcação ( HTML, XML, imagens etc) e as transforma em conteúdo visual na tela. Não há um padrão estabelecido entre eles e, infelizmente, temos que adaptar nosso trabalho em função desta diversidade.

Os navegadores utilizam os rendering engines para exibir páginas da web e as aplicações de email os utilizam para exibir mensagens com formatação HTML. Alguns clientes de email desktop utilizam o mesmo mecanismo de renderização de navegadores. O Thunderbird, por exemplo, utiliza o mesmo rendering engine do Firefox. Basicamente, o que funcionar no Firefox também vai funcionar no Thunderbird. O mesmo acontece entre os Outlooks Express, 2002 e 2003 e o Internet Explorer.

Se todos funcionassem assim, menos mal. Porém, em email marketing, ainda temos que considerar o acesso dos webmails através dos diferentes navegadores. Uma mensagem visualizada no Hotmail pelo IE é diferente desta mesma mensagem visualizada no Hotmail pelo Firefox. Podemos dizer, então, que os render engines de cada aplicação são grandes causadores de problemas para o email marketing. O que podemos fazer é adaptar o código HTML das mensagens em função dos problemas encontrados em cada uma.

Por isso, neste post, vamos abordar as principais características de webmails e clientes desktop que influenciam na renderização do template. Identificando os problemas, podemos encontrar as melhores soluções.

Clientes Desktop

Existem duas característica comuns entre os clientes desktop. A primeiro, é o suporte a CSS inline, incorporado e até mesmo externo. Porém, devido à limitação dos webmails, recomenda-se utilizar somente CSS inline. A segunda é o bloqueio de imagens. Todos eles bloqueiam as imagens de mensagens enviadas por remetentes desconhecidos. Uma vez que o endereço do remetente é adicionado como contato, as próximas mensagens não sofrerão o bloqueio de imagens.

Thunderbird

• Bloqueia as imagens de mensagens enviadas por remetentes desconhecidos. Uma vez que o endereço do remetente é adicionado como contato, as próximas mensagens não sofrerão o bloqueio de imagens.

Outlook 2002, 2003 e Express

• Não suportam imagens em PNG com transparência

Outlook 2007

• Não suporta GIF animado
• Distorce a aparência de elementos de formulários
• Não suporta colspan ou rowspan em células de tabela
• Não suporta o atributo alt em imagens
• Não suporta as propriedades width e height de CSS
• Não suporta posicionamento de elementos via CSS (propriedades position, top, bottom, left, right, clear, float e z-index, entre outras)
• As imagens precisam ter suas larguras definidas na tag. Caso contrário, elas serão expandidas para a largura de uma linha inteira na visualização com as imagens bloqueadas.
• Não suporta imagens de fundo, independente de serem inseridas através de CSS ou de atributos do HTML.

OBS: A versão 2007 do Microsoft Outlook apresenta muito mais problemas do que as versões anteriores porque, nesta, a Microsoft trocou o mecanismo de renderização. Ao invés de usar o mesmo do Internet Explorer, assim como as versões até 2003, o Outlook 2007 utiliza o rendering engine do MS Word. Na prática, é quase o mesmo que dizer que se algo não funcionar no Word, então também não funcionará no Outlook 2007. Sem dúvida, esta alteração representou um grande retrocesso no suporte a mensagens em HTML, visto a quantidade (e gravidade) de problemas encontrados.

Outlook 2010

A Microsoft afirmou que pretende manter o Word como rendering engine do Outlook 2010, assim como já acontece no Outlook 2007. Isso significa que os problemas mencionado neste post para o Outllook 2007 não serão  resolvidos.

Leia mais em:

Microsoft pretende manter o MS Word como render engine do Outlook 2010

Windows Mail e Windows Live Mail

• Bloqueia as imagens de mensagens enviadas por remetentes desconhecidos. Uma vez que o endereço do remetente é adicionado como contato, as próximas mensagens não sofrerão o bloqueio de imagens.
• Suporta CSS inline, externo e incorporado
• O Windows Mail não suporta a propriedade margin de CSS

Webmails

TerraMail (versão com painéis)

• O espaço para a exibição das mensagens tem fundo cinza no tom #f9f9f9. Mensagens que precisam de fundo branco devem ter esta cor especificada como cor de fundo da tag apropriada (td, table, body).
• Modifica a aparência dos textos inseridos dentro da tag strong. Apesar de não ser semanticamente correto, recomenda-se utilizar o antigo b para produzir o efeito de negrito.
• Suporta apenas CSS inline
• Não suporta a propriedade margin de CSS
• Elementos de formulário devem ter atributos de largura e altura declarados na tag para que não tenham suas dimensões alteradas pelo webmail
• Não insere o espaçamento característico entre parágrafos

TerraMail (versão clássica)

• Não suporta as tags strong e em do HTML. Utilizar b e i, respectivamente, como alternativa para produzir os efeitos de negrito e itálico.
• Não suporta cellpadding ou cellspacing em células de tabela

Gmail

• Suporta apenas CSS inline.
• Não suporta imagens de fundo e nem a propriedade bgcolor. Para exibir cor de fundo no corpo da mensagem, utilizar a propriedade background-color de CSS. A tag body só aceita a propriedade background-color de CSS. As demais propriedades devem ser inseridas nas tags de conteúdo.
• Não suporta imagem mapeada (os links serão desabilitados).
• Bloqueia as imagens de mensagens enviadas por remetentes desconhecidos. Uma vez que o endereço do remetente é adicionado como contato, as próximas mensagens não sofrerão o bloqueio de imagens.

IG / iBest / Gmail antigo

• Não suporta imagem mapeada (os links serão desabilitados).
• Bloqueia as imagens de mensagens enviadas por remetentes desconhecidos. Uma vez que o endereço do remetente é adicionado como contato, as próximas mensagens não sofrerão o bloqueio de imagens.
• Suporta apenas CSS inline.

BOL / UOL / Zipmail

• Suporta vídeos e objetos SWF.
• Não permite o correto preenchimento de formulários por acionar atalhos de funções (Responder, Encaminhar, etc) ao digitar determinadas letras.
• Não suporta links do tipo âncora.
• Suporta apenas CSS inline.

UOL (antigo)

• Suporta vídeos e objetos SWF.
• Não suporta CSS de nenhuma maneira (incorporado, externo ou inline).

Windows Live Hotmail

• Acessando a partir do Firefox, acrescenta um espaçamento ao redor das imagens, prejudicando a visualização de templates cujo design depende do alinhamento exato entre duas ou mais imagens. Para corrigir, acrescentar style=“display: block;” em todas as tags de imagem.
• Suporta apenas CSS inline
• Não suporta imagens ou cor de fundo no body, independente de serem inseridas através de CSS ou de atributos do HTML.
• Não envia o conteúdo preenchido em formulários
• Bloqueia as imagens de mensagens enviadas por remetentes desconhecidos. Uma vez que o endereço do remetente é adicionado como contato, as próximas mensagens não sofrerão o bloqueio de imagens.
• Não suporta a propriedade margin de CSS

Yahoo! Mail

• Não suporta imagem mapeada (os links serão desabilitados).
• Suporta apenas CSS inline.
• É o único cliente de email que suporta a propriedade list-style-image de CSS.

* O estudo completo sobre as principais aplicações de email e seu suporte a HTML e CSS está disponível para download em oito edições em PDF na Biblioteca da Virtual Target.

Como estas aplicações podem se modificar a qualquer momento, algumas das observações verificadas neste post podem ser igualmente alteradas.