Quais são as diretrizes para design de e-mail em HTML? [fechadas]

101

Quais diretrizes você pode dar para a formatação HTML avançada em emails, mantendo uma boa estabilidade visual em muitos clientes e interfaces de email baseadas na web?

Uma resposta não relacionada a uma pergunta no Stack Overflow sugeriu:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Que contém as seguintes diretrizes:

Coloque a folha de estilo em <body>vez de<head>
Alguns clientes de e-mail removerão o CSS do cabeçalho, mas o deixarão se o bloco de estilo estiver (inválido) no corpo.
Use estilos embutidos sempre que possível. O
Gmail removerá qualquer folha de estilo, seja no <head>ou no <body>, mas respeite os estilos embutidos atribuídos usando o style=""atributo
Retornar às tabelas Os
padrões de e-mail realmente deram um passo gigantesco para trás nos últimos anos, graças ao Outlook 2007 que usa o mecanismo de renderização do Microsoft Word. Aprenda a maior parte do que você aprendeu sobre posicionamento sem folhas de estilo.
Não confie em imagens
A maioria dos clientes e a maioria dos clientes de e-mail baseados na web não exibirão imagens, a menos que o usuário solicite especificamente que elas sejam exibidas.

Também tenho algumas verdades "não confirmadas" que não me lembro onde as li.

Não use mais de dois níveis de aninhamento nas tabelas.
Isso é verdade. O que provavelmente acontecerá se eu fizer isso? Existe algum cliente / clientes em particular que engasga com isso?
Tenha cuidado ao aninhar imagens de fundo em células / tabelas
Pelo que entendi, você pode encontrar situações em que a imagem de fundo é aplicada na tabela / célula descendente completamente de novo, e não apenas "brilhando". Novamente, é verdade ou não? Quais clientes?

Eu gostaria de detalhar esta lista com mais diretrizes e experiências das trincheiras.

Você pode oferecer mais sugestões?

Atualização: estou pedindo especificamente diretrizes para a parte de design em HTML e sua consistência. Perguntas sobre diretrizes gerais para evitar filtros de spam e cortesia comum já estão no SO.

html email

— kaa
fonte

Aqui está uma grande lista de recursos sobre uma questão muito semelhante .

— John

63

Na verdade, é muito difícil fazer um e-mail em HTML decente, se você abordar isso de uma perspectiva de 'HTML e CSS moderno'.

Para obter melhores resultados, imagine que é 1999.

Volte às tabelas para o layout (ou de preferência - não tente nenhum layout complexo)
Tenha medo de imagens de fundo (elas quebram no Outlook 2007 e no Gmail).
A coisa do estilo-etiqueta-no-corpo é porque o Hotmail costumava aceitá-lo dessa forma - tenho quase certeza de que agora eles o retiraram. Use estilos embutidos com o styleatributo se precisar usar CSS.
Esqueça inteiramente sobre float
Lembre-se de que suas imagens provavelmente serão bloqueadas - use a cor de fundo e do texto a seu favor - certifique-se de que haja algum texto legível com as imagens desativadas
Tenha muito cuidado com os links, seja especialmente cuidadoso com qualquer coisa que se pareça com um URL no texto do link - você irritará os filtros de 'phishing' (por exemplo, <a href="http://domain.tld">www.someotherdomain.tld</a>é ruim )
Lembre-se de que a "dobra" nos clientes de webmail tende a ser extremamente alta na página (em uma tela de 1024x768, a maioria das interfaces não mostra mais do que cem pixels ou mais) - coloque suas coisas de identidade bem no topo para que o destinatário sabe quem você é.
A versão recente do Outlook tem um painel de visualização "retrato" que é significativamente mais estreito do que você pode esperar - seja muito cauteloso com layouts de largura fixa, se precisar usá-los, torne-os o mais estreitos possível.
Nem pense em flash, Javascript, SVG, canvas ou qualquer coisa assim.
Teste muito. Certifique-se de testar em um Outlook recente (as coisas mudaram muito! Agora ele usa o Word como seu mecanismo de renderização de HTML, e é deficiente: suporte a HTML / CSS do Word 2007 ). O Gmail também é muito meticuloso. Surpreendentemente, o webmail do Yahoo é extremamente bom, com bom suporte a CSS.

Boa sorte ;)

Atualize para responder a outras perguntas:

