mobile first

Usabilità e accessibilità

A differenza del predecessore, in B3 l'orientamento è verso il mobile first*. Significa che l'aspetto responsivo ( visuale e a livello di prestazioni ) non è un opzione ma la base del framework. In pratica, la griglia offre un esteso margine di personalizzazione a seconda che il device sia extra small, grazie all'utilizzo delle classi specifiche seguite dalla dimensione ( col-xs- ), small ( col-sm- ), medium (col-md), large ( col-lg- ). 

 Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Mobile first

Dallo spunto dell' #IxDT , " una strategia scalabile per essere online su tutti i device ", di qualche mese fa, alcuni appunti su mobile first e responsive.

 

La progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente (dimensioni dello schermo, piattaforma e l’orientamento del device, etc..): il MF non è una metodologia per creare versioni dei siti ‘ottimizzate’ e specifiche per il mobile: un principio cardine del responsive design infatti è che il web è uno e unico.
 
Nella progettazione del sito è opportuno partire dalla strutturazione dei contenuti per lo schermo limitato nelle dimensioni dei dispositivi mobili: non, quindi, da un layout e da un set di funzionalità concepiti per il desktop per poi adattarli per il mobile, togliendo elementi, ma al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci sia in termini di spazio che di prestazioni.