Responsive Design per un layout adatto a tutti i device

Questa è la traduzione dell'articolo Responsive Web Design di Ethane Marcotte, pubblicato originariamente su A List Apart il 25 Maggio 2010. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

"Il controllo che posseggono i designer su un mezzo come la stampa, lo stesso che vorrebbero avere anche sul web, è semplicemente una funzione della limitatezza della pagina stampata. Dovremmo accettare il fatto che il web non possiede le stesse restrizioni e progettare un design che tenga presente questa flessibilità. Ma prima, dobbiamo "accettare il riflusso e riflusso delle cose".

John Allsopp, "A Dao of Web Design"

Una volta l'architetto inglese Christopher Wren disse scherzando che il campo da lui scelto "ambisse all'eternità" e possiamo dire che c'è qualcosa di attraente in questa sua affermazione: a differenza del web, il quale a volte pare ambire a dimensioni temporali molto ravvicinate, l'architettura è una disciplina che può essere rappresentata dalla stabilità. Le fondamenta di un edificio descrivono le sue impronte, che a sua volta definiscono la sua struttura, la quale modella la facciata. Ognuna delle fasi del processo architettonico è sempre più immutabile ed invariabile di quella precedente. Le decisioni creative quasi letteralmente modellano una forma fisica, definendo il modo in cui le persone si muovono tra i suoi confini per decenni ed anche secoli.

Lavorare sul web, invece, diventa una questione completamente differente. Il nostro lavoro viene caratterizzato dalla fugacità, in quanto spesso rifinito oppure rimpiazzato dopo solo un anno o due. Inconsistenti larghezze di finestre, risoluzioni dello schermo, preferenze dell'utente e i font istallati dai nostri utenti sono soltanto alcuni dei fattori intangibili che dobbiamo valutare quando pubblichiamo il nostro lavoro, e con il passare degli anni diventiamo sempre più incredibilmente abituati ad eseguire tutto in questo modo.

Ma il panorama si sta modificando, forse anche più velocemente di quanto vorremmo. Si pensa che la navigazione attraverso il cellulare sorpasserà l'accesso basato sul desktop entro tre-cinque anni. Due o tre consolle di videogame posseggono già la funzione web (ed su una di esse è eccellente). Ormai stiamo progettando per mouse e tastiera, per tastierine T9, per controller palmari di giochi, per interfacce con schermo tattile (touch screen). In breve, abbiamo a che fare con un numero di dispositivi, modalità di input e browser maggiore rispetto a qualsiasi altra epoca.

In periodi recenti, ho incontrato sempre più aziende che richiedono "un sito per iPhone" come parte del loro progetto. È una frase interessante: di primo impatto, ovviamente, si riferisce alla qualità di un browser per cellulare come WebKit, unito al fatto di essere un importante caso di business per pensare oltre il desktop. Ma, come designer, io credo che spesso dobbiamo gradire queste richieste così esplicite, poiché ci permettono di isolare i problemi. Possiamo implementare l'esperienza con cellulare in sotto-domini, spazi distinti e separati dal "sito non-iPhone". Ma cosa ci aspetta dopo? Un sito per iPad? Un sito per N90? Possiamo realmente continuare ad impegnarci per supportare ogni nuovo possibile user agent con un'esperienza su misura? Ad un certo punto, inizia ad assomigliare ad una partita, in cui non si riesce a fare neppure un punto. Ma come possiamo noi – ed i nostri design - adattarci?

Fondamenta flessibili

Proviamo a considerare un esempio. Ho creato una pagina semplice per un'ipotetica rivista; ho utilizzato un layout basato su due colonne posto su una griglia fluida con qualche immagine flessibile distribuita qui e là. Da convinto sostenitore di layout non fissi, ho sempre pensato che erano più "a prova di futuro" semplicemente perché erano dei layout-agnostici. E per alcune ragioni, è anche la verità: i design flessibili non si pongono il problema riguardo alla larghezza della finestra del browser, e si adattano meravigliosamente a dei dispositivi che hanno modalità portrait e landscape:

