Responsive Design scegliere tra CSS3 media queries e UI Framework.
È passato un pò di tempo da quando ho scritto l’ultimo articolo, quindi oggi vorrei iniziare un nuovo argomento che riguarda l’UX Design delle applicazioni web: il Responsive Design. Questo tema è estremamente attuale e riveste un’importanza fondamentale nell’ambito della progettazione delle interfacce digitali.
Se desiderate saperne di più sull’argomento, vi consiglio di consultare i link precedenti. In poche parole, il Responsive Design riguarda le tecniche di design e CSS che consentono all’interfaccia grafica di adattarsi in modo ottimale, sia dal punto di vista estetico che funzionale, al dispositivo utilizzato dall’utente.
Nell’attuale mondo delle telecomunicazioni, in cui ogni individuo utilizza numerose applicazioni grafiche su diversi dispositivi, il Responsive Design riveste un’importanza fondamentale e attuale.
Attualmente esistono numerosi CSS framework dedicati a semplificare l’approccio a questa complessa problematica. Tuttavia, per coloro che desiderano creare un framework personalizzato, come me, è possibile costruirne uno utilizzando le media queries fornite dalle nuove specifiche CSS3. Le media queries consentono di adattare in modo mirato l’aspetto e il comportamento dell’interfaccia grafica in base alle dimensioni e alle caratteristiche del dispositivo utilizzato. Questo offre la flessibilità necessaria per realizzare un framework su misura che soddisfi le esigenze specifiche del progetto.
Eccone un esempio che fa capire come possono essere funzionali a tale scopo:
@media only screen and (min-width: 768px) and (max-width: 959px) { |
.box { |
color:#cccccc; |
font-size:14px; |
line-height:20px; |
margin: 0 auto; |
padding: 0; |
position: relative; |
width: 940px; |
} |
}
La prima riga dichiara al browser di utilizzare le caratteristiche della classe .box solo se il supporto di visualizzazione dovesse essere uno schermo con risoluzione minima di 768px e massima di 959px.
Oltre a modificare direttamente il vostro CSS è possibile però anche separare il codice CSS in più file e richiamarli direttamente nell’HTML sfruttando sempre l’attributo media:
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /> |
Questa è una possibilità per chi vuole crearsi il proprio layout responsive artigianalmente, ma per chi non vuole perdere tempo a costruirsi un proprio modello responsive, come detto precedentemente esistono numerosi e ottimi framework che ognuno di noi può adottare per costruire layout responsivi e con poco codice, tra i tanti oggi volevo introdurvi uno dei più famosi e utilizzati al mondo, sto parlando della libreria Twitter Bootstrap, un ottimo tool di sviluppo.
Vediamo di introdurre l’argomento nel modo più semplice possibile Twitter bootstrap è basato sul concetto molto diffuso del layout a griglie, in altre parole l’interfaccia viene divisa in tante righe.
In parole semplici per capire il funzionamento del grid system di twitter bootstrap, bisogna pensare che il layout viene diviso a 12 colonne, il che significa che la pagina può essere divisa in 12 colonne di eguale larghezza.
Quindi se dalla nostra progettazione vogliamo ottenere un layout a due colonne, rispettivamente di classe .span9 e .span3, stiamo indicando ala libreria di creare una colonna di larghezza pari a 9/12 e 3/12 dell’intero ingombro della pagina sul nostro dispositivo.
Il grande vantaggio di usare questo tipo di sistema a griglie è che lavora con l’effettiva larghezza di ciascuna colonna rispetto alla larghezza dello schermo, pertanto non occorre preoccuparsi di utilizzare le media-queries per far si che il template di adatti alle varie risoluzioni, come ho fatto io per un mero esercizio di stile e perchè non mi servivano tutte le enormi potenzialità di Bootstrap, ma basta seguire e attenersi a queste poche regole e scrivere poche righe di codice per rendere le vostre applicazioni pienamente responsive.
Le cose da fare sono veramente poche e semplici e le illustrerò di seguito:
Come cosa principale deve essere importato il CSS di Bootstrap, aggiungendo questa riga nell’Head della pagina web:
<link href=”http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css” rel=”stylesheet”>
Come secondo passo bisogna creare un DIV con classe container che conterrà tutti gli altri tag della pagina.
<div class=”container”></div>
Questa classe contenuta nel CSS di Bootstrap, la classe .container è fondamentale perché ci permette di creare un contenitore centrato nella nostra pagina che è già di per se adattabile e possiamo inserire dentro esso tutti i nostri contenuti.
La classe .container è costituita da un DIV con una larghezza fissa e con i margini “auto” per centrarla.
Il passo successivo è quello di cominciare a inserire i contenuti usando per esempio il tag H1:
<h1>Giovanni Masucci Tutorial</h1>
Logicamente noterete che se create un vostro menù non sarà responsive automaticamente, ma solo il container lo sarà, per creare invece il menù stile twitter, utilizzeremo le classi di bootstrap apposite per lo scopo:
<div class=’navbar navbar-inverse’>
<div class=’nav-collapse’ style=”height: auto;”>
<ul class=”nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</div>
La classe .navbar ha in sé tutti gli stili per la nostra barra di navigazione, mentre la classe .navbar-inverse applica gli stili per realizzare un template scuro simile a quello di twitter.
Logicamente non sto qui a spiegarvelo, agendo sul css potrete apportare tutte le personalizzazioni del caso.
Noterete che all’interno del DIV .navbar c’è né un altro con classe .nav-collapse e una regola in linea con “height:auto”. Questo serve a mostrare una vista differente quando il browser ha una larghezza inferiore a 979px.
Passiamo ora alla parte centrale dei contenuti.
Abbiamo completato la parte di navigazione principale, ora occorre predisporre l’area dei contenuti e una colonna laterale:
<div id=’content’ class=’row-fluid’>
<div class=’span9 main’>
<h2>Area di Lavoro</h2>
</div>
<div class=’span3 sidebar’>
<h2>Barra Laterale</h2>
</div>
</div>
Twitter bootstrap mette a disposizione diverse classi e componenti già pronti per essere usati nei vostri progetti, per approfondire vi rimando al link del progetto ufficiale in cui sono descritte nello specifico tutte le specifiche della libreria.
Intanto noi vediamo un semplice esempio dell’uso dell classe .nav-stacked utile per creare un pannello di navigazione addizionale nella barra laterale:
<ul class=”nav nav-tabs nav-stacked”>
<li><a href=’#’>portfolio</a></li>
<li><a href=’#’>blog</a></li>
<li><a href=’#’>clienti</a></li>
</ul>
Come vedete nulla di più semplice le classi .nav-tabs e .nav-stacked creano il pannello di navigazione che ci serve.
Con questo anche per oggi termino il mio articolo, spero sia servito a introdurvi l’argomento e capire la semplicità e la potenza di questi strumenti, sarete voi a questo punto a decidere se avvalervi di framework specifici, come twitter bootstrap o qualsivoglia UI Framework presente sul mercato o crearvene uno da voi.
Un saluto e alla prossima
