Acesso rápido

7 conselhos de HTML para seu e-mail marketing

por Raúl F. Díaz Medeiros Quarta-feira, 30 de janeiro de 2019   Tempo de leitura: 6 minutos

Primeiro de tudo, lembre-se que criar código HTML para e-mail marketing não é o mesmo que para uma página web. As caixas de correio não respondem da mesma forma que os navegadores.

Os e-mails não têm a mesma aparência entre caixas de correio diferentes, pois cada uma interpreta o código HTML de forma diferente. Isto pode fazer com que um e-mail programado para uma caixa de correio seja incompatível com as outras.

A maneira de se certificar que a mensagem será transmitida ao destinatário é utilizar um template em HTML com uma boa distribuição de texto e imagens com alt tags. Por esse motivo, separei algumas dicas do que fazer e do que não fazer na hora de usar código HTML para criar seu e-mail marketing.

Algumas dicas na hora de montar a sua peça de e-mail marketing em HTML

1 – Não utilize uma imagem única

Este é um erro comum na hora de montar o e-mail, em vez de utilizar um template de e-mail em formato HTML, muitas empresas transformam todo o conteúdo em uma imagem só, muitas vezes exportadas diretamente do Photoshop ou de outro software de edição de imagens.

Essa prática tem um impacto negativo no resultado final da campanha, pois a maioria dos serviços de e-mail, como Hotmail, Yahoo! E Gmail, além do próprio Outlook, possuem um bloqueio padrão de segurança para exibição de qualquer formato de imagem que esteja em um e-mail.

O problema é que a maioria de seus leitores não conseguiram visualizar automaticamente a imagem deletando a mensagem instantaneamente e inclusive em alguns casos marcando a mesma como spam.

Num segmento tão concorrido como o do e-mail marketing não podemos contar com usuários que se disponham a abrir imagens desconhecidas. Mas não se preocupe, para configurar suas imagens siga as seguintes instruções:

– Certifique-se de que o seu e-mail sem imagens também é eficaz;
– Adicione as imagens com o atributo alt;
– imagens em formato .GIF ou .JPEG (evite .PNG);
– Lembre-se: o valor da borda é 0;
– Incluir imagens que tenham style=”display:block;” para evitar espaços por baixo delas;
– Assegure-se de que as imagens incluem os atributos de altura e largura;
– Use referências absolutas e não-relativas:
– use: src=”www.misitio.es/imagenes/logo.gif”
– em vez: de src=”/images/logo.gif”
– Lembre que Outlook não suporta imagens de fundo.

Atenção! Se mesmo sabendo dos ricos você optar por criar uma peça de e-mailing com imagem única, ou boa parte dela, te recomendamos dividir a imagem em partes para otimizar o tempo de download.

2 – Use tabelas

Essa prática tem toda a sua lógica, afinal, as tabelas permitem dividir o espaço exato de cada elemento de sua mensagem de e-mail marketing, tanto textos quanto imagens. Por isso, deixe de lado o CSS, pois nem todo serviço de e-mail tem capacidade de realizar a leitura de forma correta.

Caso use CSS, use inline, para que os serviços de email (em especial o Gmail) não cortem todos os estilos CSS da sua newsletter, insira sempre o CSS dentro de cada elemento (célula, link, parágrafo, etc.). Dá bastante trabalho, mas este método é compatível.

3 – Procure o equilíbrio recomendável de imagens e textos

A proporção ideal recomendada por especialistas é de 40% de imagens e 60% de texto. Dessa forma, não só aumentará suas taxas de entrega e leitura como também deixa sua mensagem de e-mail com uma estrutura mais engajadora e leve.

4 – Cuidados com as imagens

As imagens nunca devem pesar mais de 100KB e você pode inserir até 470KB totais em imagens no seu layout: alguns provedores não aceitam imagens acima de 100KB, aponte para um máximo de 600-700 pixels de largura.

Caso envie mensagens acima desse peso, elas não somente não serão entregues como irão prejudicar a entrega de seus e-mails. Muito cuidado!

Use alt tags nas imagens, sempre usando um texto que as descrevam ou inclusive uma chamada de ação que encoraje a exibição da imagem, escrevendo na alt tag por exemplo, “Nova coleção Outono/Inverno 2019 – Clique em Autorizar imagens para visualizar”

Insira links nas imagens, pois, mesmo que elas não sejam exibidas, as áreas serão clicáveis. Essa prática é muito comum no uso de alt tags.

5 – Evite formulários

Muitos dos principais servidores não fazem leitura de formulários. Então, quando inseridos no e-mail podem diminuir suas taxas de entrega e abertura.

A melhor maneira de obter informações de seus leads, nesse sentido, é utilizar um link que redirecione para o formulário.

6 – Tags não recomendadas

Alguns especialistas de programação recomendam evitar o uso de tags específicas, pois elas não são compatíveis a todos tipos de leitura. Segue nossa lista:

  • <meta> Não compatível com mensagens em HTML;
  • <title> Utilizada apenas em páginas HTML, evite usar em mensagens;
  • <link> Evite usar como referência de arquivos de CSS;
  • <style> Alguns servidores de e-mails, como o Gmail, removem essa tag.

7 – Serviço de e-mail marketing

O último conselho, e não menos importante, é verificar se a plataforma de envios de que sua empresa dispõe de templates prontos em HTML ou se permite que usuários avançados importem seu próprio código, isso é particularmente interessante se você já possui um template em HTML ou CSS ou se deseja estar completamente livre e irrestrito quando se trata de criar um e-mail em HTML que se encaixe com seu estilo.

Você recomendaria esse artigo para um amigo?

Nunca

 

Com certeza

 

Deixe seu comentário

0 comentário

Comentários

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

Comentando como Anônimo

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Assine nossa Newsletter

Fique por dentro de todas as novidades, eventos, cursos, conteúdos exclusivos e muito mais.

Obrigado!

Você está inscrito em nossa Newsletter. Enviaremos, periodicamente, novidades e conteúdos relevantes para o seu negócio.

Não se preocupe, também detestamos spam.