Ma nessun design, fluido o fisso, riesce a scalare senza intoppi oltre il contesto per il quale era stato originariamente ideato. Il design esemplificativo si adatta perfettamente quando la finestra del browser viene ridimensionata, ma punti più critici appaiono velocemente a risoluzioni più basse. Quando esso viene visualizzato con un vieport inferiore a 800x600, l'illustrazione dietro al logo appare tagliata, il testo di navigazione si avvolge in maniera indecorosa, e le immagini lungo la parte inferiore diventano troppo compatte per essere leggibili. E ciò non condiziona solamente la parte più bassa dello spettro di risoluzione: quando si visualizza un design con uno schermo largo, le immagini crescono fino a dimensioni ingombranti, affollando il contesto circostante.

In breve, il nostro design flessibile funziona abbastanza bene nel contesto desktop-centrico per il quale è stato progettato, ma non è ottimizzato per andare molto lontano da qui.

Diventare adattativi

Recentemente, una disciplina emergente chiamata architettura "responsive" (reattiva o adattativa, ndT) ha iniziato a domandarsi come gli spazi fisici possano rispondere alla presenza di persone che li attraversano. Attraverso una combinazione di robotica e vari materiali duttili, gli architetti stanno sperimentando installazioni artistiche e strutture murarie che si piegano, si flettono e si espandono quando la folla si avvicina ad esse. Sensori di movimento possono essere accoppiati con il sistema di controllo del clima per modificare la temperatura di una stanza e l'illuminazione dell'ambiente mentre si riempie di persone. Alcune aziende hanno già prodotto "la tecnologia del vetro intelligente" che può automaticamente diventare opaco quando viene raggiunto un dato numero di persone che riempiono la stanza, dandogli un ulteriore elemento di privacy.

Nel loro libro "Interactive Architecture", Michael Fox e Miles Kemp descrivono questo approccio più adattabile come "un sistema ad anelli multipli nel quale uno entra in una conversazione; uno scambio di informazioni continuo e costruttivo". L'enfasi è mia, perché, come credo, c'è una sottile ma pur sempre forte distinzione: invece di creare spazi immutabili ed invariabili che definiscono una particolare esperienza, essi propongono che l'abitante e la struttura stessa possano – o almeno dovrebbero - influenzarsi reciprocamente.

Questo è il nostro modo per andare avanti. Invece di adattare design disconnessi ad ognuno degli innumerevoli dispositivi web, possiamo trattarli come elementi di una stessa esperienza. Possiamo progettare e creare un'esperienza visuale ottimale, ma inserire tecnologie basate sugli standard nei nostri design per renderli non solo più flessibili, ma anche più adattabili al mezzo che li riproduce. In breve, dobbiamo fare pratica del design responsivo del web. Ma come?

Le media query

Sin dai giorni di CSS 2.1, i nostri fogli di stile hanno usufruito di alcuni mezzi per valutare la presenza di un certo dispositivo attraverso tipi di media. Se avete mai scritto un foglio di stile per la stampa, avete già familiarità con questo concetto:

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

Nella speranza di aver progettato più di semplici pagine ordinatamente formattate, la specifica CSS ci ha fornito un bel numero di tipi di media accettabili, ognuno di essi progettato con lo scopo di mirare a una classe specifica di dispositivi per il web. Ma la maggior parte dei browser e dei dispositivi non hanno rispettato il vero spirito della specifica, lasciando molti tipi di media implementati in modo imperfetto o addirittura ignorati.

Fortunatamente, il W3C ha creato le media query come parte della specifica CSS3, migliorando la promessa iniziale dei tipi di media. Una media query non ci permette solo di avere come target alcune classi di dispositivi, ma anche di ispezionare le caratteristiche fisiche del dispositivo che sta visualizzando il nostro sito. Per esempio, seguendo la recente crescita di WebKit per dispositivi mobili, le media query sono diventate molto popolari come tecnica lato del cliente in grado di preparare un foglio di stile adatto per iPhone, telefoni con Android, etc. Per fare ciò, dovremmo incorporare una query in attributo media collegato al foglio di stile:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

