Rendering di e-mail tra client di posta elettronica: sfide e soluzioni alternative

Pubblicato: 2019-01-15

In questo articolo

In qualità di brand che utilizza l'email marketing, devi assicurarti che le tue e-mail per gli abbonati vengano visualizzate esattamente come volevi .

La maggior parte delle email ricevute nella posta in arrivo mostra quanto segue:

Il client di posta che visualizza "Clicca qui per scaricare le immagini" o "Mostra immagini: per questo messaggio/ sempre per questo mittente".
L'e-mail che mostra il collegamento "Visualizza l'e-mail nel browser" o "Fai clic qui per visualizzare l'e-mail online" in alto.

Il primo è dovuto ai client di posta elettronica che disabilitano le immagini da mittenti sconosciuti come passaggio di sicurezza. Quest'ultimo è un passo compiuto dagli sviluppatori di posta elettronica per assicurarsi che le e-mail inviate vengano visualizzate senza problemi e il messaggio venga trasmesso, indipendentemente dai diversi client di posta elettronica o dispositivi utilizzati dagli abbonati .

Ma c'è una sfida.

I client di posta seguono le proprie regole e rendono le email in modo diverso!

La quota di mercato del client di posta elettronica Litmus mostra che Apple Mail ( 44% comprensivo di posta iOS per iPhone e iPad), seguito da Gmail ( 29% compresi desktop e mobile), Outlook ( 12% compresi Outlook e Outlook.com) e Yahoo ! Mail ( 6% inclusi desktop e dispositivi mobili) sono i client di posta elettronica più comunemente utilizzati a partire da ottobre 2018. Tutti questi client di posta elettronica devono affrontare alcune sfide nel visualizzare l'e-mail esattamente come è stata progettata in primo luogo.

Cerchiamo di approfondire le varie sfide che potresti incontrare con il rendering delle e-mail su diversi client di posta e le loro soluzioni alternative .

Client di posta elettronica: sfide e soluzioni alternative

Apple iphone

Apple iPhone supporta elementi di posta elettronica interattivi come cinemagraph, GIF, video, conti alla rovescia, slider, immagini retina ecc. e quindi offre un'esperienza utente impeccabile . È, quindi, il client di posta elettronica più popolare.

Problemi di rendering nei modelli aggiornati: quando i modelli di iPhone vengono aggiornati con schermi più grandi, si verificano problemi di rendering della posta elettronica. Per superare questo problema e per garantire che l'e-mail venga visualizzata su tutti i dispositivi iPhone, aggiorna le tue query multimediali utilizzando un punto di interruzione da 320 px a 414 px per iPhone 8 plus. Oltre a mantenere una larghezza fissa del dispositivo, puoi anche mantenere la larghezza fluida.

Nessun supporto per il selettore ~ quando utilizzato con :hover o :checkedselectors: iOS9 non supporta il selettore generale di pari livello ~ quando è combinato con i selettori di pseudo-classe :checked e :hover. Per ottenere risultati simili, è possibile utilizzare il selettore di pari livello adiacente + invece di ~.

Il testo viene ridimensionato: il testo minuscolo viene automaticamente ridimensionato. Mantieni la dimensione minima del carattere di 22 pixel per le intestazioni e 14 pixel per il testo del corpo.

Le e-mail reattive vengono ridimensionate automaticamente in iOS10 e iOS11: il ridimensionamento automatico delle e- mail insensibili fa sì che le e-mail vengano visualizzate fuori centro o rimpicciolite. Per risolvere questo problema, aggiungi "padding:0;" al tag <body> e per disabilitare la scalabilità automatica, usa <metaname=”x-apple-disable-message-reformatting”>.

Gmail

Gmail supporta GIF e altri elementi visivi che si aggiungono al fascino estetico delle e-mail. Gmail è uno dei client di posta elettronica più convenienti sia per desktop che per dispositivi mobili in termini di usabilità.

Gmail per desktop

Ritaglio dei messaggi: Gmail ritaglia i messaggi con una dimensione maggiore di 102 kb e nasconde il contenuto dietro un collegamento "Visualizza intero messaggio". Per evitare ciò, mantieni la dimensione del messaggio al di sotto di 102 kb ed evita di utilizzare attributi di stile e tag non necessari.

Selettore di attributi non supportato: il selettore di attributi utilizzato per selezionare gli elementi non è supportato. Utilizzare invece .class selector.

Rimuove CSS nel blocco <style>: se il blocco <style> supera gli 8142 caratteri o include @declarations annidate, Gmail lo rimuove. Per risolvere questo problema, utilizza stili incorporati brevi e privi di errori.

Immagini di sfondo non supportate per ID non Gmail: se un ID non Gmail è configurato su Gmail, non supporta le immagini di sfondo. Assicurati di utilizzare un fallback appropriato per lo sfondo per questi casi.

Dimensioni dei caratteri aumentate del 50%: le dimensioni dei caratteri per Gmail sono aumentate di quasi il 50%. Come soluzione alternativa, utilizza contenuti specifici per dispositivi mobili con immagini più grandi e menu concisi e attieniti a un layout a colonna singola senza zoom o pizzicamento richiesti.

Margine, riempimento, float e paragrafo non supportati: Gmail non esegue il rendering di paragrafo e float. Per eseguire il rendering del margine e del riempimento, usa il layout basato su tabella con<td>.

Gmail per cellulari

<style> e <link> non supportati in head: a volte, head non supporta i tag <style> o <link>. Per risolvere questo problema, sovrascrivi il colore del collegamento predefinito aggiungendo uno stile di colore a ciascun tag <a> all'interno del codice.

