Construa um Modelo de E-mail em HTML a Partir do Zero

() translation by (you can also view the original English article)

A melhor forma de entender qualquer processo é realizá-lo desde o começo Hoje, faremos isso com o design de e-mails, construindo um modelo de e-mail em HTML, do zero.

O Pontapé Inicial

Para começar, é interessante mencionar de onde eu consegui meus recursos.

Os belos ícones 2D são do Pierre Borodin lá no Dribbble
As fontes usadas foram a Oil Can, Source Sans Pro e Mission Script
Os ícones de mídia social são da Metrize Icons

Agora, como discutimos no tutorial anterior, você precisará iniciar o documento HTML do seu e-mail com a doctype XHTML:

<!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>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

Com isso no ponto, podemos começar a construir o resto da nossa estrutura.

Criando o Corpo e a Tabela Principal

Primeiro, adicionaremos a estrutura básica do nosso e-mail, começando pela tag <body>. Atribuiremos o valor zero (0) para as margens e espaçamentos internos (padding), para evitar qualquer espaço inesperado.

Também adicionaremos uma tabela de largura 100%. Ela se comportará como a verdadeira tag body do nosso e-mail, porque a estilização dela (tag body) não é totalmente suportada. Se você quiser adicionar alguma cor de fundo ao "corpo" do seu e-mail, você terá de aplicar a essa tabela.

Configure os atributos cellpadding e cellspacing para zero, de modo que, mais uma vez, não obtenha qualquer espaço inesperado.

Nota: Manteremos o atributo border="1" em todas as nossas tabelas, assim, poderemos ver o esqueleto do nosso layout enquanto o construímos. Nós removeremos esse atributo, logo ao final, usando os comandos Pesquisar & Substituir.

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Olá!
   </td>
  </tr>
 </table>
</body>

Se um atributo ou elemento existir no HTML, use-o ao invés da propriedade CSS

Agora, posicione e centralize uma tabela de 600px de largura dentro da tabela envoltória. 600px é a largura máxima segura para que seus e-mails possam ser visualizados corretamente, na maioria dos clientes de e-mail web e desktop, e na maioria das resoluções.

Configure essa largura usando HTML ao invés do CSS, usando o atributo width. A regra de ouro no desenvolvimento de e-mails em HTML é: Se um atributo ou elemento existir no HTML, use-o ao invés da propriedade CSS.

Nós substituiremos nossa saudação ‘Olá!’ por essa tabela:

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   Olá!
  </td>
 </tr>
</table>

Também adicionamos uma propriedade de estilo em linha, que configura a propriedade border-collapse para collapse. Se não fizermos isso, as novas versões do Outlook adicionarão um pequeno espaço entre nossa tabela e nossa borda.

Criando a Estrutura e o Cabeçalho

Em nosso design, podemos ver que o e-mail é dividio em três seções lógicas, assim, criaremos uma linha para cada uma delas.

Dupliquemos a linha solitária que já criamos, para que tenhamos um total de três linhas. Alterei o texto dentro delas para facilitar a identificação de cada uma.

1	<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
2	<tr>
3	<td>
4	Linha 1
5	</td>
6	</tr>
7	<tr>
8	<td>
9	Linha 2
10	</td>
11	</tr>
12	<tr>
13	<td>
14	Linha 3
15	</td>
16	</tr>
17	</table>

Agora, coloriremos cada uma, igual ao design. Como bgcolor é um atributo HTML válido, nós o usuaremos para configurar a cor de fundo ao invés de fazê-lo através do CSS. Sempre lembre de usar todos os seis caracteres da representação hexadecimal, uma vez que o atalho dos três caracteres nem sempre funcionará.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9">
   Linha 1
  </td>
 </tr>
 <tr>
  <td bgcolor="#ffffff">
   Linha 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#ee4c50">
   Linha 3
  </td>
 </tr>
</table>

Certo, agora, focaremos na Linha 1. Ajustaremos o espaçamento interno para, então, adicionar nossa imagem.

Usando Espaçamento Interno

Quando usarmos espaçamento interno em e-mails, sempre devemos especificar cada um dos valores (top, right, bottom e left), caso contrário, poderemos acabar com problemas inesperados (ex: padding: 10px 10px 8px 5px;), mas, se ainda estiver tendo problemas, talvez queira escrever a forma completa (padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;).

