Responsive Design per un layout adatto a tutti i device

6 luglio 2010

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:

Figura 1 – Il problema delle immagini troppo grandi. Il nostro layout, sebbene sia flessibile, non si adatta bene ai cambiamenti della risoluzione del viewport

screenshot
Se vuoi aggiornamenti su Responsive Design per un layout adatto a tutti i device inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Responsive Design per un layout adatto a tutti i device

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy