Práticas recomendadas para estilizar emails em HTML [fechado]

195

Estou criando um modelo HTML para um boletim informativo por email. Aprendi que muitos clientes de email ignoram folhas de estilo vinculadas e muitos outros (incluindo o Gmail) ignoram completamente as declarações de bloco CSS. Os atributos de estilo embutido são minha única opção? Quais são as práticas recomendadas para estilizar emails em HTML?

Joe Mornin
fonte
1
Aqui está uma grande lista de recursos em uma pergunta duplicada .
John

Respostas:

128

O Campaign Monitor possui uma excelente matriz de suporte, detalhando o que é suportado e o que não está entre os vários clientes de correio.

Você pode usar um serviço como o Litmus para ver como um email aparece em vários clientes e se eles são capturados por filtros, etc.

Jim
fonte
9
+1: Não sabia sobre o Litmus. Isso parece uma enorme economia de tempo. Obrigado: D E não se esqueça das postagens do blog no CampaignMonitor, que também inclui algumas dicas legais.
Horst Gutmann
249

Eu lutei a batalha de email em HTML antes. Aqui estão algumas das minhas dicas sobre estilo para obter a máxima compatibilidade entre clientes de email.

  • Estilos inline você é o melhor amigo. Absolutamente não vincule folhas de estilo e não use uma <style>tag (o GMail, por exemplo, retira essa tag e todo o seu conteúdo).

  • Contra seu melhor julgamento, use e abuse das tabelas . <div>s simplesmente não funciona (especialmente no Outlook).

  • Não use imagens de fundo , elas são irregulares e o incomodam.

  • Lembre-se de que alguns clientes de email transformam automaticamente hiperlinks digitados em links (se você não os ancorar <a>). Às vezes, isso pode causar efeitos negativos (por exemplo, se você estiver colocando um estilo em cada um dos hiperlinks para exibir uma cor diferente).

  • Tenha cuidado ao vincular um link real a algo diferente. Por exemplo, não digite http://www.google.come depois vincule-o https://gmail.com/. Alguns clientes sinalizam a mensagem como spam ou lixo eletrônico.

  • Salve suas imagens com o mínimo de cores possível para economizar no tamanho.

  • Se possível, incorpore suas imagens no seu email. O email não precisará entrar em contato com um servidor da Web externo para fazer o download e eles não aparecerão como anexos ao email.

E, finalmente, teste, teste, teste ! Cada cliente de email faz as coisas de maneira diferente do que um navegador faria.

Michael Irigoyen
fonte
2
Ao colocar uma cor de plano de fundo em um <div>, o Outlook não estenderá a cor além do conteúdo, o que significa que o preenchimento não será colorido.
Michael Irigoyen
70
Por que Internet? Por que não podemos ter html agradável para e-mails? shakes punho
simonlchilds
8
Para que possamos receber spam mais bonito?
Brock Hensley
6
@DavidRivers Talvez deva ser destacado que "imagens incorporadas" não significa adicionar imagens como anexos; elas devem ser incluídas como strings codificadas em base64 para substituir o URL mencionado nas <img>tags "normais" , como:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
Timo
3
@MJafarMash Essa é a maneira incorreta de incorporar imagens no email. Você precisa criar envelopes separados e consultar a imagem com base nela cid.
Michael Irigoyen
37

O chimpanzé de correio tem um artigo bastante interessante sobre o que não fazer. (Eu sei que parece errado o que você quer)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

Em geral, todas as coisas que você aprendeu e são práticas inadequadas para o design da web parecem ser a única opção para email em html.

O básico é:

  • Tenha caminhos absolutos para imagens (por exemplo, https://stackoverflow.com/random-image.png )
  • Use tabelas para o layout (nunca pensei que eu recomendaria isso!)
  • Use estilos inline (e o CSS da velha escola também, no máximo 2.1, box-shadow não funcionará por exemplo;))

Basta testar o número de clientes de e-mail que puder usar ou usar o Litmus como alguém sugerido acima! (crédito para Jim)

EDIT:

O chimpanzé de correio fez um ótimo trabalho ao disponibilizar essa ferramenta para a comunidade.

Ele aplica suas classes CSS aos seus elementos html embutidos para você!

SamMullins
fonte
1
o link mailchimp está quebrado, talvez seja um desses artigos, kb.mailchimp.com/article/common-html-email-coding-mistakes ou este kb.mailchimp.com/article/common-mistakes-to-avoid
Nathan Koop
Atualizei o link, o primeiro que você sugeriu foi o correto. Infelizmente, foi movido sem adicionar redirecionamentos.
21312 SamMullins
Obrigado pela ferramenta CSS inlining. Seria útil, eu acho.
Rajesh Paul
6

O recurso para o qual sempre acabo voltando aos emails em HTML é o guia CSS do CampaignMonitor .

Como seus negócios são voltados exclusivamente à entrega de e-mail, eles sabem o que querem e todo mundo vai

Gareth
fonte
5

- Receio que sim. Eu faria uma página HTML com uma folha de estilo e usaria o jQuery para aplicar a folha de estilo ao atributo de estilo de cada elemento. Algo assim:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Em seguida, copie o DOM e use-o no email.

Nathan MacInnes
fonte
2
Você precisa ter um pouco de cuidado com isso ... não é infalível. Como isso pode atrapalhar larguras de coisas, então verifique tudo antes de enviar.
Nathan MacInnes
Para contornar esse problema, você pode ocultar o documento inteiro primeiro com o jQuery e, em seguida, executar esse código (e talvez reexibir) - dessa maneira, as regras CSS reais são recuperadas e aplicadas em vez do resultado calculado (por exemplo, para larguras.)
majick
1

Acho que o mapeamento de imagens funciona muito bem. Se você tiver cabeçalhos ou rodapés que sejam imagens, aplique um bgcolor = "preencha o espaço em branco" porque o outlook na maioria dos casos não carrega a imagem e você fica com um cabeçalho transparente. Se pelo menos você designar uma cor que funcione com a sensação geral do email, será menos chocante para o usuário. Nunca tente usar folhas de estilo. Ou CSS! Apenas evite isso.

Dependendo se você estiver copiando conteúdo de uma palavra ou do Google Doc compartilhado, certifique-se de (comando + F) Encontre todos os (') e (") e substitua-os no seu software de edição (especialmente o dreemweaver), pois eles aparecerão como código e simplesmente não é bom.

ALT é seu melhor amigo. use a tag ALT para adicionar texto a todas as suas imagens. Porque as probabilidades são de que eles não vão carregar direito. E esse texto ALT é o que leva as pessoas a clicar no botão (ver imagens). Defina também as imagens Largura, Altura e faça com que a fronteira seja 0, para que você não tenha linhas estranhas ao redor da imagem.

Considere editar todas as imagens no Photoshop com uma borda de 15px de cada lado (torne o plano de fundo transparente e salve como PNG 24) da imagem. Às vezes, os clientes de email não leem nenhum estilo de preenchimento aplicado às imagens, evitando assim qualquer forma estranha!

Também achei a linha nos links particularmente irritante, se você aplicar <style = "text-decoration: none; color: #qualquer cor que você quiser aqui!" > ele removerá a linha e fornecerá a aparência desejada.

Há muita coisa que realmente pode mexer com a aparência geral.

Stephen
fonte