Pillole 2.0 – Il Responsive Web Design

Grazie alla diffusione capillare di dispositivi mobili (tablet e smartphone) “always on”, a spese dei device tradizionali (desktop e laptop), ha preso sempre più piede il cosiddetto Responsive Web Design (RWD), la tecnica di web design per la realizzazione di siti web in grado di adattarsi graficamente in modo automatico al dispositivo con il quale vengono visualizzati.

In altre parole, grazie a questo approccio “adattivo”, un sito web si adatterà al comportamento e all’ambiente dell’utente indipendentemente dalle dimensioni dello schermo, dalla piattaforma utilizzata e dall’orientamento del dispositivo.

Un layout di tipo responsive fa sì che, ad esempio, diminuendo la dimensione dello schermo un elemento della pagina occupi più spazio in altezza e meno in larghezza in quanto non è detto che possa sempre occupare il 50% della larghezza a qualsiasi risoluzione, anche su mobile.
A tale proposito, il layout della pagina viene strutturato tramite una griglia, fissa o fluida, denominata Grid System, grazie alla quale è possibile allineare i contenuti.
Bootstrap, attualmente il framework front-end più diffuso, prevede una griglia con 12 colonne.

Grid System (Fonte: https://medium.com/designers-italia/)

Affinché il contenuto si adatti al contenitore, occorre definire una serie di Resolution breakpoint (punti di interruzione della risoluzione), ossia delle soglie al di sotto e al di sopra delle quali il layout cambia comprimendosi o espandendosi.
In media, nella progettazione di un sito sono necessari, dai quattro ai cinque breakpoint a cui corrispondono altrettante variazioni della griglia; tali variazioni consistono nel cambiamento sia dei margini che dei gutter:

Resolution Breakpoint (Fonte: https://medium.com/designers-italia/)

Ad esempio, un elemento per cui è definita la classe class=”col-md-2″ occuperà automaticamente 2 colonne (1/6 del layout) della griglia base; class=”col-md-6″ estenderà l’elemento su 6 colonne (1/2 del layout).

Visite: 128

 venerdì 28 settembre 2018
Pillole 2.0, Tecnologia
, , ,