Fallback per l'e-mail interattiva: come combattere il supporto limitato per l'interattività

Per il terzo anno consecutivo, le esperienze di posta elettronica interattive sono state votate come una delle tendenze più in voga nel design della posta elettronica . Allora perché non vediamo più email interattive nelle nostre caselle di posta? Per molti marchi, il supporto limitato del provider di posta in arrivo è il motivo principale per cui non inviano più campagne interattive.

Non devi temere un supporto limitato se hai un fallback in atto. Esistono molti metodi che ti aiutano a creare e-mail coinvolgenti e interattive dove sono supportate, garantendo comunque un'esperienza funzionale e bella in tutte le altre caselle di posta.

Perché i fallback sono importanti?

Il supporto per HTML e CSS varia tra i client di posta elettronica e molti degli elementi HTML e CSS che potresti utilizzare per potenziare l'interattività nella posta elettronica potrebbero non essere supportati ovunque.

Se non tieni conto dei casi in cui non è supportato, la tua email potrebbe sembrare danneggiata. Diamo un'occhiata a questo esempio di un bellissimo carosello di immagini interattivo:

Il carosello interattivo con le sue potenti immagini ha un bell'aspetto in Apple Mail, consentendo agli abbonati di sfogliare le immagini utilizzando le frecce o le caselle di controllo. Ma ecco come viene visualizzata la stessa e-mail in Yahoo! Mail se non c'è fallback in atto:

Senza fallback, l'e-mail appare danneggiata e probabilmente non vedrà molti clic. Non vogliamo che accada! Quindi diamo un'occhiata a come possiamo far funzionare le e-mail interattive ovunque con fallback a prova di proiettile.

Usando la potenza del framework nascondi e mostra

Il framework nascondi e mostra è la tattica più semplice e comune per impostare l'interattività e i fallback nella posta elettronica. Sebbene semplice, è comunque molto potente.

Il framework fa esattamente ciò che suggerisce il nome: nasconde l'interattività per i client che non lo supportano e mostra invece un fallback.

Imposti due sezioni completamente separate nel tuo HTML, una per i tuoi contenuti interattivi e una per il tuo fallback statico. In questo modo, non solo puoi specificare questi due diversi tipi di contenuto, ma anche impostare collegamenti e tracciamenti diversi per ogni versione della tua email, rendendo possibile tracciare e confrontare le versioni interattive con quelle statiche. Pensate a come un test A / B all'interno di una e-mail.

Diamo un'occhiata a come fai in modo che ciò accada all'interno del tuo codice e-mail con questo esempio semplificato (o dai un'occhiata a CodePen):

 <!-- start INTERACTIVE_SECTION --> <!--[if (!mso)&(gte IE 10)]> <! -- --> <div > <div class=" content " > This is where the Interactive Content goes. </div> </div> <!--<![endif]--> <!-- end INTERACTIVE_SECTION --> <!-- start FALLBACK_SECTION --> <div > This is where the Fallback Content goes. </div> <!-- end FALLBACK_SECTION -->

La sezione interattiva utilizza istruzioni condizionali per nascondere il contenuto dai client di posta elettronica che non supportano l'interattività. Ciò include le istruzioni condizionali MSO che nascondono tutto ciò che si trova tra di loro dalle versioni di Outlook che non supportano l'interattività, nonché CSS in linea che nascondono visivamente il contenuto per altri client di posta elettronica non interattivi (questo è il codice in verde). Quindi il codice evidenziato in rosso scuro inserisce stili che sovrascrivono il codice per la sezione interattiva forzando invece la sezione di fallback a nascondersi.

Volevamo chiamare "visivamente" perché il contenuto si carica ancora, anche se non è visibile. Questo è importante da notare perché tutte le immagini e gli altri file che potresti inserire nella sezione interattiva influiranno sul tempo di caricamento per il layout di fallback. Come soluzione, prova a sfruttare il più possibile le stesse immagini per entrambi i layout.

Per il contenuto, puoi popolare la sezione di fallback con qualsiasi codice e-mail convenzionale o semplicemente avvolgere quei <div> attorno a qualsiasi codice e-mail statico esistente che potresti avere. Per la sezione interattiva , sentiti libero di giocare con qualsiasi tipo di tecnica solo CSS che ti interessa implementare. La ricerca di caroselli, hotspot, quiz, effetti di scorrimento e così via solo CSS può fornire una grande ispirazione!

Utilizzo di fogli di stile collegati esternamente

Nel frattempo, il CSS a cui si fa riferimento nel codice rosso scuro è ospitato in un file CSS collegato esternamente che contiene codice come questo:

 #interactive { display: block !important; max-height: inherit !important; overflow: visible !important; } #staticfallback { display: none !important; } #interactive .content { Font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; display: block; color:#ffffff; }

Gli stili #interactive e #staticfallback hanno tutti !important; regole per consentire loro di sovrascrivere il CSS in linea nel tuo HTML. Queste sono le dichiarazioni di stile chiave che nascondono e mostrano i tuoi layout. La dichiarazione #interactive .content rappresenta il codice che useresti per modellare effettivamente il tuo contenuto interattivo, sebbene i layout interattivi di solito richiedano più di questo esempio per funzionare. Ad esempio, se si desidera applicare uno stile a un invito all'azione che appare solo nel layout interattivo, è necessario creare una nuova dichiarazione come #interactive .cta (o .interactive-cta , purché il selettore sia univoco per la sezione interattiva) e aggiungere i tuoi stili nel file CSS.

Quindi aggiungeresti un tag di collegamento al tuo codice HTML facendo riferimento a questo foglio di stile esterno nella parte inferiore del tag <head> , come in questo esempio semplificato.

 <head> <style type="text/css"> /* Boilerplate Styles */ /* Responsive Media Query Styles */ /* Progressive Enhancement Styles */ </style> <!-- External CSS for Interactive Version --> <link rel="stylesheet" type="text/css" href=" http://your-url.com/hideshow.css "> </head>

Padroneggiare la specificità CSS

Come puoi vedere, ci sono molti trucchi per la specificità CSS coinvolti. Lo stesso CSS sta per " Cascading Style Sheets", che si riferisce all'ordine in cui il tuo CSS si E la specificità determina quale regola è quella che vince. Pertanto, il posizionamento del tag <link> dopo tutto il tuo CSS incorporato è fondamentale per consentire a tutti gli stili nel file CSS esterno di sovrascrivere gli stili precedenti.

Allora perché un file CSS collegato esternamente, invece di CSS incorporato o in linea? Perché se un client di posta elettronica supporta questa funzione, molto probabilmente supporta tutti gli stili contenuti nel file CSS esterno. Mantenere il tuo CSS interattivo separato in questo modo significa ridurre la probabilità che i tuoi stili interattivi siano in conflitto con il tuo codice non interattivo, in modo da non finire con risultati non desiderati.

La ciliegina sulla torta: ottimizza per un supporto interattivo limitato con miglioramenti progressivi

Una volta impostate le due versioni principali, quella interattiva e quella di riserva statica, puoi andare avanti e migliorare la tua versione di riserva statica con alcuni elementi interattivi di base. Ecco la versione statica dell'e-mail sopra, resa più coinvolgente utilizzando effetti al passaggio del mouse per il logo e il CTA:

Puoi imparare come creare questi semplici ma potenti effetti al passaggio del mouse qui .

VUOI ALTRE RISORSE COME QUESTA?

Ricevi i migliori suggerimenti per l'email marketing e la progettazione, le statistiche e le risorse direttamente nella tua casella di posta e rimani all'avanguardia nell'innovazione della posta elettronica.

Resta informato →