HTML e CSS para e-mails

  • Última modificação: 15/12/2019
  • Tempo de leitura: 2 min.

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:

  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.

Felipe Elia

Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.