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.