Lezione #id-jqmobile-2013-0011.html#
Responsive Web Design (RWD) è il design e la programmazione che permettono ad un sito web di essere fruibile su display con caratteristiche e risoluzioni differenti tra loro. La necessità di sviluppare le tecniche RWD nasce e cresce con la diffusione dei dispositivi Mobile, infatti la risoluzione, la dimensione e l’orientamento orizzontale rendono uno Smartphone assai differente dal monitor di un PC in Full HD. “Responsive Web Design” può indicare ad esempio il “Liquid Design”. Un sito “liquido” è costituito da una struttura che si adatta al volo alla risoluzione del display sul quale è visualizzato, come un liquido che si adatta alla forma del bicchiere che lo contiene.
JQuery Mobile presenta diversi widget (gingilli 😉 ) dedicati al RWD:
– Responsive grids -> griglie
– Reflow tables -> tabelle
– Column chooser tables -> selettori di colonne per tabelle
– sliding panels -> pannelli slittanti (questi termini non andrebbero tradotti…)
I punti fondamentali per realizzare un RWD sono:
– Iniziare il progetto sviluppando per il dispositivo meno performante
– CSS media query – min-widht – max-width – per il rilevamento dei dispositivi.
– Una griglia fluida, dove si dimensionano gli elementi in percentuale non con pixel fissi, lo scopo è ricoprire il 100% del display
– Immagini e Media flessibili, la cui dimensione deve essere specificata in unità relative, il cui scopo è riempire i containers che le ospitano. Ad esempio un’immagine con – width=”256″ – non è responsive, la stessa immagine con – width=”100%” è responsive.
– Utilizzare come unità di misura gli ems non i pixel. Per calcolare gli ems scegliere il dispositivo più piccolo nel quale si dovrebbe vedere il carattere, ad esempio uno smartphone da 320px, dividere per la dimensione di default del font, ad esempio 16px, per ottenere 20 ems.
– Dati da scaricare ed elaborare non troppo pesanti, per essere fruibili anche sui dispositivi più datati.
– Dati caricati in base al tipo di dispositivo utilizzando tecniche JavaScript. Ad esempio verranno richieste immagini grandi solo in presenza di display in alta risoluzione.
Un esempio di Responsive Web Design è un Layout che in base al tipo di display decide di disporre i – div – affiancati su 2 colonne o impilati su un’unica colonna.
Un esempio di foglio di stile CSS per RWD:
/* Iniziamo con gli stili che saranno uguali per tutti i dispositivi */
/* Tipografia, elementi etc... */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
/* Definiamo 2 contenitori, uno principale e uno laterale */
.main,
.sidebar { display:block; width:100%; }
/* Prima risoluzione 576px */
/* Il contenitore principale occupa il 60% */
@media all and (min-width: 36em){
.main { float: left; width:60%; }
.sidebar { float: left; width:40%; }
}
/* Seconda risoluzione 800px */
/* Il contenitore principale occupa il 70% */
@media all and (min-width: 50em){
.main { width:70%; }
.sidebar { width:30%; }
/* Posso variare anche altri elementi */
H1 { color: blue; font-size:1.2em }
}
