Che cos’è il Responsive Design

responsive design

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.

Secondo Ethan Marcotte, che ha coniato il concetto di Responsive Web Design, bisogna pensare il contenuto in modo tale che, indipendentemente dalla risoluzione del device, l’utente sia in grado di navigare il sito senza avere alcuna difficoltà nella visualizzazione di ogni componente.
Come il contenuto anche le immagini devono adattarsi al device.
Per far in modo che questo avvenga è necessario usare un mix di griglie, layout fluidi, immagini flessibili e media queries CSS.

Il Responsive Design dunque è una tecnica di Realizzazione di Siti Web e Progetti Web Mobile capaci di adattarsi alle diverse risoluzioni del device che visualizza il sito come ad esempio quelle degli Smartphone, dei Tablet o dei Desktop.

Il Responsive Design si contrappone alla tecnica con la quale spesso si lavora per esigenze di tipo Mobile, cioè la realizzazione di due distinti siti (uno mobile e l’altro desktop) visibili alternativamente se si apre il sito da un dispositivo o un altro.

Con il Respondive Design non si interrogano due versioni diverse del sito, ma si lavora con i CSS affinché  lo stesso codice si adatti alle risoluzioni dei vari device, realizzando un sito web che riformattando i contenuti  crea un’esperienza di visualizzazione ottimale in base al dispositivo utilizzato.

Come funziona il Responsive Design?

Per prima cosa è necessario pensare all’ordine dei contenuti, in modo tale che riducendo il layout ad una colonna non si perda il focus sugli elementi che dovrebbero essere in evidenza. Possiamo optare per la soluzione che ci permette di mostrare o nascondere contenuti a seconda del dispositivo, mantenendo il necessario e togliendo ciò che potrebbe essere accessorio.

Progettare un Sito in logica Responsive dunque significa pensare in maniera multipla il nostro sito web, che si adatterà al modo in cui l’utente desidera consultarne il contenuto.

Dal punto di vista pratico questo si ottiene con un insieme di griglie e layout flessibili, un utilizzo intelligente delle media queries CSS e altre tecniche di programmazione che possono prevedere l’utilizzo di javascript. In questo modo il sito sarà in grado di adattarsi automaticamente a quelle che sono le preferenze dell’utente, eliminando la necessità di dover realizzare e implementare differenti design dipendenti dai vari dispositivi.

I vantaggi del Responsive Design

  • Il responsive design rende il tuo sito web visibile correttamente da chiunque.
  • I siti web pensati per i dispositivi mobili sono veloci ed efficienti; sono caratterizzati da una struttura snella, funzioni di navigazione semplici ed intuitive e tempi di caricamento rapidi. Questo permette di offrire un’ottima esperienza di navigazione agli utenti, facendo in modo che trovino subito e facilmente quello che stanno cercando.
  • La manutenzione e l’aggiornamento dei siti internet progettati con le tecniche di responsive design risultano semplificati. Realizzando un unico sito web si interviene su una sola struttura e su un solo contenuto in caso di modifiche, riducendo in tal modo i tempi e i costi di manutenzione. Si evitano, inoltre, problemi di duplicazione dei contenuti con conseguenti vantaggi in termini di posizionamento nei motori di ricerca .

Il Responsive Design oltretutto, con la sua capacità di eliminare eventuali blocchi della struttura, ad esempio nella navigazione da mobile, favorisce la lettura di quei contenuti realmente utili agli utenti che si collegano mentre sono in movimento!

Conclusioni

Il concetto di responsive si esprime mettendo in primo piano la user experience e la fruibilità dei contenuti e spostando il problema di quale sia l’environment dell’utente. In questo modo non ha importanza se l’utente visualizza il nostro sito dal notebook piuttosto che da uno smartphone o tablet, dobbiamo preoccuparci solo che la navigazione sia sufficientemente chiara e in grado di fornire tutti i contenuti in maniera semplice.

Il Responsive Design va quindi visto non tanto come una tecnica ma come una necessità oggi più che mai fondamentale di basare qualsiasi nostro lavoro sull’utente facendo diventare il nostro sito uno strumento in grado di rendere accessibili le informazioni indipendentemente dai dispositivi di visualizzazione.

Buon responsive a tutti!