griglia
Una semplice guida al responsive design.
Traduzione di Paolo Villani dall'originale di Adam Kaplan.
Una semplice guida al responsive design.
Traduzione di Paolo Villani dall'originale di Adam Kaplan.
Perché vogliamo che i nostri siti siano usabili su qualsiasi dispositivo interagendo con il comportamento dell'utente, con la dimensione e l'orientamento dello schermo.
Dal 2013 esistono migliaia di differenti dispositivi con schermi di diverse dimensioni e risoluzioni che consentono di navigare in internet, cosa che rende impossibile progettare layout appropriati per ognuno di essi. Dobbiamo invece avere un approccio più fluido.
Inseritelo nel <head> del vostro HTML. Ciò abilita l'utilizzo delle "media queries" per gestire layout "cross-device".
È importante conoscere le nozioni fondamentali, come, ad esempio, il modo in cui gli elementi sono generati e si comportano nel browser, prima di tuffarsi nella progettazione "responsive". Il "CSS Box Model" consiste di 4 parti distinte.
Il "content" (contenuto) del box, dove compaiono testo e immagini.
Crea un area attorno al "content".
Un bordo che sta attorno al "padding".
Crea un area attorno al bordo.
Inseritelo all'inizio del vostro file CSS. Il * lo farà estendere a tutti gli elementi della pagina.
Ciò che una volta era un bug è ora una proprietà largamente utilizzata. In pratica questo vuol dire che potete scegliere se includere o non includere bordi e padding nella larghezza del vostro contenuto.
Margini, bordi e padding sono disegnati e calcolati all'esterno della dimensione della larghezza del vostro contenuto.
Bordi e padding sono disegnati e compresi nell'insieme della larghezza del vostro contenuto. I margini sono disegnati e calcolati all'esterno.
Un contenitore contiene tutti gli elementi e controlla la larghezza massima di pagina. Usare un contenitore renderà più semplice progettare in modo "responsive"!
Una colonna è una classe utilizzata per incolonnare il contenuto orizzontalmente. Il primo margine viene rimosso usando la
pseudo-class first-child.
Aggiungere classi di dimensione alle colonne per creare un sistema di griglie riutilizzabili.
Le colonne sono avvolte in righe per prevenire l'eventualità che altri elementi si aggiungano affianco ad esse, altrimenti nota come "questione del clearing". Le righe vengono "ripulite" sia con il clearfix (applicato al contenitore) che con overflow: hidden (applicato alle righe). Questo "clearfix" è stato creato da Nicolas Gallager:
Se le dimensioni dello schermo del browser rientrano all'interno di un range stabilito, una "media query" rimpiazzerà il codice CSS che viene utilizzato dal browser. Questo è l'"abc" della progettazione web "responsive".
Seguendo questi semplici passi, sarete sulla strada giusta per padroneggiare la progettazione web "responsive". Continuate a fare pratica ed aiutate a rendere il web un posto migliore e più usabile.