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 ostyle=""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.
Respostas:
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.
styleatributo se precisar usar CSS.float<a href="http://domain.tld">www.someotherdomain.tld</a>é ruim )Boa sorte ;)
Atualize para responder a outras perguntas:
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 .
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.
fonte
Sempre use o mime multiparte e forneça uma alternativa em texto simples.
fonte
O pessoal por trás do Campaign Monitor também iniciou um site do Email Standards Project com muitas informações boas.
fonte
Dê uma olhada neste boilerplate, é como html5boilerplate, mas para e-mails: http://htmlemailboilerplate.com/
fonte
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:
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)
fonte
fonte
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.
fonte
Incorpore suas imagens, não crie links para elas.
Isto é mau :
Isso é bom :
Sim, parece estranho, mas verifique este guia sobre a incorporação de imagens em e-mails .
fonte
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.
fonte