Email HTML in Gmail - Attributo stile CSS rimosso

Question

Sto lavorando a un messaggio di posta elettronica HTML e sto utilizzando MailChimp's Responsive Email Templates in combinazione con il loro CSS inliner tool. Per la maggior parte, l'e-mail sembra ottima in tutta la miriade di client di posta elettronica, ma in Gmail le cose sono orribilmente travisate.

Se utilizzo l'opzione "Mostra originale" di Gmail dal menu a discesa accanto alla freccia di risposta, l'HTML originale è diverso da quello effettivamente visualizzato nel client di posta elettronica. Posso confermare questo ispezionando l'elemento con gli strumenti di sviluppo. Questo succede su desktop e mobile; il client di posta elettronica rimuove gli attributi di stile in linea dagli elementi.

Sembra che uno dei criteri per la rimozione dell'attributo style sia se l'elemento contiene anche una classe. Qualcuno può confermarlo? Inoltre, sembra rimuovere tutti gli attributi di stile da un tag di tabella, indipendentemente. Qualcuno può confermare anche questo?

Quali sono le soluzioni alternative per questo?

Screenshots di posta elettronica con sorgente in Gmail e Yahoo inclusi di seguito.

---

Schermata di e-mail in Gmail con sorgente visualizzata tramite gli strumenti di sviluppo Chrome

---

Schermata di e-mail in Yahoo con sorgente visualizzata tramite gli strumenti di sviluppo Chrome

Answer 1

Come qualcuno che regolarmente codifica e-mail per campagne di marketing nel mio lavoro, sento il tuo dolore. Gmail, insieme a molti altri client di posta elettronica, può essere un po 'complicato da codificare. Per uno, toglie qualsiasi CSS che è al di fuori del corpo. Quindi inserire cose come le query multimediali e gli stili a livello di documento non funzionano. Il miglior consiglio che posso darti è di inserire il codice CSS in linea e cercare di evitare qualsiasi cosa di fantasia. Infatti, se puoi utilizzare un attributo HTML per il tuo stile, usalo al posto di qualsiasi CSS. Un esempio sarebbe bgcolor invece di background-color.

Ecco uno article relativo al problema specifico riscontrato. Buona fortuna.

Answer 2

Esistono più soluzioni per aggirare Gmail. Gmail è piuttosto un jolly quando si tratta del tuo stile, in quanto rimuoverà ciò che non gli piace completamente dalla tua e-mail.

Ecco alcuni piccoli consigli:

Gmail aggiunge spazio bianco tra le immagini, o allungato la dimensione del suo contenitore td: È possibile correggere questo specificando style = "display: block" sulle immagini (Assicurati che il tuo TD ha la stessa larghezza e/o altezza della tua immagine).

Gmail rende i collegamenti neri come collegamenti blu: Sì, questo è brutto. Utilizzare # 000001 anziché # 000000.

Gmail rende i numeri di telefono selezionabili: potrebbe essere una buona cosa o meno, a seconda del cliente, ma un modo per ovviare a questo è includere un tag di ancoraggio vuoto con stili attorno al numero di telefono.

Es: <a style="color:#000001; text-decoration:none;>555 555-5555</a>.Ti farà vergognare del tuo codice, ma è un piccolo trucco efficace.

Answer 3

L'utilizzo dei selettori CSS è un'altra soluzione alternativa che è stata in grado di utilizzare. Nel mio esempio sto provando a formattare una tabella HTML. Ho trovato che Gmail ha eliminato tutti gli attributi ID e CLASS rendendo il mio CSS inutile.

Dopo alcune indagini ho notato che Gmail non ha rimosso il mio attributo titolo. Così ho creato una regola CSS usando un selettore di titoli. Questo sembra funzionare bene:

[title~=myTitle] {background: black; color: white;} 

Non penso che sia una buona pratica, ma ho pensato di parlarne.

Answer 4

Ho solo pensato di aggiungere questo al mix. Ho riscontrato anche questo problema e osservando la fonte grezza ho capito che la codifica a 8 bit divideva le linee in punti strani a causa del limite di 1000 caratteri, quindi mi trovavo a finire in questo modo:

<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty 
le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px"> 

La soluzione è codificare in base64 il contenuto e utilizzare la suddivisione del blocco o qualsiasi altro strumento necessario per eseguire lo stesso.

In php ho fatto $html = chunk_split(base64_encode($html)) e quindi impostato Content-Transfer-Encoding: base64. Adesso Gmail mi ama.

Answer 5

Ho appena controllato la società: Gmail mette a nudo il vostro attributo di stile in linea, se non inserire spazi tra ;, , e : caratteri

Questo funziona bene:

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span> 

ma la stessa regola sarà spogliato se non usi gli spazi; se si scrive questo:

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span> 

si ottiene questo output sul client Gmail:

<span>text</span> 

EDIT:

Oltre a questo comportamento, ho notato che Gmail tende a nudo fuori lo stile inline se dichiari uno font-family all'interno di uno <table> nidificato o uno <td>, non sono ancora sicuro su quale sia la regola generale del suo preprocessore, ho controllato su Google ma non posso qualsiasi documentazione ufficiale sulla composizione della posta html per Gmail.