Responsive o adaptive?

Responsive e adaptive web design sono due approcci diversi per raggiungere lo stesso risultato: realizzare un design che possa offrire all’utente un sito che si adatta nel migliore dei modi al dispositivo che sta utilizzando.

Ci viene spesso chiesto quale sia la differenza e quale sia la scelta migliore tra queste, nelle prossime righe proviamo a fare un po’ di chiarezza.

Partiamo con l’origine dei due termini.

Responsive web design (RWD)

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” Ethan Marcotte

Il termine è stato utilizzato per la prima volta da Ethan Marcotte nel 2010 in un articolo per A list Apart dal titolo Responsive Web Design.

L’articolo spiega i limiti del gestire la versione mobile di un sito come qualcosa di completamente separato dalla versione desktop e dell’affidarsi allo user agent per decidere quale versione del sito servire all’utente (nel 2010 erano più diffusi rispetto ad oggi gli m.site, siti mobile con diverso url e html ora meno diffusi forse perché sfavoriti nell’indicizzazione da Google e più complicati da mantenere).

Inoltre spiega il funzionamento delle media query introdotte dalla specifica CSS3, che all’epoca risultava una tecnica innovativa per far adattare un design alle dimensioni del browser con un controllo esclusivamente client-side.

Adaptive web design (AWD)

“Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). - Aaron Gustafson

Il termine Adaptive web design invece è stato usato per la prima volta da Aaron Gustafson nel 2011 nel suo libro, “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement” (la prima versione è disponibile gratuitamente online)

Gustafson utilizza il termine adaptive per descrivere la capacità di un sito di adattarsi e sfruttare le caratteristiche del device da cui viene fruito. Non solo quindi un design che si adatta alla dimensione del browser, ma che arricchisce l’esperienza d’uso rilevando le possibilità a disposizione del dispositivo. La definizione di adaptive è per questo strettamente legata al concetto di progressive enhancement.

I due concetti negli anni

Questi sono gli albori delle due definizioni, come abbiamo visto però sono passati un po’ di anni, nel web tutto cambia molto velocemente, non solo le tecnologie, ma a volte anche il modo di usare certi termini. Per questa ragione ci si può imbattere in diversi articoli in cui queste due tecniche vengono presentate diversamente.

I layout responsive sono comunemente identificati dalla capacità di adattarsi in modo fluido alle diverse dimensioni del browser, mentre i layout adaptive come disponibili in diverse opzioni che “saltano” da una versione all’altra a determinati breakpoint, vedere ad esempio “9 gifs that explain responsive design brilliantly” oppure “The difference between responsive and adaptive design” di css-tricks.com, nei commenti dell’articolo si trova un bel confronto (per non dire flame) tra sostenitori di opinioni diverse sull’argomento.

Può capitare anche di incontrare il termine adaptive design come sinonimo dell’utilizzo di tecniche di device detection, in associazione allo sviluppo di markup differenti.

Non si tratta di definizioni scorrette ma parziali, legate forse alla necessità di voler delimitare con delle indicazioni pratiche i due concetti.

In conclusione

“Responsive design is one technique in an adaptive web design strategy.” - Brad Frost

Brad Frost ha tirato le somme ad un po’ di anni di distanza, nell’articolo “The Many Faces of ‘Adaptive Design”. Questa è la definizione che ci convince di più: AWD ed RWD non sono in antitesi, il responsive design è una delle soluzioni che si possono adottare per fornire una un’esperienza d’uso che si adatti al dispositivo.

Dal punto di vista tecnico le opzioni sono molte e possono essere utilizzate in combinazione: possiamo avere markup e stili diversi serviti con tecniche di device detection, ma nulla vieta che siano anche dei design fluidi, oppure un layout che si affida solo a media query con dimensioni fisse. Inoltre le tecniche di device detection possono essere sia server side che client-side e possono interagire in vario modo con il layout. Non esiste un nome per identificare ogni combinazione possibile di queste tecniche e la scelta migliore va valutata caso per caso.

Per concludere un’importante riflessione relativa al concetto di adaptive web design: via via che la tecnologia rende possibile farlo, oltre alla dimensione dello schermo e alle feature disponibili sul dispositivo, un design davvero adaptive dovrebbe adattarsi anche all’utente e al contesto, variabili che influenzano fortemente l’utilizzo di un sito web. Ad esempio il design potrebbe tenere conto se viene fruito da fermi, magari seduti comodamente sul divano, piuttosto che in movimento, traballanti in piedi sul tram, se in quel momento è notte o è giorno e si sta sfruttando quel servizio da una determinata posizione geografica (per approfondimenti, è interessante il corso “mobile user experience design“ di Interaction Design Foundation).