Con il termine Responsive Web Design (RWD) si indica un approccio alla progettazione dei siti per il quale il layout delle pagine si deve adattare automaticamente all’ambiente nel quale vengono visualizzate (dimensioni e risoluzioni del monitor, piattaforma, orientamento del device ecc.).

In pratica il sito dovrebbe adattare dimensioni e interazioni quando l’utente passa da PC desktop a tablet, smartphone, cellulari di vecchia generazione, web tv ecc., riducendo al minimo la necessità di ridimensionare manualmente e scorrere in orizzontale.

Il “padre” del Responsive Design viene considerato Ethan Marcotte, il primo a utilizzare questo termine in un suo articolo del 2010 su A List Apart, in cui diceva “Rather than tailoring disconnected design to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design”.
Luke Wroblewski nel suo libro “Mobile first” arriva a dire che, poichè l’accesso alle informazioni sulla rete avviene sempre più spesso da mobile, occorre progettare prima per il mobile e poi per il laptop.

Il responsive Design nasce quindi dall’esigenza di progettare e rendere fruibile una stessa pagina web su più dispositivi (PC, smartphone, tablet), con differenti risoluzioni di schermo.

L’approccio alternativo è invece quello di analizzare pagine differenti a seconda dei dispositivi che le dovranno vedere. Il Responsive Design non introduce nuovi linguaggi, ma integra strumenti già in uso da anni come il JavaScript (jQuery) e il CSS3.

Ma il Responsive Design non si limita al solo aspetto di implementazione: la progettazione delle pagine deve tenere conto di come rendere disponibili le informazioni contenute nelle pagine nelle diverse modalità di visualizzazione.

La progettazione “responsive” del layout come unica pagina dovrà quindi seguire un percorso a crescere, partendo dalle risoluzioni inferiori: smartphone, tablet, netbook, PC desktop e notebook. Da questo presupposto, deriva l’approccio “mobile first” che prevede appunto di progettare l’informazione contenuta in una pagina web a cominciare proprio dal mobile.

L’approccio mobile first oggi è visto come un’opportunità in termini di business e/o comunicazione: ci saranno sempre più utenti mobile che utenti “desktop”.
In questo senso diventa fondamentale progettare le pagine e le interfacce web partendo dalla loro forma più “essenziale” (ma più diffusa).

Alcuni dati in proposito: negli ultimi 12 mesi Amazon ha registrato transazioni da mobile per oltre 1 miliardo di dollari [dati fonte Source]

Si stima che gli acquisti da mobile entro il 2014 saranno quadruplicati [http://www.marketwire.com].
Parallelamente è sempre più in aumento l’utilizzo dei social network e l’accesso alla casella email direttamente da mobile.

Kate Aronowitz, Design Director di Facebook dichiara: “We’re just now starting to think about mobile first and desktop second for a lot of our products”.

La progettazione “responsive” deve tenere conto dei vincoli imposti dal mobile non solo in termini di dimensioni del display. L’accesso alle pagine tramite reti 3G può influenzare il tempo di scaricamento della pagina e quindi condizionare l’“experience” complessiva dell’utente. La pagina “responsive”, proprio perché unica pagina per differenti device, deve essere ottimizzata al massimo in termini di peso e lunghezza complessiva.

L’approccio con pagine dedicate alle singole modalità di accesso, invece, permette di ottimizzarle singolarmente: le pagine mobile potranno essere molto leggere, mentre le equivalenti in versione “full site” potranno essere anche più pesanti.

In occasione della sfida elettorale tra Barack Obama e Mitt Romney, si è disputata anche una sfida tra due approcci. Il sito di Obama è stato realizzato secondo i dettami del Responsive Design. Il sito di Romney secondo una più tradizionale impostazione di sito “full site” e versione mobile.

Il sito “mobile” di Romney offriva solo una parte dei contenuti del sito web; il sito “responsive” di Obama proponeva agli utenti mobile tutti i contenuti del sito, a scapito però di una pagina lunghissima da scrollare e con alcuni problemi in termini di performance e quindi di experience complessiva.

Il quesito su quale sia stata la scelta migliore probabilmente resterà irrisolto, indipendentemente dal risultato elettorale.