patrocínio:

Boas práticas para E-mail Marketing

Algumas dicas práticas para codificação de email marketings.

por Deivid Marques 08/08/2012 Comentários ~ 4 min. / 805 palavras

Você que é do tempo do html feito somente em tabelas, acompanhou das mudanças dos padrões web ou senão conheceu essa época, mas mesmo assim sofreu muito com o IE6, acredite, montar E-mail Marketing é um pouco pior que isso tudo junto. Mas calma, deixarei algumas dicas e boas práticas, evitando assim muito do seu sofrimento.

Em resumo: E-mail Marketing é uma estratégia muito eficiente e útil para manter os visitantes ligados ao site e aumentar a taxa de conversão, mas isso tudo não tem resultado se sua newsletter chega quebrada ou mesmo se for direto para a caixa de SPAM.

Na montagem desse html não adianta seguir as melhores práticas de padrões web. Os clientes de e-mail não aceitam muitos dos atributos do CSS e nem conhecem as novas tags do HTML5.

HTML:

E-mail Marketing é pura tabela. Tabelas são chatas, mas nesse caso, são a única saída por enquanto.

Utilize sempre o atributo valig=”top”.

<tr>
    <td valign="top" width="350"></td>
    <td valign="top"></td>
</tr>

Sobre os tipos de Doctype suas diferenças de renderização, vocês podem conferir 3 testes realizados pelo site Campaign Monitor.

CSS

Evite usar CSS externo. Alguns clientes de e-mail não aceitam. Tanto no HEAD, quanto no BODY.

Utilize CSS inline (direto no elemento), porém não abuse de propriedades como position, float e etc…

<td style="font-size:18px; color:#666666"; font-family: Arial, Verdana, Tahoma;">Texto </td>

Alguns atributos de fontes funcionam em todos os clientes de e-mail, assim como: cores, line-height, font-size, entre outros.

Não use style=”color: #fff”;

Use style=”color: #ffffff”;

Use sem medo o atributo border:

<span style="border: 5px solid #000000">texto</span>

Veja a tabela de atributos CSS suportados por diversos clientes de e-mail.

http://www.campaignmonitor.com/css/

Imagens

  1. Todas as imagens devem ter display:block, assim evita que o Gmail e o Hotmail acrescentem um espaçamento entre elas.
  2. Utilize url absoluta da imagem em seu html, além da sua altura e largura. <img src="http://www.exemplo.com.br/imagem.jpg" alt="A imagem" width="500" height="50" />
  3. 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.
  4. 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 email marketing, já que muitos clientes de email 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.
  5. Não que seja proibido, mas evite user gifs animados.

Javascript e Flash

Parece meio óbvio, mas nunca utilize Javascript ou Flash. Estes são bloqueados pelos anti-virus dos principais provedores.

Confira mais dicas e boas práticas para o desenvolvimento do seu e-mail marketing:

  1. O ideal é que o layout não ultrapasse 600px de largura, assim evita rolagem horizontal.
  2. Use a ferramenta slice do Photoshop e faça recortes em blocos horizontais.
  3. 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).
  4. Para otimizar a entrega das mensagens, desenvolva o código HTML para que tenha até 30 kb. (evita pontuar no ranking de spam)
  5. Não esqueça de preencher a tag do documento HTML. Muitas ferramentas antispam verificam o conteúdo desta tag e, caso ela esteja vazia ou preenchida com expressões suspeitas, sua mensagem pode ser pontuada como spam.</li> <li>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, usando assim o conceito “<a href="http://tableless.com.br/bem-vindo-a-xangrila-parte-1/">Progressive Enhancement</a>“.</li> <li>Para remover um sublinhado basta usar css inline: <em>style=”text-decoration: none;”</em> direto no link.</li> <li><p>Existem diversas palavras que devem ser evitadas no corpo do e-mail, caso ao contrário ele irá direto para a caixa de spam.</p> <p>Conheça algumas delas: <a href="http://emailmarketing.virtualtarget.com.br/dicas/quais-as-palavras-que-devem-ser-evitadas-no-email-marketing" target="_blank"><a href="http://emailmarketing.virtualtarget.com.br/dicas/quais-as-palavras-que-devem-ser-evitadas-no-email-marketing">http://emailmarketing.virtualtarget.com.br/dicas/quais-as-palavras-que-devem-ser-evitadas-no-email-marketing</a></a>.</p></li> <li><p>Teste seu template em diversos clientes de email.</p> <p>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.</p> <p>– Ferramenta gratuita para enviar e-mails.</p> <p><a href="http://putsmail.com" target="_blank"><a href="http://putsmail.com">http://putsmail.com</a></a></p> <p>– Ferramenta paga, porém muito útil, ele testa seu html em todos os clientes de e-mail e retorna um print.</p> <p><a href="http://litmus.com/" target="_blank"><a href="http://litmus.com/">http://litmus.com/</a></a></p></li> <li><p>Mesmo que seu html esteja lindo e perfeito, ele pode cair no SPAM.</p> <p>Conheça a tabela de regras antispam.</p> <p><a href="http://emailmarketing.virtualtarget.com.br/uploads/2008/04/tabela_de_pontos1.pdf" target="_blank"><a href="http://emailmarketing.virtualtarget.com.br/uploads/2008/04/tabela_de_pontos1.pdf">http://emailmarketing.virtualtarget.com.br/uploads/2008/04/tabela_de_pontos1.pdf</a></a></p></li> </ol> <p>Veja os clientes de e-mail mais utilizados:</p> <p><a title="Saiba mais" href="http://www.ecommercebrasil.com.br/artigos/os-clientes-de-e-mail-mais-utilizados-pelos-usuarios/" target="_blank"><img src="http://anyzamaro.com.br/uploads/2011/10/emailmarketing1.jpg" alt="Clientes de e-mail mais utilizados" /></a></p> <p>Para aprofundar-se melhor sobre o assunto, segue links de referências:</p> <ul> <li><a href="http://www.campaignmonitor.com/blog/">http://www.campaignmonitor.com/blog/</a></li> <li><a href="http://blog.templateria.com/html/">http://blog.templateria.com/html/</a></li> <li><a href="http://www.campaignmonitor.com/css/">http://www.campaignmonitor.com/css/</a></li> <li><a href="http://emailmarketing.virtualtarget.com.br/">http://emailmarketing.virtualtarget.com.br/</a></li> </ul> </article> <div class="tb-related-posts"> <h3>Leia mais aqui no Tableless:</h3> <ul> <li><a href="/css3-trabalhando-com-multiplas-imagens-background-images/?utm_source=tablelessRelatedLink" class="tb-related-post">CSS3 — Trabalhando com Múltiplas imagens background-images</a></li> <li><a href="/email-marketing-testes-css-inliner-parte-2/?utm_source=tablelessRelatedLink" class="tb-related-post">Email Marketing – Testes e CSS Inliner – Parte 2</a></li> <li><a href="/formulario-responsivo-com-mailchimp/?utm_source=tablelessRelatedLink" class="tb-related-post">Formulário responsivo com MailChimp</a></li> <li><a href="/simples-modal-com-css-responsivo/?utm_source=tablelessRelatedLink" class="tb-related-post">Simples modal com CSS responsivo</a></li> <li><a href="/destaques-responsivos/?utm_source=tablelessRelatedLink" class="tb-related-post">Destaques responsivos</a></li> </ul> </div> <div class="tb-banner-article"> <script class='__lxGc__' type='text/javascript'> ((__lxGc__=window.__lxGc__||{'s':{},'b':0})['s']['_210746']=__lxGc__['s']['_210746']||{'b':{}})['b']['_609152']={'i':__lxGc__.b++}; </script> </div> <div class="tb-comments"> <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = "https://tableless.com.br/boas-praticas-para-e-mail-marketing/"; this.page.identifier = 797262658 ; }; (function() { var d = document, s = d.createElement('script'); s.src = 'https://tableless.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> </section> <aside class="tb-aside"> <div class="tb-banner-sidebar" id='div-gpt-ad-1514953930189-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1514953930189-0'); }); </script> </div> <h2>Você vai gostar de ler:</h2> <ul> <li><a href="/css3-trabalhando-com-multiplas-imagens-background-images/?utm_source=tablelessSidebarRelatedLink" class="tb-sidebarrelated-post">CSS3 — Trabalhando com Múltiplas imagens background-images</a></li> <li><a href="/email-marketing-testes-css-inliner-parte-2/?utm_source=tablelessSidebarRelatedLink" class="tb-sidebarrelated-post">Email Marketing – Testes e CSS Inliner – Parte 2</a></li> <li><a href="/formulario-responsivo-com-mailchimp/?utm_source=tablelessSidebarRelatedLink" class="tb-sidebarrelated-post">Formulário responsivo com MailChimp</a></li> <li><a href="/simples-modal-com-css-responsivo/?utm_source=tablelessSidebarRelatedLink" class="tb-sidebarrelated-post">Simples modal com CSS responsivo</a></li> <li><a href="/destaques-responsivos/?utm_source=tablelessSidebarRelatedLink" class="tb-sidebarrelated-post">Destaques responsivos</a></li> </ul> <h2>Últimos posts</h2> <ul> <li><a href="/classificando-o-conteudo-do-stack-exchange-parte-2//?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Classificando o conteúdo do Stack Exchange - Parte 2</a></li> <li><a href="/os-dois-front-ends-designer-e-engineer-parte-3-questionando-as-responsabilidades-de-um-front-end//?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Os dois front-ends: designer e engineer — Parte 3: Questionando as responsabilidades de um front-end</a></li> <li><a href="/classificando-o-conteudo-do-stack-exchange-parte-1//?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Classificando o conteúdo do Stack Exchange - Parte 1</a></li> <li><a href="/deploy-apps-zeit//?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Deploy grátis de aplicações na cloud com o Now</a></li> <li><a href="/os-dois-front-ends-designer-e-engineer-parte-2-os-dois-perfis//?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Os dois front-ends: designer e engineer — Parte 2: Os dois perfis</a></li> </ul> <h2>Categorias</h2> <ul> <li><a href="/categories/tecnologia-e-tend%C3%AAncias" class="tb-categ-link">tecnologia-e-tendências</a> (318)</li> <li><a href="/categories/geral" class="tb-categ-link">geral</a> (307)</li> <li><a href="/categories/artigos" class="tb-categ-link">artigos</a> (300)</li> <li><a href="/categories/t%C3%A9cnicas-e-pr%C3%A1ticas" class="tb-categ-link">técnicas-e-práticas</a> (274)</li> <li><a href="/categories/javascript" class="tb-categ-link">javascript</a> (241)</li> <li><a href="/categories/c%C3%B3digo" class="tb-categ-link">código</a> (218)</li> <li><a href="/categories/browsers" class="tb-categ-link">browsers</a> (208)</li> </ul> <div class="tb-banner-sidebar tb-banner-bottom"> <div id='div-gpt-ad-1531950769897-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1531950769897-0'); }); </script> </div> </div> </aside> </div> <div class="tb-sponsors-footer"> <p>Este site é apoiado por:</p> <ul> <li><a href="https://www.alura.com.br/?utm_source=tableless&utm_medium=logo&utm_campaign=patrocinio&utm_content=Tableless" class="tb-sponsor-logo" data-sponsor-trigger="footer" data-sponsor="alura"><img alt="alura - patrocinador oficial do Tableless" src="/images/sponsor/logo-alura.png"></a></li> <li><a href="https://king.host/?utm_source=tableless&utm_medium=logo&utm_campaign=patrocinio&utm_content=Tableless" class="tb-sponsor-logo" data-sponsor-trigger="footer" data-sponsor="kinghost"><img alt="kinghost - patrocinador oficial do Tableless" src="/images/sponsor/logo-kinghost.png"></a></li> </ul> </div> <footer id="tb-footer"> <div class="tb-container"> <ul class="tb-social-links"> <li><a rel="noopener" href="https://facebook.com/tablelessbr">Facebook</a></li> <li><a rel="noopener" href="https://twitter.com/tableless">Twitter</a></li> <li><a rel="noopener" href="http://www.specificfeeds.com/tableless?subParam=followPub" type="application/rss+xml" class="tb-ico-rss">RSS</a></li> <li><a rel="noopener" href="https://medium.com/tableless">Medium</a></li> </ul> <div class="tb-nav-footer"> <nav> <h3>Sobre</h2> <a href="https://tableless.com.br/sobre-nos/" class="tb-link-footer">Sobre o Tableless</a> <a href="https://tableless.com.br/contato/" class="tb-link-footer">Contato</a> <a href="https://tableless.com.br/anuncie-no-tableless/" class="tb-link-footer">Anuncie</a> <a href="https://tableless.com.br/seja-um-autor/" class="tb-link-footer">Seja um Autor</a> <a href="https://tableless.com.br/servicos/" class="tb-link-footer">Fazemos código front-end</a> </nav> <nav> <h3>Acompanhe</h3> <a href="https://www.eventials.com/tableless/" rel="noopener" title="Assista algumas vídeo aulas" class="tb-link-footer">Webinars</a> <a href="http://forum.tableless.com.br/" rel="noopener" title="Pergunte e resposta perguntas no nosso Fórum" class="tb-link-footer">Fórum</a> <a href="https://medium.com/tableless/" rel="noopener" title="Acompanhe artigos no Medium" class="tb-link-footer">Canal no Medium</a> <a href="https://telegram.me/tableless" rel="noopener" title="Acompanhe notíficas e novos posts no Telegram" class="tb-link-footer">Canal no Telegram</a> </nav> <nav> <h3>Comunidade</h3> <a href="https://br.udacity.com/course/react-nanodegree--nd019/?utm_source=tableless&utm_medium=linkFooter&utm_campaign=tableless_footer&utm_content=Tableless" rel="noopener" title="">Udacity | Curso de React</a> <a href="https://github.com/femug/femug" rel="noopener" title="Encontro Front-end no Brasil inteiro">Femug</a> <a href="https://www.meetup.com/pt-BR/CSS-SP/" rel="noopener" title="Encontro de CSS em São Paulo">MeetupCSS</a> <a href="http://zofe.com.br/" rel="noopener" title="Ouça um Podcast brasileiro sobre Front-end">Podcast ZOFE</a> <a href="https://braziljs.org/" rel="noopener" title="Um dos maiores eventos de JavaScript e front-end do Brazil do Universo">BrazilJS</a> <a href="http://devnaestrada.com.br/" rel="noopener" title="Podcast brasileiro sobre desenvolvimento web">DevNaEstrada</a> <a href="https://github.com/frontendbr/" rel="noopener" title="Portando qualquer coisa relacionada ao mundo frontender para o Github">Front-End Brasil</a> </nav> </div> <p class="tb-for-community"> Escrito pela e para a comunidade web brasileira. <a href="https://tableless.com.br/seja-um-autor/" class="tb-link-help">Ajude</a>.<br> <small><a href="#" onclick="if(window.__lxG__consent__ !== undefined) {window.__lxG__consent__.showConsent()} else {alert('This function only for users from European Economic Area (EEA)')}; return false"> Change privacy settings </a></small> </p> </div> </footer> <script id="dsq-count-scr" src="//tableless.disqus.com/count.js" async></script> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-335027-1', 'auto'); ga('send', 'pageview'); </script> <script async src='//www.google-analytics.com/analytics.js'></script> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MBKHDNC" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-28524234-22"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-28524234-22'); </script> </body> </html>