Email Marketing em HTML

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

Desenvolver um email marketing em HTML é um desafio e tanto. Se programar HTML para websites já tem suas dores de cabeça por causa das diferenças de renderização entre os principais browsers, imagine desenvolver um código que produza um layout correto em mais de 20 programas de email!

Assim como cada navegador tem suas particularidades para 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 aplicações mobile.

Por onde começar?

É preciso ter em mente que o desenvolvimento do código HTML de 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 tomando cuidado com a mescla de células e linhas, que não funciona em algumas versões do Outlook.

Para criar um email marketing em HTML de forma correta, é preciso ter vasto conhecimento dos diversos programas de email existentes e suas capacidades de renderização para saber quais atributos do HTML e propriedades do CSS devem ser evitadas. Comece tentando identificar os programas de email mais usados pelo seu público, analisando os relatórios das campanhas de email marketing que você já lhes enviou anteriormente.

Principais limitações dos programas de email

Uma das coisas a ter em mente é que alguns importantes programas de email não conseguem exibir imagens de fundo em algumas áreas do email. Isso pode influenciar bastante a criação do design do email marketing e o resultado final que é apresentado ao destinatário.

Outra questão importante é que a maioria dos programas de email não suporta as propriedades de posicionamento da linguagem CSS. Isso é o que torna necessária a diagramação do 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 montá-las novamente em HTML.

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. Emails muito pesados fazem com que o envio demore mais para ser concluído pela plataforma e o download das imagens consuma mais 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 estruturado em tabelas. 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):

<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
    <tr>
        <td align="center" valign="top">
            Comece a estruturar o email marketing aqui!
        </td>
    </tr>
</table>

A largura definida em porcentagem considera, como referência, a largura da área de exibição da mensagem no programa de email do destinatário. Isso quer dizer que algumas pessoas podem visualiza

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

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.

Comece a usar o Zenmail hoje mesmo!

crie sua conta