Estrutura HTML de email marketing para newsletter

Já tentou montar uma estrutura visual interessante de uma mensagem de email para ser enviada como newsletter para os assinantes de seu site/blog, mas sempre que tenta utilizar seu conhecimento XHTML se depara com diversas barreiras em relação ao funcionamento dos recursos que utilizou na marcação de sua estrutura?

Esse tutorial é para dar algumas dicas sobre como desenvolver a estrutura HTML de um email marketing para ser utilizado no envio de newsletters.

A primeira coisa é deixar um pouco de lado o que sabe sobre XHTML e ter em mente que na estrutura de um email marketing é necessário que a marcação seja HTML puro, volte alguns bons anos no tempo e não terá problemas.

Uso da tag DIV, nem pensar. CSS, só um pouco e inline.
Porque isso? Saiba que os gerenciadores de email, como o Outlook, Windows Live Mail, etc, tão como serviços de webmail, geralmente não aceitam esse tipo de marcação e as chances da mensagem ser recebida totalmente fora do que é esperado são grandes.

A dica forte é utilizar sempre Tabelas, quanto mais utilizar tabelas, maiores as chances de tudo sair no seu devido lugar.
Por exemplo ao invés de usar três linhas, use três tabelas, assim não corre o risco.

Para textos, não invente muita ‘firula’, use fontes padrões e pouca imagem, pois quanto menos a utilização de imagens, menor será a possibilidade de ficar quebrado a parte visual e aumentam as chances do conteúdo da mensagem alcançar o público alvo, pois o email será mais leve e direto ao ponto.

Voltando a falar sobre o CSS: não recomendo, mas se for utilizar, faça-o com moderação e inline, talvez somente para estilizar fontes em relação à tamanho, cor, família, etc.

Exemplo de código CSS inline:

<p style="font-size:36px;">Sistema Básico</p>

Teste o envio para diferentes emails e sempre através de um servidor de email, pois geralmente quando se desenvolve uma estrutura mais encorpada através de clientes como Outlook, Windows Live Mail, etc… esta estrutura pode apresentar quebras, desalinhamento de tabelas, etc. Quando é uma estrutura mais simples utilizando uma imagem por exemplo, pode até funcionar, mas sugiro os bons métodos, então  faça sempre da forma certa, tanto para o simples como para o complexo, assim cria bons hábitos e acabara aplicando em tudo que faz de forma natural.

Quanto ao alinhamento das imagens utilize  propriedades diretamente na tag IMG, talvez resolva alguns problemas de quebra que podem aparecer, procure mais informações sobre quais propriedades HTML podem ser usadas na tag IMG. Saiba que todas estas propriedades, na maioria são obsoletas no que diz respeito à desenvolvimento web, mas como eu  já mencionei antes, para email marketing, deve ser assim.

A marcação HTML deve ser simples e pura:

<html>
<head>
<title></title>
</head>
<body>

... conteudo

</body>
</html>

Nota: Receber uma mensagem no Gmail sem conflitos na estrutura, não quer dizer que irá receber de forma igual no Hotmail, Yahoo ou qualquer outro provedor, sendo assim, verifique, abuse nos testes e após constatar que o funcionamento se dá no mínimo aceitável na maioria dos provedores e clientes de email você pode adotar sua estrutura como padrão para futuras mensagens, modificando apenas os elementos gráficos e textuais, mantendo a marcação HTML.

Bons estudos!

Tópicos relacionandos

Publicado por

Razor

Conhecedor das artes gráficas, amante de design web, amigo íntimo do desenvolvimento web, com a pretensão de aprender e ajudar à quem busca conhecimento, me faço presente. =)

3 comentários sobre “Estrutura HTML de email marketing para newsletter”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *