O curioso mundo dos emails em HTML

PatrickO98 — Tue, 28 Jul 2020 15:44:26 +0000

Se alguma vez você tentou desenvolver um e-mail em HTML, deve ter percebido que é bem diferente de desenvolver uma página comum, parece que nada funciona e da vontade de desistir e escrever logo um "rich text" mesmo...

É difícil mas não impossível, e pra ajudar vou juntar aqui algumas coisas que você precisa saber para montar um e-mail usando HTML.

Estrutura geral

A primeira coisa que você precisa saber é que os clientes de e-mail basicamente não lêem HTML5, por isso uma série de tags e features que estamos acostumados a usar não vão funcionar, então precisamos ser bastante simplistas inclusive em relação a semântica.

Então pra começar use e abuse de <table> - pra quem é dev dinossauro sabe muito bem como é isso (não é o meu caso hehe). Seguindo essa ideia, pense em montar os containers e a hierarquia dos seus "elementos" usando a tag table mesmo, aqui vai um exemplo, supondo que precisa de um Header que contenha uma logo com um texto e um banner:

<!-- Header -->
<table>
 <tr>
  <!-- Logo -->
  <table>
   <tr>
    <td><img class="logo" src="..." /></td>
    <td><h1>Texto</h1></td>
   </tr>
  </table>
  <!-- / Logo -->
 </tr>
 <!-- Banner -->
 <tr>
  <td><img class="banner" src="..." /></td>
 </tr>
 <!-- / Banner -->
</table>
<!-- / Header -->

Estilização

Nosso bom e velho CSS, é importante saber como utilizá-lo nos e-mails, pra ajudar tem o https://www.caniemail.com/ pra checar quais atributos tem suporte ou não.
Outro ponto é sobre como colocar o CSS no seu e-mail, temos duas possibilidades o style inline e usando a tag <style>, mas tenha em mente que se você usar a tag style ela pode ser removida (alguns clientes de e-mail removem o <head>), então sempre use o style inline para setar a estrutura básica do seu elemento e deixe a tag style para media queries, pseudo-classes, etc.

Pra resumir sobre estilização de e-mails aqui vai um FAQzinho:

E um media query, rola?

A resposta é: sim! Porém saiba que nosso amigo @media ainda não é suportado por todos os clientes de e-mail, então use com cuidado.

Posso usar uma imagem de fundo?

Sim podemos usar o atributo background-image, mas só para garantir sempre coloque um background-color para o caso da imagem não carregar e fique atento para o contraste entre o conteúdo e o fundo.

Habemus flexbox?

Ele é parcialmente suportado, eu prefiro não usar, mas em alguns casos vale a tentativa, aqui tem uma discussão bem legal sobre o assunto: https://litmus.com/community/discussions/1500-using-flexbox-in-an-email

Posso usar margin e padding?

Pode, mas para um suporte garantido recomendo utilizar as tags <tr> e <td> mesmo, veja como é simples:
Para um espaçamento vertical entre elementos você pode fazer assim

<!-- Espaçamento -->
<tr>
 <td height="24px"></td>
</tr>
<!-- / Espaçamento -->

E no caso de uma margem lateral você pode utilizar porcentagem para deixar o layout mais responsivo

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="5%"></td>
  <td width="90%"> Conteúdo aqui... </td>
  <td width="5%"></td>
 </tr>
</table>

Ainda sobre estilização, algo bem importante é sempre fazer uma espécia de "clearfix" nas suas tags para evitar que as predefinições do browser/cliente de e-mail afetem o seu layout, quando for utilizar uma <table> faça assim: <table border="0" cellspacing="0" cellpadding="0"></table>, é bom também resetar as margens de tags como p ou h1 <p style="margin: 0;"></p>.

Conclusão

O mundo dos e-mails é meio complicado mas com a técnica certa conseguimos montar layouts bem ricos e otimizá-los para que funcionem da melhor maneira possível. Para garantir sempre faça uma boa bateria de testes com seu e-mail para ver como ele vai se comportar em diferentes clientes de e-mail e dispositivos (o Litmus ajuda muito nessa tarefa, vale a pena dar uma olhada http://litmus.com/).

Espero que ajude você que precisa desenrolar um e-mail e não sabe por onde começar!

Até a próxima :)

DEV Community: PatrickO98