10 min.

Come brand che sfrutta l’Email Marketing, devi assicurarti che le email vengano visualizzate dai destinatari esattamente come lo hai immaginato.

La maggior parte delle email ricevute nella casella di posta può mostrare quanto segue:

  1. Un client di posta elettronica che mostra “Clicca qui per scaricare le immagini” o “Mostra immagini: per questo messaggio/sempre per questo mittente”.
  2. Un’email che mostra il link “Visualizza l’email nel browser” o “Clicca qui per visualizzare l’email online” in alto.

Il primo è dovuto ai client di posta elettronica che disabilitano le immagini da un mittente sconosciuto come procedura di sicurezza. Quest’ultimo è un passo compiuto dagli sviluppatori di email per assicurarsi che le email inviate vengano visualizzate senza errori e che il messaggio venga trasmesso indipendentemente dai diversi client di posta elettronica o dispositivi utilizzati dagli abbonati.

Ma ciò nasconde una sfida.

I client di posta elettronica hanno le proprie regole e consentono di visualizzare le email in modo diverso tra loro!

Lo studio sulle quote di mercato dei client di posta elettronica di Litmus mostra che Apple Mail (44%, incluso iOS Mail per iPhone e iPad), seguita da Gmail (29% tra dispositivi fissi e mobili), Outlook (12% tra Outlook e Outlook.com) e Yahoo! Mail (6% tra dispositivi fissi e mobili) sono i client di posta elettronica più comunemente utilizzati a ottobre 2018.

Tutti questi client di posta elettronica possono presentare problemi nella visualizzazione delle email come sono state progettate originariamente.

Fonte: Litmus

Cerchiamo di approfondire le varie sfide che potresti incontrare con la visualizzazione delle email su diversi client di posta elettronica e le relative soluzioni.

Client di posta elettronica: sfide e soluzioni

Apple iPhone

Apple iPhone supporta elementi di posta elettronica interattivi come cinemagrafia , GIF, video, countdown, cursori, immagini Retina ecc., offrendo quindi un’esperienza utente impeccabile. Non a caso si tratta del client di posta elettronica più popolare.

Problemi di visualizzazione nei modelli aggiornati: quando i modelli di iPhone vengono aggiornati con schermi più grandi, possono verificarsi problemi di visualizzazione delle email. Per superare questo problema e garantire che le email vengano visualizzate su tutti i dispositivi iPhone, aggiorna le tue query multimediali utilizzando un breakpoint da 320 px a 414 px per iPhone 8 plus. Oltre a mantenere una larghezza fissa del dispositivo, puoi persino mantenere la larghezza fluida.

Nessun supporto per il selettore ~ quando usato con i selettori :hover o :checked: iOS 9 non supporta il selettore di fratello generale ~ quando è combinato con i selettori di pseudo-classe :check e :hover. Per ottenere risultati simili, si può usare il selettore di fratello adiacente + invece di ~.

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

Le email responsive vengono ridimensionate automaticamente in iOS 10 e iOS 11: la scalabilità automatica delle email responsive porta a visualizzare email decentrate o ridotte. Per risolvere questo problema, aggiungi “padding:0;” al tag <body> e per disabilitare la scalabilità automatica, usa <meta name=”x-apple-disable-message-reformatting”>.

Fonte: Forum Litmus

Gmail

Gmail supporta le GIF e altri elementi visivi che contribuiscono a rendere esteticamente più gradevoli le email. In termini di usabilità, Gmail è uno dei client di posta più vantaggiosi sia per postazioni fisse sia per dispositivi mobili.

Gmail per postazioni fisse

Taglio dei messaggi: Gmail taglia i messaggi con dimensioni superiori a 102 kb e nasconde il contenuto con il link “Visualizza intero messaggio”. Per evitare ciò, mantieni la dimensione del messaggio sotto i 102 kb ed evita l’uso di attributi e tag di stile non necessari.

Selettore di attributi non supportato: il selettore di attributi utilizzato per selezionare gli elementi non è supportato. Al suo posto, usa il selettore .class.

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

Immagini di sfondo non supportate per gli ID non Gmail: se un ID non Gmail è configurato su Gmail, non supporta le immagini di sfondo. Per tali casi, assicurati di utilizzare un fallback corretto per lo sfondo.

Dimensione del carattere aumentata del 50%: le dimensioni dei caratteri per Gmail aumentano di quasi il 50%. Per ovviare al problema, utilizza contenuti specifici per dispositivi mobili con immagini più grandi e menu brevi e mantieni un layout a colonna singola senza costringere l’utente a usare due dita per aumentare o ridurre lo zoom.

Margine, riempimento, float e paragrafo non supportati: Gmail non visualizza paragrafi e float. Per fare in modo che margine e riempimento vengano visualizzati, utilizza il layout basato su tabella con <td>.

Gmail per dispositivi mobili

<style> e <link> non supportati nei titoli: a volte il titolo non supporta i tag <style> o <link>. Per risolvere questo problema, sovrascrivi il colore del link predefinito aggiungendo uno stile di colore a ogni tag <a> all’interno del codice.

Immagini suddivise con una linea bianca: appare una linea bianca tra due o più immagini suddivise. Usa “display:block” nel tag dell’immagine per rimuovere la linea bianca.

Le date e i numeri diventano blu su iPhone: Gmail per iPhone trasforma automaticamente numeri e date nel colore blu. Usa non-joiner a larghezza zero, “text-decoration:” e span con “text-decoration: none” circostante. Inoltre, per evitare la linea blu, definisci l’elemento principale per sovrascrivere lo stile inline.

