Técnicas eficientes para criação de Email Marketing

Criar templates de email marketing não é tarefa das mais fáceis. Não tanto pelo design, pois há profissionais criativos e mais que competentes para criar peças chamosas e atraentes. Falo do ponto de vista técnico, que é o grande responsável pelo sucesso e eficiência do email marketing, afinal, tudo começa quando a mensagem é entregue na caixa de entrada. Se o email marketing não estiver tecnicamente preparado para isso, a comunicação com o destinatário é perdida.

Tudo bem, podemos combinar que a entrega na caixa de entrada não é de inteira responsabilidade do template, pois uma série de configurações e boas práticas também precisam ser seguidas pelo remetente para que isso ocorra, mas o template carrega a importância de transmitir corretamente a mensagem para os destinatários. A dúvida é: como fazer isso considerando as mais diversas aplicações de email que eles utilizam? Segue algumas dicas para aumentar o resultado e evitar distorções no email.

 

Assunto/Subject
Evite utilizar no “Subject”, “corpo” de sua mensagem, além do campo “De” de sua mensagem, palavras que possam ser interpretadas como SPAM.

Exemplos:

  • clique aqui
  • mailmkt
  • crédito
  • grátis
  • curso
  • de/para sua empresa
  • promoção

entre outros.

Obs.: O assunto em letras maiúsculas também faz com que o e-mail receba pontuação

Imagens
Sempre utilize url absoluta da imagem quando for utilizar imagens externas, por exemplo:

<img src=”http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg” border=”0″>

Nunca utilize URLs relativas, por exemplo:

<img src=”images/logo_locamail_marketing-1.jpg” border=”0″>

Evite utilizar uma única imagem grande como conteúdo do email pois isso é considerado como prática de spam.

Prefira quebrar a imagem em pedaços menores caso seu conteúdo só seja esse, e além disso utilizar mais textos na criação de suas mensagens.

Coloque sempre o atributo border=”0″ nas tags de imagem (<img>), pois, assim como os browsers, os programas de e-mail costumam colocar uma borda azul ao redor de imagens que tenham link

Tabelas
Utilize layouts baseados em tabelas ao invés de divs, como no padrão tableless, por mais que essa prática não seja recomendada na construção de sites, uma vez que a maior parte dos programas de e-mail não renderiza os atributos das tags

corretamente

  • Evite utilizar as propriedades colspan e rowspan nas tags <td>, pois alguns programas de e-mail não tratam da forma esperada
  • Prefira utilizar a propriedade width nas tags <td> ao invés de utilizar nas tags <table>, como no exemplo abaixo:

<table cellspacing=”0″ cellpadding=”10″ border=”0″> <tr>  <td width=”120″></td>  <td width=”480″></td> </tr></table>

Inserção de links

<a hef=”url_destino”>Texto</a>

Estilos (CSS)

  • Nunca utilize a tag <link> para referenciar um arquivo de estilos (.css), pois a maioria dos provedores removem essa tag.
  • Nunca utilize forma reduzida para definir um estilo, por exemplo ao invés de:

style=”font: 12px/16px Arial, Helvetica”

utilize:

