Il World Wide Web è un mondo in continua e rapida evoluzione tecnologica e, in tale contesto, l’innovazione che ha portato con sé le conseguenze più rilevanti per i designer e gli sviluppatori è stata la diffusione dei dispositivi portatili quali smartphone e tablet.

Le previsioni dicono che in tempi brevi gli accessi ai siti Internet tramite i suddetti dispositivi supereranno quelli effettuati sui PC da tavolo e notebook; al di là della precisione di tali previsioni, si impone dunque di considerare le circostanze nel progettare e sviluppare i siti.

La soluzione tecnica adottata per adattare in qualche modo la pagina del sito alla risoluzione dello schermo, fino all’introduzione di HTML5/CSS3, era quella di ricorrere ad un layout liquido in cui, cioè, le dimensioni degli elementi contenitori della pagina fossero espresse non in termini “fissi” (px) bensì in termini relativi: % o ems, dunque.
Questa soluzione comportava però delle difficoltà e degli svantaggi, riassumibili per brevità come segue:

1) un eccessivo allargamento (o restringimento) della risoluzione disponibile a video – anche solo a seguito del ridimensionamento della finestra del browser – determinava una ridisposizione dei contenuti sgradevole e poco compatibile con la fruibilità degli stessi.
Era possibile applicare delle dichiarazioni che limitassero il ridimensionamento, innanzitutto, del contenitore principale del layout tramite le proprietà max-width e/o min-width ma il mancato supporto da parte di IE7 e versioni precedenti – in anni in cui questo era il browser largamente dominante! – rendevano la soluzione poco efficace.

2) in generale, uno scarso controllo sulla disposizione degli elementi all’interno della pagina soprattutto in presenza di contenuti non particolarmente abbondanti.

Con l’introduzione di HTML5/CSS3 è stato reso disponibile uno strumento mirato alla costruzione di siti “reattivi” costituito dalle media query, che istruiscono il browser a leggere la risoluzione dello schermo disposibile sul dispositivo e disporre gli elementi della pagina ed i contenuti di conseguenza.
Un sito reattivo (responsive), anche detto adattivo, è dunque un sito che cambia il suo aspetto a seconda che sia visualizzato su uno schermo di grandi dimensioni o su un telefonino/tablet, per dirla in breve.

Posta questa premessa, e prima di vedere un esempio concreto (sia pure semplificato), occorre chiarire se e quando sia indispensabile applicare questa tecnologia di sviluppo.

Continua a leggere→