Che cos'è il responsive web design?

Il responsive web design e un approccio della progettazione di siti web, che consente di visualizzare la pagina in risposta alla dimensione del dispositivo che si sta utilizzando. Fino a poco tempo fa, i siti web erano in genere sviluppati specificamente per le risoluzioni di laptop e desktop. Ciò ha funzionato bene fino all'avvento degli smartphone e tablet che hanno risoluzioni minori rispetto a normali schermi per computer.. Per molti siti web, creare una versione del sito per ciascuna risoluzione del dispositivo sarebbe impossibile e anche poco pratico. Ormai ogni nuovo cliente oggigiorno vuole una versione mobile del loro sito web.

Com'è nato il responsive web design?

Ethan Marcotte ha scritto un articolo introduttivo circa l'approccio al "Responsive Web Design", per la rivista A List Apart. Il concetto deriva dalla nozione di architettura reattiva, per cui una stanza o spazio può automaticamente regolare la sua grandezza in base al numero e flusso di persone al suo interno. Trapiantando questa disciplina al web design, otteniamo una idea simile e del tutto nuova. Perché creare un design personalizzato per ciascun gruppo di utenti; dopo tutto, gli architetti non progettano un edificio per ogni gruppo di persone che verrà a visitarlo? Proprio come l'architettura reattiva, il "Responsive Web Design" dovrebbe regolarsi automaticamente e non richiedere innumerevoli soluzioni su misura per ogni possibile categoria di utenti.

Come funziona?

Il responsive design è costituito da tre principi fondamentali:

  • Griglie Fluide
  • Immagini Fluide
  • Media Queries

Griglie Fluide

Una griglia fluida è una grigli che e in grado di adattarsi automaticamente in base alla dimensione dello schermo che utilizziamo. La griglia e divisa in un numero specifico di colonne per mantenere il layout ordinato e facile da gestire.

Tradizionalmente i siti web erano definiti in termini di pixel. Questa idea nacque dal settore della stampa dove un giornale o una rivista doveva avere sempre dimensioni fisse. Per questo motivo le pagine responsive sono definite tramite unità relative come ad esempio in percentuali piuttosto che in unità fisse come i pixel. In questo modo ogni volate che la grandezza del nostro schermo cambia gli elementi si adatteranno in base alle proporzioni indicate dal contenitore principale.

Immagini fluide

L'idea centrale è che le immagini dovrebbero essere in grado di compattarsi all'interno dei confini di una griglia fluida. Questo può essere fatto molto semplicemente con una sola riga di codice CSS. Anche in questo caso le dimensioni dell'immagine va definita in unita relative percentuali.

IMedia Queries

Tipicamente gli smartphone sono utilizzati in modalità portrait, il che significa che lo schermo è più alto che largo. Ciò si presta a siti web che scorrono verticalmente, ma risulta scomodo per larghi layout con diverse colonne. Qui entrano in gioco i Media Queries. I Media Query consentono al codice CSS di essere applicato solo quando vengono soddisfatte determinate condizioni. Per esempio, si potrebbe scrivere un Media Query che applichi il codice CSS solo quando il browser raggiunge una larghezza specifica. Ciò significa che quando un design è troppo largo o troppo piccolo, una Media Query può essere utilizzato per rilevare la larghezza del sito web e applicare il codice CSS che riorganizza in modo appropriato il contenuto della pagina.

Ad ogni modo il responsive Web design offre un grande vantaggio all'utente. Ogni soluzione personalizzata offra all'utente una migliore esperienza, in questo modo siamo in grado di creare soluzioni personalizzate per una vasta gamma di utenti e per un ampia gamma di dispositivi.