HTML e CSS para e-mails

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:

  1. Diagramar o html com tabelas;
  2. Escrever todos os estilos em linha e
  3. 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.


Não quer perder o próximo post? Cadastre seu e-mail e você receberá um aviso sempre que sair coisa nova :)

Comentários

  • http://www.contextoseo.com Alex Rodrigues

    Eu faço emails do jeito arcaico. Fatio tudo no Photoshop e vou acertando o básico mesmo no Dreamweaver. É antigo, errado e feio mas por enquanto, só assim funciona em todos os lugares.