Como fazer Email Marketing em tabelas nos padrões dos webmails?

Esta postagem foi dica do Donald Silveira através do FormSpring.

Como poucos designers sabem, criar um template para e-mail é muito diferente de como criar um template para websites nos padrões de hoje, no caso, tableless (sem tabelas).

Com o tempo os navegadores evoluíram e o desenvolvimento de sites também evoluiu, mas os clientes de e-mail nem tanto. Claro que temos as exceções, como, Thunderbird que dá suporte a diversas propriedades CSS que ajudam a deixar seu template mais bonito e o deixa com mais usabilidade, mas como disse exceções. E nesse caso, ninguém vai trabalhar para exceções, certo?

Bom, vamos ao que interessa. Vamos criar um template onde apareça igual nos webmails mais utilizados atualmente no Brasil (Gmail, Hotmail, Yahoo! Mail, UOL Mail e Terra Mail).

Abaixo é como nosso template irá ficar:

Como fazer Email Marketing em tabelas

Template HTML

Abaixo eu vou colocar o código fonte do template e comentar cada parte do que fiz e porque, ok?

Uma dica: Para se criar um template, você precisa ter a imagem dele, nem que seja em sua mente. Você tem que saber como ele ficará no final, pois assim fica mais fácil de criá-lo.

Importante: A maioria dos clientes de e-mail e webmails não suportam CSS incorporado e externo, CSS só se for inline. Entendido? (no final da postagem eu explico o que é e a diferença de inline, incorporado e externo).

<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#EEEEEE" align="center">
	<tr>
		<td>
			<table cellpadding="0" cellspacing="0" border="0" width="700px" align="center" style="width:700px;font-family: Verdana; font-size: 12px;line-height:160%">
				<tr>
					<td style="padding: 15px 0" colspan="2">
						<a href="#" style="color:#333;text-decoration:none;text-shadow: 0 1px 0 #FFFFFF;"><b>Encaminhe para um amigo</b></a>
					</td>
					<td style="padding: 15px 0; color: #FFFFFF" align="right" colspan="3">
						<a href="#"><img src="https://www.mpost.com.br/templates/2011Abril/pascoa_twitter.png" title="Seguir no Twitter" /></a>
						<a href="#"><img src="https://www.mpost.com.br/templates/2011Abril/pascoa_facebook.png" title="Seguir no Facebook" /></a>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<img src="https://www.mpost.com.br/templates/2011Abril/pascoa_choco_top.jpg" style="display:block" />
					</td>
				</tr>
				<tr>
					<td bgcolor="#2B2922" style="padding: 15px; color: #FFFFFF" colspan="5">
						<h2>Título h2</h2>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</td>
				</tr>
				<tr>
					<td height="10px" colspan="5"></td>
				</tr>
				<tr>
					<td bgcolor="#A32500" width="5px" style="5px"></td>
					<td bgcolor="#EFE4BD" style="padding: 15px; color: #333333">
						<h3>Título h3</h3>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</td>
					<td bgcolor="#EEEEEE" width="10px" style="width:10px"></td>
					<td bgcolor="#EFE4BD" style="padding: 15px; color: #333333">
						<h3>Título h3</h3>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</td>
					<td bgcolor="#A32500" width="5px" style="5px"></td>
				</tr>
				<tr>
					<td height="10px" colspan="5"></td>
				</tr>
				<tr>
					<td rowspan= bgcolor="#A32500" style="padding: 15px; color: #FFFFFF" colspan="5">
						<img src="https://www.mpost.com.br/templates/2011Abril/pascoa_choco_1.jpg" align="left" style="border:2px #BAB293 solid;margin:5px" border="2px" />
						<h3>Título h3</h3>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Na linha 01, iniciamos nossa tabela principal. É dentro dela que ficará nossa mensagem. Como se fosse a tag body do HTML. Esta tabela tem 100% de largura e só usamos ela porque temos uma cor de fundo.
Os outros códigos não vou explanar, pois acredito que já deva saber, pois é o básico de HTML, ok?

Na linha 04 iniciamos outra tabela. Ela será a estrutura de nosso template.

Nesta tabela, usando CSS inline, defino o tipo de fonte, tamanho e o espaçamento entre as linhas padrão em: style=”font-family: Verdana; font-size: 12px; line-height:160%”