Não use mais de dois níveis de aninhamento em tabelas

Acredito que esta seja uma diretriz mais antiga referente ao Lotus Notes. Tabelas aninhadas devem ser adequadas , mas realmente, se você tiver um layout complicado o suficiente para precisar delas, provavelmente terá problemas de qualquer maneira. Mantenha seu layout simples .

Tenha cuidado ao aninhar imagens de fundo em células / tabelas

Isso pode estar relacionado ao acima, e o mesmo se aplica, se você está ficando tão complicado, então você terá problemas. As versões recentes do Outlook não oferecem suporte a imagens de fundo, portanto, é melhor esquecê-las totalmente.

— Dan
fonte

3

Por que o suporte a e-mails HTML não evoluiu tanto? Por que devemos continuar a implementar todas essas más práticas, como se estivéssemos em 1999?

— smonff

Há uma solução alternativa para oferecer suporte a bgimages stackoverflow.com/a/17358553/413032 . Alternando um ms-word html. @ Smonff Concordo totalmente com você. ........ Por que um html renderizado pelo MS-Word!

— Davut Gürbüz

1

verifique Email Coding 101 no litmus, espero que ajude.

— shaijut

13

Sempre use o mime multiparte e forneça uma alternativa em texto simples.

— JeeBee
fonte

9

O pessoal por trás do Campaign Monitor também iniciou um site do Email Standards Project com muitas informações boas.

— John Sheehan
fonte

3

Dê uma olhada neste boilerplate, é como html5boilerplate, mas para e-mails: http://htmlemailboilerplate.com/

— Welldan97
fonte

Ops, acabou agora.

— Sean McMillan

2

Acho que este é um nível inferior à pergunta que você está fazendo, mas se você realmente deseja que um e-mail html seja visualizado corretamente pelo maior número possível de clientes, certifique-se de que esteja usando um MIME válido. Em particular, para que um e-mail seja considerado MIME válido, os cabeçalhos DEVEM (no sentido RFC da palavra) conter os dois cabeçalhos:

MIME-Version:
Content-Type:

Clientes muito restritos exibirão seu HTML como texto bruto se um ou outro estiver faltando. Você ficaria surpreso com a quantidade de grandes fornecedores on-line que deveriam saber melhor que estragaram tudo (notavelmente, recebi e-mails em HTML com versão MIME ausente: cabeçalhos da Amazon e do ACM no passado)

— jj33
fonte

1

As imagens de fundo não são confiáveis.
Praticamente um acéfalo, mas sem javascript .
Use um editor que permite enviar o arquivo / buffer atual como um e-mail ou, pelo menos, encontre um programa que permita enviar o conteúdo de um arquivo como um e-mail HTML. não teste seus e-mails copiando o HTML e colando-o no Outlook (ou em qualquer outro programa de e-mail).

— Jonathan Arkell
fonte

1

Três palavras de conselho: teste, teste, teste.

Confira o serviço de teste de e-mail da LitmusApp.com. Você envia uma mensagem a eles e eles a processam em um grupo de clientes e mostram capturas de tela dos resultados. Não é perfeito, mas é muito bom.

(A propósito, o Lotus Notes anterior ao 8.0 realmente fede para correio HTML)

Além disso, além de apenas estilos CSS embutidos, eu recomendo mudar para tags sempre que possível.

— Eli
fonte

1

Incorpore suas imagens, não crie links para elas.

Isto é mau :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Isso é bom :

<img src=cid:myImage/>

Sim, parece estranho, mas verifique este guia sobre a incorporação de imagens em e-mails .

— Andrei Rînea
fonte

0

Se você estiver incluindo um bloco de estilo, não comece nenhuma nova linha com ".classname" ou "." qualquer coisa. Coloque uma cinta ou algo assim antes do período. Se você não fizer isso, alguns sistemas de webmail não exibirão suas folhas de estilo adequadamente.

Muitas pessoas assumiram incorretamente que não podem usar blocos CSS em e-mails por causa deste comportamento ... IIRC "." é o delimitador de corpo para SMTP. Os sistemas tendem a escapar em seus armazenamentos de correio para evitar que o conteúdo de uma mensagem seja mal reconhecido como uma nova mensagem. A maneira como isso é tratado tende a quebrar qualquer estilo, começando em uma nova linha com um ponto final.

— Einstein
fonte