Estilo de e-mail HTML para Gmail

99

Estou gerando um e-mail html que usa uma folha de estilo interna, ou seja,

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Quando visualizado no Gmail, parece que todos os estilos da folha de estilo interna são ignorados. Parece que o Gmail ignora todos os estilos, exceto as regras embutidas, por exemplo

 <h2 style="color: red">Email content here</foo>

Esta é minha única opção para estilizar e-mails em HTML quando visualizados no Gmail?

— Dónal
fonte

14

Sim, este é o único, pois muitos clientes de e-mail baseados na web não reconhecem as folhas de estilo internas. Na verdade, o estilo inline é a maneira recomendada para criar boletins informativos em html.

— Mike

Pelo que eu sei, os leitores de e-mail devem suportar html 3.2 e css 1.1.

Como você gerou seu e-mail? Quero dizer, você pode adicionar o código de criação da intenção?

— RaphMclee

7

Geralmente é uma boa prática usar uma <html>tag de abertura ;)

— Zaz

1

Gmail é uma merda. Aplicativo iOS e aplicativo baseado na Web também!

— Adrian Florescu

19

As respostas aqui estão desatualizadas, a partir de hoje, 30 de setembro de 2016. O Gmail está atualmente implementando suporte para a styletag no head, bem como consultas de mídia. Se o Gmail é sua única preocupação, você pode usar as aulas com segurança como um desenvolvedor moderno!

Para referência, você pode verificar os documentos CSS oficiais do gmail .

Como observação lateral, o Gmail era o único cliente importante que não era compatível style( referência , até que eles atualizem de qualquer maneira). Isso significa que você pode parar de colocar estilos embutidos quase com segurança. Alguns dos clientes mais obscuros ainda podem precisar deles.

— Matthew Johnson
fonte

1

Parece que ainda não funciona. Nós tentamos no Litmus, mas não funcionou. Existe algum motivo especial?

— Arian,

@ArianHosseinzadeh O que não funciona? Adicionou uma referência à sua documentação sobre o assunto.

— Matthew Johnson,

Nós tentamos no Litmus, e ele ignora os estilos não embutidos. Você já experimentou o <style> no gmail depois que eles o anunciaram? funcionou ?

— Arian,

1

@ArianHosseinzadeh Eu fiz um copy-n-paste do exemplo deles em seus documentos e executei no putsmail . Os estilos estão aparecendo no gmail. Eu verifiquei o aplicativo gmail Android e o gmail em um navegador Chrome. Meu palpite é que as visualizações do Litmus não foram atualizadas para refletir a mudança.

— Matthew Johnson,

1

Eu estava me perguntando por que meus estilos não estavam funcionando e percebi que os coloquei dentro da bodymarca em vez da headmarca.

— palswim

67

Use estilos embutidos para tudo. Este site converterá suas classes em estilos embutidos: http://premailer.dialect.ca/

— subestado
fonte

2

Este site é incrível. Mostra avisos e fornece uma saída de texto simples, bem como reformulação do seu HTML.

— Jamesbar2

1

Este pré-mailer está em Ruby, fonte: github.com/premailer/premailer . Existe outro em Python: premailer.io fonte: github.com/peterbe/premailer , ambos são open source.

— Maxime R.

1

Esta resposta não é mais precisa. O gmail oferece suporte a estilos e classes e possui documentos oficiais sobre o assunto - veja a resposta de Matthew Johnson abaixo.

— mikemaccana

12

O Gmail iniciou o suporte básico para tags de estilo na área principal. Não encontrou nada oficial ainda, mas você pode facilmente tentar por si mesmo.
Parece ignorar os seletores de classe e id, mas os seletores de elemento básico funcionam.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

irácriar uma etiqueta de estilo na sua própria área principal limitada ao div que contém o corpo da mensagem

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

— fuchs777
fonte

Ele ainda não oferece suporte a consultas de mídia, o que é uma pena. Aulas e IDs também são úteis :)

— Eoin,

2

Eles agora também fazem consultas de mídia e oferecem suporte completo para estilos CSS. stackoverflow.com/questions/39759764/…

— crowmagnumb

7

Eu concordo com todos que apoiam classes E estilos inline. Você pode ter aprendido isso agora, mas se houver um único erro em sua folha de estilos, o Gmail irá ignorá-lo.

Você pode pensar que seu CSS é perfeito, porque você o fez com tanta frequência, por que eu teria erros no meu CSS? Execute-o por meio do Validador CSS (por exemplo http://www.css-validator.org/ ) e veja o que acontece. Fiz isso depois de encontrar alguns problemas de exibição do Gmail e, para minha surpresa, várias declarações de estilo específicas do Microsoft Outlook apareceram como erros.

O que fez sentido para mim, então eu os removi da folha de estilo e os coloquei em um only for Microsoftbloco de código, assim:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Este é apenas um exemplo simples, mas, quem sabe, pode ser útil em algum momento.

— Shawn Spencer
fonte

Obrigado, a parte sobre CSS inválido me economizou muito tempo. Se você ainda estiver por perto, me avise, por favor.

— Shadow Wizard is Ear For You

1

Ei, @ShadowWizard. Eu estive fora por um tempo, mas estou de volta. Que bom que você economizou algum tempo.

— Shawn Spencer

Saúde, só queria ter certeza de que a recompensa não será desperdiçada. :-)

— Shadow Wizard is Ear For You

2

Como já foi dito, alguns programas de e-mail não lêem os estilos css. Se você já tem um e-mail escrito, pode usar a seguinte ferramenta do zurb para incorporar todos os seus estilos:

http://zurb.com/ink/inliner.php

Isso é extremamente útil ao usar modelos como os mencionados acima do mailchimp, monitor de campanha, etc., pois eles, como você descobriu, não funcionam em alguns programas de e-mail. Esta ferramenta deixa sua seção de estilo para os programas de e-mail que irão lê-la e coloca todos os estilos embutidos para obter uma legibilidade mais universal no formato que você deseja.

— Chad Dupuis
fonte

Obrigado pelo link inliner.

— Shawn Spencer

2

Observe que os serviços e ferramentas para enviar e-mails podem ser capazes de embutir seu CSS para você, permitindo que o CSS nas <style>tags funcione no Gmail.

Por exemplo, se você estiver enviando e-mails com MailChimp, o CSS das <style>tags será embutido automaticamente por padrão. Com o Mandrill, você pode habilitar essa funcionalidade (embora seja desabilitada por padrão por motivos de desempenho ) marcando a caixa "Estilos CSS Inline em emails HTML" na seção "Padrões de envio" da guia Configurações:

Imagem mostrando como fazer isso no Mandrill

— Mark Amery
fonte

0

Eu tive o mesmo problema ao projetar um modelo no Mailjet. A solução do problema foi minimizar o código CSS dentro das <style>tags.

— Vojtěch Remiš
fonte