Guia de Boas Prticas para Elaborao de Peas para Email Marketing

Dicas de Design

Dicas de Design

Email Marketing no uma pgina HTML! KISS Keep It Short and Simple!

CSS no Email Marketing Evitar.

Utilizar uma verso do email em texto tambm.

Dicas de Design
Fixar a largura da pea entre 500px e 600px. Valide a sintaxe do cdigo HTML via W3C. Evite formulrios, javascript e Flash. No funcionam em geral. Evite palavras que entrem em filtros anti-spam como : clique aqui, promoo, R$, entre outras. Evite CAIXA ALTA no assunto ! Teste a exibio de sua pea em diversos clientes de email.

Mapa de Calor

300 px

O mapa de calor indica, a partir de estudos de usabilidade elaborados por Jakob Nielsen, quais so as regies onde o leitor presta mais ateno no momento em que ele passa os olhos no contedo de uma mensagem de email. As regies em tom avermelhado indicam reas onde ele mais concentra a sua ateno; as reas em tom amarelo e azul uma viso perifrica. Os primeiros 300 pixels de altura precisam de uma ateno especial, devido ao posicionamento do painel de leitura prvia da maioria dos clientes de email.

Dicas por Cliente de E-mail

Dicas por Cliente de E-mail

Microsoft Outlook 2007
Imagens so bloqueadas por default, a no ser que voc habilite o remetente como confivel. Render-engine : Microsoft Word 2007 No exibe imagens em background . Voc precisa definir uma cor de fundo e inserir o texto da Pea.

Suporta CSS incorporado.

No suporta formulrios. No suporta GIFs animados.

Dicas por Cliente de E-mail

Lotus Notes
Imagens so bloqueadas por default. Use tabelas na construo de seu email. Evite COLSPAN e ROWSPAN. Especifique a largura tanto da tabela quanto das suas clulas.

Use spacer.gif para ajuste de padding.

Evite links do tipo ncora (links que, ao serem clicados, posicionam o cursor de texto em um destino dentro da prpria pgina marcada, e no para outra pgina como ocorre normalmente).

Dicas por Cliente de E-mail

Windows Live Hotmail
Imagens so bloqueadas por default. Cinza-escuro a cor default para exibio de texto. Evite formulrios. Firefox + Hotmail = Fail (<img src=image.jpg style=display: block;>)

A tag style acima deve ser utilizada para exibio correta da Pea no navegador FireFox. Caso no seja, a pea ser exibida conforme o prximo slide, com hachuras entre as imagens.

Dicas por Cliente de E-mail

Gmail
Imagens so bloqueadas por default. Evite cellpadding e cellspacing. Use CSS in-line.

Suporta imagens em background, mas sem CSS.

Referncias

Referncias

emailManager (http://www.emailmanager.com)
Validator W3C (http://validator.w3.org)

Email Standards Project ( ://www.email-standards.org)