La query presenta due componenti:

• un tipo di media (screen), e
• la query vera e propria posta tra parentesi, la quale include una particolare caratteristica del media (max-device-width) da verificare, seguito dal valore (480px).

In un inglese semplice, stiamo chiedendo al dispositivo se la sua risoluzione orizzontale (max-device-width) è uguale a 480px oppure inferiore. Se il test passa – in altre parole, se visualizziamo il nostro lavoro su un dispositivo dotato di uno schermo piccolo come un iPhone – allora il dispositivo caricherà shetland.css. Altrimenti, il link verrà ignorato.

Alcuni designer in passato hanno sperimentato layout in grado di adattarsi alla risoluzione, per la maggior parte soluzioni basate su Javascript, come l'eccellente script di Cameron Adams. Ma la specifica delle media query fornisce un insieme di caratteristiche dei vari media che si estende molto più al di là della risoluzione dello schermo, ampliando largamente la portata di ciò che possiamo testare con le nostre query. Inoltre, potete sperimentare valori con più proprietà con un query unica, collegandoli tramite la parola chiave "and":

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

Inoltre, non dobbiamo limitarci ad incorporare media query nel nostri elementi link. Possiamo includerli nel nostro CSS anche come parte di una regola @media:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

oppure come parte di una direttiva @import:

@import url("shetland.css") screen and (max-device-width: 480px);

In ogni caso, l'effetto è lo stesso: se il dispositivo supera il test creato dalla nostra media query, il CSS giusto viene applicato al nostro markup. Le media query sono, in breve, commenti condizionali per il resto di noi. Piuttosto che mirare ad una precisa versione di un browser specifico, possiamo correggere con estrema precisione elementi nella nostra impaginazione dal momento in cui oltrepassa la sua risoluzione ideale.

Adatta, rispondi e supera

Proviamo a prendere in considerazione le immagini poste alla fine della nostra pagina. Nel loro layout di base, il CSS è questo:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}
li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Ho omesso un certo numero di proprietà tipografiche per meglio concentrarmi sul layout: ogni elemento .figure viene proporzionato a circa un terzo della colonna che lo contiene, con il margine di destra impostato a 0 per le due immagini alla fine della riga (li#f-mycroft, li#f-winter). Questo funziona abbastanza bene finché il viewport è notevolmente più piccolo o più grande del nostro design originale. Con le media query, possiamo applicare soluzioni per una specifica risoluzione, adattando il nostro design per meglio rispondere ai cambiamenti del display.

Prima di tutto, cerchiamo di rendere lineare la nostra pagina una volta che il viewport scende sotto una certa risoluzione – diciamo, 600 px. Alla fine del nostro foglio di stile, proviamo a creare un nuovo blocco @media, facendo in questo modo:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

Se visualizzate la nostra pagina aggiornata in un moderno browser desktop e riducete le dimensioni della finestra sotto i 600px, la media query disattiverà il float degli elementi principali del design, ponendo ogni blocco sopra l'altro nel flusso del documento. Così, il nostro design miniaturizzato si sta piacevolmente formando, ma le immagini non riescono ancora a ridursi in modo proporzionato. Se introduciamo un'ulteriore media query, possiamo di conseguenza alterare il loro layout:

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }
  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

Non preoccupatevi delle percentuali; stiamo semplicemente ricalcolando le larghezze della griglia fluida per creare un nuovo layout linearizzato. In pratica, siamo passando da un layout a tre colonne ad uno con due, quando la larghezza del viewport scende sotto 400px, facendo sì che l'immagine sia più in rilievo:

Possiamo avere lo stesso approccio anche per i display widescreen. Per risoluzioni maggiori, potremmo adottare un trattamento "six-across" per le nostre immagini, posizionandole tutte sulla stessa riga:

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

