🛒 O WhatsApp chegou na Mailbiz! Conheça o Jornadas PRO e venda até 3x mais! Comece agora 

fechar
voltar Voltar
voltar Voltar

3 dicas de HTML para criar peças de e-mail de alta performance

  • timer 10/04/2017
  • 2 min de leitura

O uso de HTML para criar peças de e-mail é fundamental se você quiser assegurar que sua mensagem realmente chegue à sua lista de contatos sem ruídos.

Isso porque a maior parte dos serviços de e-mail disponíveis bloqueiam a exibição de arquivos de imagem dentro do corpo dos e-mails, a fim de prevenir o spam. Logo, se você sempre achou mais fácil transformar seu e-mail marketing em um grande arquivo de imagem no Photoshop, pense duas vezes!

O problema é que não é só Hotmail, Gmail, MS Outlook e outros que deixarão de exibir o conteúdo do seu e-mail, mas seus contatos certamente não terão interesse de aguardar o carregamento, ler e clicar numa estrutura complexa.

Mas não se preocupe! Neste post, vamos apresentar algumas dicas para que você seja capaz de recorrer à linguagem HTML para criar peças e e-mails de alta performance. Confira.

O que fazer ao usar HTML para criar peças e e-mails?

 

1. Evite o Word

Isso mesmo. Usar o Word ou editores mais simples para a geração do HTML pode fazer com que o seu código não seja interpretado corretamente pelos e-mails, já que não seguem os padrões da web. Adote editores avançados, como o Dreamweaver da Adobe.

2. Tenha o layout sob controle

O principal desafio ao se apostar em um e-mail na linguagem HTML é tentar prever como o design dele será visto pelo usuário em cada um dos inúmeros serviços de e-mail, além dos dispositivos móveis, é claro. O ideal é que você mantenha o layout sob controle, via código!

– Use tabelas

Sim, as tabelas são o primeiro passo para garantir que seu e-mail será lido sem distorções. Elas possibilitam dimensionar o espaço entre colunas e rodapé, posicionando logo, imagens e texto de forma definitiva. O número de colunas é regulado pela tag “colspan=(?)”, dentro da tag <body></body>.

– Estilize o e-mail ou a peça com CSS

Além de dimensionar cada elemento, é preciso ter controle sobre a estilização, para que usuários não tenham a leitura comprometida por e-mails ou peças com cores distorcidas. Ao ser inserido no conteúdo, o CSS cria um link para uma página de estilos que definirão a cor do background e das fontes.

Mas, atenção! Use sempre o CSS inline (ao lado das tags do código-fonte). Quando o CSS é incorporado externamente ou aparece antes da tag body, ele pode ter o código alterado por webmails.

3. Equilibre imagens e texto

Depois de estruturar o layout em HTML, basta dosar imagens e texto. Em primeiro lugar, as imagens não podem ser “pesadas” ou em grande quantidade, pois os e-mails tendem a considerá-las como spam, vindo a bloquear a visualização. A largura ideal das imagens deve ser de 520 a 600 pixels, e os padrões de quebra de linha do HTML auxiliam a reduzir o peso de cada uma delas.

Apesar de toda a precaução, uma ou outra imagem pode não carregar. Logo, insira a tag “alt”, com uma descrição acerca do conteúdo da imagem ou do link a que ela se refere para orientar o usuário

Bom, agora que você ficou por dentro de algumas dicas para melhorar a performance dos seus e-mails, resta testar tudo. E caso as peças funcionem corretamente em navegadores como Internet Explorer e Firefox, as chances são grandes de que elas funcionem nos demais.

E então, tudo pronto para usar o HTML para criar peças e e-mails? Na próxima etapa, você provavelmente se interessará em medir a taxa de conversão do seu e-mail marketing!

Compartilhe esse artigo
  • facebook
  • linkedin
  • twitter

Veja também

Anterior
Próximo
icone newsletter

Milhares já recebem nossa news. Vai ficar de fora?

Cadastre-se e receba os melhores conteúdos sobre e-mail marketing e e-commerce.