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:
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

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!