Dicas de HTML para criar o template para seu e-mail 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 com 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 perderá leitores.
Tente deixar cada imagem com no máximo 100kb, mas quanto menor melhor.
OBS: Deixem ela 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.

Veja um exemplo:

<p style="font-family: Arial; color: #ff0000">
	Meu texto em Arial e vermelho
</p>

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 algo 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 quanto 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. O meu FormSpring pode ser usado para perguntas também, se preferirem, ok?

Abraços e até a próxima!

Avalie este artigo:
Dicas de HTML para criar o template para seu e-mail marketing
4.43 (88.57%) 7 votos
ATUALIZAÇÕES GRÁTIS
Faça como os 12,610 leitores. Cadastre-se grátis!

Gostou? Compartilhe:

Ademir Diniz

Analista de Sistemas formado pelo ISES, especialista em E-mail Marketing e criador e mantenedor do blog sobre e-mail marketing www.EmailMarketing.eti.br

6 Comentários

  1. Larissa disse:

    Olá Ademir, boa tarde.
    Tenho uma dúvida.
    Uso uma assinatura de email no formato html, mas sempre que alguém abre ela no celular, ela fica toda desconfigurada. As linhas não ficam retas e as informações (nome, email, tel) ficam todas bagunçadas.
    Como eu poderia resolver isso?
    Grata,
    Larissa

  2. Claudia F. Sotoma disse:

    Olá Ademir,gostaria de saber se vc criaria um e-mail marketing para minha empresa, trata-se de um escritório de assessoria e consultoria.

    • Ademir Diniz disse:

      Boa tarde Claudia,

      Sim. Esse é um dos trabalhos que presto.
      Crio o template em HTML padronizado e de fácil alteração posterior, ou seja, você pode usar ele sempre que desejar, alterando apenas o texto e imagens que desejar.
      Para isso, preciso saber mais ou menos como deseja, ou se deseja que eu crie de acordo com minhas ideias e das imagens e textos. Se não tiver as imagens, posso procurar algumas gratis que se adequem a sua necessidade.

      O valor vai depender desses fatores, mas entre 50 a 70 reias, ok?
      Pode me mandar um e-mail com mais informações? ademirdiniz@ademirdiniz.com.br.

      Abraço

  3. Ademir Diniz disse:

    Clayton, em um post eu falo sobre uma ferramenta para edição de HTML, veja:
    http://www.ademirdiniz.com.br/2011/07/editor-de-html-para-voce-criar-ou-editar-seu-template-de-e-mail-marketing.html

    Também, administro outro site sobre templates que é: http://www.emailtemplates.com.br. Entra lá, baixa um de sua preferência e edita usando a ferramenta que tem no outro post ou com seu programa de e-mail mesmo. Se for enviar com o Gmail, por exemplo, edita com o próprio Gmail, entendeu?

    Abraço
    Qualquer dúvida, deixa um comentário aí.

  4. clayton disse:

    Ademir Li seu documento dandodicas para criação de emails.
    Tenho preocupações similares e por isso achei bastante produtivo o que você comentou.
    Para mim, que estou querendo criar email para fazer uma email marketing (não para milhões de endereços e sim para carteira de prospects) e como você já disse “não utilize word” gostaria que você indicasse alguma ferramenta (de preferência freeware) que contivesse alguns templates para que eu pudesse ser produtivo e não perca horas preparando modelos.
    Você pode sugerir alguma ferramenta que não o word ?
    Grato
    Clayton

Deixe seu comentário!