Se estiver com problemas piores que não foram resolvidos da forma anterior (por exemplo, sua plataforma de envio remove seu CSS), simplesmente, não o use. Prefira usar células vazias para criar espaço. Não há necessidade de se usar GIFs espaçadores, apenas tenha certeza de adicionar style="line-height: 0; font-size: 0;" à célula, insira um   dentro dela e especifique as altura e largura. Eis um exemplo:

1	<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>

Também perceba que é seguro usar espaçamento interno em tags td , mas não em divs ou ps. Eles se comportam de forma bem imprevisíveis.

Assim, adicionaremos um pouco de CSS em linha para gerar espaçamento interno na célula. Depois, adicionaremos nossa imagem, configuraremos o texto alternativo e colocaremos o atributo style="display:block;", que é uma forma comum de resolver o problema de espaços abaixo de imagens, que alguns clientes de e-mails adicionam. Centralizaremos nossa imagem adicionando align="center" à nossa tag td. Também adicionaremos um atributo alt, que é muito importante, uma vez que, na maioria das vezes, as imagens em nossos e-mails não serão carregadas automaticamente.

Nota: Se o conteúdo do seu cabeçalho for, realmente, importante para sua mensagem, não use um cabeçalho feito totalmente com imagem. Lembre-se, imagens são bloqueadas por padrão pela maioria dos clientes de e-mails, assim, se há algum aspecto do seu conteúdo que seja crucial, nunca o inclua em uma imagem. Nesse exemplo, porém, o meu cabeçalho é bem supérfluo.

1	<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
2	<img src="images/h1.gif" alt="Criando Mágica de E-mail" width="300" height="230" style="display: block;" />
3	</td>

Criando a Área do Conteúdo

Primeiramente, adicionaremos espaçamento interno na célula central para que a tabela interna tenha algum espaço ao redor, como em nosso design.

Agora, adicionaremos uma tabela com três linhas para nosso conteúdo principal - um para a chamada principal, uma para o texto introdutório e uma para a linha com duas colunas. Configuraremos essa tabela com largura igual a 100% ao invés de usar um valor fixo em pixels, uma vez que isso nos ajudará mais à frente, quando tivermos de tornar nosso e-mail em responsivo. Se você sempre configurar as larguras em pixels, você terá inúmeros valores que terá de sobrescrever nas media queries. Se suas tabelas internas usam percentuais, então, quando ajustar a largura do elemento pai, tudo irá ajustar automaticamente.

1	<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
2	<table border="1" cellpadding="0" cellspacing="0" width="100%">
3	<tr>
4	<td>
5	Linha 1
6	</td>
7	</tr>
8	<tr>
9	<td>
10	Linha 2
11	</td>
12	</tr>
13	<tr>
14	<td>
15	Linha 3
16	</td>
17	</tr>
18	</table>
19	</td>

Agora, adicionaremos nosso conteúdo e também adicionaremos o espaçamento interno para a célula central.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Lorem ipsum dolor sit amet!
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 30px 0;">
   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>
   Linha 3
  </td>
 </tr>
</table>

Adicionaremos, agora, nossas duas colunas de conteúdo em nossa Linha 3. Já que queremos uma "margem" entre essas duas células, porém, margin não é suportado, criaremos uma tabela com três colunas, deixando a célula central em branco entre as outras duas colunas.

Embora eu seja adepto dos percentuais, quando temos conteúdo com um tamanho específico, pode ser bem complicado converter esse valor para percentual (nesse caso, as colunas teria 48.1% de largura, o que seria bem confuso). Por isso, e já que nossas duas imagens tem 260px de largura, com uma célula de 20px de largura no meio (Esses valores totalizarão 540px, que são os 600px de largura de nossa tabela, menos os 30px de espaçamento interno de cada lado). Tenha certeza de configurar suas font-size e line-height e adicione um   na célula margem.

Também configuraremos o atributo valign para "top" para ambas as células, assim, elas alinharão verticalmente, mesmo que uma coluna tenha mais texto que a outra. O valor padrão do alinhamento vertical é "middle".

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   Coluna 1
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   Coluna 2
  </td>
 </tr>
</table>

