Responsive Web Design: cos’è, a cosa serve e come funziona

Chi lavora nel campo del web design e si tiene aggiornato sui cambiamenti che avvengono in questo settore (caratteristica imprescindibile per un designer che si rispetti) avrà sicuramente sentito parlare di Responsive Web Design, concetto strettamente connesso alla Realizzazione di Siti Web Mobile-Friendly e nato a partire dall’articolo Responsive Web Design di Ethan Marcotte.

E’ chiaro a tutti ormai che il mondo della telefonia sta prendendo sempre più piede, si è stimato che in un periodo che va dai 3 ai 5 anni la navigazione in Rete tramite questi dispositivi supererà quella dei dispositivi desktop (dotati di mouse e tastiera), per cui è necessario agire di conseguenza e pianificare un sito che sia facilmente fruibile attraverso dispositivi diversi, quindi smartphone, tablet e console di gioco.

Finora si era soliti realizzare siti web separati, uno in versione desktop, l’altro in versione mobile, confinando in tal modo l’esperienza mobile su sottodomini separati. Ma con l’aumento dei device ci si rende conto che non è possibile creare tanti siti, quanti sono le modalità per visualizzarli, ora quindi sta prendendo piede questa nuova tecnica, che consiste nel realizzare un sito unico adattabile alla dimensione dello schermo del dispositivo tramite il quale viene visualizzato, il tutto in maniera automatica attraverso l’utilizzo di codice CSS3 ed in particolare di MEDIA QUERIES, che permettono di coprire molteplici esigenze di visualizzazione.

Come funziona Media Queries per il Responsive Design

Media Queries permette di captare le dimensioni dello schermo del dispositivo che naviga il sito, quindi di assegnare del codice CSS in base alle varie tipologie di apparecchiature. Se ad esempio abbiamo realizzato un sito web su 3 colonne, quindi di larghezza eccessiva per uno smartphone (per cui l’utente fa fatica a fruirne), possiamo fare in modo che i contenuti dello stesso si adattino su una colonna in modo che diventi più usabile.

Questo il codice, volendo fare un esempio pratico:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      /* Stile CSS per Smartphone */
}

oppure ancora possiamo linkare direttamente a un foglio di stile:

@media only screen and (min-device-width : 480px) and (max-device-width : 640px) {
      /* link al foglio di stile CSS per Small Tablet */
}

Standard degli schermi dei dispositivi di navigazione

Di seguito un elenco degli standard delle misure degli schermi cui adattare il proprio layout:
» MOBILE: width (px) 240 – height (px) 320
» MOBILE: width (px) 320 – height (px) 480
» SMALL TABLET: width (px) 480 – height (px) 640
» TABLET – PORTRAIT: width (px) 768 – height (px) 1024
» TABLET – LANDSCAPE: width (px) 1024 – height (px) 768
» DESKTOP: width (px) 1200 – height (px) 800

Conclusioni

I dispositivi di navigazione della rete aumentano sempre di più e hanno le più svariate dimensioni, per cui diventa fondamentale imparare a creare siti flessibili e adattabili, cominciare anche a pensare diversamente in fase di progettazione. Le media query come avrete capito sono il punto di partenza per il responsive web design, servono solo a capire quali sono i device attraverso i quali si fruisce del sito. Accanto ad esse vi sono altri due fondamentali aspetti su cui porre l’attenzione, ossia le griglie fluide e le immagini flessibili, ma di quest’ultime ci occuperemo in un secondo momento.

Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.