Fundamentos sobre design de email marketing – parte 2

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 ou serem incluídas ou excluídas da largura da , 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 extras, para ambos os lados da 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

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 vazias. Mesmo que a esteja definida com a largura o IE vai ignorar isso e configurá-la para zero.
A correção é adicionar um GIF transparente na 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!

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