Adicionemos, agora, nossas imagens e conteúdo nas colunas. Como precisamos de muitas linhas, vamos inserir mais outra tabela porque não podemos usar os atributos colspan ou rowspan. Também adicionaremos um pouco de espaçamento interno entre a imagem e o texto em cada coluna.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      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>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      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>
</table>

Nós configuramos a largura das imagens, usando HTML, como sendo 100% da largura da coluna. Isso serve para quando formos ajustar a parte responsiva do e-mail, onde só precisaremos alterar a largura do elemento pai. Teremos de sobrescrever a altura em pixels, porque usar style="height: auto"não funcionará em todos os clientes (leia-se, Outlook). Então, configuraremos em pixels mesmo. Isso significa que teremos de usar a propriedade height: auto!important nas imagens que usarmos nas media queries, para sobrescrever o valor em pixels. Poderíamos fazer isso com uma única classe, mas como não podemos usar, teremos de fazer assim. Quanto menos coisas tivermos de sobrescrever, melhor.

O Rodapé

Agora, adicionaremos o espaçamento interno ao nosso rodapé.

1	<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
2	Linha 3
3	</td>

Dentro dessa célula, colocaremos mais outra tabela para obtermos nossas duas colunas.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Coluna 1
  </td>
  <td>
   Coluna 2
  </td>
 </tr>
</table>

Criaremos mais outra tabela para nossos ícones de redes sociais. Configuraremos a célula pai para align="right". Tenha certeza de configurar border="0" nos links dessas imagens (para evitar a borda azul de âncoras) e não esqueça de aplicar o display:block.

<td align="right">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
   <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
  </tr>
 </table>
</td>

Colocaremos o texto e adicionaremos a largura às nossas células, só para garantir, mesmo que haja bastante espaçamento entre elas. Configuraremos essa célula com 75% de largura e a outra com 25%.

1	<td width="75%">
2	® Alguém, Algum lugar 2014<br/>
3	Remova sua inscrição dessa e-mail marketing, instantaneamente
4	</td>

E é isso! Nosso layout está completo.

Validação

Rodemos nosso código contra o W3C Validator para ter certeza que nada esteja mal ou quebrado. Se você seguiu, exatamente, esse tutorial, dirá que passou!

Depois, rodaremos um teste contra o Litmus para ter certeza que a estrutura do nosso e-mail está funcionando bem. Eis um sumário do meu teste:

Estilizando Nosso Texto

Nossa primeira linha é o cabeçalho. Usaremos a tag <b> para criar um texto em negrito porque, como já sabemos, se existe algum HTML que o fala, é preferível ao CSS.

1	<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
2	<b>Lorem ipsum dolor sit amet!</b>
3	</td>

Também colocaremos esse estilo em linha em todas as outras células de texto:

1	style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

Após isso, precisaremos estilizar o texto rodapé, e diminuiremos a âncora de cancelamento de inscrição do e-mail marketing. Estilizaremos essa âncora usando tanto CSS quanto a tag <font> do HTML. Essa duplicidade é a melhor maneira de farantir que suas âncoras nunca apareçam no azul padrão.

<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
 &reg; Alguém, algum lugar 2013<br/>
 <a href="#" style="color: #ffffff;"><font color="#ffffff">
 Remova sua inscrição</font></a> dessa e-mail marketing, instantaneamente
</td>

E acabamos! Tudo está pronto, de verdade! É hora de desabilitar as bordas e ver como ficou lindo. Use o Pesquisar e Substituir para alterar o border="1" por border="0".

Nesse momento, está aparecendo um pequeno espaço em branco, então, vejamos nossa primeira tabela de 600px e adicionemos:

1	style="border: 1px solid #cccccc;"

Agora, ela não parece que está mais flutuando. Como toque final, adicionarei espaçamento interno de 30px na parte inferior da primeira célula, para evitar que nosso e-mail para, subtamente, no rodapé de alguns clientes de e-mail (como o Apple Mail), e adicionarei outros 10px no topo, de forma que nosso cabeçalho possa "respirar" um pouco.

1	<td style="padding: 20px 0 30px 0;">

Pronto! Não temos mais o que fazer!

email-build-litmus-finished — Veja on-line

That's a Wrap!

Before we call it a day, if you have used any comments, get rid of them. Some email clients can choke on comments so it’s wisest not to have any unnecessary code anywhere in your files.

Now is a good time to do a final test, and then, your HTML email is ready to send!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!