Nel 2011 abbiamo assistito al boom definitivo degli smartphones e dei tablet. Non starò qui a tediarvi con infografiche e statistiche. Il trend è talmente chiaro… e io stessa da tempo faccio i conti con questi nuovi contesti di utilizzo.
Per me vuol dire imparare a ragionare secondo nuovi paradigmi e imparare anche un nuovo vocabolario (anche se ho scoperto che di responsività si parlava già da molto, ma molto tempo).
Ho un dubbio… diciamo “linguistico” che ho provato a fugare grazie ad alcuni articoli e libri che cito in fondo. Avevo anche scritto un tweet in cui chiedevo se qualcuno conoscesse la differenza tra le due definizioni “adaptive design” e “responsive design” (e ci sarebbe anche il “reactive design”). Qualcuno mi aveva suggerito di avventurarmi nel territorio dei “sistemi complessi” (?). Così ho deciso di scrivere questo post.
Quando posso parlare di adaptive design (design adattivo) e quando di responsive design (design responsivo)? sembra una questione di lana caprina, ma come diceva qualcuno, le parole sono importanti. C’è un sovrapporsi di significati che mi hanno reso difficile il tentativo di alzare la nebbia. Per ora i contorni che ho individuato io sono questi, ma fatemi sapere se li trovate scorretti, oppure se in altri ambiti (sviluppo, ingegneria o altro) vengono usati diversamente.
Design adattivo
Su Treccani ho trovato questa definizione per “adattivo“:
“adattivo agg. [der. di adattare sul modello dell’ingl. adaptive «capace di adattamento»]. –
1. In psicologia e in etologia, che riguarda l’adattamento o che favorisce il processo di adattamento: facoltà, difficoltà adattive.
2. Nella tecnica dei controlli automatici si parla di controllo a. quando gli interventi sul sistema controllato sono effettuati tenendo conto non solo dello stato del sistema, ma anche di tutti i parametri che caratterizzano l’efficacia del controllo.”
Ipotizzo che un design adattivo è tale se il risultato si adatta alle caratteristiche del dispositivo (in origine avevo scritto “ai limiti imposti da…” ma voglio vietarmi di parlare di limiti).
Nella frase finale di questo post, Zeldman limita la definizione all’aspetto visuale (tra l’altro parla di responsive e non di adaptive design). Il rischio di confondere il termine “visuale” con “decorativo” mi sembra ancora alto, quindi preferisco pensare al design adattivo come a un approccio progettuale che include contesto, architettura delle informazioni e interfaccia, oltre all’aspetto puramente grafico.
Design responsivo
La definizione italiana di responsivo direi che porta fuori strada. Per quello che riguarda questo ambito specifico, preferisco rifarmi alla definizione inglese da Wordreference:
“responsive, adj.
responding readily and positively.”
Puro e semplice. Applicato al nostro contesto, qualcuno sostiene che la responsività sia un aspetto dell’adattività; altri usano i termini esattamente al contrario. Su questo non sono davvero riuscita a trovare la risposta definitiva. Trattandosi di parole e contesti d’uso nuovi, non posso neanche rifarmi a chissà quale ricerca semantica, quindi per ora ipotizzo che il termine responsivo sia da associare alla risposta del sistema, in conseguenza di un design concepito come adattivo. In questo senso, potrei sostituire il termine design con “layout” e quindi parlare di “layout responsivo”, restringendo il campo dalla teoria (adattività) a una delle pratiche (responsività). Ma temo di aver schematizzato troppo.
Faccio un esempio: se il mio progetto di design adattivo richiede che una griglia di immagini sia presentata come un tile di foto se sono su desktop e come un coverflow se sono su tablet, allora creerò due layout responsivi ad hoc, a seconda cioè della risposta del device (sto navigando da un browser desktop? allora carico il layout a tile. Sono su Safari per iPad? allora carico il layout coverflow con supporto delle gestures).
La cosa fondamentale è che non devono esistere due versioni di uno stesso contenuto. E qui potrei addentrarmi in altre definizioni (progressive enhancements e via dicendo). Mi fermo qui.
Fonti
Le letture che sto facendo sono queste:
- Responsive web design di Ethan Marcotte
- Mobile first di Luke Wroblewski
e gli articoli / slide da cui sono partita questi:
- “Responsive & Adaptive Design” su Lullabot Ideas di Jared Ponchot
- “Responsive design. I don’t think that word means what you think it means.” su Zeldman del già citato Jeffrey Zeldman
- “On adaptive vs. responsive web design” su Easy Designs Blog di Aaron Gustafson
- “Responsive web design” di Thomas Byttebier su Slideshare
Spero che mi aiuterete a fare più chiarezza.
Ne approffitto per fare gli auguri a tutti!
15 Commenti
Ciao, molto interessante la discussione.
Io credo che i termini Adattivo e Responsivo possano essere riferiti al procacciamento dei clienti e al rapporto che verrà instaurato con loro in funzione della realizzazione del lavoro finale.
Si parla infatti di Approccio Adattivo quando “non si va tanto per il sottile”, quando non si spende troppo tempo (e risorse) a fare valutazioni perché si potrebbero rivelare errate. Responsivo invece lo intendo come “conseguente a determinate richieste”.
Volendo riassumere:
Adattivo: il cliente ha una richiesta e io lo accontento;
Responsivo: il cliente ha una richiesta, io gli facico capire che c’è una soluzione migliore!
Queste sono valutazioni soggettive. Cosa ne pensi?
Ciao Marsen, di cosa ti occupi? Il tuo approccio a questi due termini mi sembra provenire da un’area molto lontana dallo sviluppo software, che invece è l’ambito in cui mi sto muovendo io. Mi sembra che anche tu cerchi di definire questi termini basandoti su una tua interpretazione, piuttosto che su una definizione ufficiale. Facendo questa ricerca, ho visto che sono usati in psicologia, con sfumature diverse.
Grazie per il commento.
ilaria
Ciao Ilaria,
secondo me Adattivo e Responsivo, sono termini che indicano una contrapposizione e quindi possono essere adattati a vari campi. Nel caso del Design, mi trovi d’accordo con quello che hai scritto anche se in effetti non c’è nulla di ufficiale.
Attendiamo sviluppi…
PS: in effetti io mi occupo proprio di sviluppo software essendo laureato in Informatica; ho anche effettuato docenze di Web Marketing e quello che sto sperimentando da un po’ di tempo è l’approccio “psicologico” ai clienti che mi ha sempre affascinato (la mia compagna è psicologa ed ho avuto modo di approfondire determinati aspetti della materia), poiché penso che il trittico Informatica/Economia/Psicologia sia la migliore arma nella giungla del lavoro!
Ecco un interessante articolo sul Responsive Design:
http://mintdesign.co.nz/blog/responsive-design-what-s-all-the-fuss/
Grazie Marsen!
Le definizioni di Marsen mi hanno illuminato… riportato al front end mi viene da dire che:
Adattivo è quando prevedo un adattamento del layout alle proporzioni e dimensioni dello user agent dell’utente (un po quello che ci obbliga la legge Stanca con il requisito 12 e quello che dice anche le WCAG 2.0). L’adattamento avviene senza precludere contenuti e funzionalità ma è un’adattamento della grafica già esistente con il concetto di “degrado” e che quindi perderà sempre più punti in look & feel e usabilità man mano che la allontaniamo dalle sue proporzioni per la quale è stata progettata.
Responsivo è quando studio un layout diverso per una o una gamma di proporzioni/dimensioni dello user agent. Il layout sarà quindi calato e cucito su misura per le varie possibilità che prevedo o decido di considerare.
Ritornando al front end, l’adattività ce l’abbiamo quasi gratis con l’utilizzo di certi framework e una certa maestria nei CSS a buon gusto del front end.
La responsività richiede una progettazione apposita dal parte del designer delle interfacce e un montaggio ulteriore del front end.
In passato la fluidità era la prima mossa per un’adatamento del layout ai vari user agent. Ad oggi con media query abbiamo un’arma molto più potente per garantire adattività più efficaci e versatili fino ad arrivare alla vera e propria responsività.
Leggendo in rete mi rendo conto che molti front end pensano che questa adattività sia un concetto moderno, una preoccupazione/opportunità recente con la massiccia presenza dei nuovi device smartphone e tablet. In realtà non vedo molta differenza con i concetti delle WCAG 1.0 del 1999 quando parlavano di adattamento delle pagine per i diversi user agent che potevano essere browser, risoluzioni molto grandi, o molto piccole, screen reader, browser testuali, lettori braille… oggi si sono aggiunti smartphone e tablet. Il markup è cresciuto e il supporto ai linguaggi HTML e CSS sono aumentati a favore di nuove tecnologie.
Che ne pensate di questo mio pensiero?
Devo ammettere che in giro si trova molta confusione sopratutto in termini di definizioni.
Io i libri elencati da Ilaria li ho in ebook, ma il mio inglese claudicante non mi permette di capirli appieno, di sicuro ho perso qualche passaggio.
Detto questo mi sembrava di aver capito che il significato adaptive/responsive non avesse la stessa applicazione in termini di spiegazioni del concetto.
Ovvero progetto un layout adaptive in maniera responsive
@alessandroviolini scrive
“Responsivo è quando studio un layout diverso per una o una gamma di proporzioni/dimensioni dello user agent. Il layout sarà quindi calato e cucito su misura per le varie possibilità che prevedo o decido di considerare.”
Quindi il responsive possiamo dire che è il modo di progettare e non di come deve muoversi il layout?
Che tecnicamente se progettato responsive si “adatta” alla corretta fruizione dei contenuti per i singoli device/user agent. (oppure ho sbagliato perché l’ho buttata sulla sintassi grammaticale?)
alcuni framework sparsi per la rete, hanno un funzionamento abbastanza diverso all’interno del loro core di progettazione.
Tutti usano le griglie (che a casa mai dovrebbero essere la regola base nella progettazione web)
alcuni di loro hanno le griglie fisse altri hanno le griglie in percentuali.
Coloro che hanno le griglie fisse hanno il limite dei px, quindi superato un minimo il contenuto si ridispone, spostando i vari blocchi n base all’ordine stabilito dal design, alcune cose scompaiono in quanto in un device più piccolo sarebbe opportuno avere le informazioni che più interessano all’utente.
quelle in percentuali come tutti sappiamo in pratica creano dei layout hce si muovono diversamente proprio da un punto di vista tecnico e visivo. Si stringono semplicemente in base allo spazio.
ora tralasciando i pro e i contro dei due layout mi domando se questi tipi di progettazione per voi rientri in una o nell’atra categoria sopra citata.
Io parto a progettare per i classici 3 device
smartphone,tablet,desktop
che a loro volta hanno comuqnue risoluzioni diverse.
progetto un layout diverso per ogni device.
Mi soffermo su diverso.
per Diverso parlo di impaginato, e di tutto ciò che ne consegue
un impaginato diverso quindi, un UX diversa per ogni device
su un desktop oltre i classici 960px uso un 16 colonne
sul 960 uso 12 colonne
sul tablet uso un 8 colonne e via di seguito.
Tutti i layout hanno un filo logico a livello di grafica, che rispetta la corretta UX (anche se non la rispetta è uguale, li parliamo del Know how del designer) che però non sono 3 siti diversi ma un sito unico con diversi impaginati.
Questo modo di progettare come lo concepite? naturalmente parto dal device più piccolo.
grazie e scusate se casomai ho confuso i termini.
Ciao Giuseppe,
se progetti tre modelli di navigazioen quindi 3 user experiences di conseguenza avrai 3 layout diversi. Quindi la tua “pagina” è responsive rispetto al device da cui la navigo. Se avessi progettato una sola UX e di conseguenza una sola interfaccia grafica avresti potuto “adattare” la tua pagina alle altre visualizzazioni/device.
Riguardo ai framework e alle griglie la penso diversamente. Secondo me le griglie non sono affatto “il bene”. Riportano il layout al vecchio funzionamento della tabella… avere righe e colonne… non è molto diverso se impagini il tutto con una tabella fluida… ok, si vince in semantica e in pulizia di codice. Concordo anche io che il table-form è “l’antico mondo” ma la griglia in realtà non è altro che un insiele di div in percentuale tenuti assieme dalle proprietà overflow. Hanno grandissimi limiti se si usano molti “container”. Anche io li uso, ma con moderazione… sono io che controllo loro e non loro che controllano il layout ;-)
@alessandro
grazie per la risposta, ma devo dire che adesso sono entrato in dubbio
non essendo pratico del termine User Experiences da un punto di vista di concetto, forse di base ho travisato io il suo significato.
Da quello che mi sembra di capire, e che io probabilmente sono sull’adaptive e non sul responsive, come avevo sempre sospettato.
Naturalmente dovrei capire meglio la questione delle 3 UX diverse tra loro, non avendo esempi, non riesco a seguire il discorso.
Per 3 UX diverse intendi visivamente parlando 3 impaginati diversi? Oppure 3 aspetti grafici diversi.
hai un esempio da farmi vedere
Perché arrivato a questo punto tutti i siti che vedo nelle varie gallery che mostra il meglio del responsive non lo sono …
http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/
giusto per capirci qua dentro cosa è adaptive cose è resposnsive (sempre se sono presenti i 2 metodi)
P.S. – sono in accorod ocn te per la questione “comando io il layout” … ma la griglia non devi vederla solo come righe e linee pensi come un giusto modo di impaginare.
impaginare con il rapporto aureo non implica creare i siti stile template da rivendere che sono tutti uguali.
Ho visto impaginati secondo la regola dei terzi, sempre una griglia è.
Io parlo di quei siti dove è tutto sballato se lo metti in griglia non ne rispettano nessuna
Come scrivo alla mia prima risposta del post secondo me si parla di “adaptive” quando ha un unico progetto di UX che comporta una certa impaginazione degli elementi e quella viene adattata ad altre risoluzioni/device grazie alle proprietà dei CSS. Il codice HTML rimane lo stesso, generato unicamente per tutti. La pagina scala, si adatta ma resta quella per come è scritta.
Si ha un responsive invece quando io progetto una UX apposita per ogni risoluzione/device e quindi ho probabilmente bisogno di avere diversi codice HTML oltre che un diverso codice CSS.
@alessandro sinceramente sto guardando le varie slide e devo dire che mi sembra più come dico io che come dici tu, però siccome io non sono esperto non vorrei capire male.
Mi dispiace solo non capire tutto ciò che leggo in inglese … (miseriaccia)
non devi necessariamente essere d’accordo cone me :) io ho espresso il mio pensiero riguardo due termini usati secondo me con sufficienza e/o confusione. Da un po’ che ragiono con questa idea che ho esposto e mi trovo bene. Comprendo e mi faccio capire dai clienti e dalle altre figure professionali che operano con me.
L’importante è fare delle pagine migliori, orientate al futuro. Altrettanto importante è far percepire i vantaggi che ci sono su una e un’altra soluzione, e di conseguenza gli sforzi necessari per raggiungere l’obiettivo.
quando vediamo che cambia addirittura l’url come fa m.facebook.com quando ci si collega con un browser da device mobile allora si parla di adaptive.
Quando invece il layout usa le proprietà di stile float ecc per “adattarsi” ai diversi device allora di parla di responsive.
Va bene come sinteticità? ;-)
Informazioni e licenza
Questo blog utilizza Wordpress è basato sul tema Gutenberg, modificato da me con i preziosi consigli di Nicolò e il fondamentale supporto di Luca
Eccetto dove diversamente specificato, i contenuti del mio blog sono pubblicati con Licenza Creative Commons Attribuzione Non commerciale - Condividi allo stesso modo 3.0 (Italia License).