Qual a diferença do HTML para e-mail marketing e HTML para website?

Diferença entre HTML para e-mail marketing e para siteCom o tempo a criação de websites foi evoluindo e forçando os navegadores (exceto IE) a seguirem padrões e melhorar a renderização do HTML, passando para o conceito de Tableless, ou seja, sem tabelas. Os sites hoje são desenvolvidos usando DIVs e CSS e dessa forma temos mais e melhores efeitos visuais, além de facilitar na manutenção posterior do site.

No e-mail não temos o mesmo conceito e é onde está tudo errado. Adaptar um site à quatro, cinco, seis navegadores é fácil, mas adaptar um e-mail à centenas de clientes de e-mails e webmails? Diante disso temos algumas (muitas) restrições para criar um e-mail em HTML. Abaixo vou citar as mais importantes…

Esqueça o conceito Tableless

Diferente do HTML para sites, o e-mail precisa ser criado em tabelas. A melhor forma de diagramar seu e-mail marketing para que sua peça seja exibida corretamente na maioria dos clientes de e-mail é criando sua peça em tabelas.

CSS, somente inline

Hoje em dia o site é praticamente feito baseado em CSS. Com ele é possível dar forma, cores, estilo ao site, mas no e-mail não é assim. Em um website pode-se usar CSS Incorporado (dentro HEAD), CSS Importado (outro arquivo) e CSS Inline (nas próprias tags). Já o e-mail só se pode usar CSS Inline e mesmo assim nem todas as propriedades utilizadas em um website.

Fontes diferentes das comuns

Em um website, é possível usar qualquer fonte. Através do CSS é possível exibir para seus usuários uma fonte, mesmo que ele não tenha ela instalada em seu computador. No e-mail isso não é possível, ou seja, o ideal é usar Arial, Verdana, Times New Roman, etc. para que todos consigam visualizar da mesma maneira.

Efeitos visuais

Efeitos como, sombra em fontes, bordas arredondadas, degradê, hover (mudar de cor ao passar o mouse, por exemplo) e outros são possíveis em um website, mas no e-mail não é possível. Alguns clientes de e-mail até suportam algumas coisas, mas a grande maioria não. Portanto, usar é ruim, pois pode desconfigurar toda uma mensagem por conta de um efeito.

Imagens com endereços relativos

Não é necessário inserir o endereço absoluto da imagem, ou seja, não é necessário colocar desde o HTTP até a extensão da imagem, sendo possível fazer algo assim: “imagens/minha_imagem.jpg”, pois ao abrir um site, você busca o HTML no servidor onde encontra o site e no HTML estão os endereços relativos das imagens, já que estão no mesmo servidor. No e-mail não é possível, pois ao enviar uma mensagem, você está enviando o HTML completo e nesse caso, precisa do endereço completo da imagem para o cliente de e-mail conseguir localizar ela.

Diferença entre endereço relativo e absoluto

Alternativo: imagens/minha_imagem.jpg
Absoluto: http://www.meusite.com.br/imagens/minha_imagem.jpg

Se não usar o endereço ABSOLUTO da imagem em suas peças elas não irão aparecer para o destinatário, ok?

Por que é mais difícil criar um bom template do que um bom site?

Simples. Quantos navegadores você conhece? Cinco? (Chrome, IE, Firefox, Opera, Safári) Talvez mais.
Agora, quantos clientes de e-mail você conhece? Vinte? Trinta?

É essa a pequena diferença. Se seu site não ficar legal no Safári, tudo bem. E se seu e-mail marketing não ficar legal no Gmail, Hotmail, Outlook, Thunderbird, Yahoo Mail, UOL Mail?

Existem mais clientes de e-mail do que navegadores e cada um renderiza da forma que achar melhor.

Eu acho que o Gmail é um dos melhores clientes de e-mail web, mas a ferramenta de renderização é uma das piores. Não dá suporte a quase nada de CSS. O hotmail então? Nem borda ele compreende. É verdade. Por isso, quando criar seu template teste ele em quantos clientes de e-mail forem possíveis.

Tem uma galera lutando pela padronização das ferramentas de renderização nos clientes de e-mail e que até exibem quais clientes de e-mails são bons ou ruins para esta tarefa. O site é o www.email-standards.org (inglês). Acesse-o e veja como andam as coisas nesse quesito.

Bom, é isso.
Já sabe. Dúvida deixe seu comentário.

Abraço e até a próxima!

Avalie este artigo:
Qual a diferença do HTML para e-mail marketing e HTML para website?
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

2 Comentários

  1. Antonio Milton Soares disse:

    Ótimas informações, excelentes ferramentas; muito úteis para quem, como eu, adotou e mail marketing como uma ferramenta fundamental de comunicação, vendas e relacionamento.
    Obrigado por disponibilizar.

  2. Douglas W. P. disse:

    Ótimo! Estou devorando as informações 😀

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