Gmail diventa compatibile con le media queries

Un’occasione da festeggiare per tutti coloro che progettano newsletter o che hanno dovuto mettere le mani al codice sorgente di una email. Google ha annunciato finalmente l’estensione della compatibilità di Gmail alle media queries. L’annuncio è stato pubblicato il 14 settembre scorso nell’Apps Developer Blog di Google. Con un cambiamento simile non possiamo che sperare che Microsoft prenda esempio e decida di aggiornare il sistema di rendering del suo Outlook.

Grafici e web developer hanno cercato a lungo di progettare email per ogni dispositivo disponibile. Specialmente negli ultimi tempi, ovvero da quando più della metà delle letture di email avviene attraverso un dispositivo mobile o un tablet. La progettazione di una email richiede dunque un’ottimizzazione specifica che dipende non solo dai client di posta elettronica utilizzati per la lettura ma anche dalle diverse risoluzioni disponibili tra i dispositivi in commercio. Questa difficoltosa procedura è stata semplificata negli ultimi anni dalla compatibilità con il sistema di media queries.

Ma, a meno che non siate dei web designer, probabilmente non avete la minima idea di che cosa sia una media query e a cosa serva. Qui di seguito vi proponiamo una breve spiegazione riguardo all’argomento che stiamo trattando.

 


Cos’è una media query?

Le media queries sono una componente dei cascading style sheets (o CSS), il linguaggio di programmazione utilizzato per gestire lo stile nei siti web e nelle email. Ad un livello basilare, le media queries servono come condizioni per l’attivazione di determinati stili. Ma come funzionano?

media screen and (max-width: 900px) {
body { background-color: red; }
}

Una media query è composta da una o più media type (es. screen), una o più espressioni (es. max-width:900px), e le regole di stile inserite all’interno delle parentesi. In questo caso stiamo dicendo allo sfondo del nostro sito/email di diventare rosso quando la risoluzione dello schermo è inferiore a 900 pixels.

I media type ci permettono di dichiarare a che tipo di media sono applicate le regole. Quattro sono le opzioni disponibili: all, print (per la stampa), screen (per gli schermi dei dispositivi), speech (per i programmi di lettura).

Le espressioni (assegnate prevalentemente per i dispositivi) invece, servono per poter attivare gli stili in base a specifiche condizioni. Sebbene esistano una miriade di condizioni possibili, per la progettazione di email solitamente ne bastano tre:

  • max- e min-width
  • max- e min-device-width
  • device-pixel-ratio

 

Le media queries ci permettono di costruire e variare i nostri layout in modo fluido e naturale. Google ha dichiarato che questa è solo una delle migliorie in serbo per l’espansione del supporto CSS di Gmail. Non ci resta che aspettare per vedere con i nostri occhi quali saranno le prossime novità dal colosso di Mountain View.

Template gratuito per newsletter responsive

Attenzione! Per poter utilizzare il template di newsletter gratuito, che trovate al termine dell’articolo, è necessaria una conoscenza di base dei linguaggi di programmazione HTML e CSS. Buona lettura!

Con la vastità dei mezzi a nostra disposizione, quanto può essere difficile programmare una newsletter? Beh, con tutte le variabili in gioco vi posso assicurare che è più difficile di quanto sembra.

 

Perché è così difficile programmare una newsletter?

Nel mondo del web design siamo stati partecipi di quella che è stata La guerra dei browser. Il mercato era conteso tra Netscape e Internet Explorer, che non competevano solo a livello economico ma anche nelle logiche di programmazione dei loro sistemi. Grazie al Web Standards Project, i browser odierni si sono conformati ad un unico metodo e la situazione è sicuramente migliorata rispetto a 20 anni fa.

Sfortunatamente, questa standardizzazione non ha toccato quelli che sono gli email clients (Outlook, Lotus Notes…).

