1. Perchè è
importante il
Responsive Web
Design?
di Davide Muci
www.adseo.it

2. Significato di Responsive
Design
 Che cos’è il Responsive Web Design? Molto semplicemente è una tecnica di
sviluppo attraverso la quale si cerca di costruire un sito web accessibile a tutti
i dispositivi che consentano la navigazione sul web: Desktop, Laptop, Tablet e
Smartphone.
 Ma l’attenzione maggiore per l’utilizzo di questa tecnologia è sicuramente
legato al settore del mobile , settore che in questi ultimi anni ha avuto un vero
boom! Secondo le ultime statistiche rilasciate da comScore sul mercato
mobile negli Stati Uniti, ci sono circa 234 milioni di americani dai 13 anni in su
utilizzano strumenti mobile; fra questi, sono 110 milioni i possessori di
smartphone (+5% rispetto a febbraio 2012).
 Uno dei primi problemi che sorge quando si affronta questa tematica è che
tipo di tecnologia scegliere per sviluppare un sito che abbia tutte queste
caratteristiche. Una delle tecniche più utilizzate si chiama “Media Queries
CSS”. Tramite questa caratteristica dei CSS possiamo indirizzare stili specifici ai
diversi dispositivi presenti nel mercato, con particolare attenzione agli
Smartphone e Tablet. Provate a pensare cosa succede quando un
dispositivo mobile viene ruotato, il browser riorganizza il layout in base alle
dimensioni della finestra; con questa tecnica si risolvono non pochi problemi
di visualizzazione.

3. Esempi di responsive Web
Design
Per avere un’idea tangibile su cosa sia effettivamente il Responsive Design
ho raccolto 20 esempi pratici di siti che utilizzano questa tecnologia. Tra
quelli che mi hanno impressionato di più c’è sicuramente il “The Boston
Globe” noto magazine americano. Provate anche voi a ridurre la finestra
del vostro browser per vedere l’effetto che fa!
The Boston Globe Social Marketers Summit
Smashing Magazine Warface
Forefathers Atlason
Stonehenge Veterinary Lancaster University
Hospital Heathlife
Frontend 2011 Food Sense
Sphero Grey Goose
Bloom New Adventures In Web
Reverse Büro Design
CSS Tricks Fork
Cappuccino Digital

4. Dove inizia la storia?
 La storia di questa fantastica tecnologia nasce non molto
tempo fa, nel Maggio 2010 quando si è incominciato a
pensare di web design reattivo. Abbiamo superato quindi i
vecchi stili di progettazione legati all’HTML4 e CSS2 per
passare a nuove modalità di progettazione: con l’HTML5 e
CSS3 si iniziano a vedere dei progetti interessanti.
 WordPress, CMS che utilizzo da anni per lo sviluppo di siti
web dinamici, ha introdotto recentemente un tema
gratuito, chiamato Tweenty Twelve, che rende fruibile al
meglio i contenuti del tuo sito web su qualunque dispositivo
tu lo legga. Per incrementarne la leggibilità Twenty Twelve
fa uso dell’ottima font Open Sans (parte dei Google Web
Fonts). Nettamente diverso dai font di default del recente
passato, a parere dell’autore questa font riesce a far
risaltare i testi e a dar loro un look moderno e molto
“pulito”.

5. 3 ragioni per scegliere questa
tecnologia
 Quale sono le principali ragioni che possono spingere una società a scegliere
questa tecnologia?
 Connect With Your Audience
La prima domanda a cui dobbiamo dare una risposta è capire che dispositivi
utilizzano i nostri utenti per navigare su internet. Riporto un altro interessante
studio condotto nel 2012 da MobiThinking che evidenzia il fatto che in tutto il
mondo ci sono 1.2 miliardi di utenti che utilizzo dispositivi mobili per andare sul
web. Dato impressionante! Secondo un altro studio condotto questa volta da
Morgan Stanley nel 2010, previse che nel 2015 la navigazione su internet tramite
mobile superi quella da desktop. Scegliere questa tecnica di sviluppo ci
consente di venire incontro alle esigenze degli utenti, sempre più esigenti dal
punto di vista tecnologico.
 Occhio al Budget!
Quanti di voi hanno il budget per costruire un sito in doppia versione? Una per
desktop e una per mobile? La risposta a questo interrogativo è molto semplice
ed intuitiva: risparmiare soldi e tempo per avere un sito web accessibile a 360
gradi.
 Uno sguardo al Futuro
Non è solo una questione di costi! Bisogna cercare di stare al passo con in
tempi, in una società dove la tecnologia viaggia alla velocità della luce.
Attraverso il responsive web design è possibile costruire un sito web compatibile
con tutti i dispositivi, indipendentemente dalla dimensione dello schermo.

6. Responsive Web Design Tools
 Visegnalo 5 tool che vi aiuteranno a
sviluppare un sito reattivo.
 Screenqueri.es
 Responsinator
 Bricss
 Screenfly
 Responsivepx

7. Che libri mi consigli?
 Su
questo argomento consiglio di
comprare l’e-book pubblicato da A Book
Apart: Responsive Web Design.