Siti responsive per dispositivi mobili

web marketing

I siti responsive stanno diventando sempre più comuni visto l’aumento esponenziale dei device mobili sempre connessi ad Internet sempre più diffusi anche in italia, per siti web responsive si intendano quelle architetture digitali che attraverso una particolare programmazione riconoscano la risoluzione dei monitor nei quali vengano visualizzate e si ridimensionano adattando dimensioni, contenuti e grafica presenti sui siti, le tecniche di programmazione attuali più utilizzate si basano sulle media queries di CSS3 che adattano le pagine alle dimensioni dello schermo del dispositivo mobile in questione.

Per comprendere meglio le media queries proviamo a capire come sono costruite;

@media screen: La prima parte di una media query è il tipo di supporto. Potreste riconoscere questa sintassi se almeno una volta durante la scrittura del vostro foglio di stile CSS avete incluso gli stili per la stampa.

(min-width: 500px): La seconda parte è la query vera e propria. Essa include la funzione da interrogare (in questo caso la larghezza minima della finestra) e il corrispondente valore per testare che la regola è stata applicata (500px).

Quando si parla di Responsive Web Design, c’è la tendenza a concentrarsi sulla proprietà della larghezza, ma forse non tutti sanno che in realtà esistono altre caratteristiche interessanti. Le proprietà associate alle Media Queries sono 13. Esse sono:

width/height : con queste proprietà è possibile impostare rispettivamente la larghezza e l’altezza dell’area di visualizzazione compresa qualsiasi barra di scorrimento. È possibile utilizzare i prefissi min e max.

device-width/height : con queste proprietà vengono impostate la larghezza e l’altezza della superficie di rendering, vale a dire la larghezza e l’altezza dell’intero schermo del dispositivo e non semplicemente dell’area di visualizzazione del documento. Anche in questo caso si possono utilizzare i prefissi min e max.

orientation : imposta un orientamento verticale o orizzontale. Specificando nel foglio di stile particolari regole CSS, infatti, ci sarà possibile definire in che modo i vari elementi di una pagina Web verranno visualizzati sul dispositivo, in questo caso specifico a seconda dell’orientamento del device che utilizziamo. Possiamo specificare quindi il tipo di orientamento: landscape (paesaggio) e portrait (ritratto) che ci permettono di modificare il layout di una pagina in base all’orientamento corrente del browser.

aspect-ratio : è una proprietà che imposta il rapporto tra la larghezza e l’altezza dell’area di visualizzazione di un documento. Anche in questo caso si possono utilizzare i prefissi min e max.

device-aspect-ratio : controlla il rapporto tra la larghezza e l’altezza del dispositivo. Prefissi min e max ammessi.

color : applica gli stili scelti a tutti i dispositivi a colori. Prefissi min e max ammessi.

colore-index : descrive il numero di colori presenti nella tavolozza supportata da un certo dispositivo. Può assumere i prefissi min e max.

monochrome : questa proprietà indica il numero di bit per pixel su un dispositivo monocromatico (a scala di grigi).

resolution : imposta la risoluzione (vale a dire la densità di pixel) del dispositivo di output. I valori della risoluzione possono essere espressi in dpi (punti per pollice) oppure in dpcm (punti per centimetro).

scan : è una proprietà valida per gli schermi televisivi che indica il tipo di scansione, interlacciata o progressiva. I valori possono essere appunto progressive oppure interlace.

grid : indica se il dispositivo è di tipo bitmap oppure ‘a griglia’.