Cosa è Responsive Web Desgin

Responsive Web design
Responsive Web Design

Il Responsive Web Design, è una tecnica di design che prevede di costruire contenuti web che si adattano ad ogni dispositivo. Con l’aggettivo “responsive” si indica infatti tutto ciò che “reagisce o risponde in modo appropriato ad uno stimolo”.

Se applichiamo questa idea ad un sito web rendendolo quindi un sistema  ‘adattivo’, possiamo facilmente ricavare una definizione come quella fornita da Kayla Knight in Smashing Magazine:

Con Responsive Design indichiamo quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.

Quando l’utente passa dal suo PC desktop ad un iPad, il sito dovrebbe automaticamente adattarsi alla nuova risoluzione, modificare le dimensioni delle immagini e le interazioni basate sugli script. In altre parole, un sito dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell’utente.

 

Da quanto si è detto finora, si potrebbe ricavare l’idea che il responsive design abbia a che fare essenzialmente con con l’adattamento del layout mediante media queries CSS.
Pur essendo il meccanismo architrave di questo approccio, al crescere della complessità del progetto, aumenta la necessità di coinvolgere tecnologie quali Javascript e Ajax (jQuery).

 

Possiamo inoltre definire i seguenti obiettivi, per poter definire un contenuto web Responsive:

  • adattare il layout ed il suo contenuto al maggior numero di risoluzioni di schermo possibile, comprendendo una gamma di dispositivi tale da racchiudere pc, tablet e smartphone;
  • servire immagini ‘meno pesanti’ ai dispositivi che non possono sempre sfruttare la banda larga;
  • semplificare il layout in base al dispositivo che lo richiede, nascondendo ad esempio elementi non essenziali;
  • fornire un’interfaccia adatta all’interazione touch per i device che la supportano;
  • saper sfuttare dove richiesto, funzionalità adatte al mobile (come la geolocalizzazione).

 

A questo indirizzo è possibile vedere una vetrina di siti web Responsive.

 

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.