Prima di iniziare a lavorare sul responsive design, cominciamo con alcune definizioni. La lingua inglese designa genericamente con l'aggettivo "responsive" tutto ciò che "reagisce o risponde rapidamente e in modo appropriato ad uno stimolo".
In italiano l'aggettivo che rende al meglio il termine inglese (avendo 'responsivo' un altro significato) è adattativo (o adattivo). Così la definizione dello Zingarelli:
1 (biol.) Che facilita l'adattamento fisiologico o genetico, che è capace di adattamento, che tende verso l'adattamento.
2 (tecnol.) Capace di adattamento (sistema adattativo: capace di modificarsi per soddisfare nuovi requisiti SIN. adattivo).
Se applichiamo questa idea ad un sito web, se cioè consideriamo quest'ultimo come un 'sistema adattivo', possiamo facilmente ricavare una definizione come quella fornita da Kayla Knight in questo articolo di Smashing Magazine:
Con Responsive Design indichiamo quell'approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all'ambiente dell'utente in base a fattori come le dimensioni dello schermo, la piattaforma e l'orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.
Quando l'utente passa dal suo PC desktop ad un iPad, il sito dovrebbe automaticamente adattarsi alla nuova risoluzione, modificare le dimensioni delle immagini e le interazioni basate sugli script. In altre parole, un sito dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell'utente.
Un efficace confronto è pure quello proposto da Mark Boulton.
Paragona il responsive design ad un sistema di riscaldamento per la casa. Alla base c'è un termostato: ha dei sensori che misurano la temperatura. Il termostato è anche dotato di un software che possiamo programmare. Ci sono infine dei componenti del sistema che, in base a quanto abbiamo programmato, accendono o spengono i riscaldamenti, oppure regolano la temperatura.
Nel responsive design i 'sensori' sono i browser, il 'software' sono i CSS, in particolare le dichiarazioni @media, il meccanismo che attiva il sistema nei suoi vari stati sono le dichiarazioni contenute nelle media queries.
Tutto chiaro? La pratica della progettazione del nostro sito fittizio rivelerà come tutto ciò sia estremamente semplice da implementare.
Ora possiamo anche passare a specificare cosa non è il responsive design:
- non è una metodologia per creare versioni dei siti 'ottimizzate' e specifiche per il mobile: un principio cardine del responsive design è che il web è uno e unico, non c'è pertanto necessità di versioni diverse per un singolo sito (magari ricorrendo a domini ad hoc per il mobile); quello che progetto e realizzo deve essere auto-adattante rispetto all'enorme e crescente varietà di dispositivi con cui viene (e verrà) fruito;
- salvo pochissime eccezioni cui faremo riferimento nel corso della guida, non prevede l'introduzione di nuove tecniche: non dobbiamo imparare nuovi linguaggi o astruse tecnologie, ma soltanto applicare in un nuovo contesto e guidati da un diverso approccio tutto quello che conosciamo e applichiamo da tempo in fatto di markup (HTML), presentazione e layout (CSS), scripting (Javascript, Ajax, PHP, etc).
"Pattern" per il responsive design
Intorno a queste idee sta crescendo non soltanto l'interesse degli sviluppatori ma anche la volontà di iniziare a fissare un insieme di buone pratiche, individuando per esempio i principali pattern in fatto di design, che si tratti di menu di navigazione o di layout.
Esiste anche un sito che è proposto come modello e riferimento, vista la sua complessità, quello del Boston Globe. Molti hanno considerato la presentazione di questo sito una sorta di pietra miliare, paragonando l'evento al rilascio dei primi siti 'importanti' realizzati con layout CSS invece che con le tabelle.
Quei siti furono la prova che, dopo la fase pionieristica in cui la nuova idea veniva applicata per lo più a progetti personali o di limitato impatto in termini di traffico sul web, ci si poteva spingere a implementarli in contesti ben più ampi. Tutti sanno com'è proseguita la storia delle "tabelle vs. CSS".
Responsive design nella pratica
Da quanto si è detto finora, si potrebbe ricavare l'idea che il responsive design abbia a che fare essenzialmente con i CSS o con l'adattamento del layout. Certo, il meccanismo che oggi è l'architrave di questo approccio sono le media queries CSS. E se si tratta di costruire layout che si adattano, è sempre con i CSS che operiamo. Ma, naturalmente, al crescere della complessità del progetto, aumenta la necessità di coinvolgere linguaggi come Javascript, tecnologie come Ajax (jQuery), interazioni lato server.
Quello che vorremmo rendere chiaro, però, è che a prescindere dai mezzi è la filosofia di fondo che conta. Di base sono questi gli obiettivi minimi da porsi per realizzare un'esperienza utente positiva nei contesti d'uso più diversi:
- adattare il layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
- adattare le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) alla risoluzione e alle dimensioni dello schermo;
- servire immagini 'meno pesanti' ai dispositivi che non possono sempre sfruttare la banda larga;
- semplificare il layout degli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli;
- nascondere gli elementi non essenziali su questi stessi dispositivi;
- fornire un'interfaccia adatta all'interazione touch per i device che la supportano;
- individuare e sfruttare, quando serve, funzionalità adatte al mobile (come la geolocalizzazione).
è quello che vedremo nelle prossime lezioni.