O que você precisa saber para criar um excelente E-mail Marketing

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 primeira, é 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.


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


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.


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.


UOL (antigo)
Suporta vídeos e objetos SWF.
Não suporta CSS de nenhuma maneira (incorporado, externo ou 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.


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.


Como estas aplicações podem se modificar a qualquer momento, algumas das observações verificadas neste post já podem ter sofrido alterações. Pesquise sempre antes de criar um template de e-mail marketing e principalmente codificá-lo!


Gostou deste post? Faça uma blogueira feliz! Comente :P