Este post foi migrado lá do Melancia na Cabeça. Ele tem muito tempo, mas estou mantendo só por razões históricas 🙂
A produção de HTML/CSS para e-mails não é nada trivial e a situação é ainda pior para quem já começou na vida de desenvolvimento para web mexendo com tableless. A tag <style>, por exemplo, não é suportada pelo gmail nem no <head> nem no <body>. Daí já dá pra perceber que o jeito é utilizar todos os estilos inline (usando o atributo “style” dentro de cada tag html).
Outro problema grave: o Outlook 2007 não suporta “float” nem “position” o que nos obriga a diagramar os elementos do jeito antigo, isto é, com tabelas. Outra restrição importante fica com o “background-image” que não é suportado nem pelo gmail nem pelo Outlook 2007, o que nos obriga a usar (argh!) o atributo “background” que não é mais utilizado para o desenvolvimento “normal”.
Resumo da ópera, para que a newsletter que o cliente pediu seja visualizada da forma certa você vai ter que:
- Diagramar o html com tabelas;
- Escrever todos os estilos em linha e
- Utilizar o atributo html (não é o css não hein!) “background”.
No campaign monitor tem uma lista (atualizada hoje por sinal) de todos os atributos suportados pelos diferentes clientes de e-mail, tanto desktop quanto web e mobile.