Il design responsivo, 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)

l design responsivo nasce con la necessità di rendere i siti web facilmente accessibili con ogni tipo dispositivo e risoluzione video, necessità rilevata e studiata sin dagli anni 1990, anche dal gruppo del World Wide Web Consortium. Un libro del 2010 di Zoe Mickley Gillenwater sui fogli di stile 3.0 includeva guide sull’impaginazione flessibile.

La locuzione Responsive Web Design (RWD) è stata invece coniata da Ethan Marcotte in un articolo sulla rivista A List Apart, descrivendone poi teoria e pratica in un breve saggio del 2011..net Magazine ha indicato il design responsivo come una delle principali tendenze del 2012.

Il 29 agosto 2012 il W3C ha pubblicato in versione bozza la proposta HTML Responsive Images Extension, 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.

Un sito responsivo fa uso di una impaginazione grafica con griglie a proporzioni fluide, struttura e immagini flessibili, e, generalmente, dei fogli di stile 3.0; in particolare di un’estensione della regola @media, per adattare l’impaginazione grafica all’ambiente nel quale il sito è visualizzato.

• 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.
• 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.

Fonte: it.wikipedia.org