Responsive Web Design

Da Wikipedia, l'enciclopedia libera.

Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell'ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all'utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale.

Indice

Elementi del Responsive Web Design [modifica]

Un sito progettato per il RWD utilizza Cascading Style Sheets 3 media queries, un'estensione della regola @media rule[1], per adattare il layout all'ambiente nel quale viene visualizzato, insieme a griglie di proporzioni fluide, e immagini flessibili:[2][3][4][5]:

  • 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 unità relative come percentuali e EM, e non come unità assolute come pixel o punti[6].
  • 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.

Resolution breakpoints [modifica]

La necessità 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 densità 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, matenuti 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 più genericamente ricondotte a 4 principali:

  • mobile: per cellulari
  • narrow: per tablet
  • normal: pc desktop
  • wide: schermi di grandi dimensioni

Layout [modifica]

Un esempio di riorganizzazione con layout reflowing dei contenuti su device desktop, tablet e smartphone

Le strategie per riorganizzare i contenuti in funzione dei device, ha portato alla classificazione di diverse tipologie di layout multi device[7]:

  • 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 più 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 può 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 proprietà 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 così come i layout di tipo Grid Block che suddividono il layout in una griglia di rettangoli o quadrati.

Concetti collegati [modifica]

Il RWD è stato preceduto dai concetti di "Mobile Prima" e "Progressive Enhancement/Unobtrusive JavaScript" (strategie per quando viene inizialmente valutato lo sviluppo di un nuovo sito) : i browser web dei vecchi cellulari non sono in grado di interpretare funzioni quali media queries o Javascript, e risulta conveniente creare un sito che migliora quando viene visualizzato su smartphone e PCs — piuttosto che tentare una "graceful degradation" per cercare di degradare un sito complesso e carico di immagini per funzionare sulla maggior parte dei cellulari.[10][11][12][13] Browser detection (identificazione del browser) e mobile device detection (identificazione del terminale mobile) sono due modi di dedurre se Javascript e alcune funzionalità HTML e CSS sono supportate, così come sono diffuse librerie Javascript come Modernizr, jQuery, e jQuery Mobile che verificano direttamente le caratteristiche e user agent usati dall'utente.

Criticità, e Altri approcci [modifica]

Predisporre un sito che utilizza il RWD richiede una progettazione degli elementi che costituiscono una pagina in modo che possano essere ridistribuiti in funzione delle diverse risoluzioni dello schermo e delle funzionalità del terminale che gli utenti possono utilizzare, al fine di garantire la migliore fruizione all'utente in termini di navigabilità e leggibilità.

Luke Wroblewski ha riassunto alcune delle sfide progettuali del RWD e del mobile design, e ha creato un catalogo di modelli di layout multi-dispositivo.[14][15][16][17] Egli suggerisce che, rispetto ad un semplice approccio RWD, gli approcci Device Experience o RESS possono offrire un'esperienza utente maggiormente ottimizzata per i dispositivi mobili.[16]AdWords Targeting (Device Platform Targeting)

Il libro pioneristico del 2010 di Zoe Mickley Gillenwater sul CSS3 include tutorial su layout flessibili, e Adobe'sDreamweaver CS6 ... Classroom in a Book contiene tutorial per la creazione di layout flessibili con Dreamweaver CS6.[18][19]

Storia [modifica]

Ethan Marcotte ha coniato il termine Responsive Web Design (RWD) nel suo articolo su A List Apart.[2] Egli ha descritto teoria e pratica del responsive web design nel suo breve saggio del 2011.[20]  .net Magazine ha indicato il Responsive Design in seconda posizione nella classifica delle principali tendenze del 2012 (e Progressive Enhancement in prima posizione), e ha elencato 20 tra i siti preferiti da Ethan Marcotte che utilizzano il RWD.[21][22]

Il 29 Agosto 2012 il W3C rilascia in bozza la proposta HTML Responsive Images Extension[23], contenente le specifiche per la creazione di un nuovo tag html <picture> al fine di superare i limiti del tag <img> e consentire alle pagine web di visualizzare diverse immagini in funzione di fattori quali risoluzione e densità dello schermo utilizzato dall'utente.

Note [modifica]

  1. ^ @media rule
  2. ^ a b Ethan Marcotte. Responsive Web Design. 25 maggio 2010
  3. ^ Ethan Marcotte. Fluid images. 7 giugno 2011
  4. ^ Denise Jacobs. 21 top tools for responsive web design. 23 agosto 2011
  5. ^ Dilip Bhatt. ISkeleton Framework. 19 aprile 2012
  6. ^ Ethan Marcotte. Fluid Grids. 3 Marzo 2009
  7. ^ Luke Wroblewski. Multi-Device Layout Patterns. 14 Marzo 2012
  8. ^ Ben Frain. Website Design: Understanding the CSS3 Flexbox (Flexible Box Layout Module). 24 Aprile 2012
  9. ^ Jeremy Keith. Multi-Device Layout Patterns. 14 Marzo 2012
  10. ^ Luke Wroblewski. Mobile First. 3 novembre 2009
  11. ^ Maximiliano Firtman, Programming the Mobile Web, 30 luglio 2010. ISBN 978-0-596-80778-8
  12. ^ Graceful degradation versus progressive enhancement. 3 febbraio 2009
  13. ^ Designing with Progressive Enhancement, 1º marzo 2010. ISBN 978-0-321-65888-3
  14. ^ Luke Wroblewski. Mobilism: jQuery Mobile. 17 maggio 2011
  15. ^ Luke Wroblewski. Rolling Up Our Responsive Sleeves. 6 febbraio 2012
  16. ^ a b Luke Wroblewski. Responsive Design ... or RESS. 29 febbraio 2012
  17. ^ Luke Wroblewski. Multi-Device Layout Patterns. 14 marzo 2012
  18. ^ Zoe Mickley Gillenwater, Stunning CSS3, 19 dicembre 2010. ISBN 978-0-321-72213-3
  19. ^ Dreamweaver CS6 ... Classroom in a Book, 21 luglio 2012. ISBN 978-0-321-82260-4
  20. ^ Ethan Marcotte, Responsive Web Design, 2011, pp. 143. ISBN 978-0-9844425-7-7
  21. ^ 15 top web design and development trends for 2012. 9 gennaio 2012
  22. ^ Ethan Marcotte's 20 favourite responsive sites. 11 ottobre 2011
  23. ^ HTML Responsive Images Extension. 2012

Voci correlate [modifica]

Risorse e documenti [modifica]

Estratto da "http://it.wikipedia.org/w/index.php?title=Responsive_Web_Design&oldid=58967970"