Boas práticas de HTML para Email

De Wiki Locaweb
Ir para: navegação, pesquisa


Este artigo tem como objetivo orientar sobre como otimizar o conteúdo de e-mails para eles não sejam tagueados como Spam.
Criar uma mensagem HTML não é o mesmo que criar uma página HTML, pois muitas tags costumam ser removidas pelos leitores de e-mail como Webmails e Outlook.
Existem algumas práticas que devem ser seguidas para que a mensagem não apareça distorcida para seus destinatários.
Porém não há como garantir que ao seguir essas práticas a mensagem chegará sem distorções para todos os provedores, pois estes alteram suas regras constantemente principalmente por motivo de segurança.
Salientamos que o envio de E-mail Marketing (e-mails em massa) utilizando o serviço Revenda não é permitido!

  • Se desenvolve o seu conteúdo por código HTML há algumas tags não recomendadas e outras tags que são aceitas, segue as listas das mesmas:

  • Tags não recomendadas
    <meta> Não serve para mensagens em HTML
    <title> É utilizado somente para páginas HTML, evite usar em mensagens
    <link> Evite usar ela para referenciar arquivos de css, o certo é usar css inline ou colocar as classes de css dentro do <style></style>
    <style> Alguns webmails como o Gmail por exemplo, removem esta tag

    Tags aceitas
    <a> <col> <h1> <meter> <small>
    <abbr> <colgroup> <h2> <nav> <source>
    <acronym> <command> <h3> <noframes> <span>
    <address> <datalist> <h4> <noscript> <strike>
    <applet> <dd> <h5> <object> <strong>
    <area> <del> <h6> <ol> <style>
    <article> <details> <head> <optgroup> <sub>
    <aside> <dfn> <hgroup> <option> <summary>
    <audio> <dir> <hr> <output> <sup>
    <b> <div> <i> <p> <table>
    <base> <dl> <img> <param> <tbody>
    <basefont> <dt> <input> <pre> <td>
    <bdo> <em> <ins> <progress> <textarea>
    <big> <embed> <kbd> <q> <tfoot>
    <blockquote> <fieldset> <keygen> <rp> <th>
    <br> <figcaption> <label> <rt> <thead>
    <button> <figure> <legend> <ruby> <time>
    <canvas> <font> <li> <s> <tr>
    <caption> <footer> <link> <samp> <tt>
    <center> <form> <map> <script> <u>
    <cite> <frame> <mark> <section> <ul>
    <code> <frameset> <menu> <select> <var>
    <video>

  • 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" alt="A imagem" width="500" height="50" />

  • Evite utilizar uma única imagem grande como conteúdo do e-mail pois isso é considerado como prática de SPAM.

  • Prefira utilizar mais textos na criação de sua mensagem, para que assim diminua a probabilidade da mesma ser considerada SPAM.

  • 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.

  • Não use imagens com extensão PNG que possuem áreas transparentes, pois não são aceitas em versões do Outlook anteriores a 2007, pois seu render engine é o mesmo que o do IE6, que não suporta PNG transparente. As áreas que deveriam ser transparentes são exibidas em cinza.

  • O atributo ALT oferece um texto alternativo quando alguma imagem não carrega ou não pode ser visualizada. Esse atributo é muito usado para melhorar a acessibilidade de uma página na web e principalmente de um E-mail Marketing, já que muitos clientes de e-mail bloqueiam as imagens enviadas por remetentes desconhecidos do destinatário. Nesta situação, a função do atributo é facilitar a “pré-leitura” para o usuário. O atributo alt pode ser formatado para a leitura ficar mais organizada.

  • Evite usar gifs animados.


  • 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 <div> 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>

  • Utilize sempre o atributo valig="top" para alinhar o conteúdo:

  • <table cellspacing="0" cellpadding="10" border="0">
     <tr>
      <td width="120" valign="top"></td>
      <td width="480" valign="top"></td>
     </tr>
    </table>


  • 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.)

    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>


    Dica de ferramenta para converter HTML em código com CSS inline: http://inlinestyler.torchboxapps.com

  • Evite utilizar charset no seu HTML, isso pode fazer com que alguns provedores desconfigurem o seu email.

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

  • Prefira utilizar a tag <td background>, por exemplo:


    <body> 
    <table border="0" cellpadding="0" cellspacing="0"> 
    <tr>
    <td background="http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg" width="767" height="830">lalal</td>
    </tr>
    </table>
    </body>

    Obs: Evite utilizar imagens de fundo, pois alguns provedores (como o Gmail por exemplo) e clientes de email não permitem a visualização da imagem.


  • 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>

  • Nunca utilize Flash ou Javascript no corpo do email pois estes são bloqueados pelos anti-virus dos principais provedores.
    Evite textos, expressões ou mensagens que contenham:

  • Termos quantitativos com a palavra “mais” seguida de uma exclamação (ex.: venda mais... durma mais... ganhe mais... )
  • Sorte acompanhado de interrogações
  • Termos sobre pechincha ou oportunidade única
  • Texto contendo termos sobre grande quantidade de pessoas (ex.: junte-se a comunidade do Facebook)
  • Termos sobre exclusividade como se a mensagem fosse apenas para você
  • Trocadilho do tipo 4you (for you)
  • Texto no assunto separado por pontos para burlar a filtragem (ex.: palavras do tipo P.R.O.M.O.Ç.Ã.O)
  • Satisfação garantida
  • Informando que não é um spam
  • Oportunidade única
  • Venda de listas de emails
  • Telemarketing

  • Caso queira saber outras expressões ou palavras que podem determinar sua mensagem como SPAM veja mais neste PDF.

Removendo espaço em branco entre linhas de uma tabela com imagens


Basta adicionar esse estilo no código fonte:

<style>img {display:block}</style>

  • O ideal é que o layout não ultrapasse 600px de largura, assim evita rolagem horizontal.

  • Use a ferramenta slice do Photoshop e faça recortes em blocos horizontais.

  • Evite mesclar colunas e linhas pelos atributos rowspan e colspan, ja que eles não são suportados pelo Microsoft Outlook 2007. Isso irá prejudicar a renderização correta da mensagem. Nesse caso use tabela dentro de tabela.

  • Para otimizar a entrega das mensagens, desenvolva o código HTML para que tenha até 30 kb. (evita pontuar no ranking de SPAM)

  • Se usar imagens de fundo para o corpo da mensagem, através de css inline background-image, saiba que elas não serão visualizadas por destinatários que utilizam Outlook e Hotmail, a solução é usar tambem background-color:#corSolida (cor próxima da imagem) pra não fugir muito do layout.

  • Para remover um sublinhado basta usar css inline: style=”text-decoration: none;” direto no link.

  • Teste seu template em diversos clientes de email. Ao criar um site, qualquer desenvolvedor deve testá-lo em vários navegadores. Para email marketing isso não é diferente, os destinatários usam uma ampla variedade de clientes de email e, você deve desenvolver um template que seja perfeitamente visualizado na maioria deles.

  • Evite utilizar no Assunto, Corpo ou Remetente 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 e entre outros.
Dica adicional: Você pode saber mais a respeito do que é SPAM no site do Comitê Gestor da Internet no Brasil, clicando aqui.


Veja também