{"id":1272,"date":"2014-01-30T11:42:32","date_gmt":"2014-01-30T10:42:32","guid":{"rendered":"http:\/\/lnx.instantwebsites.it\/iwblog\/?p=1272"},"modified":"2014-08-19T19:08:34","modified_gmt":"2014-08-19T17:08:34","slug":"introduzione-al-design-reattivo","status":"publish","type":"post","link":"https:\/\/lnx.instantwebsites.it\/iwblog\/2014\/01\/introduzione-al-design-reattivo\/","title":{"rendered":"Introduzione al design reattivo"},"content":{"rendered":"

Il World Wide Web \u00e8 un mondo in continua e rapida evoluzione tecnologica e, in tale contesto, l’innovazione che ha portato con s\u00e9 le conseguenze pi\u00f9 rilevanti per i designer e gli sviluppatori \u00e8 stata la diffusione dei dispositivi portatili<\/strong> quali smartphone e tablet.<\/p>\n

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\u00e0 della precisione di tali previsioni, si impone dunque di considerare le circostanze nel progettare e sviluppare i siti.<\/p>\n

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<\/strong> in cui, cio\u00e8, le dimensioni degli elementi contenitori della pagina fossero espresse non in termini “fissi” (px) bens\u00ec in termini relativi: % o ems, dunque.
\nQuesta soluzione comportava per\u00f2 delle difficolt\u00e0 e degli svantaggi, riassumibili per brevit\u00e0 come segue:<\/p>\n

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\u00e0 degli stessi.
\nEra possibile applicare delle dichiarazioni che limitassero il ridimensionamento, innanzitutto, del contenitore principale del layout tramite le propriet\u00e0 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.<\/p>\n

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

Con l’introduzione di HTML5\/CSS3 \u00e8 stato reso disponibile uno strumento mirato alla costruzione di siti “reattivi” costituito dalle media query<\/strong>, che istruiscono il browser a leggere<\/em> la risoluzione dello schermo disposibile sul dispositivo e disporre gli elementi della pagina ed i contenuti di conseguenza.
\nUn sito reattivo (responsive<\/em>)<\/strong>, anche detto adattivo<\/strong>, \u00e8 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.<\/p>\n

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.<\/p>\n

<\/p>\n

Se interpretassimo le esigenze di reattivit\u00e0 in termini molto stringenti, risulterebbe necessario progettare e sviluppare la pagina del sito per almeno 3 ipotesi di visualizzazione: schermo di un PC da tavolo o di notebook, tablet e smartphone, potendo addirittura approfondire ulteriormente per gli ultimi due distinguendo tra schermo in modalit\u00e0 panoramica o verticale.<\/p>\n

Il lavoro aumenterebbe e … ne varrebbe realmente la pena? La struttura di pagina, la quantit\u00e0 e tipologia di contenuti, lo rendono necessario?
\nInoltre: il cliente \u00e8 disposto a pagare per il lavoro extra?<\/p>\n

Un approccio ragionevole, prudente ma anche efficace, pu\u00f2 dunque essere quello di prevedere in prima battuta due versioni della pagina del sito in costruzione: una “normale” che venga applicata sugli schermi di PC, notebook, netbook e tablet, dato che questi ultimi supportano oramai risoluzioni video elevate; una per gli smartphone in cui la leggibilit\u00e0 e la fruibilit\u00e0 di altri elementi, quali il menu di navigazione, possono essere problematici.<\/p>\n

Consideriamo dunque una struttura di pagina come quella mostrata nell’immagine che segue:
\n\"Esempio<\/a>
\nSi tratta di un tradizionale layout a due colonne realizzato con il sistema delle faux-columns<\/strong> per ottenere i colori di sfondo.
\nIn pratica, il layout consta di:<\/p>\n