Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Nesse tutorial, mostrarei a você como criar simples e-mails HTML responsivos, que funcionarão em todos clientes de email, incluindo todos os novos clientes de email e apps de smartphones. Ele usa o mínimo de media queries e uma abordagem de largura fluida para garantir o máximo de compatibilidade.
Media Queries: Apenas a Metade da Solução
Houve um tempo que as media queries eram mais que suficiente para fazer com que e-mails responsivos funcionassem em aplicativos do iOS e Android, uma vez que ambos os sistemas operacionais oferecem suporte a media queries.
Desde então, houve uma proliferação de aplicativos de e-mail, criados tanto para a plataforma iOS quanto para Android, com variados níveis de suporte a métodos de desenvolvimento de e-mails responsivos.
O mais notável é a última atualização do app do Gmail para Android, a qual é duas vezes mais popular que o app nativo de e-mails entre os usuários do Android (correspondendo a 11% do total de abertura de e-mails). Ele nunca deu suporte a media queries e, embora ainda não suporte, agora ele é capaz de dimensionar os seus e-mails, diminuindo o tamanho das tabelas mais externas para caber na largura da área visível da tela. Isso é difícil de lidar e controlar, e, quando seu e-mail depende de media queries para apresentar-se corretamente em dispositivos móveis, isso gera alguns resultados bem indesejáveis.
Porque Fluido é o Novo Preto
A boa notícia é que você pode projetar e construir um e-mail que pareça excelente em todos aplicativos de e-mail, incluindo aqueles que não dão suporte a media queries. Você pode alcançar isso, lançando mão dos layouts fluidos.
Há, porém, alguns ajutes de design que é preciso que você realize. Aqueles layouts com colunas iguais que se empilham em cima do outro em um única coluna, não funcionam muito bem ao usar esse método. Se você conseguir sobreviver sem eles, há vários designs bastante funcionais que servem extremamente bem.
Eis o que criaremos hoje:
Começando
Certo, comecemos com nossa tela em branco.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
O que acabamos de criar foi a nossa página básica com seu elementos header, doctype e a tabela receptáculo com uma cor de fundo aplicada (tanto na tag body quanto na table receptáculo, uma vez que a estilização da tag body não é bem suportada). Para mais informação dessa preparação básica, veja Build an HTML Email Template from Scratch.
Também adicionei a tabela que terá o nosso conteúdo, logo ao centro, com uma classe content.
Preste Atenção
Nota: Você perceberá que, nesse tutorial, colocarei o CSS no elemento head do seu documento. Geralmente, coloco os elementos que reutilizarei lá e uso estilos em linha quando serão usados uma única vez.
Importante: Sempre que colocar suas regras CSS no head de seu documento, você deve usar alguma ferramenta para fazê-las virar estilo em linha, ao fim do processo. Se você usar serviços como MailChimp ou o Campaign Monitor, eles, automaticamente, oferecerão essa funcionalidade quando for importar seus designs. Você tem de fazer isso porque, alguns clientes, como o Gmail, ignoram ou removem o conteúdo da tag <style>. Você também pode usar alguma ferramenta, como a Premailer para tornar todo seu CSS em linha. Se você usar o Premailer ou alguma ferramenta parecida, lembre-se de remover suas media queries antes do processamento (já que queremos que elas permaneçam intactas), e, então, insira-as, novamente, após o processamento, ao final das regras. O MailChimp e Campaign Monitor já levam isso em consideração, na hora de importar seus layouts.
Escondendo Estilos Mobile em Relação ao Yahoo!
Você peceberá que a tag body tem um atributo extra. O Yahoo! Mail tem a mania de interpretar suas media queries como regras, então, para prevenir esse comportamento, você precisa usar seletores de atributo. Acredito que a maneira mais fácil de fazer isso (como sugerido por Email on Acid), é, simplesmente, adicionar um atributo arbitrário à tag body. Eu aplico a sugestão deles, usando o atributo 'yahoo', mas, na verdade, poderia ser qualquer coisa que você quisesse:
<body yahoo>
Você pode, assim, mirar classes específicas, usando o seletor de atributo na tag body em seu CSS.
body[yahoo] .class {}
Dois Truques para Dominar o Método do Layout Fluido
Como você pode ver, nossa tabela content foi criada para possuir largura de 100%, tornando-a fluida, ocupando a largura total das telas de smartphones e tablets. Também atribuiremos uma largura máxima de 600px para evitar que o e-mail tome todo o espaço da tela em dispositivos maiores.
Há dois pontos ligeriamente complicados que precisamos ajustar, para garantir que tudo apareça como planejado em todos os clientes de e-mail. Esses dois ajustes são graças ao excelente tutorial de Tina Ye sobre esse método, que está disponível no Blog FogCreek.
1. Superando a Falta de Suporte a Max-Width
Infelizmente, a propriedade max-width não é suportada por todos os clientes de e-mail. Assim, para fazer com que nossos e-mails apresentem-se apropriadamente nos aplicativos Outlook e nos Lotus Notes 8 & 8.5, precisamos envolver cada tabela em um código condicional que cria uma tabela com uma largura fixa, para sustentar tudo dentro. Esses comentários miram o IE (que é o motor de renderização usado pelo Lotus Notes) e o Microsoft Outlook.
Nós envolveremos nossa tabela em um código condicional:
<!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
2. Um Ajuste para o Apple Mail
Estranhamente, o Apple Mail (normalmente, um cliente de email bem progressivo) também não suporta a propriedade max-width. Mas, ele suporta media queires, então, podemos adicionar uma que diga a ele para fixar a largura de nossa tabela content, desde que a área de visualização (viewport) seja capaz de mostrar os 600px por inteiro.
<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>
Criando o cabeçalho
Agora, adicionaremos a primeira linha da nossa tabela — o cabeçalho. Adicione o estilo a seguir à linha que já criamos:
<td class="header" bgcolor="#c7d8a7"> Hello! </td>
E, em seu CSS, adicione espaçamento interno ao header:
.header {padding: 40px 30px 20px 30px;}
Adicionando a Primeira Linha Responsiva
Agora, criaremos nossa primeira linha responsiva. Nós fazemos isso, criando duas tabelas que "flutuam" uma próxima à outra, usando a propriedade align.
Coluna Esquerda
Substitua nossa pequena saudação "Hello!" pelo que segue:
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0 20px 20px 0;"> <img src="images/icon.gif" width="70" height="70" border="0" alt="" / > </td> </tr> </table>
Nós criamos nossa tabela com 70px de largura e também adicionamos espaçamento interno para servir de vão entre as duas colunas. O espaçamento interno da parte inferior irá adicionar vão que ajudará a fazer o layout respirar quando as duas colunas empilharem em dispositivos módeis.
Coluna Direita
Nós criaremos a coluna direita, novamente, alinhando a tabela à esquerda. Essa tabela terá 445px de largura, nos dando 25px para usar do lado direito. Isso é muito importante, porque o Outlook irá, automaticamente, empilhar suas tabelas, caso não tenha 25px sobrando em alguma linha.
Você permitindo ter os 25px de sobra na largura, suas tabelas se comportarão como esperado.
Na tabela maior à direita, nós usaremos a mesma abordagem que usamos na nossa tabela receptáculo, que envole a criação de uma classe e a adição de comentários condicionais. Nós queremos que essa tabela tenha 100% de largura em dispositivos móveis, quando ela irá para baixo da tabela da esquerda.
<!--[if (gte mso 9)|(IE)]> <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;"> <tr> <td height="70"> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
Aqui você pode ver que eu criei uma classe chamada col425 para essa tabela, nossa coluna de 425px de largura. Envolvi essa tabela em um código condicional que rodeará nossa tabela de 425px de largura. Nós, então, adicionamos nossa classe à Media Query que criamos para o Apple Mail também.
.col425 {width: 425px!important;}
Agora, dentro das células de nossa tabela, nós adicionaremos o cebeçalho estilizado.
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="subhead" style="padding: 0 0 0 3px;"> CREATING </td> </tr> <tr> <td class="h1" style="padding: 5px 0 0 0;"> Responsive Email Magic </td> </tr> </table>
Adicionei algumas classes a cada uma das células para estilização, assim como alguns estilos que usarei para alguns textos mais tarde:
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
Nosso cabeçalho está completo, e você pode ver, abaixo, como as duas colunas empilharão em dispositivos móveis. (Para pré-visualizar enquanto você trabalha, terá de comentar, temporariamente, as media queries com min-device-width, porque elas forçam uma largura fixa no desktop).
Criando A Linha Com Uma Única Coluna
Para criar uma linha com uma única coluna, nós, simplesmente, adicionaremos uma nova linha à nossa tabela .content. Nós adicionaremos uma classe innerpadding a essas linhas, com alguns valores de espaçamento interno reutilizáveis. Nós também adicionaremos uma classe chamada borderbottom para aplicar uma borda a cada linha.
<tr> <td class="innerpadding borderbottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="h2"> Welcome to our responsive email! </td> </tr> <tr> <td class="bodycopy"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> </tr>
Nosso CSS para essa seção:
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
Criando o Artigo de Coluna Dupla
Agora, criaremos uma linha responsiva, tal qual nosso cabeçalho, mas com dimensões, ligeiramente, diferentes, para que possamos ter uma imagem um pouco maior.
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Adicionamos um botão com uma classe buttonwrapper. Ele contém uma célula com espaçamento interno e uma cor de fundo, e, então, um link textual dentro. Prefiro usar esse método, porque ele permite que você tenha botões com larguras fluidas, o que é bastante interessante ao criar modelos reutilizáveis, onde a largura de cada botão será diferente a cada vez que ele for usado. Se você fixar a largura dos seus botões, talvez você queira usar o Gerador de Botões à prova de Balas do Campaign Monitor.
Nosso estilo para o botão:
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
Tanto quanto atribuir a largura para nossa nova classe col380, nós adicionaremos nosso tamanho à nossa lista de estilo para lidar com o Apple Mail. Agora, está parecido com isso:
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}
Criando Uma Imagem de Uma Só Coluna
Essa é uma linha bem simples; nós faremos com que a nossa imagem tenha largura de 100% da largura do email, além de garantir que a altura seja atribuida, automaticamente, usando o CSS.
<tr> <td class="innerpadding borderbottom"> <img src="images/wide.png" width="100%" border="0" alt="" /> </td> </tr>
Em nosso CSS:
img {height: auto;}
Criando a Linha Final de Texto Simples
Finalmente, adicionaremos uma linha de texto sem borda na parte de baixo:
<tr> <td class="innerpadding borderbottom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr>
Criando o Rodapé
Em nosso rodapé, adicionaremos uma linha com uma tabela dentro dela. Uma das linhas dela conterá outra tabela onde ficarão nossos ícones de redes sociais.
<tr> <td class="footer" bgcolor="#44525f"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" class="footercopy"> &reg; Someone, somewhere 2013<br/> <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr>
Adicionaremos os estilos requeridos pelo nosso rodapé ao CSS:
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
Otimizando os Botões para Dispositivos Móveis
Nos dispositivos móveis, é preferível que o botão inteiro seja um link, não apenas o texto, porque é muito difícil apertar um pequeno texto com seu dedo. Por ser algo que não funciona em todos os clientes desktop (espaçamento interno não é totalmente suportado em tags <a>), será algo que adicionaremos à versão dos dispositivos módeis através das media queries.
Temos de remover a cor de fundo atual da <td>, e, então, aplicá-la à tag <a>, além de bastante espaçamento interno.
Usarei tanto max-width como max-device-width nessa, para tentar evitar um bug no Outlook.com rodando IE9.
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
}
Agora, quando você apertar em qualquer lugar de um botão colorido em um dispositivo móvel, será um link!
Mais Aprimoramentos com Media Queries
Se você quisesse, você poderia começar a realizar aprimoramentos ao seu layout, adicionando classes aos elementos que você quisesse controlar e, então, criar novas regras dentro da media query que acabamos de criar.
Como exemplo, faremos com que nosso link de cancelamento de inscrição se transforme em um botão, adicionando uma classe ao link:
<a href="#" class="unsubscribe"> <font color="#ffffff">Unsubscribe</font> </a> <span class="hide">from this newsletter instantly</span>
e adicionando o CSS a seguir à media query:
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}
body[yahoo] .hide {display: none!important;}
Você poderia mirar, inclusive, as classes .innerpadding, .header e .footer para diminuir a quantidade de espaçamento intero nos clientes que dão suporte a media queries.
Testar e Partir!
Finalmente, como sempre, valide seu HTML e CSS (usando o W3C validator — você só deveria receber um erro por conta do atributo proprietário 'yahoo' na tag body) e testar bastante, em aparelhos de verdade e serviços de pré-visualização, como o Litmus ou Email on Acid.
Divirta-se criando e-mails responsivos que fiquem excelentes em todos os clientes de e-mail!
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
