HTML para Email Marketing

Desenvolver HTML para email marketing é como criar sites em 1994, estruturando todo o layout em tabelas.

Desenvolver HTML para email marketing é um desafio e tanto: se programar HTML para websites tem suas dores de cabeça por causa das diferenças de renderização entre os browsers (que são em torno de cinco principais), imagine desenvolver um código que seja exibido correto em mais de 20 programas de email, tendo ainda as variações cruzadas entre webmails e browsers (Gmail no IE, no Chrome, no Safari etc).

Assim como cada browser tem suas particularidades ao renderizar HTML, os programas de email também têm as suas ao interpretar o HTML e o CSS do email marketing. O suporte às propriedades é limitado e temos que lidar com os mais bizarros comportamentos de webmails, programas desktop e, agora, de aplicações mobile.

Por onde começar?

É preciso ter em mente que HTML para email marketing se faz com tabelas, assim como se faziam os sites lá pelos idos de 1990. Temos que nos imaginar diagramando conteúdos no Excel, blocados e com cuidado com a mescla de células e linhas, que não funciona em algumas versões do Outlook.

Para criar, de forma correta, HTML para email marketing, é preciso ter vasto conhecimento dos diversos programas de email e suas capacidades de renderização para saber quais atributos do HTML e propriedades do CSS devem ser evitadas.

Por exemplo, ao criar HTML para email marketing, deve-se ter em mente que alguns importantes programas de email não suportam o uso de imagens de fundo em células de tabela ou no corpo do email, e a grande maioria não suporta as propriedades de posicionamento do CSS, o que nos obriga a diagramar o conteúdo do template de email marketing usando tabelas.

Para fugir destes problemas, muitos profissionais criam seus templates apenas com imagens e as recortam em pedaços menores para montar no HTML do email marketing, usando o mínimo de código possível.

Infelizmente, essa técnica não é das melhores porque aumenta as características de spam do email marketing, além de tornar cada mensagem muito “pesada” em kb, o que faz o envio demorar mais para ser concluído pela plataforma e o download das imagens consumir tempo e banda dos destinatários. Em uma era em que as visualizações de email pelo celular só aumentam, devemos pensar nos usuários que pagam caro por suas conexões 3G/4G e cada Kb a menos ou a mais no HTML do email marketing conta.

Exemplo de estrutura em HTML para email marketing

A seguir, veja um exemplo de como programar o HTML para email marketing usando tabelas na estrutura. A instrução deste código cria uma tabela de 100% de largura, com uma linha e uma coluna (uma célula), onde há um texto escrito direto no HTML (não embutido em uma imagem):

Essa é a estrutura de uma única tabela, mas o HTML de um email marketing – especialmente se for responsivo ‐ pode ter mais de 10 tabelas, inclusive uma dentro da outra, criando vários níveis aninhados.

Quem domina a “arte” de desenvolver HTML para email marketing pode ser chamado de email developer – sim, é uma carreira! – ou email designer, um profissional muito valorizado por empresas com grandes demandas de email marketing.

Para saber mais sobre como desenvolver HTML para email marketing, consulte nossos diversos materiais e tutoriais sobre o assunto, como os sugeridos a seguir.

Leia também

Assine Nossa Newsletter



Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações