Montagem de e-mails HTML: guia completo

Montar um e-mail difere de montar um site o bastante para ser outro ofício. Os clientes de e-mail não suportam HTML moderno: a montagem roda sobre tabelas, os estilos vão inline e os botões do Outlook precisam do próprio código. A seguir, tudo o que tratamos em artigos separados, com links para o detalhe.

Por que montar e-mails é um ofício à parte

O motivo é que os clientes de e-mail evoluíram à parte dos navegadores. Alguns usam motores de dez anos ou mais, e vários removem da mensagem tudo o que consideram inseguro.

A consequência prática: o que fica perfeito num navegador pode quebrar numa caixa de entrada. A conferência acontece em três ou quatro lugares, não em um.

E mais uma coisa: a maioria dos e-mails é aberta no celular. Então desenhar para tela larga e comprimir depois é a ordem errada de trabalho.

Oito regras que não mudam

Esses valores estão consolidados pela prática e quase não mudam entre projetos. Vale mantê-los à vista durante a montagem.

Outlook: a principal dificuldade

O Outlook clássico para Windows usa o motor de um editor de texto em vez de um de navegador. Ele ignora media queries, não entende cantos arredondados nem gradientes, e botões montados do jeito comum só são clicáveis sobre o texto.

A solução é código VML à parte, uma marcação que só o Outlook entende. Os demais clientes a ignoram, então um mesmo e-mail funciona em todo lugar.

Assunto à parte são os prazos de suporte. As publicações do setor repetem que o motor será desligado em 2026. Na verdade o que termina é o suporte a versões específicas do pacote de escritório, e o Outlook clássico vive bem mais.

Modo escuro

Mais de um quarto dos e-mails é aberto no modo escuro, e os clientes lidam com isso de três formas: deixam as cores intactas, invertem parcialmente ou invertem por completo.

Dá para influenciar com duas metatags no cabeçalho e uma media query com as suas próprias cores. Não funciona em todo lugar, mas onde funciona dá controle total.

Telas de celular

A montagem móvel não consiste em encolher a versão de desktop, e sim na ordem inversa: primeiro se decide como fica na tela estreita e depois se acrescenta a versão larga.

Há uma armadilha sobre a qual quase ninguém escreve: um iPhone amplia à força qualquer fonte menor que 13 pixels enquanto o contêiner continua igual. O texto deixa de caber e o layout se desloca.

Peso do e-mail e corte

Os provedores de e-mail cortam mensagens acima de certo peso. Tudo o que fica além disso, incluindo o link de cancelamento e o pixel de rastreamento, não chega ao destinatário.

Mire não no limite, e sim em uma margem: a sua plataforma de envio adiciona o próprio código de rastreamento depois de você, e um e-mail de noventa kilobytes pode cruzar a linha.

Importar um layout do Figma

Um layout do Figma não se transfere para o e-mail diretamente: ele usa posicionamento livre e recursos modernos de montagem que o e-mail não tem. É preciso uma reconstrução estrutural, não uma exportação.

Conferir antes de enviar

Passe por um checklist antes de enviar: um e-mail não pode ser recolhido, e um erro no link principal arruína todo o trabalho.

O conjunto mínimo é abrir o e-mail no celular, clicar em cada link, vê-lo no modo escuro e desativar o carregamento de imagens para confirmar que o sentido se mantém.

Por onde começar

Montar à mão significa carregar tudo isso na cabeça. Um construtor assume a parte técnica: tabelas, estilos inline, a alternativa para o Outlook, espaçamentos em células e um contador de peso aparecem sozinhos na compilação.

A biblioteca do Mailvex tem 160 modelos prontos para dez setores, todos montados sobre blocos compatíveis com os clientes de e-mail.