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.
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:
- 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 ed EM, e non come unità 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.
I principali device identificati sono:
- mobile: per cellulari
- narrow: per tablet
- normal: pc desktop
- wide: schermi di grandi dimensioni
Progettare in responsive design significa essere a passo con le ultime tendenze vista l'enorme e sempre più crescente diffusione dei dispositivi tablet e mobile. Tale tecnica richiede inoltre molta professionalità e tempi di sviluppo ma il risultato ripaga non poco sotto il punto di vista dell'usabilità dell'applicazione web.
approfondimento wikipedia.it