Design responsivo
Ildesign responsivo,[1]oresponsive web design(RWD), indica una tecnica diweb designper la realizzazione disitiin grado di adattarsi graficamente in modo automatico al dispositivo con il quale vengono visualizzati (computer con diverserisoluzioni,tablet,smartphone,cellulari,web tv), riducendo al minimo la necessità dell'utente di ridimensionare e scorrere i contenuti.
Il design responsivo è un importante elemento dell'accessibilità,la quale tiene conto inoltre di numerosi altri fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell'utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via).
Storia
[modifica|modifica wikitesto]Il design responsivo nasce con la necessità di rendere i siti web facilmenteaccessibilicon ogni tipo dispositivo erisoluzione video,necessità rilevata e studiata sin daglianni 1990,anche dal gruppo delWorld Wide Web Consortium.[2]Un libro del 2010 di Zoe Mickley Gillenwater sui fogli di stile 3.0 includeva guide sull'impaginazione flessibile.[3][4]
La locuzioneResponsive Web Design(RWD) è stata invece coniata da Ethan Marcotte in un articolo sulla rivista A List Apart,[5]descrivendone poi teoria e pratica in un breve saggio del 2011.[6].net Magazine ha indicato il design responsivo come una delle principali tendenze del 2012.[7][8]
Il 29 agosto 2012 il W3C ha pubblicato in versione bozza la proposta HTML Responsive Images Extension[9],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.
Luke Wroblewski ha riassunto alcune delle sfide progettuali del design responsivo, pubblicando un catalogo di modelli di impaginazione multi-dispositivo[10][11][12][13]e suggerendo di focalizzare l'attenzione in particolare sull'esperienza dell'utente.
Caratteristiche
[modifica|modifica wikitesto]Un sito responsivo fa uso di una impaginazione grafica con griglie a proporzioni fluide, struttura e immagini flessibili,[5]e, generalmente, deifogli di stile 3.0;in particolare di un'estensione della regola@media[14],per adattare l'impaginazione grafica all'ambiente nel quale il sito è visualizzato.[15][16][17]
- Lemedia queriesconsentono alla pagina di usare diversi fogli di stile in base alle caratteristiche del dispositivo utilizzato.
- Il concetto di griglia flessibile richiede che gli elementi siano dimensionati tramite unità relative come percentuali ed em, e non con unità assolute come pixel o punti[18].
- Le immagini flessibili devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare all'impaginazione evitando di sovrapporsi agli altri elementi.
Come risultato, gli utenti che utilizzano diverse periferiche ebrowser,hanno accesso a un singolosorgentei cui contenuti vengono però disposti in modo differente tale da essere sempre facilmente consultabili, e senza dover compiere troppe operazioni di ridimensionamento, scorrimento e spostamento.
Resolution breakpoint
[modifica|modifica wikitesto]La necessità di adattare l'impaginazione alle diverse dimensioni erisoluzionidegli schermi, ha introdotto il concetto di "Resolution breakpoint"(" punti di interruzione della risoluzione "), in modo da stabilire delle soglie alle quali modificare la presentazione grafica in funzione della larghezza del dispositivo.
Tali soglie sono generalmente espresse in pixel, anche se l'aumento della densità dei pixel nelle nuove generazioni di dispositivi comporta che non si possa considerare l'area di visualizzazione solo in termini di pixel, senza considerarne l'effettiva dimensione.
IlframeworkBootstrapidentifica (in riferimento al "max-device-width") quattro tipi di dispositivi e corrispondentiresolution breakpoint:.
- dispositiviextra smallcon risoluzione inferiore a 768 pixel
- dispositivismallcon risoluzione fino a 992 pixel
- desktop con risoluzione inferiore a 1200 pixel
- dispositivilargecon risoluzione superiore a 1200 pixel
mentre Ethan Marcotte ne identifica sei:[19]
- 320 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento verticale (portrait)
- 480 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento orizzontale (landscape)
- 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), con orientamento verticale
- 768 pixel tablet da 10 pollici, come l'iPad (768x1024), con orientamento verticale
- 1024 pixel computer da scrivania, fissi o portatili e tablet come l'iPad (1024x768), con orientamento orizzontale
- 1200 pixel computer con schermi larghi, tipicamente fissi ma anche alcuni portatili
Tali tipologie possono essere più genericamente ricondotte a quattro principali:
- mobile:per cellulari
- narrow:pertablet
- normal:computer fissoo portatile
- wide:schermi di grandi dimensioni
Impaginazione grafica
[modifica|modifica wikitesto]
Le strategie per riorganizzare i contenuti in funzione dei dispositivi, hanno portato alla classificazione di diverse tipologie di impaginazioni grafiche[13]:
- Reflowing
- Equal Width
- Off Canvas
- Source-Order Shift
- List
- Grid Block
L'impaginazione di tipo reflowingcontiene diverse sottocategorie:mostly fluid(multi colonna con margini più larghi su grandi schermi, e su scherminarrowle aree vengono allineate su un'unica colonna),Column Drop, Layout Shifter, Tiny Tweaks.
L'impaginazione di tipoEqual Width dividelo schermo in colonne delle stesse dimensioni, e il numero di colonne può aumentare o diminuire proporzionalmente alla larghezza dello schermo.
L'impaginazione di tipoOff Canvas dividelo 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.
L'impaginazione di tipoSource-Order Shiftsfrutta le proprietàflexbox[20]ebox-ordinal-groupdei css per cambiare l'ordine con i quali i blocchi di contenuti vengono visualizzati nella pagina[21].
L'impaginazione di tipoListorganizza la pagina in semplici liste di elementi che, analogamente a quanto succede sulle impaginazioni di tipoEqual Width,sono visualizzate su un numero di colonne proporzionali alla larghezza dello schermo così come le impaginazioni di tipoGrid Blockche suddividono illayoutin una griglia di rettangoli o quadrati.
Rilevazione del dispositivo e compatibilità
[modifica|modifica wikitesto]Un tema di particolare interesse per il design responsivo è quello della compatibilità. Non tutti i browser e dispositivi, infatti, riconoscono le istruzioni più utilizzate per il ridimensionamento fluido dei contenuti o supportano le tecnologie necessarie. È inoltre fondamentale la rilevazione corretta del dispositivo, per fornire la relativa impaginazione grafica e individuare il livello di compatibilità possibile.
I browser dei primi cellulari non sono in grado di interpretare funzioni qualimedia queriesoJavaScript,ed è pertanto più conveniente creare una impaginazione specificamente adatta alla visualizzazione su smartphone e computer, piuttosto che tentare una "degradazione graduale" per adattare un sito complesso e carico di immagini alla maggior parte dei cellulari.[22][23][24][25]
L'identificazione dellouser agent,ovvero del browser, e l'identificazione del dispositivo mobile sono due modi di dedurre se JavaScript e alcune istruzioni dell'HTMLe deifogli di stilesono supportate. L'utilizzo di librerie JavaScript comeModernizr,jQuery,ejQuery mobilepuò essere utile allo scopo, verificando direttamente le caratteristiche e lo user agent usati dall'utente.
Note
[modifica|modifica wikitesto]- ^Responsivo,inTreccani.it –Vocabolario Treccanion line,Roma, Istituto dell'Enciclopedia Italiana.URL consultato il 9 gennaio 2017.
- ^Luca Spinelli,L'Italia che non sa usare il computer,in «Login», Gruppo Editoriale Infomedia, Pisa, 2006
- ^Zoe Mickley Gillenwater,Stunning CSS3,19 dicembre 2010,ISBN 978-0-321-72213-3.
- ^Dreamweaver CS6... Classroom in a Book,21 luglio 2012,ISBN 978-0-321-82260-4.
- ^abEthan Marcotte,Responsive Web Design,sualistapart,25 maggio 2010.
- ^Ethan Marcotte,Responsive Web Design,2011, p. 143,ISBN 978-0-9844425-7-7.
- ^15 top web design and development trends for 2012,sunetmagazine,9 gennaio 2012.
- ^Ethan Marcotte's 20 favourite responsive sites,sunetmagazine,11 ottobre 2011.
- ^HTML Responsive Images Extension,sudvcs.w3.org,2012.
- ^Luke Wroblewski,Mobilism: jQuery Mobile,sulukew,17 maggio 2011.
- ^Luke Wroblewski,Rolling Up Our Responsive Sleeves,sulukew,6 febbraio 2012.
- ^Luke Wroblewski,Responsive Design... or RESS,sulukew,29 febbraio 2012.
- ^abLuke Wroblewski,Multi-Device Layout Patterns,sulukew,14 marzo 2012.
- ^@media rule
- ^Ethan Marcotte,Fluid images,sualistapart,7 giugno 2011.
- ^Denise Jacobs,21 top tools for responsive web design,sunetmagazine,23 agosto 2011.
- ^Dilip Bhatt,ISkeleton Framework,suiskeleton.blogspot.in,19 aprile 2012.URL consultato il 30 luglio 2020(archiviato dall'url originaleil 7 ottobre 2016).
- ^Ethan Marcotte,Fluid Grids,sualistapart,3 marzo 2009.
- ^Ethan Marcotte, "Responsive web design"
- ^Ben Frain,Website Design: Understanding the CSS3 Flexbox (Flexible Box Layout Module),subenfrain,24 aprile 2012.
- ^Jeremy Keith,Multi-Device Layout Patterns,sulukew,14 marzo 2012.
- ^Luke Wroblewski,Mobile First,sulukew,3 novembre 2009.
- ^Maximiliano Firtman,Programming the Mobile Web,30 luglio 2010,ISBN 978-0-596-80778-8.
- ^Graceful degradation versus progressive enhancement,sudev.opera,3 febbraio 2009(archiviato dall'url originaleil 20 dicembre 2012).
- ^Designing with Progressive Enhancement,1º marzo 2010,ISBN 978-0-321-65888-3.
Voci correlate
[modifica|modifica wikitesto]Altri progetti
[modifica|modifica wikitesto]
Wikimedia Commonscontiene immagini o altri file suldesign responsivo
Collegamenti esterni
[modifica|modifica wikitesto]
| Controllo di autorità | GND(DE)1035443651 |
|---|
