Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 31 março 2010

Sei que email marketing não tem muita ligação com Web Standards, mas todo mundo precisa saber que já existem projetos relacionados e também serve como um guia para produzir esse tipo de material.

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.

Template email marketing. 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.