Trabalhando como desenvolvedor(a) Front-end em uma empresa de pequeno porte, em algum momento você vai se deparar com uma task relacionada a criação de um template de e-mail. Essa pode parecer uma tarefa muito básica, mas ela requer atenção em alguns pontos para que o e-mail chegue na caixa de entrada e com o Front-end fiel ao layout.
Primeiramente, é importante identificar qual ferramenta será utilizada para enviar as mensagens, pois em alguns casos temos diversas limitações e em outros não precisamos nos preocupar sequer com a construção do template em si.
Porém, para este post, vamos levar em consideração que você precisa construir o seu template baseado em um layout que um designer fez, exclusivamente para este envio, certo?
De volta aos anos 90
Mesmo com todas as tecnologias que conseguimos usufruir no front-end atualmente, nossos clientes de e-mails são muito limitados em relação a interpretação de código.
Por isso, para suportar o máximo de clientes possíveis, nossos e-mails devem ser construídos utilizando tabelas como estrutura. Sim, usando a tag <table>, nada de Grid Layout ou FlexBox. Além disso, devemos utilizar 100% do nosso estilo inline (ou o máximo possível).
Isso pode parecer bem estranho, mas esta é a técnica mais utilizada para que todos os clientes/usuários tenham a melhor experiência possível em seus respectivos clientes de e-mail. Veja um exemplo de como seria a estrutura de um e-mail marketing bem básico:
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="left">
<tr>
<td style="text-align: center;">
<h3 style="color: #000;">Olá,</h3>
<p style="color: #000; line-height: 1.7em; margin-bottom: 0;">Obrigado por nos visitar ontem. Como foi sua experiência?</p>
<a style="margin-top: 16px; max-width: 230px; color: #FFF; background: #FF5E00; font-size: 16px; font-weight: bold; padding: 16px 60px; text-decoration: none; border-bottom: 2px solid #D04D01; border-radius: 5px;" href="https://www.meusite.com">
Avaliar
</a>
</td>
</tr>
</table>
Com o estilo sendo 100% inline e a marcação HTML da estrutura precisando ser feita apenas com tabelas, vamos utilizar alguns truques para deixar nosso e-mail mais responsivo.
Resets, Media queries e Mobile first
Alguns clientes de e-mail aceitam alguns estilos gerais, mas isso não é regra.
É comum termos alguns "resets" de CSS em uma tag <style> para tentar deixar a estrutura inicial mais parecida para todos os clientes de e-mail.
Além dos resets, alguns clientes de e-mail também aceitam @media queries.
Isso é um pouco recente, se considerarmos a evolução dos clientes de e-mail. Veja um exemplo utilizando uma media query:
<style type="text/css">
body {
font-size: 14px;
}
@media only screen and (max-device-width: 480px) {
table a {
background: #333 !important;
border-bottom-color: #CCC !important;
}
}
</style>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="left">
<tr>
<td style="text-align: center;">
<h3 style="color: #000;">Olá,</h3>
<p style="color: #000; line-height: 1.7em; margin-bottom: 0;">Obrigado por nos visitar ontem. Como foi sua experiência?</p>
<a style="display: inline-block; margin-bottom: 22px; margin-top: 16px; max-width: 230px; color: #FFF; background: #FF5E00; font-size: 16px; font-weight: bold; padding: 16px 60px; text-decoration: none; border-bottom: 2px solid #D04D01; border-radius: 5px;" href="https://www.google.com">
Avaliar
</a>
</td>
</tr>
</table>
Como você deve ter notado, para sobrescrever nossos estilos inline, precisamos utilizar o !important em todos os atributos que adicionarmos ao nosso CSS, que é bem comum nesse ambiente de e-mails marketing.
Por quê usar estilo inline, então?
Uma coisa muito interessante de se saber sobre esse resets é que, mesmo que o seu cliente de e-mail suporte estes recursos: ao tentar encaminhar ou responder um e-mail que contenha estes estilos "extra", nesse momento todo esse estilo "extra" é descartado e só os estilos inline são utilizados. Sabendo disso, é importante avaliar seu público alvo e qual versão do seu e-mail pode ser compartilhada tanto no formato desktop quanto no mobile, e a partir disso definir a regra da sua media query.
Boilerplate
Depois de muito pesquisar a respeito, acabei fazendo uma análise mais detalhada dos e-mails enviados pelo iFood, e achei que ele tinha um código muito bem estruturado.
Acabei montando um modelo baseado no que eles utilizavam na época (mantendo os créditos, assim como eles o faziam), porém com algumas adaptações. Decidi publicar ele em um gist e compartilhar.
Clique aqui para visualizar o Gist com o template. Agora, nos raros casos que preciso criar um e-mail "do zero", recorro a este template.
Lembrando que o max-device-width utilizando com regra da minha media query, pode ser substituído por qualquer outra regra que faça mais sentido pro seu caso.
