Mailee.me Help

Antes de começar

Assim como o artigo de como criar o seu template! aqui também se assume que você possui conhecimento básico de HTML e CSS. Para saber mais sobre HTML e CSS acesse os links indicados no final desse artigo. Para realizar o upload do seu template, clique aqui!.

1 HTML para Web VS HTML para Email Marketing

Todos clientes de email possuem sistemas de renderização diferentes entre si e nenhum é como o seu navegador. Por isso vamos ver as grandes diferenças entre codificar para websites e templates de email.

1.1 Usando tabelas

Sim, o HTML de email marketing usa tabelas. O layout por CSS simplismente não irá funcionar, por isso, vamos deixar os <div>…</div> para outras funções que não a de layout.

Exemplo de tabela com uma coluna para começo de estrutura:


  <table width="100%" frame="void" cellspacing="0" cellpadding="0" border="0" 
  style="margin:0; padding:0; border:0 none; border-spacing:0px 0px; border- collapse:collapse;">
    <tbody style="margin:0; padding:0; border:0;">
      <tr>
        <td valign="top" align="left" style="margin:0; padding:0; border:0 none;">
        </td> 
      </tr>
    </tbody> 
  </table>

Você pode criar templates através do Mailee.me usando nossos modelos gratuitos. Aproveite o nosso criador editor HTML para alterar os templates da maneira que quiser.

1.2 Estilo em linha (CSS declarations in line)

Os clientes de email não permitem que o código html acesse arquivos externos por motivos de segurança. Por isso, CSS externos, arquivos de javascript, objetos como Flash e ActiveX serão ignorados e não serão exibidos.

A única maneira de usar objetos externos é configurar links dinâmicos para visualização da mensagem no navegador. O que não é recomendado, uma vez que isto irá forçar o usuário para longe do ambiente de email.

Mantendo o Design do template
Para manter o design do seu template de email, você deve manter todos estilos em linha. Ou seja, não declarados no <head>…</head> ou em arquivo externo.

Por isso, evite códigos css como.


  p{ 
    line-height: 1.5em;
    color:black;
    margin: 2px 2px 2px 2px;
  }

  <style type="text/css">...</style> 
  <link rel="stylesheet" src="style.css".../>

E utilize códigos com estilos in line.


  <p style="line-height:1.5em;margin:2px 2px 2px 2px;">Seu texto</p>
  
  <p> 
    <span style="color:red">I'm red</span>
    <span style="font-weight:bold">I'm bold</span>
    <span style="font-size:14px">I've a 14px font-size</span>
  </p>

1.3 Mantendo a apresentação das imagens no fundo

Live/Hotmail, Gmail e Outlook 2007 não apresentam imagens de fundo. A não ser que você utilize a imagem de fundo como fundo das tabelas.

Exemplo de imagem de fundo da tabela


  <table cellspacing="0" border="0" cellpadding="0">
    <tr>
      <td background="http://...background.gif" background-color:="#FFFFFF">
      </td>
    </tr>
  </table>
  
  # Ou diretamente no corpo da tabela 
  
  <table background="http://...background.gif" background-color:="#FFFFFF">
  </table>

Como os métodos atuais de animação não são aceitos pela maioria dos clientes de email, use .gif animados como imagem de fundo sempre que precisar deste recurso.

1.4 Peculiaridades na renderização do Live/Hotmail, Gmail e Yahoo.

O Hotmail pode apresentar dificuldades na largura da mensagem e o Yahoo! com cores dos links. Para corrigir use o seguinte código no topo do email:


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Título do template</title>
      <style type="text/css">
        .yshortcuts { color:#00AAFF; }
        .yshortcuts a span { color:#00AAFF; }
        .ReadMsgBody { width:100%; }
        .ExternalClass { width:100%; }
      </style>
</head>

O Gmail possuí uma dificuldade com imagens, criando uma linha branca entre imagens que dependendo do contraste com a cor de fundo podem arruinar o design.

Imagem com quebra

Para corrigir, use o código style:“display: block;”.


 <img src="http://www.mailee.me...header.png"
 style="display: block;">

2 Design

2.1 Assunto

Email marketing é marketing direto, ou seja, não invasivo e personalizado. Para que os seus contatos vejam suas notícias, eles primeiro tem que optar por receber o seu email. No final, com sua mensagem na caixa de entrada, é necessário que eles também optem por abrir a sua mensagem.
O que pode influenciar e bastante a abertura da sua mensagem é deixar bem claro quem é o remetente e qual é o assunto da mensagem.

Observe uma típica caixa de emails:

Caixa de entrada

Remetente Seja claro e mostre quem você é, de maneira bem objetiva. Se você se apresentar com seu nome pessoal, não esqueça de adicionar ao assunto quem você está representando.

Assunto Defina sobre o que está você está falando, adeque seu assunto ao segmento que está querendo atingir.

EVITE

Frases como: “clique aqui”, “Sigilo Absoluto”, “Dúvidas Conjugais”, “Grampo?”, “Tenha seu site na Internet”, “Ganhe dinheiro enviando emails”, “Trabalhe em casa”."

Exclamações em excesso!!!!!!!!!!!!!!!!!!!!!!!!!!!!

2.2 Mensagens com apenas uma imagem

Todos os grandes clientes de email possuem algum tipo de proteção contra mensagens que contenham apenas imagens. E se a sua mensagem chegar até a caixa de entrada, seu email pode ser confundida com uma mensagem vazia.

Veja um exemplo:

Mensagem com apenas uma imagem

Para que a sua mensagem seja reconhecida rapidamente, sempre preencha o texto alternativo da imagem, para que ele seja visualizado quando a imagem não é exibida.

Veja o exemplo com os alternativos a imagem configurado e texto puro:

Mensagem com texto alternativo as imagens

Use links dinâmicos como o de visualização na WEB! no topo das mensagens para que o receptor possa ver sua mensagem inteiramente renderizada no navegador, já que a mensagem pode ser alterada dependendo do cliente de email.

3 Boas práticas

Tipos de arquivos de imagens
GIF Para textos personalizados, logos, transparencias.

JPG Para imagens em tom contínuo (fotos, gráficos com gradientes).

PNG Evitar o uso do formato PNG.

Links

Não há suporte aos pseudo-seletores como :hover, :active e :visited Utilize sempre que possível o texto azul e sublinhado.


<a href="http://www.google.com" style="color:blue; text-decoration:underline;">www.google.com</a>

O que irá gerar:

www.google.com

Melhorando a visibilidade dos campos editáveis

Para apresentar os campos editáveis durante a edição no Mailee.me coloque o seguinte código no <head> de seu HTML:


  <style type='text/css'>
    .edit { outline: 1px dotted #7711EE; }
  </style>

Após realizar o upload do seu template, utilize a ferramenta de validação da W3C através da interface do Maiee.me

4 Guia de referência

Para saber mais sobre HTML e CSS, acesse os links abaixo:

HTML na w3 Schools – Guia de referência com tutorial e documentação para HTML (em inglês)
CSS na w3 Schools – Guia de referência com tutorial e documentação para CSS (em inglês)
HTML – Wikipedia [en] – Informações sobre HTML (em inglês)
HTML – Wikipedia [pt-Br] – Informações sobre HTML (em português)
Artigo na Wikipedia sobre CSS – Informações sobre CSS (em inglês)
Artigo na Wikipedia sobre CSS – Informações sobre CSS (em português)

Boas práticas na criação de templates de email em HTML

Capítulos