Utilizzo di Media Query Per creare email responsive


Lo sapevi che grazie all’utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?
di Antonio Lamorgese


Che cosa sono le media query per la posta elettronica?

Finalmente ora, grazie all’utilizzo di media query anche le email possono diventare responsive ed essere adattate a diversi dispositivi. Una query multimediale è composta da un tipo di supporto opzionale (palmare, stampa, TV e così via) e da un numero qualsiasi di espressioni opzionali che limitano l’attivazione della query, come larghezza, densità di pixel o orientamento.

A livello di base, le query multimediali consentono a uno sviluppatore e-mail o progettista di e-mail di creare un’e-mail reattiva rilevando la larghezza del display su cui l’abbonato sta leggendo l’e-mail. A tale scopo, la query media e-mail più comunemente utilizzata è max-width. Con questo codice, tutti i CSS all’interno della query avranno effetto se la larghezza è inferiore alla larghezza massima specificata.

Le query multimediali possono essere utilizzate anche per determinate risoluzioni o client di posta elettronica specifici. È inoltre possibile utilizzare le query multimediali anziché o in aggiunta alla progettazione ibrida fluida .

Funzionamento delle query multimediali di larghezza minima e massima

Il funzionamento delle query multimediali può essere un po ‘confuso. Diamo un’occhiata alle query che sono comunemente utilizzate nella posta elettronica.

Larghezza massima

Ecco un esempio di una query con larghezza massima:

@media only screen and (max-width: 600px)  {...}

Il significato reale di questa query è “Se [larghezza dispositivo] è inferiore o uguale a 600 px, quindi {…}”

Pertanto, se l’e-mail viene aperta su un iPhone 5S, con una larghezza dello schermo di 320 px, la query multimediale verrà attivata e tutti gli stili contenuti in {…} avranno effetto.

Min-width

Ecco un esempio di una query con larghezza minima:

@media only screen and (min-width: 600px)  {...}

Il significato reale di questa query è “Se [larghezza dispositivo] è maggiore o uguale a 600px, quindi {…}”

Pertanto, se l’e-mail viene aperta su un iPhone 5S, con una larghezza dello schermo di 320 px, la query multimediale non si attiverà e gli stili contenuti in {…} non avranno effetto.

Combinazione di larghezza minima e larghezza massima

Puoi utilizzare queste query insieme per scegliere come target un intervallo specifico di dimensioni dello schermo.

@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

La query sopra verrà attivata solo per schermi con una larghezza compresa tra 400 e 600 pixel. È possibile utilizzare questo metodo se si desidera targetizzare un progetto per un dispositivo specifico con una larghezza nota.

I punti di interruzione

La maggior parte delle query multimediali sono impostate per attivarsi a determinate larghezze dello schermo o punti di interruzione. I parametri che usi sono una questione di dibattito tra gli sviluppatori di e-mail.

Alcuni sviluppatori sostengono che dovresti progettare per la tua vista più piccola e aggiungere un punto di interruzione a una dimensione in cui il tuo disegno viene distorto. Con il lancio di più dispositivi ogni mese, la progettazione di alcuni punti di interruzione può essere più semplice rispetto al tentativo di creare qualcosa per ogni dimensione di dispositivo.

iPhone e iPad ci forniscono alcuni punti di interruzione facili da cui partire. Gli stili di codifica per questi clienti specifici assicureranno che le nostre e-mail siano perfette su queste schermate.

Gli androidi, d’altra parte, variano ampiamente nelle dimensioni dello schermo perché ci sono così tanti produttori e dispositivi diversi. Ti consigliamo di creare da due a quattro punti di interruzione che coprono la maggior parte dei dispositivi. Ecco un esempio usando alcuni comuni dispositivi Apple:

  • Breakpoint one: 320px (iPhone 5S):
  • Breakpoint due: 414px (iPhone 6+):
  • Breakpoint tre: 703px (iPad Mini):
  • Breakpoint quattro: 768px (iPad Air):

Il terzo e il quarto punto di interruzione sono facoltativi, poiché la maggior parte delle e-mail apparirà bene mostrando la versione desktop su un iPad o tablet di grandi dimensioni. È possibile cavarsela utilizzando solo il punto di interruzione due, se si codificano le tabelle del contenitore per espanderle al 100% di larghezza (e non a una larghezza impostata, che potrebbe corrispondere o meno al dispositivo).

Ecco un altro esempio fornito da w3schools :

  • Breakpoint one: max-larghezza 600px (dispositivi extra piccoli, come i telefoni)
  • Breakpoint due: larghezza minima 600 px (dispositivi di piccole dimensioni, come tablet e telefoni di grandi dimensioni)
  • Breakpoint tre: larghezza minima 768 px (dispositivi medi, come tablet orizzontali)
  • Breakpoint quattro: larghezza minima 992 px (dispositivi di grandi dimensioni, come laptop e desktop)
  • Punto di interruzione cinque: larghezza minima 1200 px (dispositivi extra-large, come laptop e desktop di grandi dimensioni)

