Esqueça tudo o que você sabe sobre CSS 3, HTML 5, Javascript e qualquer outra nova novidade que você tenha visto nos últimos 10 anos. Para fazer uma newsletter, você não vai usar nada disso.

Criar email marketing é chato. Não é fácil e provavelmente não vai ficar do jeito que você quer na primeira ou na segunda vez. Se você reclama do Internet Explorer quando vai fazer seu código, você ainda não lidou com os clientes de e-mail. É um mundo totalmente diferente do que conhecemos e estamos acostumados.

Eu sei que você gostaria que eu estivesse exagerando, mas não estou. Cada cliente de email tem suas restrições de segurança e tem seu suporte específico aos padrões web. Clientes de email online, como o Gmail, têm preocupações que um cliente instalado, como o Outlook, não precisa ter. É por isso que sempre temos que voltar à base, com o mínimo de features possível.

Quando digo que você precisa voltar aos velhos tempos, eu não estou brincando. O que funciona perfeitamente em todos os clientes de email são as tabelas. É com elas que você vai estruturar seu layout. Nada de float. Float não funciona no Outlook. Nada de usar background-image, pois ele não funciona no Outlook também. E se você já está achando que o Outlook é o problema, espere até saber que o Gmail simplesmente remove qualquer tag <style> que estiver no documento e só aceita estilos inline, com o atributo style direto na tag. Nesse cenário, não tem quem é pior ou melhor; só tem o pior.

Com as tabelas, você poderá usar a propriedades font e text, com todos os seus respectivos valores. Logo, você já consegue formatar a tipografia do seu email, contanto que use apenas fonts do sistema, porque a propriedades font-face funciona apenas em aparelhos que rodam iOS e no Apple Mail.

E os seletores do CSS? Sem seletores a gente não consegue fazer muita coisa, né? Pois é… Vamos continuar sem fazer muita coisa. O selector mais básico, que chamamos de “selector encadeado“, feito assim: “div p”, pode não funcionar no Gmail. Em todos os outros clientes este seletor funciona perfeitamente.

A propriedade width funciona em tudo. Height só não funciona no Outlook 2007/2010 e 2013. Já o padding e margin, podem ser usadas à vontade. Contanto que sejam em tabelas, porque em divs não vai funcionar no Outlook.

Perceba que as principais propriedades do CSS, as que usamos todos os dias não são aceitas perfeitamente nos clientes de e-mail conhecidos. Na verdade até podem, mas você vai precisar abrir mão de algum cliente de e-mail.

De acordo com o a Litmus, que é um serviço para testar e-mail marketing e websites e diversos browsers, o cliente de e-mail do iPhone é o mais popular. Outlook vem em segundo lugar. Depois vem o cliente de e-mail do Android, seguido pelo do iPad. Aí vem o cliente da Apple, o Apple Mail, seguido do Yahoo! Mail e Gmail. Você pode ver os números aqui.

Se quiser saber também quais propriedades do CSS funcionam, o Campaign Monitor mantém uma tabela, sempre atualizada.

Lembre-se: neste ambiente incerto dos e-mails, teste exaustivamente. Não acredite apenas em serviços online para testar seus e-mails. Envie para você mesmo e teste pessoalmente em todos os clientes de e-mail que puder. É a melhor forma para você obter um resultado decente.