Applicazione di stili alle email HTML per Gmail

99

Sto generando un'e-mail html che utilizza un foglio di stile interno, ad es

<!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 vengono visualizzati in Gmail, sembra che tutti gli stili nel foglio di stile interno vengano ignorati. Sembra che Gmail ignori tutti gli stili diversi dalle regole in linea, ad es

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

È questa la mia unica opzione per lo stile delle email HTML quando vengono visualizzate con Gmail?

— Dónal
fonte

14

Sì, questo è l'unico poiché molti client di posta elettronica basati sul Web non riconoscono i fogli di stile interni. In realtà lo stile inline è il modo consigliato per progettare newsletter html.

— Mike

Per quanto ne so, ci si può aspettare che i lettori di e-mail supportino html 3.2 e css 1.1.

Come hai generato la tua email? Voglio dire con che aggiungi il codice per creare l'intento?

— RaphMclee

7

In genere è buona norma utilizzare un <html>tag di apertura ;)

— Zaz

1

Gmail fa schifo. App iOS e anche app basata sul Web!

— Adrian Florescu

19

Le risposte qui sono obsolete, a partire da oggi 30 settembre 2016. Gmail sta attualmente implementando il supporto per il styletag nelle headquery multimediali. Se Gmail è la tua unica preoccupazione, puoi usare le classi come uno sviluppatore moderno!

Per riferimento, puoi controllare i documenti CSS ufficiali di Gmail .

Come nota a margine, Gmail era l'unico client principale che non supportava style( riferimento , fino a quando non si aggiornano comunque). Ciò significa che puoi quasi tranquillamente smettere di mettere gli stili in linea. Alcuni dei clienti più oscuri potrebbero ancora averne bisogno.

— Matthew Johnson
fonte

1

Sembra che ancora non funzioni. L'abbiamo provato in Litmus, ma non funziona. C'è qualche motivo speciale?

— Arian

@ArianHosseinzadeh Cosa non funziona? Aggiunto un riferimento alla loro documentazione in merito.

— Matthew Johnson,

L'abbiamo provato in Litmus e ignora gli stili non in linea. Hai provato <style> per Gmail dopo che l'hanno annunciato? ha funzionato ?

— Arian

1

@ ArianHosseinzadeh Ho fatto un copia-incolla dal loro esempio nei loro documenti e l'ho eseguito tramite putmail . Gli stili vengono visualizzati in Gmail. Ho verificato l'app Gmail per Android e Gmail in un browser Chrome. La mia ipotesi è che le anteprime di Litmus non siano state aggiornate per riflettere il cambiamento.

— Matthew Johnson,

1

Mi chiedevo perché i miei stili non funzionassero e mi sono reso conto di averli inseriti all'interno del bodytag anziché nel headtag.

— palswim

67

Usa gli stili in linea per tutto. Questo sito convertirà le tue classi in stili inline: http://premailer.dialect.ca/

— sottostato
fonte

2

Questo sito è fantastico. Mostra gli avvisi e ti fornisce un output di testo semplice oltre a riscrivere il tuo HTML.

— jamesbar2

1

Questo premailer è in Ruby, fonte: github.com/premailer/premailer . Ce n'è un altro in Python: premailer.io fonte: github.com/peterbe/premailer , entrambi sono open source.

— Maxime R.

1

Questa risposta non è più precisa. gmail supporta stili e classi e ha documenti ufficiali sull'argomento - vedi la risposta di Matthew Johnson di seguito.

— mikemaccana

12

Gmail ha avviato il supporto di base per i tag di stile nell'area della testa. Non hai ancora trovato nulla di ufficiale ma puoi provarlo facilmente da solo.
Sembra ignorare i selettori di classe e id, ma i selettori di elementi di base funzionano.

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

creerà un tag di stile nella propria area di intestazione limitata al div contenente il corpo del messaggio

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

— fuchs777
fonte

Tuttavia, non supporta ancora le query multimediali, il che è un po 'un peccato. Anche le classi e gli ID sono utili :)

— Eoin

2

Ora eseguono anche query multimediali e un supporto più completo per lo stile CSS. stackoverflow.com/questions/39759764/...

— crowmagnumb

7

Sono d'accordo con tutti coloro che supportano le classi E gli stili in linea. Potresti averlo imparato ormai, ma se c'è un singolo errore nel tuo foglio di stile, Gmail lo ignorerà.

Potresti pensare che il tuo CSS sia perfetto, perché lo hai fatto così spesso, perché dovrei avere errori nel mio CSS? Eseguilo attraverso il CSS Validator (ad esempio http://www.css-validator.org/ ) e guarda cosa succede. L'ho fatto dopo aver riscontrato alcuni problemi di visualizzazione di Gmail e, con mia sorpresa, diverse dichiarazioni di stile specifiche di Microsoft Outlook sono apparse come errori.

Il che aveva senso per me, quindi li ho rimossi dal foglio di stile e li ho inseriti in un only for Microsoftblocco di codice, in questo modo:

<!--[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]-->

Questo è solo un semplice esempio, ma chissà, potrebbe tornare utile un po 'di tempo.

— Shawn Spencer
fonte

Grazie, la parte sui CSS non validi mi ha fatto risparmiare un sacco di tempo. Se sei ancora in giro fammelo sapere per favore.

— Shadow Wizard is Ear For You

1

Ehi @ShadowWizard. Sono stato via per un po 'ma sono tornato. Sono contento che ti abbia fatto risparmiare tempo.

— Shawn Spencer

Salute, volevo solo assicurarmi che la taglia non andasse sprecata. :-)

— Shadow Wizard is Ear For You

2

Come altri hanno già detto, alcuni programmi di posta elettronica non leggono gli stili CSS. Se hai già un'e-mail web scritta, puoi utilizzare il seguente strumento da zurb per incorporare tutti i tuoi stili:

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

Ciò è estremamente utile quando si utilizzano modelli come quelli menzionati sopra da mailchimp, monitoraggio della campagna, ecc. Poiché, come hai scoperto, non funzioneranno in alcuni programmi di posta elettronica. Questo strumento lascia la sezione dello stile per i programmi di posta che lo leggeranno e inserisce tutti gli stili in linea per ottenere una leggibilità più universale nel formato desiderato.

— Chad Dupuis
fonte

Grazie per il link inliner.

— Shawn Spencer

2

Tieni presente che i servizi e gli strumenti per l'invio di email potrebbero essere in grado di incorporare il tuo CSS per te, consentendo a CSS nei <style>tag di funzionare in Gmail.

Ad esempio, se invii email con MailChimp, il tuo CSS dai <style>tag verrà integrato automaticamente per impostazione predefinita. Con Mandrill, puoi abilitare questa funzionalità (sebbene sia disabilitata per impostazione predefinita per motivi di prestazioni ) selezionando la casella "Stili CSS incorporati nelle email HTML" nella sezione "Impostazioni predefinite di invio" della scheda Impostazioni:

Immagine che mostra come eseguire questa operazione in Mandrill

— Mark Amery
fonte

0

Ho avuto lo stesso problema durante la progettazione di un modello in Mailjet. La soluzione del problema è stata il codice CSS minimizzato all'interno dei <style>tag.

— Vojtěch Remiš
fonte