Immagini tagliate da una linea bianca: appare una linea bianca tra due o più immagini tagliate. Usa "display:block" nel tag dell'immagine per rimuovere la linea bianca.

Date e numeri diventano blu su iPhone: Gmail per iPhone trasforma automaticamente numeri e date in blu. Usa zero-width non-joiner, "text-decoration:" e span con "text-decoration: none" circostante. Inoltre, per evitare la linea blu, definire importante per sovrascrivere lo stile in linea.

Le e-mail fluide sembrano ripugnanti: sull'app Gmail, le e-mail fluide sembrano insignificanti. Per risolvere questo problema, crea un'illusione di elementi mobili utilizzando "display: inline-block" insieme a "text-align: center".

Veduta

Outlook e Outlook.com sono client di posta elettronica ampiamente utilizzati in ambiente aziendale . Questi client di posta devono affrontare diversi problemi di rendering che lo rendono un compito difficile per gli sviluppatori di posta elettronica .

Nessun supporto per max-width e min-width: Outlook non supporta max-width e min-width nei CSS. Per ovviare a questo problema, utilizzare layout fluidi con una larghezza fissa all'interno di una media query.

CSS non supportato nella sezione head: i CSS utilizzati nella sezione head dell'HTML vengono rimossi automaticamente. CSS in linea per risolvere questo problema.

Rimuove la spaziatura tra paragrafi e margini: Outlook rimuove la spaziatura tra paragrafi e margini dal codice. Usa il layout basato su tabella e td/tr per aggiungere spazio extra.

GIF non supportato: Outlook esegue il rendering solo del primo frame di GIF nelle e-mail. Assicurati che il primo frame trasmetta il messaggio o imposta un fallback appropriato utilizzando un'immagine statica.

Bordi RGB non supportati in Outlook.com: per il colore di sfondo, utilizzare il codice HEX invece dei bordi RGB.

Spazi bianchi non necessari aggiunti: Outlook.com aggiunge spazi bianchi non necessari dopo le immagini. Per rimuovere il riempimento, imposta la proprietà di visualizzazione come "img{display:block;}".

Yahoo! posta

min-device-width e max-device-width non supportati in Mediaqueries: per la webmail e per l'app Android, usa l'attributo width e/o in style invece dimin o max-device-width. Questo controllerà il layout.

I tag float non funzionano: i tag float non funzionano per Yahoo!Mail. Per risolvere questo problema, assegna align="top" all'immagine interessata.

Motivo alla base di tali discrepanze tra i diversi client di posta elettronica

Il motore di rendering è la causa principale alla base dei diversi client di posta elettronica che rendono la stessa e-mail in modo diverso. Il motore di rendering è il cervello di qualsiasi client di posta elettronica. Quando un client di posta elettronica riceve un'e-mail, si tratta di un lungo muro di codice HTML avvolto dall'animazione CSS. Un motore di rendering crea una struttura basata sul codice specificato nell'HTML e aggiunge uno stile specifico di conseguenza al CSS. Qualsiasi codice non necessario viene eliminato e non reso in fase di post-elaborazione.

Alcuni client di posta elettronica come Apple Mail, Microsoft Outlook (fino al 2003) hanno adottato il motore di rendering proprietario che utilizzano nel browser. Webmail utilizza un ibrido del proprio motore di rendering combinato con il browser in cui è aperto. Per questo motivo, lo stesso codice deve essere scritto in sintassi diverse per evitare di essere eliminato.

Di seguito sono riportati i client di posta elettronica più diffusi e il motore di rendering utilizzato da ciascuno:

Apple Mail → Motore Safari Webkit
iOS Mail → Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (Tridente)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trident) e Notes Rich Text (solo per IMAP / POP3)
Outlook 2007 e versioni successive → Microsoft Word
Outlook per MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail e Yahoo! Mail → Motore di rendering proprietario combinato con il motore di rendering del browser

Errori comuni da evitare quando si invia a più client di posta elettronica

Evita l'immagine di sfondo dietro CTA importante : l'immagine di sfondo non è supportata nella maggior parte dei client di posta elettronica. I client di posta elettronica non supportati sostituiscono l'immagine con un colore di sfondo. Questo è particolarmente problematico se il colore dello sfondo corrisponde al colore del carattere del testo in primo piano.
CSS in linea ogni volta : alcuni client di posta eliminano tutti i fogli di stile specificati tra il tag <style> mentre quasi tutti supportano lo stile CSS in linea. Quindi sempre playsafe inserendo il tuo codice CSS.
Outlook supporta le dimensioni dell'immagine in percentuale e il supporto del resto in pixel: per fortuna, il codice specifico di Outlook può essere aggiunto tra un codice condizionale di Outlook, ad esempio <!–[ifgte mso 9]> ….. Codice qui…… </endif> che viene ignorato da altri client di posta elettronica .
Codice email utilizzando <table> invece di <div>: mentre la codifica del sito Web è progredita fino alla creazione di una struttura utilizzando <div>, alcuni client di posta elettronica come Outlook2007 hanno ancora problemi con il rendering di <div> e quindi gli sviluppatori di posta elettronica continuano a seguire un metodo di codifica a prova di errore < tabella > layout. Sebbene sia scomodo, continua a codificare la posta elettronica come se fosse il 1999...

Avvolgendo

In breve, le tue e-mail non avranno lo stesso aspetto in tutti i client di posta elettronica disponibili. Considera queste sfide e soluzioni alternative durante la creazione della tua prossima campagna e-mail per assicurarti di ottenere il massimo dalle tue e-mail .