Il trend d'uso degli smartphone è in continua ascesa: l'ultimo report di Litmus, recentissimo, segnala che attualmente le aperture di email da dispositivo mobile sono il 56% del totale.
È un dato sul quale soffermarsi: più della metà delle email vengono lette da telefonino.

Sappiamo che l'esperienza utente su un dispositivo mobile è completamente diversa da quella che si ha su un desktop, sia in termini prettamente tecnici - grandezza dello schermo, dispositivi di puntamento -, sia in termini di momenti di fruizione e capacità di conversione.

Negli anni scorsi c'è stata una rincorsa, più che giustificata, alla trasformazione dei siti, in maniera che diventassero "responsive", quindi in grado di adattarsi alle nuove modalità di fruizione tramite telefono e tablet: ad oggi spesso si parte considerando come primo mezzo di navigazione lo smartphone (mobile first).

E le email?

Il processo di acquisizione di un lead, a partire da campagne adwords, circuiti banner, landing page è normalmente ottimizzato per essere efficiente su qualsiasi piattaforma. Sappiamo che quando si parla di fidelizzazione, lead nurturing e conversione, l'email marketing rimane lo strumento principe, per cui inviare email senza preoccuparsi di come queste verranno visualizzate sui vari dispositivi è davvero poco lungimirante.

Sul perché inviare newsletter responsive non c'è dunque alcun dubbio: visualizzare una email pensata per schermi grandi su un telefono può essere davvero fastidioso - alle volte addirittura impossibile.
Come realizzare efficacemente email responsive invece è tutt'altro che banale. In ambito web alcune tecnologie/tecniche sono oramai acquisite e valide praticamente per la totalità dei device e dei browser in circolazione, mentre il mondo dell'email risulta enormemente più frammentario e disomogeneo.

Media query, funzionano?

Il principale strumento per rendere i siti "responsive" è l'utilizzo di una dichiarazione CSS condizionale, conosciuta come Media Query. In sostanza tramite le media query ci è possibile indicare una serie di stili che saranno applicati unicamente se la condizione corrispondente alla dichiarazione risulta vera.
Per ottenere un design responsive, normalmente si lavora sulle condizioni che coinvolgono le proprietà max-width e min-width (riferite alla larghezza della viewport).
Per esempio:

@media (max-width: 640px) {
   .classe {
      /*…  inserire proprietà */
   }
}
	

Le dichiarazioni CSS per la classe .classe verranno applicate unicamente quando la viewport sarà larga al massimo 640px. Grazie a queste direttive creare layout fluidi in grado di adattarsi alla larghezza dello schermo è piuttosto semplice, ma nell'ambito email questa tecnica ha in realtà applicazioni molto limitate.

Parlando di email, parliamo di decine di client e webclient diversi, ognuno con le sue particolarità. Ad esempio gli unici client, fra quelli più utilizzati, a supportare pienamente gli stili non inline e le media query sono le versioni di Mail per IOS e per MacOS.
Non solo, se per il web moderno i layout "a tabella" sono un lontano ricordo, per il mondo dell'email marketing sono una necessità stringente: client ancora molto utilizzati, come ad esempio Outlook, non reagiscono per nulla bene ai layout tableless.

Altro problema fondamentale sono le "pulizie" che diverse webmail operano sulle email in arrivo: Gmail, una delle webmail più utilizzate, elimina completamente gli stili non inline, comprese le media query.
Quindi anche solo considerando Outlook e Gmail, abbiamo a che fare con una percentuale decisamente massiccia di utenti assolutamente impermeabili alle tecniche basate su media query.

Per Gmail il fatto è ancora più grave, perché lo stesso tipo di operazione - oltre ad altri automatismi più o meno chiari, come quelli relativi alle "munged table" -  viene effettuato anche dal client ufficiale Gmail per smartphone - sia Iphone, sia Android - vanificando ogni sforzo di rendere responsive l'email.

Di fatto ci troviamo dunque ad avere a che fare con le esigenze di un web "2016", ma con la tecnologia di un web "1999".

Una soluzione - mobile first

Proprio per queste limitazioni, una delle strade seguite da chi si occupa di email design è quella del mobile-first: in sostanza si tratta di disegnare e codificare primariamente l'email perché sia ben visualizzabile - e cliccabile - da smartphone, lasciando alle media-query, e a chi le supporta, il compito di impaginare l'email in una, secondaria, versione desktop.
In questa maniera siamo ragionevolmente sicuri che tutti i possessori di smartphone, compresi quelli che usano il client Gmail, vedano correttamente l'email, ma dobbiamo altresì essere consapevoli che chi legge l'email su desktop tramite Outlook, Gmail o altre webmail/client non in grado di reagire alle media-query, vedrà l'email in versione mobile (quindi potenzialmente "meno d'impatto").

La terza via, l'Hybrid Coding

Negli ultimi anni molto si è tentato e discusso in merito; più volte sono stati fatti appelli a Google perché accettasse le media-query, ma al momento nulla pare muoversi in questa direzione.
Ancora una volta, come capita molto spesso nel mondo dell'email design, si è aggirato il problema con una serie di "trick", ottenendo l'effetto base responsive senza l'utilizzo di media-query, andando ad aggiustarne poi l'effetto finale utilizzando css avanzati, per chi li supporta.
Il "trucco" si basa sull'utilizzo delle coppie di attributi html e proprietà css (rigorosamente inline) width/max-width oppure width/min-width, con l'aggiunta di strutture tabellari supplementari per Outlook, utilizzando i commenti condizionali.
Il risultato, in termini di codice, non è forse dei più eleganti, ma il trucco è ad oggi quello che da' i risultati migliori in termini di compatibilità e stabilità.

<!--[if (gte mso 9)|(lte ie 8)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="570">
        <tr>
            <td align="center" valign="top">
<![endif]-->
<div class="oldwebkit" style="max-width: 570px;">
    <table style="border-collapse: separate;border-spacing: 9px;width: 100%;max-width: 570px;background-color: #fff;" class="vb-row fullpad" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="9" width="570">
        <tbody>
            <tr>
                <td class="mobile-row" style="font-size: 0;" align="center" valign="top">[...]
    

Grazie a questo trucco, anche i client che non supportano media query trovano direttive utili ad adattare il contenuto alla larghezza dello schermo, seppur non sempre in maniera perfetta. In particolare, a seconda della larghezza dello schermo, su Gmail i layout multicolonna, con più di due colonne, vengono "impilati" correttamente, ma non riescono ad occupare tutto lo spazio disponibile.
Rimane comunque un passo avanti deciso rispetto alle strategie precedenti.

L'avvento degli editor Email

È chiaro che realizzare una newsletter che tenga conto di tutto questo - oltre ad una serie infinita di altre problematiche di compatibilità - non è un compito assolutamente semplice.
Proprio per questo tutti i maggiori ESP hanno speso negli ultimi anni risorse ingenti per implementare editor di newsletter che consentissero agli utenti di realizzare email responsive senza possedere competenze specifiche.
Alcuni di questi editor hanno poi intrapreso una strada propria e ad oggi sono disponibili come free service (il caso di beefree.io, l'editor di Mailup) o addirittura come progetti open source (Mosaico.io, di VOXmail).