style=”font-size:12px;line-height:16px;font-family:Arial, Helvetica;”

  • Não utilize a tag <style> com a definição das classes de estilo, pois alguns provedores removem essa tag (e diversos programas de e-mail não tratam esta tag). Caso insista em utilizar, coloque essa tag dentro da tag <body> e não dentro da tag <head>, mas neste caso você deve testar a mensagem em diversos programas de e-mail, para ver que ela não será distorcida. (não utilize as tags de comentário HTML <!– e –> dentro da tag <style> pois o editor HTML do Email Marketing irá distorcer todo código que estiver dentro dessas tags.</font>

Errado:

<style type=”text/css”><!–.bloco1_titulo { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; font-weight:bold; background-color:#333366; padding-left:10px; }–></style>

Certo:

<style type=”text/css”>.bloco1_titulo { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; font-weight:bold; background-color:#333366; padding-left:10px; }</style>

Prefira utilizar o CSS em sua forma “inline” ou seja, direto no código HTML, por exemplo:

<p style=”font-family:Arial; font-weight:bold;font-size:11px; color:red;”>texto</p>

Formulários
Evite utilizar formulários pois estes são bloqueados no Outlook e por vários provedores

Imagem de fundo
Antes, o hack do display:block era recomendado apenas para o Hotmail, que acrescenta alguns pixels ao redor de todas as imagens dos emails. Recentemente, o Gmail passou a se comportar de forma semelhante, então, o hack continua válido e, agora, para estes dois clientes de email. Em todas as imagens do template, acrescente (via CSS inline) o seguinte:

style=”display:block;”

Sempre declare as dimensões das imagens no template, pois o Outlook 2007 tende a expandir a largura de uma imagem sem este atributo para a largura de uma linha inteira.

Não esqueça do atributo alt nas tags de imagens relevantes, que transmitem uma mensagem. Não trate o template de email marketing como uma página da web que é otimizada para SEO e aplica uma mesma palavra-chave aos atributos alt de todas as imagens. No email marketing, cada imagem deve ter sua descrição real.

Lembre-se que imagens de fundo não funcionam em todos os clientes de email, então, se mesmo assim você decidir utilizá-las, lembre de inserir também uma cor semelhante como alternativa de fundo, pois se a imagem não for exibida, a cor permanecerá e não prejudicará as cores de seus textos e links. Já imaginou um email inteiro escrito em fonte branca, esperando-se que o fundo com imagem em preto seja renderizado? Se a imagem não for exibida, a cor preta de fundo ainda permitirá a leitura da mensagem.

Cor de fundo
Utilize a tag <div> com a propriedade background-color, e no style defina margin 0px para o body por exemplo:

<div><style>body{margin:0px;}</style></div><div style=”background-color: red; width: 100%; height: 800px;”> qualquer texto aqui</div>

obs: Neste caso, ajuste o parametro height para definir a altura da cor de fundo.

Outra maneira é utilizar a tag <td> com a propriedade bgcolor, por exemplo:

<table> <tr>  <td bgcolor=”red”>texto<br />dsadasdas </td> </tr></table>

Encoding
Prefira utilizar character encoding ISO-8859-1

Flash e Javascript
Nunca utilize Flash ou Javascript no corpo do Email pois estes são bloqueados pelos anti-virus dos principais provedores

Links
Que algumas aplicações de email sobrepõem os seus próprios estilos às mensagens de email, já não é novidade. Mas isso ocorre particularmente com links, e se você quiser que a cor de link que planejou inicialmente para seu template seja mantida em todas as aplicações de email, é melhor reforçar a declaração de cor de uma maneira redundante.

Ao invés da tag , você pode usar também a tag .
O efeito sublinhado em textos já é subentendido como um link, mas se você não quiser esse aspecto para os seus, utilize a declaração em CSS text-decoration:none;

Link vermelho sem sublinhado
O Gmail tende a transformar em link, “automaticamente”, todos os textos que se pareçam com um link. Mesmo que você tenha escrito algo como “eu.também”, esse trecho de texto será renderizado para o destinatário como um link no Gmail. Você não pode evitar que ele seja clicável, mas pode formatar sua aparência de forma que ele, pelo menos, não se pareça com um link. O mesmo vale para endereços de email. Não esqueça de formatá-los com a mesma cor e efeito dos demais links da mensagem, do contrário, ele será exibido no azul clássico e com sublinhado.

Cores
Evite abreviar cores hexadecimais (por ex. #fff ao invés de #ffffff) e declarações de fonte, que podem não funcionar em alguns clientes de email.

Essas são algumas das técnicas essenciais para templates de email marketing que têm as melhores intenções: entregar a mensagem corretamente a todos os destinatários, independente da aplicação de email que utilizem. Claro que existem muitas outras, mas que, se relatadas aqui, poderiam construir um verdadeiro manual de email marketing. Porém, seguir estas recomendações já é um passo e tanto em direção ao envio perfeito! Sucesso a todos!

Fontes: http://blog.abnix.com.br/tcnicas-eficientes-para-criar-templates-de-email-marketing/
        http://www.agenciadix.com.br/ajuda/faq/254/criando-um-e-mail-marketing-dentro-das-normas-anti-spam.html

	                    
	                

Comments are closed.