Criar templates de email marketing não é tarefa das mais fáceis. Não tanto pelo design, pois há profissionais criativos e mais que competentes para criar peças chamosas e atraentes. Falo do ponto de vista técnico, que é o grande responsável pelo sucesso e eficiência do email marketing, afinal, tudo começa quando a mensagem é entregue na caixa de entrada. Se o email marketing não estiver tecnicamente preparado para isso, a comunicação com o destinatário é perdida.

Tudo bem, podemos combinar que a entrega na caixa de entrada não é de inteira responsabilidade do template, pois uma série de configurações e boas práticas também precisam ser seguidas pelo remetente para que isso ocorra, mas o template carrega a importância de transmitir corretamente a mensagem para os destinatários. A dúvida é: como fazer isso considerando as mais diversas aplicações de email que eles utilizam?

Existem algumas técnicas que, para produzirem o mesmo efeito em todas as aplicações de email, precisam ser utilizadas no template, mesmo que as instruções de HTML/CSS sejam repetidas, pois algumas aplicações compreendem apenas uma delas. A seguir, confira as principais recomendações técnicas para templates de email marketing.

Imagens

Antes, o hack do display:block era recomendado apenas para o Hotmail, que acrescenta alguns pixels ao redor de todas as imagens dos emails. Recentemente, o Gmail passou a se comportar de forma semelhante, então, o hack continua válido e, agora, para estes dois clientes de email. Em todas as imagens do template, acrescente (via CSS inline) o seguinte:
.

Sempre declare as dimensões das imagens no template, pois o Outlook 2007 tende a expandir a largura de uma imagem sem este atributo para a largura de uma linha inteira.

Não esqueça do atributo alt nas tags de imagens relevantes, que transmitem uma mensagem. Não trate o template de email marketing como uma página da web que é otimizada para SEO e aplica uma mesma palavra-chave aos atributos alt de todas as imagens. No email marketing, cada imagem deve ter sua descrição real.

Lembre-se que imagens de fundo não funcionam em todos os clientes de email, então, se mesmo assim você decidir utilizá-las, lembre de inserir também uma cor semelhante como alternativa de fundo, pois se a imagem não for exibida, a cor permanecerá e não prejudicará as cores de seus textos e links. Já imaginou um email inteiro escrito em fonte branca, esperando-se que o fundo com imagem em preto seja renderizado? Se a imagem não for exibida, a cor preta de fundo ainda permitirá a leitura da mensagem.

Links

Que algumas aplicações de email sobrepõem os seus próprios estilos às mensagens de email, já não é novidade. Mas isso ocorre particularmente com links, e se você quiser que a cor de link que planejou inicialmente para seu template seja mantida em todas as aplicações de email, é melhor reforçar a declaração de cor de uma maneira redundante.
.

Ao invés da tag < font >, você pode usar também a tag < span >.

O efeito sublinhado em textos já é subentendido como um link, mas se você não quiser esse aspecto para os seus, utilize a declaração em CSS text-decoration:none;
.

O Gmail tende a transformar em link, “automaticamente”, todos os textos que se pareçam com um link. Mesmo que você tenha escrito algo como “eu.também”, esse trecho de texto será renderizado para o destinatário como um link no Gmail. Você não pode evitar que ele seja clicável, mas pode formatar sua aparência de forma que ele, pelo menos, não se pareça com um link. O mesmo vale para endereços de email. Não esqueça de formatá-los com a mesma cor e efeito dos demais links da mensagem, do contrário, ele será exibido no azul clássico e com sublinhado.

Cores

Evite abreviar cores hexadecimais (por ex. #fff ao invés de #ffffff) e declarações de fonte, que podem não funcionar em alguns clientes de email.

Tabelas

O Outlook 2007 e 2010 não aceita os atributos rowspan e colspan em tabelas, que são utilizados para mesclar células na vertical e na horizontal, respectivamente. Se você fizer um envio para o Outlook testando o seu comportamento em relação a esses atributos, perceberá a confusão que ele cria neste trecho de conteúdo.

Não esqueça de determinar as larguras das células das tabelas do template. É a melhor forma de garantir que tudo esteja no seu devido lugar em todas as aplicações de email. E, se precisar trabalhar com alinhamentos precisos de conteúdos, prefira aninhar tabelas (criar uma tabela nova dentro de uma célula) do que confiar nos atributos padrão de alinhamento left, top, bottom e right.

Vídeos

Felizmente, estamos percebendo mudanças nas aplicações de email, que se adequam às necessidades multimídia de seus usuários e começam a suportar a exibição de vídeos nas mensagens de email marketing. Os webmails UOL e BOL foram os primeiros aqui no Brasil a permitir este tipo de conteúdo nas mensagens. O mesmo ocorre agora, com o novo webmail do portal R7.

Os produtos da Apple, como o Entourage, iPad, iPhone e iPod Touch, já suportam HTML5, mesmo em mensagens de email. Isso significa que podem exibir vídeos, dentro de seus clientes de email, que sejam inseridos com a tag < video > do HTML5. Uma possível ação de mobile email marketing para estes destinatários já pode explorar o artifício do vídeo em HTML5.

Para as demais aplicações que ainda não suportam multimídia, a melhor solução é inserir uma imagem com aspecto de player de vídeo, e que tenha link para uma página da web onde o destinatário possa assisti-lo.

Essas são algumas das técnicas essenciais para templates de email marketing que têm as melhores intenções: entregar a mensagem corretamente a todos os destinatários, independente da aplicação de email que utilizem. Claro que existem muitas outras, mas que, se relatadas aqui, poderiam construir um verdadeiro manual de email marketing. Porém, seguir estas recomendações já é um passo e tanto em direção ao envio perfeito!

Sucesso a todos!

autora: Juliana Padron
fonte: