Email Marketing HTML: guia do Mailee para criação de templates

  • Facebook
  • Twitter
  • LinkedIn
  • Email
  • RSS
  • Google Plus

Uma boa campanha de email passa, definitivamente, por um bom HTML, bem produzido e sem falhas. Com cada vez mais clientes de email, webmail e aplicativos de email, parece complicado saber por onde começar a criar templates em HTML. Além disso, você provavelmente já deve ter escutado que “HTML para emails é diferente” e “é difícil”.

Não necessariamente. Para iniciantes em email marketing, e pessoas sem contato com a linguagem HTML, o começo pode parecer complicado. Da mesma forma, webdesigners, e quem já está acostumado a criar códigos para páginas web ,também podem levar um susto, pois as técnicas para email marketing HTML são um pouco diferentes e nem tudo que funciona em sites vai funcionar nas caixas de entrada.

A ideia desse guia é facilitar a vida de quem está criando seu primeiro template de email. Mesmo que você não entenda nada de HTML, esperamos que no final você consiga compreender melhor. Você também pode baixar um template gratuito aqui e usar na sua conta do Mailee. O que vamos tratar:

  1. Noções Básicas de HTML para e-mails
  2. Tabelas
  3. Estilos
  4. Conteúdos
  5. Montando uma newsletter básica
  6. Incluindo HTML em uma mensagem no Mailee
  7. Criando um Email no Photoshop

Começando pelo básico

A primeira coisa a lembrar é: HTML de emails é diferente de HTML de sites.

Isso significa que o que funciona em sites não necessariamente funcionará em email marketing, principalmente divs, sections, e folhas de estilo CSS externas, entre outras. Por isso, o HTML de emails ganha uma fama de ser meio antiquado, o que não é necessariamente verdade.

A criação de email marketing muitas vezes é considerada complexa por ser um tipo específico, diferente de construção de HTML. A principal questão que a diferencia de HTML para sites é a forma de renderização: páginas da web sempre são renderizadas nos navegadores, enquanto o email será renderizado de acordo com o cliente de email – e cada um tem as suas regras.

Para acertar no email, o ideal é simplificar. Ao invés de estruturas mais complexas, o ideal é usar tabelas inseridas dentro de tabelas e estilos em linha.

Um template em HTML é dividido em basicamente duas partes:

Email Marketing HTML

<head>

Onde são incluídas as informações que farão parte de todo o documento, como a informação do encoding e alguma informação de estilo.

<body>

É o corpo da newsletter, onde estará todo o conteúdo do seu email. Conteúdo fora das tags body não é exibido.

DICA: Você não precisa escrever o head a cada template novo, copie e cole o mesmo. Pode utilizar esse:

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
    • O encoding em UTF-8 vai garantir que sua mensagem consiga ser lida corretamente em diversos clientes de email. Também vai garantir que o upload no Mailee seja feito sem problemas. Veja aqui como salvar seu arquivo na codificação UTF-8.
  • O Doctype é uma linha de código que “informa” quais tipos de tags de HTML o documento tem e que tipo de regras esperar.

Tabelas

Como falamos antes, a estrutura de um email é formada por tabelas, que serão o esqueleto da sua mensagem e darão forma a ela. Basicamente você usará três elementos:

<table>

A estrutura total que formará o seu template.

<tr>

As linhas da tabela (veja abaixo, uma cinza e uma branca).

<td>

Células da tabela, onde é possível incluir o conteúdo do seu email.

Email HTML exemplo Tabelas

Com a tag HEAD da mensagem e o BODY construído em tabelas, você pode começar a criar um esqueleto da sua mensagem.

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table>
<tr>
<td>
Conteúdo da mensagem.
</td>
</tr>
</table>
</body>
</html>

Se você tentar enviar esta estrutura, verá algo como:

Exemplo HTML

Para começar a dar forma para o seu email, será preciso incluir algumas informações, como estilos e medidas às suas tabelas.

Estilos

Como falamos anteriormente, os estilos em email marketing são incluídos em linha. Isso significa que, ao invés de incluir os estilos em CSS na tag head,você deve incluir um atributo em cada elemento.

Por exemplo, digamos que você queira que a sua tabela tenha uma cor de fundo, ao invés de usar:

table {
    background-color: #f0f0f0;
}

Usará

<table style="background-color: #f0f0f0">

Dica: Ao criar tabelas, é recomendado deixar os valores de cellpaddding e cellspacing como 0 para evitar espaços indesejados no seu email. Também é considerada uma boa prática delimitar a largura das tabelas, para que seu email seja visto corretamente em todos os clientes de email.