Na linha 06 eu coloquei um colspan=”2″, que serve para mesclar colunas, ou seja, estou mesclando duas colunas em uma nesse caso. Igual mesclar células do Excel.

Na linha 06 tem um link “Encaminhar para um amigo”. Neste link eu coloquei um efeito, tipo sombra branca, usando o atributo “text-shadow: 0 1px 0 #FFFFFF”. Isso não funciona no Hotmail, mas é apenas um efeito e se não funcionar, não mudará a estrutura da mensagem.

Ficará assim:
Encaminhe para um amigo

Na linha 09 temos outra coluna mesclada (colspan=”3″). Mais abaixo saberá por que estou mesclando as colunas.

Nesta coluna temos os botões de redes sociais (linha 10 e 11). São somente imagens com links, ok?

Redes sociais

Da linha 14 até a 18 corresponde a uma linha da tabela e nela está nosso banner. Como em uma parte de nosso template tem 5 colunas no total, mesclamos a coluna onde está o banner com um ‘colspan=”5″‘.

Banner principal

Da linha 19 até a linha 24 temos nosso primeiro destaque, com o nome de Título 1. Nesta linha temos uma linha com uma coluna mesclada (colspan=”5″) de fundo cinza escuro, fonte branca e um padding (espaçamento interno) de 15px.

Primeiro destaque

Da linha 25 a 27 é definida uma linha para dar apenas um espaço entre uma linha e outra. Poderia ser feito usando uma borda com a mesma cor do fundo da peça, exemplo: “border-bottom: 10px #EEEEEE solid”, mas não funcionaria no Hotmail.

Linha de espaçamento

Da linha 28 até a 40 temos uma linha com cinco colunas. Nas linhas 29 e 39 (primeira e ultima colunas) são para dar o efeito da borda vermelha, o que poderia ter sido feito também com “border”, mas como disse acima, o Hotmail não interpreta corretamente.

Na linha 34 temos outra coluna (do meio) e está com a mesma cor de fundo da peça, pois serve para dar o efeito de espaço entre as outras duas colunas, que são os destaques de Título 2 e Título 3.

As colunas citadas acima são muito importantes para o designer deste template, pois sem elas as outras colunas ficariam coladas e até mesmo sem o efeito desejado, ok?

Destaques centrais

Da 41 a 43 temos novamente outra linha para dar o espaço, como, nas linhas 25 a 27.

Por fim, da linha 44 até a 50, temos nossa ultima linha da peça. Onde está a imagem e o texto chamado Título 4.

Na linha 46, onde definimos a imagem do destaque, temos uma peculiaridade que é a borda da imagem. Note que eu defini uma borda na imagem usando CSS ‘border:2px #BAB293 solid’ e novamente uma borda com ‘border=”2px”‘. Como o Hotmail não compreende a propriedade ‘border’ e a peça ficaria sem o efeito esperado. Nesse caso, mesmo definindo duas vezes a borda, não ficará no Hotmail, como em outros webmails, pois ficará com a borda branca, ok? Isso poderia ser resolvido com uma nova tabela com a borda na tabela e a imagem ficaria dentro desta tabela, mas isso se você quiser.

Também, na imagem, coloquei um ‘margin:5px’ e serve para dar um espaço entre a imagem e tudo que tiver ao redor dela, no caso, o texto. Ficaria estranho sem o mesmo pois o texto ficaria colado na imagem.

Ultimo destaque

Na linha 51 nós fechamos a tabela (tabela de estrutura) que iniciamos na linha 04.

Nas linhas seguintes (52, 53 e 54) nós fechamos a coluna, linha e tabela principal (abrimos esta tabela na linha 01).

Bom, o código é isso. Este é um template simples e descrevi apenas para que entendam como funciona o básico na criação de templates. Abaixo segue algumas explicações que prometi e outras para você aprender mais sobre HTML.

O que é CSS (inline, incorporado e externo)?

CSS inline: É o CSS definido na própria tag ou linha onde deseja aplicar o efeito.

Exemplo:

<p style="font-family:Arial">Meu parágrafo em Arial</p>

CSS incorporado: É o CSS que fica entre as tags e, que delimitam o cabeçalho do documento HTML.

Exemplo:

<style type="text/css">
p{
font-family:Arial;
}
</style>

CSS externo:É um outro arquivo com todas as definições CSS e ele é chamado (linkado) no documento HTML. Exemplo:

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />

Definições de propriedades e tags:

  • width = definir largura
  • height = definir altura
  • bgcolor = cor de fundo
  • align = alinhamento
  • style = define estilos inline
  • font-family ou face = define o tipo de fonte (Arial, Verdana, etc.)
  • font-size e size = define tamanho da fonte
  • color = define a cor do texto
  • line-height = espaço entre linhas
  • padding = espaçamento nas laterais para dentro da tag
  • margin = espaçamento nas laterais para fora da tag
  • text-decoration = define estilo do texto, como, sublinhado, tracejado, etc.
  • colspan = mesclar colunas
  • rowspan = mesclar linhas

Com essas propriedades e tags você conseguirá criar vários tipos de templates. Basta entender o funcionamento de cada uma.

Esta postagem ficou extensa, mesmo eu não tendo comentado sobre todas as tags disponíveis no template e espero que tenha ficado simples de entender.

Se você ficou com alguma dúvida, deixe seu comentário abaixo que eu responderei, tudo bem?

Esse e outros templates podem ser baixados de graça no site www.emailtemplates.com.br e se desejar templates mais atuais, acesse www.ademirdiniz.com.br/templates.

Donald, espero que tenha ficado claro e te ajude.

Abraços e até a próxima!

ATUALIZAÇÕES GRÁTIS

Faça como os 5655 leitores e receba as atualizações no seu e-mail.

Comentários

  1. Anderson diz

    Olá!

    Estava a procura de artigos com dicas para criação de emkts com os padrões adequados quando deparei com o artigo de vocês, muito bacana por sinal, porém, o que me deixa mais em dúvida ainda, é que em outros artigos que encontrei pela web se condena a utilização de algumas tags como por exemplo. Qual é o correto, por favor? Peguei alguns templates para estudo e me deparei com tags que nunca vi na vida, isto me deixou mais confuso ainda.
    Grato!

    Anderson

  2. Andre Luis da Silveira diz

    Ola Bom dia!!
    Eu estou criando template de e-mail, para a empresa que eu trabalho. Eu estou com um problema enorme. Eu estou utilizando apenas uma tabela. No inicio do email fica um espaço enorme, ficando a tabela bem em baixo. Como resolver esse pequeno problema? Teria uma boa dica??

    • diz

      Olá Andre, tudo bem?

      Não consigo te dizer o que deve fazer exatamente. Preciso ver seu template para saber o que está errado. De cara, aconselho olhar a altura da tabela. Veja se não definiu uma altura maior que a necessárias.

      Se não for isso e não conseguir, encaminhe para ademirdiniz@ademirdiniz.com.br que eu dou uma olhada.

      Abraço

  3. Bernardo diz

    Cara, muito obrigado.

    Entretanto, no Outlook 2007 ficou distorcido… O background continua acompanhando a extensão da janela, caso eu maximize (falo do seu html, copiei e colei para ver se funcionava).

    • diz

      Olá Bernardo.

      O background “cinza” deve realmente acompanhar a largura da tela. Está definida na primeira tabela que ela terá 100% de largura e por isso acompanhar o tamanho da tela.

      Eu acabei de atualizar o post e fiz uma atualização dele. Teste aí.

      Se desejar um template mais sofisticado, acesse a loja: http://www.ademirdiniz.com.br/templates e baixe um dos modelos gratuitos ou se preferir, temos modelos pagos também.

      Abraço

  4. André Buono diz

    Olá, estava lendo que algumas propriedades, como o line-height, não funcionam em qualquer servidor de e-mails, como, por exemplo, no Gmail.

    Como saber qual propriedade de CSS eu posso aplicar inline nas tabelas e que vá rodar normalmente nos principais servidores de e-mails?

    • diz

      Bom dia, André. Tudo bem?

      Realmente, nem todos os clientes de e-mail suportam a propriedade “line-height”. As empresas de e-mail marketing criam tabelas com essas propriedades, mas recentes não conheço nenhuma. Abaixo tem uma de 2011 e o site da Email Standards. Este tem mais informações sobre o que funciona ou não nos clientes de e-mail, mas o ideal é você testar. Inserir a propriedade e fazer envios e ver como se comportam.

      CSS support in email: http://www.campaignmonitor.com/css/
      Email Standards: http://www.email-standards.org/

      Abraço e ótimo dia

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>