Visualizzazione delle email tra i client di posta: sfide e soluzioni

15 Gennaio 2019Tempo lettura: 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 neimodelli aggiornati: quando i modelli di iPhone vengono aggiornati conschermi più grandi, possono verificarsi problemi di visualizzazione delleemail. Per superare questo problema e garantire che le email venganovisualizzate su tutti i dispositivi iPhone, aggiorna le tue query multimedialiutilizzando un breakpoint da 320 px a 414 px per iPhone 8 plus. Oltre amantenere una larghezza fissa del dispositivo, puoi persino mantenere lalarghezza fluida.

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

Il testo viene ridimensionato: iltesto in caratteri minuscoli viene automaticamente ridimensionato. Mantieni ladimensione minima del carattere di 22 pixel per le intestazioni e 14 pixel peril corpo del testo.

Leemail responsive vengonoridimensionate automaticamente in iOS 10 e iOS 11: lascalabilità automatica delle email responsive porta a visualizzareemail 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 nonsupportato: il selettore di attributi utilizzato per selezionaregli elementi non è supportato. Al suo posto, usa il selettore .class.

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

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

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

Margine, riempimento, float eparagrafo non supportati: Gmail non visualizza paragrafi efloat. 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> nonsupportati nei titoli: a volte il titolo non supporta itag <style> o <link>. Per risolvere questo problema, sovrascrivi ilcolore del link predefinito aggiungendo uno stile di colore a ogni tag<a> all’interno del codice.

Immagini suddivise con una lineabianca: appare una linea bianca tra due o più immaginisuddivise. Usa “display:block” nel tag dell’immagine per rimuovere lalinea 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 aspettopoco invitante:  sull’app diGmail, le email fluide non impressionano. Per risolvere questo problema, creal’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 emin-width: Outlook non supporta max-width e min-width in CSS. Perevitare problemi, utilizza layout fluidi con una larghezza fissa all’interno diuna query multimediale.

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

Rimozione del paragrafo e dellaspaziatura dei margini: Outlook rimuove il paragrafo e laspaziatura dei margini dal codice. Usa un layout basato su tabella e td/tr peraggiungere 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 inOutlook.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 emax-device-width non supportati nelle query multimediali: perwebmail e app Android, utilizza l’attributo di larghezza e/o in style invece dimin o max-device-width. In questo modo verrà regolato il layout.

I tag float non funzionano: itag float non funzionano per Yahoo! Mail. Per risolvere questo problema, impostaalign=”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.

Alcuniclient di posta come Apple Mail, Microsoft Outlook (fino al 2003) hanno adottatoil motore di rendering proprietario utilizzato nel proprio browser. Webmail usaun ibrido del proprio motore di rendering combinato con il browser in cui vieneaperto. Per tale motivo, lo stesso codice deve essere scrittoin 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 postaelettronica. I client di posta elettronica non supportati sostituisconol’immagine con un colore di sfondo. Ciò è particolarmente problematico se ilcolore di sfondo corrisponde al colore del carattere del testo in primo piano.
  2. Inserisci sempre il codice CSS: alcuniclient di posta eliminano tutti gli stylesheet specificati tra il tag<style> mentre quasi tutti supportano lo stile inline CSS. Quindi, vaisempre sul sicuro inserendo il codice CSS.
  3. Outlook supporta le dimensioni dell’immagine in percentuale eil supporto di Rest in pixel: fortunatamente, è possibileaggiungere il codice specifico di Outlook tra un codice condizionale diOutlook, 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 ancoraproblemi ad eseguire il rendering di <div>, pertanto gli sviluppatori diemail si attengono ancora al metodo a prova di errore di codifica del layout<table>. Anche se è scomodo, continua a codificare le email come nel1999…

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.

banner-consulenza-blog

Questo articolo è stato scritto da

Kevin George

Kevin George

Contributor

Kevin George è un esperto di email marketing con oltre 10 anni di esperienza nel settore. È appassionato di scrittura e collabora regolarmente con Hubspot , Salesforce, Marketo, SEMrush, ecc. Inoltre, Kevin lavora come Head of Marketing presso EmailMonks, aiutando le aziende con la conversione di email da PSD a HTML e con la progettazione e la codifica di modelli email. Puoi leggere altri suoi articoli sul suo blog di email marketing.

Articoli correlati