<table bgcolor="#f0f0f0" width="600px" cellpadding="0" cellspacing="0" border="0">

Depois de criar e incluir os atributos no seu código, você pode passar ao conteúdo que estará na sua mensagem.

Conteúdo

O conteúdo de uma mensagem de e-mail é a parte mais importante: é através de textos, links e imagens que será possível engajar os contatos e convencê-los a clicar, ler ou comprar o produto ou serviço que você está oferecendo. As unidades básicas de conteúdo de um email são:

  • Texto
  • Links
  • Imagens

Sabendo incluir esses três tipos de conteúdo no seu HTML, você terá praticamente tudo o que precisa para a criação de um email marketing.

Texto

Você pode incluir texto diretamente nas células da sua tabela:

<td>
Este é o texto do meu email.
</td>

Você pode mudar a cor, o tipo da fonte através de estilo em linha:

<td style="font-family:arial; font-size:12px; color:#4d4d4d; padding:15px">
Este é o texto do meu email, agora com estilo. 
</td>

Outra opção é utilizar tags para parágrafos e para headings. Há quem defenda, porém, é melhor incluir o texto direto na tag, pois alguns clientes de email podem não renderizar corretamente estas estruturas.

<p>Parágrafo</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Headings

Links

Dentro de textos, você poderá incluir links para o seu site, para redes sociais. A estrutura básica de um link para o seu site é a seguinte:

<a href="http://mailee.me">Mailee.me</a>

Imagens

Imagens são essenciais para emails. Seja no destaque de um produto ou na criação da identidade visual da sua marca no email, são muito importantes. Quer incluir uma imagem dentro do seu template? Coloque-a dentro de uma estrutura como esta:

<td>
<img src="imagem.jpg" alt="Esta é uma imagem">
</td>

Se você criar um template para fazer upload no Mailee, use um caminho como este e envie a imagem junto no arquivo .zip. Caso esteja usando o editor manual de HTML, inclua um link para a sua imagem:

<td>
<img src="http://help.mailee.me/images/templates/subject_info_contact.png" alt="Esta é uma imagem">
</td>

Para determinar o tamanho exato da imagem dentro do seu email, você pode incluir os atributos de height (altura) e width (largura), desta forma:

<td>
<img src="imagem.jpg" width="600px" height="400px" alt="Esta é uma imagem">
</td>

Quer incluir um link nessa imagem, para enviar os recipientes para o seu site ao clicarem? É simples:

<a href="http://seusite.com.br"><img src="imagem.jpg" alt="Descrição da imagem"></a>

Montando uma newsletter básica

Geralmente, newsletters seguem um padrão básico de várias chamadas com links para notícias e um header identificando a empresa que está enviando. Usando os passos deste guia, vamos montar o código de uma newsletter básica.

Depois de fazer a parte de HEAD a sua mensagem, comece a fazer o BODY criando uma tabela com 600 pixels para ser o “wrapper” e manter todo o conteúdo.

<body>
<table cellspacing="0" cellpadding="0" width="600" align="center">
...conteúdo da mensagem...
</table>

Crie uma tabela logo abaixo da tabela, uma linha e uma célula e coloque uma imagem que vai ser o seu header.

<table cellspacing="0" cellpadding="0" bgcolor="#f0f0f0" width="600">
<tr>
<td>
<img src="newsletter.png" alt="Newsletter" width="600" height="200">
</td>
</tr>

newsletter

Depois, crie uma nova linha e uma célula para o título da sua notícia e uma nova linha e célula para o conteúdo.

...
<tr>
<td align="center" style="font-family: arial; font-size: 42px; color:#4d4d4d; padding-top:10px">
    Título
    	</td>
   </tr>
<tr>
<td style="font-family: arial; font-size: 14px; color:#4d4d4d; padding:10px">
    		These are the voyages of the Starship Enterprise. Its continuing mission, to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before. We need to neutralize the homing signal. Each unit has total environmental control, gravity, temperature, atmosphere, light, in a protective field. Sensors show energy readings in your area. We had a forced chamber explosion in the resonator coil. Field strength has increased by 3,000 percent.
    	</td>
<tr>
<td style="font-family: arial; font-size: 14px; color:#4d4d4d; padding:10px">
            Para saber mais sobre essa notícia,<a href="http://blog.mailee.me">clique aqui</a>.
        	</td>
        </tr>
</table>

O atributo padding utilizado aqui é relativo ao quanto você quer dar de margem interna para o conteúdo. Se deixar o padding como 0 o seu texto será grudado na borda da célula.

newsletter01

