Fundamentos sobre design de email marketing – parte 1

Estarei continuamente escrevendo artigos relacionados a webdesign. Hoje eu falo sobre um assunto complicado mesmo para os designers com experiência, a construção de newsletters (email marketing). Quem nunca ficou surpreso ao ver que seu lindo design simplesmente não funcionou como deveria no outlook ou em algum webmail? Estilos não exibidos, imagens não visualizadas, etc.
Veja também nossos outros artigos sobre email marketing.
Vou citar algumas práticas e recursos infalíveis para criação de um email marketing funcional.

Simplicidade. Menos é mais sempre!

Os emails não são como os projetos web complexos, que devem ser muito bem desenhado, eles devem ter uma estrutura básica e minimalista. Tente basear seus designs em uma imagem de cabeçalho principal seguido do conteúdo. O design mais limpo, mais fácil será para codificar, diminuindo a possibilidade de qualquer anormalidade entre os vários navegadores e clientes de e-mail diferentes do mercado.
Imagem Estrutura Blog TeHospedo

Tenha navegadores web para testar

Certifique-se ter testado em diferentes navegadores web. Quem sabe quem vai ler seu e-mail, e qual é o seu navegador preferido!
No mínimo, use estes:
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Mozilla Firefox 3
  • Apple Safari 3
  • Google Chrome

Tenha os principais softwares de email e webmail

Cadastre-se em todas as contas de email que você puder imaginar. Abaixo está uma lista de clientes de email para você começar:
Também teste no Thunderbird, Outlook Express, que são os leitores mais usados.

Sim, use tabelas

Os emails devem ser construídos e estruturados usando tabelas para o layout.  Alguns estilos CSS podem ser usado para formatação visual, mas vou comentar isso em outro post.

Use estilos inline

Normalmente na programação de websites, desenvolvedores aconselhariam a não usar estilos direto nas TAGs html – inline – e sim criar uma classe externa para isso.
Infelizmente, em um email marketing, isso não é possível, pois os clientes de email não vão linkar os arquivos externos, e nós não queremos ver nosso design indo por água abaixo. Então, se alguma coisa precisa ter estilo, use estilos inline. Elementos como o tipo e tamanho de fonte podem ser usados dentro da tag , mas os estilos individuais devem ser colocados em .
Use as alt tags de todas imagens. Eu disse todas!
Este é um passo muito importante, mas muitas vezes é esquecido por muitos. Por padrão, os clientes de email desativam as imagens. O atributo ‘Alt’ serve exatamente para exibir um texto no lugar da imagem não carregada. Uma boa técnica é estilizar uma para quando as imagens que estão dentro dela, não carregada, formatem o tipo, tamanho e cor do texto exibido no lugar.
Um ponto que muitos usuários confundem quando se trata da tag “alt”, é atribuí-la como a responsável pela exibição do hint ou tooltip (pequena janela geralmente de fundo amarelo que aparece quando se passa o mouse por cima de uma imagem mostrando algum tipo de descrição da mesma). Esse papel é, na verdade, realizado pela tag title,

Não defina altura nem largura para imagens

Se as imagens estão desativadas por padrão, as dimensões presentes nas tag’s , deixam um monte de espaço em branco desnecessário no seu design.

Envolva o email em uma tabela com largura de 100%

Clientes de email só leem o código dentro das tags do corpo, e não as tags body. Para poder usar uma cor de fundo, você deve criar uma tabela de largura 100%, para simular o efeito “falso” de fundo.
table 100 porcento

Não maior do que 600px

Muitas pessoas realmente não abrem seus e-mail, simplesmente olham ele rapidamente no painel de visualização. Em média, o menor painel de visualização dos clientes de e-mail,é de cerca de 600px, por isso sempre projete seus e-mails nessa largura. Seu e-mail completo pode ser visualizado sem problemas numa largura máxima de 750px.

Personalize o Estilo dos Links

Felipe Rodrigues da Silva

Consultor em E-commerce, sócio fundador da ZIO Soluções em Internet, com mais de 15 anos de experiência nas áreas de Internet, TI e Desenvolvimento de Software. E atuou na área de TI, em grandes empresas como Terra Networks, Grupo RBS, Unisinos e outras, hoje atuando como Consultor de E-commerce nos mais diversos segmentos.

Search