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.

8 comentários

Responder
  1. 19 de junho de 2009

    Marta disse:

    MUITO obrigada pelo post! Monto emails marketing todos os dias, mas agora vou fazer direito. Eu sabia algumas coisas, mas nunca ia passar pela minha cabeça não usar html, head, body. Valeu mesmo!

  2. 19 de novembro de 2009

    Willian disse:

    Cara muito bom seu artigo, eu já usava algumas coisas, mas foi esclarecedor, é legal ver alguém de fora falando, assim temos respaldo para conversar na empresa e discutir certas coisas.. Obrigado

  3. 15 de dezembro de 2009

    Fábio disse:

    Bacana, esse e outros artigos que vi, muito boa iniciativa. Já vi muito artigo relacionado e estudei bastante o assunto, e mesmo seguindo todas as manhas, o Hotmail quebra os layouts.
    Mesmo fazendo o mais simples possível, de uma imagem ou de uma a outra, fica um espaço de uns 10px entre um e outro, alguma sugestão?

  4. 15 de dezembro de 2009

    Carlitos disse:

    Obrigado pelos elogios, Fábio!
    Esse erro do Hotmail é bem comum e acabamos encontrando a solução.

    Escrevemos um post no nosso Histórico de bugs descrevendo esse bug e como resolve-lo: Quebra de layout no e-mail marketing IE6 e IE7

  5. 25 de janeiro de 2011

    Pablo Cantero disse:

    Criei uma ferramenta para testar e-mails em HTML

    “It’s a mail test tool to test your mails before sending them”
    http://putsmail.com

    Espero que ajude nos testes de formatação

    Criei um validador de “img src”, se vcs quiserem contribuir com outros validadores, o projeto é open source, está no github

  6. 28 de fevereiro de 2012

    Como criar um email marketing? Usando tabelas e pouco css… | PC NOTES – Notas sobre tecnologia Como criar um email marketing? Usando tabelas e pouco css… | Mantido por Thiago dos Anjos disse:

  7. 20 de abril de 2012

    Thiago disse:

    Dá pra usar drop down em um e-mail marketing?

  8. 24 de abril de 2012

    g3 disse:

    Não usamos estilos com posicionamento absoluto, nem select e nenhum elemento de formulário.

Escreva seu comentário