Da Wikipedia, l'enciclopedia libera.
Il design responsivo,[1] o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, 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).
Un sito responsivo fa uso di una impaginazione grafica con griglie a proporzioni fluide, struttura e immagini flessibili,[5] e, generalmente, dei fogli 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]
- Le media queries consentono 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 e browser, hanno accesso a un singolo sorgente i 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.
La necessità di adattare l'impaginazione alle diverse dimensioni e risoluzioni degli 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.
Il framework Bootstrap identifica (in riferimento al "max-device-width") quattro tipi di device e corrispondenti resolution breakpoint:.
- extra small device con risoluzione inferiore a 768 pixel
- small device con risoluzione fino a 992 pixel
- desktop con risoluzione inferiore a 1200 pixel
- large device con 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: per tablet
- normal: computer fisso o portatile
- wide: schermi di grandi dimensioni