Dicas para deixar o HTML mais limpo para E-mail Marketing - Raffcom
 Dicas para deixar o HTML mais limpo para E-mail Marketing

Dicas para deixar o HTML mais limpo para E-mail Marketing

Não existem regras para criar um código HTML mais limpo e otimizado. Mas existem as boas práticas, que são uma mão na roda quando o assunto é evitar que suas melhores estratégias de e-mail marketing sejam classificadas como indesejadas.

Antes de mais nada, é preciso saber que todo template de e-mail marketing terá um código HTML. Seja um template imagético ou um só constituído por texto. Isso ocorre porque os provedores de e-mail usam essa linguagem de marcação para interpretar as mensagens recebidas. O e-mail recebeu esta herança dos navegadores web, que utilizam o HTML para a construção de sua estrutura.

Mas não pense em utilizar o mesmo código do seu site, ou “vice e versa”, a construção do HTML em e-mail é muito mais arcaico e livre de tags e atributos avançados que encontramos nos sites.

Abaixo abordarei algumas dicas para deixar o seu código mais limpo e longe… bem longe, dos filtros anti spam.

Tome cuidado com o CSS!

Quando construímos um template de site, é comum utilizarmos CSS para dar personalidade, cor e detalhes. Porém, muitos provedores de e-mail não leem comandos internos em CSS adicionados na tag <head>. E se o provedor não ler a mensagem ou ter dificuldade para interpretá-la, ela pode cair em spam ou não carregar corretamente para o contato da lista.

Uma forma de utilizar o CSS é adicionando dentro da tag as alterações que você deseja aplicar. Exemplo: Você deseja alterar a fonte de texto que está dentro da tag <p>. Para isso, utilize o CSS através do atributo style=””, dessa forma:

<p style=“font-family:verdana;”> Seu texto aqui </p>

Não use <background-image>

Novamente, os provedores de e-mail não leem a tag background-image para adicionar imagem no fundo do seu e-mail. Se você quer personalizar o fundo, só será possível alterar a cor e, para isso, aconselho usar o atributo bgcolor que é adicionado na tag <body> do HTML, assim:

<body bgcolor=”#E6E6FA“>

Alguns gerenciadores de e-mail marketing fazem essa alteração de cor para você, sem a necessidade de alterar o HTML.

Nunca utilize Javascript!

O Javascript é uma linguagem front-end, que tem a função de controlar o HTML e CSS para manipular o comportamento de páginas web. Se ele for utilizado no e-mail, sua mensagem pode se caracterizar como spam ou código malicioso. E você não vai querer isso, não é mesmo?

Use o atributo alt na tag <img src=””>

Se sua imagem não carregar, o que o usuário irá ver, será o que estiver escrito dentro deste atributo, assim:

<img src=“sorrindo.gif” alt=“pessoa sorrindo” height=”10%” width=”10%”>

Eu, por exemplo, costumo descrever o que acontece em todas as imagens. Isso possibilitará que um deficiente visual ouça o que está dentro do atributo. Além disso, existem aplicativos que fazem a leitura do atributo para pessoas com deficiência visual, não só nos e-mails, mas em toda web.

Claro que a porcentagem de pessoas com deficiência visual que usa estes aplicativos é devidamente baixa. Mas, se todo programador pensar nisso ao desenvolver os seus códigos, qualquer pessoa terá materiais acessíveis à sua disposição. Muito além das métricas, você ainda é um ser humano!

Use <table> ao invés de <div>

A tag <table> cria tabelas dentro de um elemento HTML e é o HTML quem o controla. Já a tag <div> define uma divisão em um documento HTML e só é controlada pelo CSS. O fato de que as table’s são controladas pelo HTML já justifica o seu uso nos e-mails. Outra justificativa  é que a maior parte dos provedores de e-mail não renderiza as div’s.

Momento: Dica especial

Em nosso último post, falamos que o ideal é balancear o template entre texto e imagem. Mas, se você tem pouco conhecimento em HTML para criar toda o texto em caracteres ou não dispõe de muito tempo, veja agora uma dica especial:

Primeiro, fatie o seu template separando o texto dos demais elementos. Veja neste post como fatiá-lo através do Fatia Imagem.

Neste exemplo, o texto entre o pontilhado vermelho será fatiado.

fatiar-imagem-html-mais-limpo Dicas para deixar o HTML mais limpo para E-mail Marketing

Após fatiado, copie o código HTML, na <table> onde o texto se encontra. Altere a tag <img> </img> para <p> </p>, desta maneira:

<table border=’0′ align=’center’ cellpadding=’0′ cellspacing=’0′ bgcolor=’#FFFFFF’>
    <tr>
    <td>
<img style=’display:block;’ src=’link_da_imagem.jpg’ height=’286′ alt=”>
     </td>
     </tr>
     </table>

Para:

     <img src=”smiley.gif” alt=”Smiley face” height=”10%” width=”10%”>

<table border=’0′ align=’center’ cellpadding=’0′ cellspacing=’0′ bgcolor=’#FFFFFF’>
    <tr>
    <td>

   <p style=’display:block;’ height=’286′>
   Oi! tudo bem?
   Olha só, você esqueceu de algumas peças. :(

   Mas não tem problema, você pode completar a sua compra por aqui mesmo, só clicar no botão abaixo!
   Boas compras!
    </p>

     </td>
     </tr>
     </table>

Feito isso, o seu texto, antes imagético, passa a ser em caracteres. Além disso, você balanceou rapidamente o seu template, evitando um futuro spam! ;D

Se suas imagens não carregam, pelo menos o seu texto será visualizado pelo contato.

Espero que essas dicas lhe ajudem na criação dos seus templates com HTML mais limpo. E não se esqueça de avaliar os relatórios no fim das campanhas, para  aprimorar as suas técnicas de e-mail marketing cada vez mais.

Até mais!

                         fatiar-imagem-html-mais-limpo Dicas para deixar o HTML mais limpo para E-mail Marketing

José Augusto 

Analista de E-mail Marketing

blog@raffcom.com.br


Cadastre seu e-mail

Coloque o seu e-mail ao lado para receber as atualizações do blog!

Fique tranquilo, pois nós também odiamos spam. Seu endereço de e-mail não será vendido ou compartilhado.

Continue lendo

A Raff em livros – Parte II

Uma parte dos nossos criativos abriram seus corações  e compartilharam conosco o nome de um livro e tudo o que essa obra representa para cada um deles. Ficou curioso? Confira a segunda parte da nossa lista e inspire-se! O livro ‘Oceano no Fim do Caminho’ foi escrito por Neil Gaiman, que é muito conhecido por suas incríveis […]

11 anúncios do Facebook seus objetivos

Por ser a maior rede social do mundo, saber a forma correta de utilizar os anúncios do Facebook é de suma importância no marketing digital, para que você possa alavancar os resultados da sua empresa de maneira eficaz. Neste post sobre as ferramentas de Social Ads que fazem toda a diferença nas campanhas, você pôde […]

Como contar histórias com a arte do Storytelling (Parte 1/2)

A melhor forma de potencializar uma ideia e vendê-la para o consumidor é através de uma boa história. Nos tempos modernos da comunicação, a utilização do storytelling tem sido cada vez mais frequente. Usada como um valioso recurso, o storytelling faz aquilo que os contadores de histórias já faziam há muito tempo: contar histórias com […]