Un layout per ogni schermo

le Media Query per creare una esperienza di navigazione su misura

13/08/2011 | HTML5
Un layout per ogni schermo | le Media Query per creare una esperienza di navigazione su misura

Una delle sfide che dobbiamo affrontare oggi quando sviluppiamo una interfaccia web è realizzare una grafica che si adatti alla sempre maggiore quantità di dispositivi che esistono, ognuno con le proprie dimensioni.

Se osserviamo gli accessi alle nostre pagine web, infatti, possiamo notare che queste sono visitate sempre più spesso da tablet e da dispositivi mobili.

Grazie quindi al 3G, ed in previsione delle reti 4G in arrivo nel 2016, quindi, i dispositivi mobili vengono considerati il futuro della navigazione web.

Se CSS2, quindi aveva dato la possibilità di utilizzare un foglio di stile diverso ad esempio per la stampa, CSS3 va oltre introducendo le media query: delle dichiarazioni che ci permettono di impostare delle regole differenti a seconda dei dispositivi di destinazione.

Esistono due modi per integrare tali dichiarazioni, ma vediamo velocemente gli esempi.

Metodo 1


< link href="iphone.css" rel="stylesheet" type="text/css"
media="only screen and (min-width:0px) and (max-width:320px)" >
 
< link href="ipad.css" rel="stylesheet" type="text/css"
media="only screen and (min-width:321px) and (max-width:768px)" >
 
< link href="screen.css" rel="stylesheet" type="text/css"
media="only screen and (min-width:769px)" >

In questo modo possiamo utilizzare dei fogli di stile diversi a seconda del dispositivo che visualizzerà la nostra pagina web.

ATTENZIONE!!
Modificando la larghezza della nostra pagina per iPhone, e visualizzandola sul device, ci accorgeremo che il tag width non ha fatto correttamente ciò che gli avevamo chiesto.
Per questo tipo di dispositivi, infatti, dobbiamo fare una piccola modifica al tag head della nostra pagina. Bisogna aggiungere questo codice:


< meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Metodo 2

Il secondo medoto, del tutto uguale al primo, utilizza la media query all'interno dei fogli di stile. Un piccolo esempio, infatti, ci permette di cambiare il colore di un div al ridimensionamento del nostro browser.

Ecco il codice CSS:

@media screen and (max-width: 600px) {
.one {background: #F9C;}
span.lt600 { display: inline-block;}
}
@media screen and (min-width: 900px) {
.two {background: #F90;}
span.gt900 {display: inline-block;}

@media screen and (min-width: 600px) and (max-width: 900px) {
.three {background: #9CF;}
span.bt600-900 {display: inline-block;}
}
@media screen and (max-device-width: 480px) {
.iphone {background: #ccc;}
}

Questo invece l'html:

< div class="wrapper one" >
Quest'area si evidenzierà quando la dimensione 
del tuo browser sarà inferiore a 600px
< / div >

< div class="wrapper two" >
Questo box si evidenzierà quando la dimensione 
del tuo browser sarà superiore a 900px
< / div >

< div class="wrapper three" >
Questo box si evidenzierà quando la dimensione 
del tuo browser sarà compresa tra 600px e 900px
< / div >

< div class="wrapper iphone" >
Questo box si evidenzierà quando la dimensione 
massima del tuo browser sarà 480px (iPhone)
< / div>

Ecco l'esempio. Proviamo a ridimensionare la finestra del browser tenendolo aperto.

Cosa ne pensate?
Utilizzerete le media query nei vostri progetti?


Let's talk about



Socio Accreditato
  • Giovanni Sodano fa parte del Microsoft Partner Program
  • Giovanni Sodano e' iscritto all'Associazione IWA-ITALY - International Webmasters Association Italia come Socio Ordinario
Like and Use
  • Microsoft Visual C#
  • Yii framework
  • MySql
  • Adobe
Posizionamento sui motori di ricerca

Online si... ma visibili!

Avere un sito web non vuol dire soltanto essere al passo con i tempi, ma creare un binario di comunicazione tra domanda ed offerta: è un modo, dunque, per proporre il proprio business a nuovi potenziali clienti.

  • Ma come fare in modo che il messaggio arrivi al target prefissato?
  • Come posizionare il proprio sito web ai primi posti su motori di ricerca?
  • Come essere certi che la nostra landing page generi la conversione che ci aspettiamo?
  • Come fare in modo che il nostro sito internet lavori per noi H24?

Un sito web aziendale deve garantire un ritorno di immagine, deve spingere, autonomamente, i nostri servizi, e deve offrire una panoramica completa circa i nostri prodotti e servizi.

Ecco perchè essere ai primi posti sui principali motori di ricerca diventa fondamentale per chiunque abbia una propria vetrina online.

Statistiche rivelano, infatti, che l'85% degli utenti cerca su internet ciò di cui ha bisogno attraverso ricerche mirate sui principali motori di ricerca (Google, Bing, Yahoo) e di questi, il 90% non si spinge oltre la terza pagina di risultati, ossia oltre il trentesimo suggerimento della serp.

Ecco perchè studiare delle strategie ad hoc per posizionare nel modo giusto il proprio sito, ed in particolare le pagine dei nostri prodotti e servizi.

la struttura del tuo sito contribuisce al successo della tua attivitą

Web semantico

Content is the King, ovvero il contenuto e l'impaginazione dello stesso può portare reali benefici al posizionamento delle proprie landing page. Chiedimi come.

ottimizzazione e posizionamento SEO sui motori di ricerca

Ottimizzazione SEO

Se non ti trovano, non esisti... È questo il principio sul quale si basano i miei interventi di ottimizzazione lato codice. Scopri i miei servizi SEO.

Analisi sito web

Da oggi puoi richiedere gratuitamente, e senza impegno l'analisi del tuo sito.
Ne valuterò la struttura e la qualità dei contenuti; l'estetica e l'effettiva presenza in rete, nonchè l'importanza che ha presso i motori di ricerca.

Compila il form sottostante








DN50W