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!

                         jose-augusto-analista-de-e-mail-marketing

José Augusto 

Analista de E-mail Marketing

blog@raffcom.com.br

Cadastre seu e-mail
I agree to have my personal information transfered to MailChimp ( more information )
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

Estratégia em redes sociais: você está conversando com seu público-alvo

Conhecer a fundo o perfil do público-alvo — suas necessidades, desejos e motivações — é primordial para o desenvolvimento de qualquer estratégia em redes sociais de sucesso. No entanto, para muitas empresas, “acertar o tom” da conversa ainda é um grande desafio. Afinal, antes de investir em táticas de venda e apresentação do produto, é […]

Como iniciar um projeto de SEO de forma estratégica

Assim que adquirimos certo conhecimento em SEO, pensamos estar preparados para o início e/ou a participação de projetos na área. Mas antes de qualquer coisa, precisamos compreender intrinsecamente um ponto de extrema importância que compõe o escopo de qualquer projeto de SEO, a estratégia. Uma estratégia de SEO é composta por tudo aquilo que iremos realizar para […]

A Importância do Marketing Digital para a sua Empresa

É de senso comum que para ter sucesso em suas ações, uma companhia precisa estar sempre atenta aos hábitos dos consumidores, no intuito de chegar cada vez mais perto do seu público-alvo. E, graças a internet e a globalização, investir em marketing digital para a sua empresa tornou-se imprescindível para viabilizar essa aproximação. Partindo do […]

Páginas com erro 404 na experiência de usuário

Todo mundo já acessou uma página e apareceu erro 404 “not found”, não é mesmo? As páginas com erro 404 sempre foram consideradas algo terrível por todos, talvez por conta do seu layout pouco amigável. Porém, elas são apenas um aviso de que o servidor não conseguiu achar o destino em questão. Atualmente, essas páginas […]