Crie uma nova tabela, e crie duas células com largura de 280 pixels e padding de 10 pixels. Dentro de cada célula, colocaremos imagens com links.

...
</table>
<table width="600" cellspacing="0" cellpadding="0" bgcolor="#f0f0f0">
<tr>
<td width="280" style="font-family: arial; font-size: 14px; color:#4d4d4d; padding:10px">
          <a href="http://blog.mailee.me"><img src="Untitled design (8).png" width="260" height="260"></a>
       </td>
<td width="280" style="font-family: arial; font-size: 14px; color:#4d4d4d; padding:10px">
             <a href="http://blog.mailee.me"><img src="Untitled design (8).png" width="260" height="260"></a>
        </td>
</tr>
</table>

newsletter02

Caso queira, você repetir o bloco anterior, para ter mais uma notícia. Ou, se preferir um “footer”, uma parte de encerramento para a sua newsletter com informações da sua empresa e um link de descadastro.

<table cellspacing="0" cellpadding="0" bgcolor="#4d4d4d" width="600"> 
<tr>
<td align="center" style="font-family: arial; font-size: 12px; color:#f0f0f0; padding:20px">
            
Nome da sua empresa
Telefone
Caso não queira mais receber essas mensagens, clique <a href="#" class="unsubscribe">aqui</a>
          </td>
</tr>
    </table>

Não esqueça de fechar as tags BODY e HTML.

Para acessar esse email HTML, na versão editável, para ser usado como template no Mailee, clique aqui.

Incluindo HTML no Mailee

Você sabia que pode criar o código HTML do seu e-mail diretamente no Mailee? Isso é possível através do modo de inserção manual de conteúdo. Para começar, você deve criar uma campanha:

Campanha Mailee Criar

Ao editar os campos da criação de campanhas, escolha, em Conteúdo, a opção Inserir Conteúdo Manualmente (Editor de HTML) e crie a Campanha:

Mailee Campanha Conteúdo manual

No editor, selecione a opção Código Fonte. Lá você pode escrever diretamente o HTML ou colar um código pronto.

Mailee Campanha Código Fonte

Criando email marketing no Photoshop

Uma dúvida muito comum que ouvimos por aqui é como criar email marketing no Photoshop. Muitos designers optam por criar suas peças de email marketing no Photoshop e depois encontram dúvidas em como transformar os arquivos PSD em HTML. Para quem não tem muita experiência com HTML, mas já está mais próximo do Photoshop, é uma boa forma de começar a criar email marketing.

Digamos que você comece com um arquivo .PSD como este, que baixamos desta coleção de templates do WD Explorer.

Email marketing no Photoshop - PSD

1. Abra o Arquivo no Photoshop e escolha a ferramenta de Fatia:

Ferramenta Fatia - Email Marketing no Photoshop

2. Faça fatias de todos os elementos do seu email. Essa é a parte principal, então siga alguns cuidados:

  • Tente organizar as farias do seu email marketing na horizontal, como se estivesse criando uma tabela cujas células estão alinhadas na horizontal;
  • Faça uma fatia para cada elemento do seu email, o logo é uma fatia, um texto de chamada é outra, e assim por diante;
  • Fatie todo o email, não deixe pedaços (ainda que em branco) sozinhos; faça fatias para estes pedaços também;
  • Tente fazer fatias que contenham uma cor de fundo: se você tem uma área no seu template com a cor azul e uma cor vermelha, faça uma fatia para cada uma, desta forma no próximo passo você pode incluir as cores de background em HTML;

No final do processo, seu .PSD deve ficar assim:

Como fazer Email Marketing no Photoshop - Fatiando Email

3. Vá em todas as fatias e, clicando com o botão direito selecione a opção Opções da Fatia. Você deverá fazer essa operação em todas as fatias:

  • Nas fatias que contenham imagens, você deve marcar a opção Tipo de Fatia – Imagem. Você também pode incluir links para essa imagem nesta etapa (no caso de imagens de produtos que você quer que sejam direcionadas para o seu site);
  • Nas fatias que não contenham imagens, que têm apenas uma cor de fundo, marque a opção Tipo de Fatia – Sem Imagem e selecione a cor de fundo na própria imagem. Dessa forma, esta fatia será considerada uma tabela  e não uma imagem, o que ajuda a diminuir o tamanho do email.
Como fazer Email Marketing no Photoshop - Opções de Fatia.PNG

4.  Acesse a opção Exportar > Salvar para a Web, e, em Formato > HTML e Imagens e em Fatias > Todas as Fatias:

  • Facebook
  • Twitter
  • LinkedIn
  • Email
  • RSS
  • Google Plus