Che cos'è il Responsive Web Design

Il Responsive Web Design consiste nel creare siti che modifichino il proprio aspetto a seconda del dispositivo usato per visualizzarli.
In questo articolo spiego cos'è e come si applica ai vostri siti.Per esempio, questo mio nuovo sito è costuito in questo modo: potete averne la prova prendendo la finestra e modificandola, per vedere che cosa succede. Visto? Se allargate la finestra il sito rimane uguale da una larghezza di 1200 pixel in poi, ma se la stringete il contenuto si adatta alla larghezza riorganizzandosi.
Se state vedendo questo sito su un tablet potete provare passando dalla posizione verticale e quella orizzontale e viceversa.
Se siete su uno smartphone noterete che le colonne spariscono e il contenuto si dispone tutto in verticale, consentendo di mantere le cose ben leggibili.
In questo modo la pagina risponde alle esigenze di visualizzazione dell'utente.

Perché il Responsive Web Design?

Prima del RWD, spesso venivano create più versioni del sito per i dispositivi mobile (qualcuno ricorda il WAP? spero di no…) con un aggravio di costi e sforzi di produzione.
La situazione è un po' migliorata con i nuovi smartphone dotati di browser migliore (iPhone e cellulari Android), ma di certo vedere il sito su uno schermo piccolo non è il massimo.
Per questo si usa il design responsive, per fare in modo che il sito risulti ben leggibile e usabile sempre.

Vantaggi del Responsive Web Design

In primo luogo possiamo creare una sola versione del sito, senza avere (e mantenere, e aggiornare) versioni diverse. Così risparmiamo tempo (e quindi soldi) nelle operazioni quotidiane di mantenimento del sito. Ovviamente anche i costi di realizzazione saranno più bassi.
Poi si guadagnano utenti soddisfatti: ci sono in giro centinaia di milioni di utenti che guardano il web con un dispositivo mobile. Ormai è obbligatorio fornire loro un'esperienza completa e piacevole: pensiamo solo ai siti di eCommerce che possono solo guadagnare clienti e vendite da questa situazione.
Dal punto di vista della Search Engine Optimisation (SEO) il RWD è un bel vantaggio: le pagine offrono lo stesso indirizzo a tutti e l'indicizzazione del sito ne trae giovamento. In più non ci si deve preoccupare di casi nei quali un link porti alla versione mobile invece della versione desktop, e viceversa.
Dal punto di vista delle statistiche è tutto più semplice da gestire, stante il fatto che i sistemi di statistica riescono comunque a separare le visite fatte da PC da quelle dei dispositivi mobili, lo stesso vale per le pagine diffuse sui social network.
Insomma, il Responsive Web Design consente di avere un sito taglia unica che veste bene tutti.

Tecnica

La tecnica del RWD è semplice e non richede niente di speciale sul server. Si basa tutta sull'accoppiata HTML-CSS per modificare l'aspetto del sito.
Questo viene fatto attraverso le media queries, un sistema CSS per specificare certe caratteristiche di formattazione da applicare alle pagine quando si verificano certe consizioni.
Per esempio, questa è una parte delle condizioni applicate a questo sito quando lo schermo è largo 480 pixel (l'Phone messo in orizzontale, per capirsi):

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%; }
	p.promo { display: none; }
	div.NewsSummary { width: 46.7%; }
	div.menu { float: none; width: auto; }
	div.span_6_of_12.blog, div.span_6_of_12.twitter
	{ width: 100%; float: none;}
}

Al di là degli aspetti tecnici, la parte interessante è la prima riga. Con quella definizione decidiamo la condizione (schermo di larghezza massima di 480 pixel) verificata la quale applichiamo gli stili seguenti.Ora immaginate condizioni (in gergo breakpoints) per gli schermi 1024px, 768px, 320px, rispettivamente iPad orizzontale e verticale, iPhone verticale. Ovviamente si possono aggiungere breakpoints a volontà, verificando molti fattori. Se vi interessa la cosa potete fare un giretto sulla sezione media queries del W3C.Tutto qui? Sì e no. È evidente che serve una pianificazione attenta di quello che si vuole mostrare e di come questo vada fatto. La cosa si complica per le immagini e certi blocchi "critici", tipo slider di contenuti e slideshow, ma sinceramente non è nulla di insormontabile.
Ci si può avvalere per il testing di alcuni siti interessanti, tipo screenqueri.es o The Responsinator, oppure usare certi software tipo il browser Aptus per Mac, ma ce ne saranno secchiate di altri per qualsiasi sistema operativo.

Conclusioni

Usare il Responsive Web Design è ormai una condizione imprescindibile. Troppi sono gli utenti che accedono al web tramite dispositivi mobili dotati di piccoli schermi, e tutte queste persone si aspettano di poter fruire del web nella migliore maniera possibile. E hanno ragione.