Bettabi - Web Design e Web Marketing Torino
Web Design, Siti Internet, Siti e-commerce, Web Marketing, SEO

Responsive Design: Bootrstrap in 5 mosse
prendere confidenza e fare amicizia

26 Luglio 2013

Aggiornamento del 7 maggio 2014: Questo post è stato scritto quando era in uso la versione di Bootstrap 2.3, oggi non più supportata e sostituita dalla 3. Tuttavia, molti template utilizzati dai web designer fanno ancora riferimento alla 2.3 quindi... Meglio non dimenticare!

Con la diffusione degli smartphone e dei tablet (un Galaxy Tab oggigiorno non si nega più a nessuno), sempre più siti implementano un template responsive, ovvero che adatta il proprio layout a seconda del device sul quale viene visualizzato.
Questi siti in pratica non necessitano di un sito mobile ma, grazie alla virtù responsiva, lo stesso sito si trasforma a seconda del supporto sul quale viene visualizzato.

Se siete degli sviluppatori di siti internet vi sarà sicuramente capitato di imbattervi in un template responsive. In questo caso le variabili da tenere presente in fase di sviluppo del css, quindi della grafica del sito, si moltiplicano... Per tutte le risoluzioni di schermo previste! Infatti, non dovrete solo preoccuparvi che i vostri voli pindarici estetici (o quelli del vostro collega grafico) siano ben accetti dai molteplici browser, ma anche alle diverse risoluzioni, ingrandendo e rimpicciolendo la finestra del browser per simulare l'effetto.

In molti casi, dietro alla magia della responsività c'è Bootstrap, un framework inizialmente sviluppato per Twitter, ora reso disponibile tramite GitHub per i più intraprendenti costruttori di template e app.

Il responsive design di Bootstrap è gestito grazie alle proprietà .min-width e .max-width: ciò che è più grande o più piccolo dei valori compresi deve essere modificato per essere visualizzato in modo ottimale.

Se il vostro scopo immediato è domare un template responsivo, le cose da sapere subito sono queste:

1. Grid system

Bootrap utilizza una struttura a 12 colonne, con larghezza che varia da 724px a 1170px, a seconda del dispositivo. In caso di layout fluido (<div class="row-fluid">) le dimensioni vengono date in percentuale.

grid system bootstrap


2. Offset

Per permettere di "spostare" le colonne, è previsto un sistema di offset che inserisce margini a sinistra.

bootstrap offset


3. Nesting Columns

È possibile inserire nuove righe all'interno di una colonna, purché le righe inserite non abbiano al loro interno un numero di colonne maggiore del loro genitore.

In caso di layout fluido (immagine sotto) invece le nuove righe inserite devono sempre avere 12 colonne (lavora in percentuale).

bootstrap fluid nesting

 

4. Devices supportati

Bootstrap individua i devices supportati attraverso media queries, a seconda della larghezza in pixel dei vari dispositivi.

devices supportati da bootstrap


5. Utility classes

Sono previste delle classi per mostrare o nascondere alcuni elementi a seconda del dispositivo. Molto utile per modificare velocemente il design sui vari dispositivi!
Non è comunque consigliato l'abuso: meglio limitare le sparizioni e le apparizioni al minimo indispensabile.

bootstrap utility classes


Per una documentazione più approfondita di questi argomenti vi consiglio di consultare il sito ufficiale di Bootstrap.


blog comments powered by Disqus