Possiamo definirlo design reattivo, perché coinvolge una modalità diversa di progettare un sito, dove gli elementi di una pagina sono fluidi, adattabili alle impostazioni di visualizzazione del dispositivo che l'utente sta usando, sia iPad, iPhone, pc o web tv.

Un esempio è il sito che stai vedendo. Per comprendere come agisce, puoi ridimensionare la finestra del tuo browser; noterai che il contenuto della pagina cambia e si adatta alle nuove impostazioni scelte.

Ecco alcuni screenshot di come appare un sito da noi realizzato, con diversi dispositivi: pc, tablet, smartphone

Chi ha iniziato ad usare il termine responsive web design è stato Ethan Marcotte in un articolo pubblicato su A List apart il 25 maggio 2010.

In questo articolo l'autore mette in luce tutte le idee chiave del responsive design, affermando che in realtà non si tratta di un una tecnologia diversa, ma di un nuovo modo di pensare e progettare un sito.

La prima idea chiave alla base del concetto di RWD è l'utilizzo di griglie fluide. La creazione di un "layout liquido", che si espande con la pagina, è divenuta popolare quasi come la creazione di layout a larghezza fissa. Se si considera l'enorme numero di risoluzioni schermo presenti nel mercato attuale, il vantaggio dei layout liquidi è troppo rilevante per essere ignorato.

Le griglie fluide rappresentano un passo avanti rispetto al layout liquido tradizionale. Invece di progettare un layout basato su pixel rigidi o valori percentuali arbitrari, una griglia fluida è più accuratamente progettata in termini di proporzioni. In questo modo, quando un layout viene ristretto su un piccolo dispositivo mobile o allungato in un grande schermo, tutti gli elementi ridimensionano le loro larghezze in relazione l'uno all'altro.

Al fine di calcolare le proporzioni di ogni elemento della pagina, è necessario separare l'elemento di destinazione dal suo contesto. Attualmente, il modo migliore per farlo è quello di creare prima una bozza grafica di base. Con questo modello è possibile misurare un elemento della pagina e dividerlo per l'intera larghezza della pagina stessa.

Ad esempio: se il layout ha una dimensione tipica di 960 pixel complessivi, questo sarà il valore "contenitore", mentre l'elemento di destinazione sarà un valore arbitrario, per esempio 300 pixel di larghezza. Se moltiplichiamo il risultato per 100, si ottiene il valore percentuale del 31,25%, che possiamo applicare all'elemento di destinazione.

Le griglie fluide sono una parte molto importante della creazione di un progetto agile, ma non sono sufficienti per realizzare un progetto RWD. Quando la larghezza del browser diventa troppo stretta, il disegno può iniziare corrompersi, per questo l'altro elemento fondamentale sono le media query CSS3, che attualmente vengono supportate in molti browser moderni. Sono elementi che permettono di raccogliere dati sul visitatore del sito e utilizzarli per definire gli stili CSS. Ci interessa in modo particolare la funzione min-width, che ci permette di applicare specifici stili CSS se la finestra del browser scende al di sotto di una larghezza particolare, che è possibile specificare.

Utilizzando una serie di media query di questo tipo, siamo in grado di gestire anche grandi risoluzioni.

Dal punto di vista più pratico, al momento di decidere per quali risoluzioni ottimizzare il sito, è necessario valutare il target di riferimento e il budget fissato dal cliente.

È noto che i computer non sono più l'unico strumento dotato di browser web. L'iPhone è stato uno dei primi dispositivi mobili ad avere un browser eccezionale, di cui molti altri dispositivi hanno seguito l'esempio.

Da qui il grande cambiamento del mobile web, che ha determinato anche un'evoluzione delle aspettative degli utenti.
Le persone si aspettano di poter navigare sul web con i loro telefoni con la stessa facilità con cui lo fanno sui computer desktop.
Le agenzie web hanno così iniziato a rilasciare versioni mobile dei loro siti web, fino ad arrivare oggi ad una completa revisione della tecnologia con cui realizzare un sito, per permetterne la visualizzazione su ogni dispositivo.

Ultimamente, infatti, si sono diffusi non solo gli smartphone, i tablet touchscreen o i notebook di piccole dimensioni, ma anche i grandi display ad alta risoluzione ed è un peccato non coglierne le opportunità.

In conclusione, la gamma delle dimensioni di schermi e risoluzioni si sta ampliando ogni giorno ed è a questo che il responsive web design offre una risposta.