Ora le nostre immagini funzionano meravigliosamente ad entrambi i limiti dello spettro di risoluzione, ottimizzando il loro layout anche per cambiamenti nella larghezza delle finestre o nella risoluzione del dispositivo:

Ma ciò è solamente l'inizio. Lavorando con le media query che abbiamo inserito nel nostro CSS, possiamo alterare molto più della disposizione di qualche immagine: siamo in grado di introdurre layout nuovi ed alternativi, i quali riescono ad adattarsi a qualsiasi gamma di risoluzione magari rendendo la navigazione maggiormente visibile in una visualizzazione con widescreen, oppure riposizionandola sopra il logo in schermi più piccoli:

Ma un design responsivo non si limita a cambiamenti per quanto riguarda il layout. Le media query permettono di fare pratica con sistemi di adattamento incredibilmente precisi, mentre le nostre pagine si rimodellano da sole: possiamo accrescere l'area di target sui link per schermi più piccoli, meglio adattandoci alla legge di Fitt per i dispositivi touch; possiamo mostrare o nascondere in maniera ponderata gli elementi che potrebbero migliorare la nostra navigazione su una pagina; possiamo anche fare pratica con una tipografia responsiva per alterare gradualmente la dimensione e l'interlinea del nostro testo, perfezionando l'esperienza di lettura per il display che la fornisce.

Qualche nota tecnica

Dovrebbe essere specificato che le media query possiedono un supporto robusto da parte dei browser moderni. I browser desktop come Safari 3+, Chrome, Firefox 3.5+ e Opera 7+, supportano tutti nativamente le media query analizzate nell'articolo, così come anche i più recenti browser per cellulari come Opera Mobile e Mobile WebKit. Ovviamente, le versioni più vecchie dei browser desktop, non supportano le media query. Mentre Microsoft si è convertita ad un supporto con IE9, Internet Explorer ad oggi non offre alcun tipo di implementazione.

Comunque, se siete interessati ad implementare il supporto per browser antiquati, Javascript offre una soluzione:

• Un plugin per jQuery dal 2007 offre un supporto limitato per le media query implementando solo le proprietà min-width ed il max-width quando collegato a elementi link separati.
• Recentemente, è stata rilasciata css3-mediaqueries.js: una libreria che permette "a IE 5+, Firefox 1+ e Safari 2+ di applicare le Media Query CSS3" quando viene inclusa attarverso blocchi @media. Nonostante sia ancora una versione 1.0, personalmente l'ho trovata abbastanza robusta e per questo ho intenzione di osservare da vicino il suo sviluppo.

Ma se Javascript non vi si addice, è perfettamente comprensibile. Tuttavia, ciò rende maggiori i motivi per cui creare un layout basato su una griglia flessibile, assicurandovi che il vostro design goda di alcune misure di flessibilità anche nei browser o dispositivi che non sono in grado di supportare una media query.

La via per andare avanti

Le griglie fluide, le immagini flessibili e le media query sono tre ingredienti tecnici per un web design responsivo, ma richiedono un modo diverso di pensare. Piuttosto che implementare i nostri contenuti su disparati ma specifici dispositivi, possiamo utilizzare le media query per migliorare progressivamente il nostro lavoro all'interno di diversi contesti di visualizzazione. Questo non vuol dire che non c'è spazio per siti separati indirizzati a dispositivi specifici; per esempio, se gli obiettivi dell'utente per un sito visualizzabile su cellulare sono più limitate rispetto a quelle per un browser desktop, allora creare contenuti diversi per ognuno di essi, può essere considerato l'approccio migliore.

Ma questo tipo di mentalità non deve essere il vostro limite. Ora più che mai, progettiamo lavori creati per essere visualizzati attraverso una vasta gamma di esperienze. Il web design responsivo ci offre una spinta in avanti, finalmente ci permetterà di "progettare per il flusso e riflusso delle cose".

Traduzione a cura di Nicole Brioschi.