Problemas de layout no email marketing?

O design do email que você cria para uma campanha de email marketing não é visualizado da mesma maneira para todos os seus clientes. Isso ocorre porque cada programa leitor de email possui seu próprio renderizador, como o Outlook, Thunderbird, Mail. Muitas pessoas também gostam de acessar sua conta de email através do navegador, essa maneira é mais utilizada quando as pessoas acessam a internet em uma lan house. Nesses casos a renderização também irá depender do navegador utilizado, Firefox, Internet Explorer,Safari, Google Chrome.

Cada navegador vai mostrar o email de um jeito diferente, e cada versão de um navegador também pode mostrar as coisas de um modo diferente, quem visualiza muitas vezes nem sabe disso, mas pode tornar-se um pesadelo para quem cria uma campanha de email.

Muitas vezes é necessário passar horas testando uma simples campanha, aí o que era simples já não passa a ser tão fácil assim. Pensando nisso resolvemos mostrar alguns truques que vão facilitar a vida das pessoas que criam campanhas, afinal criar emails que possam ser visualizadas pelo maior número de pessoas é um dos maiores objetivos de quem faz email marketing, afinal pode ser a diferença entre quem passa uma mensagem que todos consigam visualizar, naturalmente gerando mais vendas.

Hotmail

Um problema bastante comum que pode ocorrer ao trabalhar com CSS e HTML é o espaçamento em branco que ocorre na renderização através dos navegadores. A imagem abaixo esta separada em duas partes.

Como você pode ver, existe espaços entre a imagem. Nós podemos resolver o problema adicionando uma linha de código CSS:

<img src="image.jpg" alt="Aveia" style="display: block;" />

É só isso, simplesmente adicionar “display: block” em qualquer tag image no HTML. Sempre lembrando que é melhor deixar tudo inline, muitos softwares leitores de email como Outlook não comportam-se bem com o CSS que não esta inline.

Ao arrumar podemos ver os navegadores renderizando a imagem normalmente através do serviço Hotmail.

Esse problema é mais comum de ocorrer através do Hotmail quando visualizado através dos navegadores. Inserir esse código inline não afeta a visualização através de outros softwares e serviços de email online como Gmail por exemplo.

No próximo artigo vou descrever outros problemas e como solucionar os mesmos, fique ligado!