Impostazione della larghezza minima e dell’ordine dei punti di interruzione

Esistono diversi modi per ordinare i punti di interruzione e le query multimediali. Le regole CSS che compaiono in seguito negli stili incorporati sovrascrivono le regole precedenti se entrambe hanno la stessa specificità. Ciò significa che è possibile impostare prima le regole per i tablet (come l’interrogazione dei quattro punti di interruzione che abbiamo spiegato in precedenza), quindi impostare gli stili per i dispositivi mobili (come il punto di interruzione due che abbiamo elencato).

Poiché i due stili di breakpoint (telefoni) seguono i quattro stili di breakpoint (tablet), gli stili mobili sovrascriveranno gli stili di tablet quando si innesca la query del breakpoint due. Ciò significa che non è necessario impostare la larghezza minima per nessuna delle tue query multimediali, se sono disposte nell’ordine corretto.

Ecco un esempio di ordine.

  • Stili desktop (non in una query multimediale)
  • Stili di tablet (larghezza massima: 768 px)
  • Stili mobili (larghezza massima: 414 px)

Codifica per media query

Quando si codifica un messaggio di posta elettronica reattivo utilizzando le media query, una tecnica comune è quella di creare tabelle con align = “left” e una classe speciale da indirizzare all’interno delle media query. Ad esempio, una sezione a due colonne potrebbe apparire così:

<table border="0" cellpadding="0" cellspacing="0" align="center" 
       class="deviceWidth">
   <tr>
      <td style="padding:10px 0">
         <table align="left" width="49%" border="0" class="deviceWidth">
            <tr>
               <td>
               </td>
            </tr>
         </table>
         <table align="left" width="49%" border="0" class="deviceWidth">
            <tr>
               <td>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Ognuna delle tabelle con una larghezza del 49% può adattarsi fianco a fianco nella vista “desktop”. Usiamo il 49% invece del 50% perché Outlook può essere molto esigente su cosa si adatta fianco a fianco e cosa no. Puoi usare una larghezza del 50% se imposti tutti gli stili (senza bordo, imbottitura, ecc.).

Se si desidera creare una sezione a tre colonne utilizzando un codice simile, impostare ciascuna tabella su una larghezza del 32%.

Quando il codice responsive entra in azione, vorremmo rendere questi blocchi di contenuto di larghezza del 100% per i telefoni, in modo che riempiano l’intero schermo. Una singola query multimediale gestirà questo per la maggior parte dei telefoni:

@media only screen and (max-width: 414px) {
   .deviceWidth {width:280px!important; padding:0;}
   .center {text-align: center!important;} 
} 

Puoi continuare ad aggiungere query multimediali con stili speciali per coprire tutte le dimensioni dello schermo che desideri. È inoltre necessario aggiungere codice alle query multimediali per ottimizzare la dimensione del carattere e l’altezza della linea per ciascuna dimensione dello schermo. Ciò migliorerà la leggibilità per i tuoi destinatari.

Se desideri iniziare a lavorare con un modello reattivo, ne abbiamo uno gratuito a tua disposizione nelle nostre risorse .

Altre query multimediali

Ci sono alcune altre tecniche interessanti che puoi fare con le query multimediali. Gli esempi seguenti sono più rilevanti per la posta elettronica, ma controlla i documenti Web Mozilla Developer Network (MDN) per ulteriori tecniche di media query.

Orientamento

È possibile utilizzare la seguente media query per indirizzare l’orientamento del dispositivo. Sfortunatamente, questa query non funziona bene in iOS Mail. Nella maggior parte dei client, la query multimediale orizzontale si attiverà sempre indipendentemente dall’orientamento.

@media screen and (orientation: landscape) { ...  }

Targeting per Yahoo! posta

Puoi utilizzare questa semplice query per scrivere stili che si attiveranno solo in Yahoo! Mail. Questo può essere usato per risolvere problemi di layout o rendering che vedi solo in Yahoo! Mail o per includere messaggi destinati solo a Yahoo! utenti.

@media (yahoo) { ...  }

Densità di pixel

Questa query multimediale è destinata a dispositivi con una certa densità di pixel. In combinazione con webkit, puoi scegliere come target i dispositivi iOS. Questo può essere utile quando aggiungi un codice interattivo che funziona solo con iOS Mail.

@media screen and (-webkit-min-device-pixel-ratio: 2) { ...  }

Media query per la stampa

Quando imposti stili specifici per la stampa, puoi assicurarti che la tua e-mail avrà un bell’aspetto una volta stampata. Ciò è particolarmente importante per le e-mail con coupon o biglietti. Puoi nascondere elementi inutili, come collegamenti e pulsanti, e visualizzare solo la parte dell’email che è importante stampare.

@media print { ...  }
come funziona il CSS Media Query
Antonio Lamorgese


Desideri acquisire nuove competenze?

corsi.it

Seguire questo corso online ti offrirà
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online

Corsi.it - Il portale Nr.1 al mondo di corsi online


Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di più....