Boas práticas de HTML para Email Marketing

1 – Priorize textos ao invés de imagens

Você já deve ter recebido alguma mensagem com imagens bloqueadas. Por padrão, os ESPs (Provedores de Serviços de Email) bloqueiam as imagens por questões de privacidade do destinatário. Somente após clicar no link “Mostrar imagens desta mensagem” é que elas são exibidas. Por este motivo, o uso de textos no corpo do email facilita a leitura da mensagem. Se a mensagem for composta apenas por imagens, que provavelmente estarão bloqueadas, será impossível identificar o conteúdo, diminuindo interesse e aumentando as chances de descadastro (unsubscribe) ou reporte spam.

Boas práticas de HTML em Email Marketing

Frequentemente recebemos mensagens com imagens bloqueadas e o aviso “Images are not displayed” (tradução: Imagens não estão sendo exibidas). Os servidores entregam o email desta forma para respeitar nossa privacidade. É necessário clicar no link “Display Images Below” (tradução: Mostrar as imagens abaixo) para visualizarmos.

No próximo tópico comento sobre um artifício que minimiza os efeitos danosos do bloqueio de imagens pelos provedores. É o chamado Texto Alternativo (Alt Text), o qual pode ser aplicado a cada imagem. Desta forma, mesmo bloqueada, ela mostrará um texto descritivo no lugar.

Outro motivo importante para priorizar textos é que mensagens com muita imagem são mal vistas pelos ESPs e podem prejudicar a entregabilidade de suas campanhas. O motivo é simples: ao contrário de textos, os filtros spam dos provedores não conseguem ler uma imagem, o que dificulta a interpretação do conteúdo da mensagem. Algumas pessoas tentam enganar os provedores abusando de imagens para enviar conteúdos apelativos ou pouco éticos, já sabendo da dificuldade dos ESPs para interpretá-las. Por este motivo a maioria dos ESPs priorizam a entrega de mensagens com mais textos do que imagens.

O ideal é que seu HTML mantenha uma proporção 60% texto e 40% imagens. Procure não passar dos 40% nas imagens.

2 – Use “ALT Text” nas imagens

Como mencionado no tópico 1 acima, existe um recurso que atribui um texto descritivo a cada imagem no HTML: O Alt Text ou Texto Alternativo. Este texto será mostrado mesmo que a imagem esteja bloqueada pelo servidor. Desta forma suas mensagens tornam-se mais amigáveis permitindo ao destinatário identificar melhor o conteúdo e despertar seu interesse.

O código HTML padrão de uma imagem é:

Boas práticas de HTML em Email Marketing

É possível inserir o ALT text da seguinte forma:

Boas práticas de HTML

Caso sua imagem esteja bloqueada pelo servidor, veja como ela apareceria para o destinatário com e seu ALT:

Boas práticas de HTML

É possível ainda estilizar o ALT text atribuindo cor, negrito ou qualquer outro estilo. Desta forma, mesmo que as imagens estejam bloqueadas a mensagem é transmitida de forma mias eficiente. Veja um exemplo onde estilizamos o texto alternativo para ficar maior, em itálico e na cor laranja:

Alt Text estilizado
HTML ALT Text estilizado

Estilize usando CSS inline

No tópico anterior foi mostrado um exemplo de como é possível estilizar o ALT Text de uma imagem com CSS. Isso pode ser feito com qualquer texto da mensagem, evitando assim o uso demasiado de imagens. Por exemplo, um botão call-to-action (Ex.: botão de “comprar”) pode ser construido todo em CSS usando apenas texto e estilos ao invés de uma imagem.

IMPORTANTE: A maioria dos servidores não aceita os estilos CSS no Head do HTML, body ou colocado externamente. Para que tenha efeito no Email Marketing é necessário aplicá-lo inline no elemento, ou seja,  incorporado no HTML, como no exemplo do ATL Text que mostramos anteriormente.

Para saber quais estilos são suportados pelos diversos servidores de email acesse: https://www.campaignmonitor.com/css/

Use a propriedade display:block

Alguns servidores como Gmail e Hotmail acrescentam um espaço ao redor das imagens contidas no corpo da mensagem. Isso pode ser um problema caso o layout criado para o HTML exija a justaposição das imagens para seja exibido corretamente.

Abaixo trago uma mensagem de email composta exclusivamente de imagens, o que, já sabemos, não é uma boa prática de HTML (tópico 1). Entretanto, apenas para exemplificar a questão do display:block usaremos uma mensagem neste formato. Vejamos:

 

display-block

 

É possível verificar na mensagem acima três imagens, que deveriam estar justapostas para formar uma única ilustração. Porém, há um espaço entre elas acrescentado pelo servidor do destinatário que prejudica a exibição correta do layout. Para que isso não aconteça em suas campanhas de Email Marketing é importante aplicar a propriedade display:block em todas as imagens da mensagem, como no exemplo abaixo:

displayblock

Como o próprio nome da propriedade sugere (block = bloco) suas imagens serão tratadas como um bloco único, sem espaços entre elas. Aplicando o display-block as imagens deverão ficar dispostas como na imagem abaixo:

 

Display - Block

 

IMPORTANTE: Essa propriedade só terá efeito se suas imagens estiverem organizadas dentro de tabelas. Para minizar qualquer risco de separação das imagens, não esqueça de atribuir o width e height em todas as imagens.

Cuidado com as “spammy words” (termos que caracterizam spam)

Algumas palavras figuram na lista negra dos provedores como termos que caracterizam spam. Desta forma, caso o “assunto” de seu email ou texto na mensagem contiverem alguma ou muitas dessas palavras seu email pode parar no filtro spam e não ser entregue.

Alguns exemplos de spammy words (evite usá-las): desconto, dinheiro, promoção, oferta, Off (de X% off), etc.

A lista de spammy words muda e evolui a todo momento. Também não é proibido o uso de algumas palavras consideradas spammy. Por exemplo, a palavra “desconto” é comumente empregada em campanhas de Email Marketing com boas performances. Isso porque os provedores analisam as spammy words em conjunto com outros fatores. É importante ter bom senso.

Evite muitas cores nos textos

Evite misturar cores diferentes e transformar seus textos HTML num carnaval. Isso pode ser interpretado pelos ESPs como uma tentativa apelativa de chamar a atenção do destinatário, o que não é bem visto.

Utilize códigos limpos

Utilize códigos limpos de HTML. Muitas pessoas convertem textos em Word para HTML. Esse código transformado vem com uma série de scripts desnecessários, o que torna o código da mensagem “sujo”. Os filtros spam sabem que aquela mensagem não foi criada por um profissional.;

Author: Carlos Barros

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *