Responsive Design scegliere tra CSS3 media queries e UI Framework.

Visto che è da un pò di giorni che non scrivo un nuovo articolo, oggi vorrei iniziare un’argomento nuovo che riguarda l’UX Design delle applicazioni web, introducendo un tema molto attuale qual’è il Responsive Design.

Se volete capire di cosa si tratta vi rimando ai link precedenti, per praticità cerco di essere il più semplice possibile, riguarda tecniche di Design e Css che permettono all’interfaccia grafica di adattarsi in modo perfetto sia graficamente che funzionalmente al dispositivo in uso.

Questo risulta essere di fondamentale importanza e attualità, oggi, in un mondo delle telecomunicazioni, nel quale ognuno di noi,  visualizza e usa applicazioni grafiche con numerosi dispositivi.

Attualmente esistono in merito, numerosi UI framework, framework grafici dedicati a redere facile l’approccio a questa complessa problematica, per chi come me, invece non si accontenta e vuole realizzare un suo mini framework  può costruirsene uno personalizzato tramite le cosidette  media queries messe a disposizione dalle nuove specifiche CSS3.

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 ed 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 perole 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 ed 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 ad 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 personalizazioni 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 ad 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

Giovanni Masucci

 

Be Sociable, Share!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *