Renderização de E-mail Marketing


Mesmo com a tecnologia avançando tanto na área web, usuários e desenvolvedores ainda se deparam com diferenças de renderização entre os navegadores web. Não poderia ser diferente com os clientes de e-mails que não entendem certas tags HTML e seletores ou propriedades CSS.

Segue regrinhas básicas acerca dos softwares/clientes web de e-mails como: Gmail, Hotmail, Yahoo!, IG, Terra, UOL, BOL, Outlook Express, Windows Mail e Live Mail:

1. O CSS deve ser inline: escritos junto as tags HTML;

2. Evitar propriedades como float, clear, position, list-style-image e background-image;

3. Evitar tableless (<div>). Dê preferência pelo método tradicional de tabelas (<table>);

4. Não usar as tags HTML strong, em e del, para e-mails a serem disparados no Terra Mail. Todos os demais aceitam, com exceção a tag ol;

5. Não usar tags de formulários como form, input, textarea, etc. Prefira links (a href=””) para um URL externo, para que o formulário possa ser processado via HTTP;

6. Gmail, BOL e UOL suportam videos e animações em Flash, mas não é recomendado usar esse tipo de midia em e-mail marketing;

7. Não ultrapassar 23 caracteres, no campo de Assunto;

8. Não usar somente imagens no corpo do e-mail (<img>). É preciso ter pelo menos alguma frase em texto;

9. Não ultrapassar 600px de largura para não comprometer a área de visualização.

Siga-me no Twitter.

Tema Portal WordPress - PortalPress


3 Responses to “Renderização de E-mail Marketing”

  1. Felipe Ranieri

    É, são regrinhas básicas, tranquilas de serem seguidas, mas você concorda comigo que seria interessante se os e-mails suportassem html corretamente?

    Abraço

    Reply
  2. thalisvalle

    Acredito que um dia isso será possível. Ou seja, todos os clientes (softwares) de e-mail renderizar como browsers. Se acontecer será melhor para desenvolvedores que poderão trabalhar melhor com e-mail marketing.

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>