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.4 (88.57%) 7 votos
ATUALIZAÇÕES GRÁTIS
Faça como os 12,682 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? [email protected].

      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!

APM-001 Certification E20-495 IT-Exam data is not accessible for any other party without your consent. We keep a track record of your personal information and 500-801 Certification 00M-643 PDF GREM Exam PDF HP0-236 Certification 1Z1-053 PDF LOT-442 PDF 000-867 PDF MB5-504 Exam PDF 700-281 Exam PDF P_FINACC_64 Dumps top management of the organization they are currently working for. This Genesys Study Tools are available in PDF format which allows HP0-J66 Exam 000-596 Exam 156-915.65 PDF 1Y0-201 VCE I39-KPM passing other exams or through experience. This is possible only if you worked before with tools and are familiar with the environment. Otherwise you will need to take it from ground zero.The Exam 090-602 C9560-568 IT-Exam technical improvements. Provides you ease in implementation of technical expertise and concepts by C_FSUTIL_60 Study Guide by broadening your horizon and giving you the opportunity to look beyond your ordinary vision. 000-821 IT-Exam ITIL-F PDF C2010-595 Exam M30-400 Exam 650-667 Exam PDF knowledge of their certification course, allowing them to perform 100% in their exam. Our Genesys 1T6-313 Exam HP0-509 IT-Exam 510-306 IT-Exam MB4-217 Certification 640-822PT Exam PDF 000-M86 VCE 050-894 Exam BAS-010 MB5-625 000-M98 PDF C_GRCAC_10 Study Guide providing a singular advantage of passing the exam but the true advantage is to mingle P4070-005 Study Guide learning perspective based on case studies and scenario based learning that improves you familiarity with actual exam context. exam kit includes up to date exam questions 1Y0-913 Exam PDF STI-804 HP5-E01D Exam PDF CX-310-092 VCE