Per peggiorare la situazione, alcuni client di posta, invece che migliorare la gestione del codice, sono addirittura tornati indietro. Microsoft, dopo l’uscita di Outlook 2007, ha smesso di utilizzare Internet Explorer per il rendering del codice HTML. A prima vista sembrerebbe una buona notizia, se non fosse che il sostituto che è stato scelto è Microsoft Word (sì, esattamente quel Word).

Outlook è un client piuttosto popolare tra gli utenti, ma non è l’unico problema: costruire il codice per una email significa avere a che fare con 4-5 browser web e con una decina di client di posta differenti, e ognuno possiede una grossa fetta di utenza.

 

Perché ottimizzare la tua email per i dispositivi mobile?

Secondo un sondaggio pubblicato da Litmus nel Marzo di quest’anno, il 55% delle email viene aperto da un dispositivo mobile. Si rende necessario un ulteriore passo in avanti che ci porti, come è stato nel caso dei browser e dei client email, ad ottimizzare la lettura anche sui telefoni e i tablet.

 

Come programmiamo allora una email efficiente?

Il sistema per ottenere delle email, che funzionino (quasi) allo stesso modo attraverso le diverse piattaforme, è quello di lavorare (come si faceva un tempo per i siti web) attraverso tabelle. Anche in questo modo però abbiamo bisogno di stilare alcune regole di base:

Semplifichiamo il layout

Per progettare il layout di una newsletter è necessario conoscere la maggior parte delle limitazioni che impongono le diverse piattaforme in cui verrà visualizzato. Uno dei metodi più semplici per non spendere ore nel processo di testing è quello di affidarsi ad un layout a colonna singola (come ad esempio utilizza InVision). Il template che potete trovare al termine dell’articolo segue proprio questo principio.

newsletter

Usiamo CSS inline

Se volessimo assegnare delle regole di stile a tutti i paragrafi del nostro progetto, dovremmo scrivere nell’head della nostra email:

p {
font-size: 12px;
font-weight: bold;
}

Tuttavia, se il client di posta non leggesse l’head (come fa ad esempio Gmail), ciò che abbiamo appena scritto verrebbe del tutto ignorato. Le regole CSS inline vengono inserite direttamente nel marcatore HTML in questo modo:

<p style="font-size: 12px; font-weight: bold">Contenuto del paragrafo</p>

Le regole inline, pur avendo la priorità su tutte le altre, hanno valore solamente per l’elemento in cui sono inserite. Per non perdere tempo scrivendo CSS per ogni elemento, esistono numerose web app che fanno al caso nostro. Io utilizzo e consiglio inliner.cm, che legge le regole inserite nell’head dell’HTML e le inserisce nei singoli elementi senza inserire contenuti aggiuntivi o pubblicità.

Non affidiamoci completamente all’uso di immagini

Per la creazione di siti web, in passato, ci si affidava al taglio e al preciso posizionamento di immagini all’interno delle tabelle che componevano la struttura delle pagine. Non è raro ritrovare questo metodo nell’impostazione delle newsletter odierne (senza escludere i grandi brand). I tempi di realizzazione sono sicuramente ridotti, ma questo è l’unico pregio di questo sistema. Al contrario dei browser, i client di posta disabilitano le immagini dando all’utente la possibilità di scegliere se abilitarle o meno. Diverse ricerche hanno mostrato che quasi il 40% degli utenti non abilita le immagini nelle email (volontariamente e involontariamente).

Testing, testing, e ancora testing

Non c’è scampo. La fase di testing della vostra newsletter è inevitabile. Dovrete inviarla svariate volte e probabilmente per ottenere il risultato che sperate perderete qualche capello. Ci siamo passati tutti. Per semplificarci la vita però esistono strumenti online come Litmus che ci permettono di compiere test su diverse piattaforme con un singolo invio.

 

A questo punto credo di avervi annoiato abbastanza quindi lascerò che siate voi a studiare il vostro metodo. Qui sotto trovate il link per il download del template. Buon lavoro!

  Scarica il file