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, é […]

Você sabe o que é Marketing Digital? Nunca vi, nem comi, eu só ouço falar

Neste artigo vou buscar detalhar alguns mitos e verdades sobre Marketing Digital e seu universo em uma totalidade. Estratégias de Marketing Digital são gratuitas? Geralmente sou questionado por algumas pessoas que, acabam perguntando se estratégias de Marketing Digital são de graça ou de baixo custo, primeiro grande mito. Não são de graça e se não […]

Passo a passo para criar públicos personalizados no Facebook e Instagram Ads

O pai do Marketing, Philip Kotler, confirmou muitas vezes que conquistar um novo cliente pode custar de 5 a 7 vezes mais caro do que manter um atual. Isso porque o cliente atual já absorveu a carga de convencimento necessária para comprar da sua empresa. Ele já conhece seu trabalho, seu atendimento, sabe que você […]

SEO on page: estratégias para subir sua posição no Google.

Garantir o destaque aos olhos dos usuários tem sido uma das grandes dificuldades das empresas. Afinal, com um número tão elevado de conteúdos disponíveis, como fazer com que o seu site conquiste um bom rankeamento no Google? A resposta é simples: com uma boa estratégia de SEO on page! E, neste conteúdo, você poderá conhecer […]