at01Tecnologie adattive, cos'e' il responsive design?

Cominciamo con alcune definizioni. La lingua inglese designa genericamente con l'aggettivo "responsive" tutto cio' 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) e' adattativo (o adattivo). Cosi' la definizione dello Zingarelli: 1 (biol.) Che facilita l'adattamento fisiologico o genetico, che e' 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 cioe' 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, piu' 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.

2506Elementi del Responsive Web Design

Un sito progettato per il RWD utilizza Cascading Style Sheets 5 media queries, un'estensione della regola @media rule, per adattare il layout all'ambiente nel quale viene visualizzato, insieme a griglie di proporzioni fluide, e immagini flessibili: Le Media Queries consentono alla pagina di usare diversi stili CSS sulla base delle caratteristiche del device sul quale vengono visualizzati, principalmente sulla larghezza del viewport, ovvero della finestra del browser nella quale viene visualizzata la pagina. Il concetto di griglia flessibile richiede che gli elementi siano dimensionati tramite unita' relative come percentuali ed EM, e non come unita' assolute come pixel o punti. Le immagini flessibili devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare ai layout di diverse dimensioni evitando di sovrapporsi agli altri elementi. Come risultato, gli utenti che utilizzano diverse periferiche e browser per la visualizzazione hanno accesso ad un singolo sorgente i cui contenuti vengono disposti in modo tale da essere facilmente consultabili, e si possa navigare senza dover fare troppe operazioni di ridimensionamento, scorrimento e spostamento delle pagine.

2106Resolution breakpoints

La necessita' di dover adattare la visualizzazione alle diverse dimensioni e risoluzioni degli schermi, ha introdotto il concetto di Resolution breakpoints per poter suddividere in un numero discreto le tipologie di layout ovvero di organizzazione dei contenuti, in funzione della larghezza del device. Tali breakpoint sono generalmente espressi in pixel, anche se l'aumento della densita' dei pixel nelle nuove generazioni di device comporta che non si possa considerare il viewport solo in termini di pixel senza considerarne l'effettiva dimensione. Ethan Marcotte nel suo libro "Responsive web design" identifica 6 Resolution breakpoints: 320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait) 480 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento orizzontale (landscape) 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), tenuti con orientamento verticale 768 pixel tablet da 10 pollici come l'iPad (768x1024) mantenuti con orientamento verticale 1024 pixel computer da scrivania, laptop e netbook, e tablet come l'iPad (1024x768) mantenuti con orientamento orizzontale 1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop Tali tipologie possono essere piu' genericamente ricondotte a 4 principali: mobile: per cellulari narrow: per tablet normal: pc desktop wide: schermi di grandi dimensioni

2506Layout

Le strategie per riorganizzare i contenuti in funzione dei device, ha portato alla classificazione di diverse tipologie di layout multi device: Reflowing Equal Width Off Canvas Source-Order Shift List Grid Block I layout di tipo Reflowing possono a loro volta essere categorizzati in: Mostly Fluid (multi colonna con margini piu' larghi su grandi schermi, e su schermi narrow le aree vengono allineate su una unica colonna), Column Drop, Layout Shifter, Tiny Tweaks. I layout di tipo Equal Width suddividono lo schermo in colonne delle stesse dimensioni, e il numero di colonne puo' aumentare o diminuire proporzionalmente alla larghezza dello schermo. I layout di tipo Off Canvas dividono lo schermo in aree, principalmente verticali, che al diminuire della risoluzione non vengono mostrate in funzione della loro importanza fino a mostrare una sola colonna con il contenuto principale. I layout di tipo Source-Order Shift sfruttano le proprieta' flexbox[8] e box-ordinal-group dei css per cambiare l'ordine con i quali i blocchi di contenuti vengono visualizzati nella pagina[9]. I layout di tipo List organizzano la pagina in semplici liste di elementi che, analogamente a quanto succede su Equal Width, vengono visualizzate su un numero di colonne proporzionali alla larghezza dello schermo cosi' come i layout di tipo Grid Block che suddividono il layout in una griglia di rettangoli o quadrati.