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 :)
Top comments (1)
Artigo muito bom! Queria ter encontrado ele antes de ter sofrido com algumas dessas coisas, como o CSS in-line.
Uma dica pra testar em real-time em vários clients sem pagar muuuito, além de ver uma versão renderizada ao lado é o: pilotmail.io