Dicas de HTML para criar o template para seu email marketing

Esqueça o conceito tableless

Um template para e-mail é diferente de um pra website e deve ser tratado desta forma. Nos modelos atuais não se usa mais tabelas para criar sites, mas para o e-mail é o contrário.

Usa-se tabelas pois a grande maioria dos clientes de e-mails não dão suporte a CSS e DIVs como os navegadores. Então, diagrame seu template usando tabelas.

Template leve

Use sempre imagens leves e tente sempre equilibrar o texto e as imagens em seu template.

O uso de imagens pesadas ou muitas imagens fará com que seu e-mail demore para carregar e isso pode fazer com que o contato perca o interesse em sua peça.

Lembre-se que o uso de dispositivos móveis, como, celulares, têm crescido e quanto mais demorar para carregar sua mensagem, mais leitores perderá.

Tente deixar cada imagem com no máximo 100kb, mas quanto menor melhor. O ideal é que a soma de todas as imagens de sua mensagem fique dentro dos 100kB.

P.S.: Deixe elas com qualidade visual também, não reduza a qualidade dela ao ponto de ficar ilegível, ok?

CSS inline

Os clientes de e-mail atuais estão longe de chegar a perfeição, para quem recebe mensagens e para quem enviam e o suporte a CSS como em sites, pelo jeito, vai ficar para o final dos tempos, portanto, use sempre CSS inline, ou seja, na própria tag que deseja dar o formato.

Atualmente, alguns clientes de e-mail suportam CSS incorporado (declarado entre as tags <header> e </header>), mas com restrições ainda.

Imagens em servidores seguros

A algum tempo a Google fez uma alteração no protocolo de acesso aos usuários do Gmail, mudando de http (Hypertext Transfer Protocol) para https (Hypertext Transfer Protocol Secure) dessa forma, quando o contato abre uma mensagem com imagens externas em servidores http, ele recebe um aviso de que está abrindo uma conexão não segura em um ambiente seguro e isso fará com que muitos contatos não autorize a conexão, fazendo com que suas imagens não apareçam. Chato isso, mas é a realidade.

Nesse caso, coloque suas imagens em um ambiente seguro, https que assim o aviso não irá aparecer.

Cuidado de onde copia

Digo cuidado, pois quando se copia sempre vem, além do que copiou, códigos indesejados, principalmente quando se copia do MS Word.

Vejo muitas pessoas teimando em criar um template bonitinho no MS Word e quando o enviam chega todo desconfigurado.

Gente, o MS Word é um editor de texto e não de HTML ou templates para e-mail. Portanto, tentem não copiar coisas do Word e enviar que chegará diferente do que deseja.

Teste os links

Antes de enviar, teste sempre os links e vejam se eles estão apontando para o lugar certo ou se eles estão funcionando. Já recebi diversos e-mails com links apontando para páginas que não existem. Frustrante!

Bom, é isso pessoal.

Diferente das outras postagens, vou incentivar a usarem os comentários para tirarem dúvidas, pois eles servirão para outros leitores também.

Com informações Email Marketing com resultado

Avalie este artigo:
Dicas de HTML para criar o template para seu email marketing
5 (100%) 2 votos

ATUALIZAÇÕES GRÁTIS

Cadastre-se abaixo para receber no seu e-mail artigos legais como este!

Gostou? Compartilhe:

3 Comentários

  1. Anonymous disse:

    obrigado pelas dicas, foram esclarecedoras. voce pode indicar um programa para fazer templates que facil de utilizar? não tenho conhecimento na área e eu mesmo tenho feito meus emails marketing e preciso aprender a criar os templates.

  2. Samir disse:

    Boa Tarde,

    Muito Bom o artigo.

    Estou querendo ter um conhecimento mais aprofundado sobre HTML.

    Vi que a Impacta oferece alguns cursos. http://www.impacta.com.br/curso/HTML5-Fundamentos.php
    Gostaria da opinião de alguns de vocês.

    Obrigado.

    • Ademir Diniz disse:

      Olá, Samir.

      Primeiramente, obrigado por seu comentário.

      Não sei te afirmar se o curso é bom, pois não conheço a metodologia, mas eu dei uma olhada na grade do curso e ele é focado em HTML5. O e-mail ainda está atrás desta era. A grande maioria dos clientes de e-mail suportam HTML4 e de forma simples. Em tabelas.
      O curso irá te ajudar a ter conhecimentos em HTML, mas ainda assim precisará aprender a criar templates para campanhas de e-mail.
      Minha dica para começar é: Pegue um template simples e vá removendo cada linha de HTML e testando no seu navegador. Assim conseguirá entender pra que serve cada tag e propriedade do HTML. Com o tempo conseguirá criar um template do zero.

      Neste link, você terá um template e uma explicação do que significa cada tag. Comece por ele.
      http://www.emailmarketing.eti.br/blog/como-montar-um-e-mail-marketing-em/

      Abraço

Deixe seu comentário!