Le email fluide hanno un aspetto poco invitante:  sull’app di Gmail, le email fluide non impressionano. Per risolvere questo problema, crea l’illusione di elementi fluttuanti usando “display:inline-block” insieme a “text-align:center”.

Outlook

Outlook e Outlook.com sono client di posta elettronica ampiamente utilizzati in ambito aziendale. Questi client di posta elettronica devono fare fronte a numerosi problemi di visualizzazione, rendendo il compito difficile per gli sviluppatori di email.

Nessun supporto per max-width e min-width: Outlook non supporta max-width e min-width in CSS. Per evitare problemi, utilizza layout fluidi con una larghezza fissa all’interno di una query multimediale.

CSS non supportato nella sezione del titolo: i CSS usati nella sezione del titolo dell’HTML vengono rimossi automaticamente. Inserisci CSS per risolvere questo problema.

Rimozione del paragrafo e della spaziatura dei margini: Outlook rimuove il paragrafo e la spaziatura dei margini dal codice. Usa un layout basato su tabella e td/tr per aggiungere spazio extra.

GIF non supportato: Outlook mostra solo il primo fotogramma delle GIF nelle email. 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,utilizza il codice esadecimale anziché i bordi RGB.

Spazi non necessari aggiunti: Outlook.com aggiunge uno spazio bianco non necessario dopo le immagini. Per rimuovere il contorno, imposta la proprietà display come “img{display:block;}”.

Yahoo! Mail

Attributi min-device-width e max-device-width non supportati nelle query multimediali: per webmail e app Android, utilizza l’attributo di larghezza e/o in style invece di min o max-device-width. In questo modo verrà regolato il layout.

I tag float non funzionano: i tag float non funzionano per Yahoo! Mail. Per risolvere questo problema, imposta align=”top” per l’immagine interessata.

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

Il motore di rendering è la causa principale delle discrepanze di visualizzazione sui vari client di posta elettronica. Il motore di rendering è il cervello di qualsiasi client di posta elettronica. Quando un client di posta elettronica riceve un’email, si tratta di una lunga stringa di codice HTML coperta da animazioni CSS. Un motore di rendering crea una struttura basata sul codice specificato nell’HTML e aggiunge di conseguenza uno stile specifico al CSS. Qualsiasi codice non necessario viene rimosso e non visualizzato in fase di post-elaborazione.

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

Di seguito sono elencati 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 (Trident)
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 inviano email a più client di posta elettronica

  1. Evita l’immagine di sfondo dietro il CTA principale: 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. Ciò è particolarmente problematico se il colore di sfondo corrisponde al colore del carattere del testo in primo piano.
  2. Inserisci sempre il codice CSS: alcuni client di posta eliminano tutti gli stylesheet specificati tra il tag <style> mentre quasi tutti supportano lo stile inline CSS. Quindi, vai sempre sul sicuro inserendo il codice CSS.
  3. Outlook supporta le dimensioni dell’immagine in percentuale e il supporto di Rest in pixel: fortunatamente, è possibile aggiungere il codice specifico di Outlook tra un codice condizionale di Outlook, ad esempio <!–[if gte mso 9]> ….. Code here…… </endif>, che viene ignorato da altri client di posta elettronica.
  4. Codifica le email usando <table> invece di <div>: mentre la codifica del sito web è progredita fino a creare una struttura utilizzando <div>, alcuni client di posta elettronica come Outlook 2007 hanno ancora problemi ad eseguire il rendering di <div>, pertanto gli sviluppatori di email si attengono ancora al metodo a prova di errore di codifica del layout <table>. Anche se è scomodo, continua a codificare le email come nel 1999…

In conclusione…

Le tue email non verranno visualizzate in modo uguale in tutti i client di posta elettronica disponibili. Prendi in considerazione questo post con sfide e soluzioni quando svilupperai la tua prossima campagna email per assicurarti di ottenere il massimo dai messaggi che mandi.

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

4 modi per segmentare i destinatari e inviare email performanti

Un'email uguale per tutti inviata settimanalmente non ti darà risultati 40 volte migliori rispetto ai social media. Vediamo allora 4 diversi modi per segmentare gli ...

Continua a leggere

Email Marketing d’agosto: 6 consigli strategici e 4 trend di Email Design

Tempo di vacanze, da godersi non prima di aver impostato alcune attività: dall’automazione dei flussi alle frequenze, fino ai migliori layout da intonare alla bella ...

Continua a leggere

Come fare Email Marketing nel 2019: i must per una strategia avanzata

Il canale email conoscerà un’ulteriore espansione nei prossimi anni. Restando al di qua di scenari avveniristici, vediamo le attività imprescindibili per fare Email Marketing nell’anno ...

Continua a leggere

Segmentazione + Personalizzazione + Automation: tutto quello che puoi fare con i Filtri

Dopo averteli presentati, vediamo le attività che possono essere condotte con i nuovi filtri di MailUp, per portare la tua strategia di Email Marketing a ...

Continua a leggere

Personalizzare le email: i 2 tool fondamentali

Immagina di inviare email che si compongono automaticamente con i contenuti più in linea per ciascun destinatario. Puoi farlo: scopriamo due funzioni di personalizzazione con ...

Continua a leggere

Come ha fatto Walmart Argentina ad arricchire l’esperienza d’acquisto?

Abbiamo chiesto alla multinazionale di raccontarci come, grazie all’integrazione tra MailUp e VTEX, ha raggiunto un livello di comunicazione ultra-personalizzata per ciascuna fase del rapporto ...

Continua a leggere