kutombawewe.net

Disegnare email HTML per Gmail

Sto generando un messaggio di posta elettronica 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 viene visualizzato in Gmail, sembra che tutti gli stili nel foglio di stile interno vengano ignorati. Sembra che Gmail ignori tutti gli stili tranne le regole in linea, ad es.

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

È questa la mia unica opzione per lo styling di email HTML se visualizzate con Gmail?

83
Dónal

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

61
substate

Gmail ha avviato il supporto di base per i tag di stile nell'area principale. Non ho ancora trovato nulla di ufficiale, ma puoi provarlo facilmente.
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 testa limitata al div contenente il corpo di posta

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

Le risposte qui sono obsolete, fino al 30 settembre 2016. Gmail è attualmente supporto per il roll out per il tag style nel head, così come per le query sui media. Se Gmail è la tua unica preoccupazione, sei sicuro di usare classi come uno sviluppatore moderno!

Per riferimento, puoi controllare i gmail CSS ufficiali.

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

11
Matthew Johnson

Tieni presente che i servizi e gli strumenti per l'invio di e-mail potrebbero essere in grado di allineare il tuo CSS per te, consentendo ai CSS in tag <style> di funzionare in Gmail.

Ad esempio, se invii email con MailChimp, il tuo CSS dai tag <style> verrà automaticamente inserito automaticamente per impostazione predefinita. Con Mandrill, è possibile abilitare questa funzionalità (sebbene sia disabilitata per impostazione predefinita per motivi di prestazioni ) selezionando la casella "Stili CSS in linea in e-mail HTML" nella sezione "Sending Defaults" della scheda Impostazioni:

Image showing how to do this in Mandrill

2
Mark Amery

Sono d'accordo con tutti coloro che supportano le classi e gli stili in linea. Potresti averlo già imparato, ma se c'è un solo 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 degli errori nel mio CSS? Eseguirlo tramite il validatore CSS (ad esempio http://www.css-validator.org/ ) e vedere cosa succede. L'ho fatto dopo aver incontrato alcuni problemi di visualizzazione di Gmail e, con mia sorpresa, diverse dichiarazioni di stile specifiche di Microsoft Outlook si sono rivelate come errori.

Il che aveva senso per me, quindi li ho rimossi dal foglio di stile e li ho inseriti in un blocco di codice only for Microsoft, 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, chi lo sa, potrebbe tornare utile qualche volta.

1
Shawn Spencer

Come altri hanno già detto, alcuni programmi di posta elettronica non leggeranno gli stili CSS. Se hai già una email web scritta, puoi utilizzare il seguente strumento di zurb per incorporare tutti i tuoi stili:

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

Ciò risulta estremamente utile quando si utilizzano modelli come quelli menzionati sopra da mailchimp, monitor della campagna, ecc. Poiché, come avete trovato, non funzioneranno in alcuni programmi di posta elettronica. Questo strumento lascia la tua sezione di stile per i programmi di posta che lo leggeranno e mette tutti gli stili in linea per ottenere una leggibilità più universale nel formato che volevi.

0
Chad Dupuis