Fundamentos sobre design de e-mail Marketing – parte 2
Finalizando o artigo sobre práticas e recursos para criação de um e-mail marketing funcional, segue a segunda parte do post. Leia também a primeira parte deste artigo.
Pois bem, vamos aos mandamentos!
Evite tabelas dentro de tabelas.
Além da tabela de 100% de largura que envolverá o e-mail marketing, você deve se esforçar ao máximo para evitar o aninhamento de tabelas adicionais. Isso é facilmente evitável, usando o sistema de empilhamento em seu lugar.
Isto permite um código muito mais controlável e legível.
Evite imagens de fundo.
Só use gradientes, imagens, etc, quando não houver texto envolvido pelo mesmo. O bom senso pede um alto contraste e uma boa legibilidade do conteúdo, preservando a harmonia entre a cor de primeiro plano e a cor do fundo.
Bordas não funcionam.
Não temos muita compatibilidade e margem de correções específicas para clientes de e-mail, portanto, quando temos bordas que podem fixar-se fora ou dentro da tag <td> ou serem incluídas ou excluídas da largura da <td>, não há muito o que fazer.
A correção? Sei que é de testar a paciência, e se perguntar: Não tem um jeito mais fácil? Mas lá vai.
Crie dois <td> extras, para ambos os lados da <td> principal, e defina a cor de fundo em cada um, especificando também sua largura. Isso vai criar a “falsa” borda e trabalhar corretamente em todos clientes de email. É, sei que é arcaico, mas funciona.
Corrija o bug do Hotmail.
A Microsoft melhorou muito o serviço do Hotmail /Live, apesar de o queridinho da web ser o Gmail. Mas … um mega erro é encontrado – você vai ver que ele adiciona um padding estranho a todas as imagens do código. Por que isso acontece? Vai saber, pergunte ao Bill Gates! Tudo que sei é que há uma correção muito fácil para isto.
Em cada tag de imagem, basta adicionar a CSS inline “display: block”, como mostrado abaixo.
Codifique todos os caracteres. Não haverá erro 
Apesar de não ter técnica para codificar caracteres, e sim uma lógica difícil e uma decoreba pura, é melhor fazer sempre.
Ao ver e-mails em diversos clientes de email, não podemos garantir o charset que cada site está utilizando. A codificação dos caracteres especiais nos permite ter a certeza de que todos serão mostrados como deveriam.
Com codificação funcionará definitivamente. Saiba mais sobre o assunto:
The Document Character Set
Introduction to character entity references
JavaScript = Lixo Eletrônico = Spam
Infelizmente, você não pode e não deve incluir qualquer tipo de JavaScript no código de seu e-mail marketing.
Portanto, não imagine pop-ups ou e-mails com auto-rolagem, pelo amor de Deus! Mas se mesmo com esta dica você teimar e decidir colocá-lo, seu e-mail pode ser enviado para a pasta de lixo e isso não é nada bom. Clientes de e-mail vão ver você como um spam e interpretar seu javascript fútil como uma ameaça.
Então, foco no velho e bom HTML.
Dar ao usuário o caminho pra sair.
Ao enviar newsletters para vários clientes, não interessa se você possui um e-mail lindo e bem desenvolvido, esse usuário pode querer não mais fazer parte da sua lista de contatos se o conteúdo não lhe interessa.
Sempre permita-lhes uma saída, pela adição de um link de cancelamento no rodapé ou cabeçalho do e-mail, com um texto parecido ao do exemplo abaixo:
“Se você gostaria de sair deste boletim, basta clicar aqui “
Usuários querem opções e você quer ser visto.
Alguns usuários podem estar utilizando um cliente de e-mail muito básico, acessando o webmail no trabalho ou no celular. Imagens e design complexos não são as melhores opções para estes tipos de clientes. Considere colocar no topo do boletim de e-mail um link que aponta para o e-mail em um servidor web, que o usuário possa ver o e-mail com toda sua beleza.
Exemplo:
“ Não consegue visualizar este e-mail? Ver aqui “
Use um spacer.gif
Alguns navegadores … tá bom, alguns não, o Internet Explorer, não gosta das tags <td> vazias. Mesmo que a <td> esteja definida com a largura o IE vai ignorar isso e configurá-la para zero.
A correção é adicionar um GIF transparente na <td> vazia, e atribuir a largura na imagem. Assim, nosso amigo IE não terá problemas ao interpretar a largura. Realmente outra codificação arcaica pra nosso amigo IE entender. Já disse, pergunte ao Bill Gates.
Envie testes.
Esta é a dica mais importante deste artigo e o aspecto fundamental de um projeto de e-mail. Enviar e-mails de teste permite visualizá-los em todos os navegadores e clientes de e-mail, evitando erros e variações estranhas de renderização.
Espero ter contribuído e que tenham gostado do artigo!
Mais sobre e-mail marketing
- Veja o site do TeContato
- Leia sobre como enviar e-mail sem cair na caixa de spam
- Preparamos uma série de artigos e dicas sobre e-mail marketing.
- Saiba como formatar seu e-mail marketing
Deixe um comentário
Trackback URL
- Comentários (12)
- Pings (0)
Mutio Bom!