Quais são os limites do email marketing utilizando HTML? O que podemos colocar de CSS também, levando em conta algo que funcione nos programas desktops e também nos webservices?

CSS

Pode ser utilizada a tag “style” no head ou no body (só não funciona no AOL MAC, Note 6, Gmail e Hotmail). Mas como no GMail isso não funciona, a dica é usar style inline. Como o Notes 6 tem um suporte mínimo, não levei ele em conta ok?

Propriedades CSS válidas para todos*:

• Background-color:
• Border;
• Border-collapse;
• Color;
• Display, Float e Height(só não funciona no Outlook 07);
• Font-family (não funciona no Gmail);
• Font-size;
• Font-style;
• Font-weight;
• Line height;
• Table-layout;
• Text-align;
• Text-decoration;
• Text-indent;
• Text-transform;
• Letter-spacing;
• Padding;

* Todos testados (Yahoo antigo/novo, Gmail antigo/novo, Live Mail, Hotmail, AOL Web, MobileMe.) / (Outlook (2003 e 07), Windows Mail, Mac Mail, Entourage (2004, 2008), Thunder-bird 2, AOL (9, 10), Mac).

Existem pessoas focadas nos webstandards para os emails: os chamados e-mail standards. Eles mostram screenshots de cada browser como resultados de seus testes, além de dizer o que falta para cada Email Client ficar show para suportar os standars. Ex.: Para o Google Mail ainda é necessário suportar o CSS no header, e não utilizar mais a técnica inline.

Estrutura HTML / CSS

Resumindo: Como construir um e-mail marketing utilizando pelo menos um pouco de webstandards?

• A estrutura deve ser em tabelas;
• Utilizar as propriedades que todos os emails clients aceitem (ou pelo menos a maioria deles);
• CSS inline (apesar de não ser standard, é o que podemos usar);
• Layout com largura fixa até 580px e a altura pode ser variável (dependendo do layout).
• Mesmo com todos os cuidados, é possível que o usuário veja a mensagem desconfigurada. Por isso um link do tipo “se você está vendo o email desconfigurado, acesse a outra versão.”

HTML: tags que devemos evitar

Tags HTML que não devem ser utilizadas, por não serem suportadas por muitos clientes de email: (segundo um HTML Email Guide que li).

• DOCTYPE
• HTML tag
• BODY tag
• Meta tags
• Head tag
• Base tag
• Link tag
• Script tag
• Title tag
• Applet tag
• Frameset tag
• Frame tag
• IFrame tag
• Comments

Template de E-mail Marketing HTML, utilizando o que falei nesse post. *No topo a mensagem para visualizar o outro formato do email, evitei usar o “clique aqui” por ser termos que são buscados para codificar como Spam.

. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.

Se você tem dúvidas em quais clientes testar, pode dar preferência aos clientes que mais cresceram em 2009: iPhone, Apple Mail, Hotmail e Gmail – (fonte).

Link relacionado/fonte: Campaing Monitor.

Artigos relacionados:

1. Quebra de layout no email marketing IE6 e IE7 Como corrigir problemas de quebra de linha de layout em...
2. Usando target blank em XHTML Strict Para usar o atributo target="_blank" para que links abram em...
3. Repositório de Snippets: HTML, CSS, Microformats, jQuery e WordPress Pensando em deixar o desenvolvimento de códigos mais prático, publicamos...