Una delle novità date dai CSS3, conseguentemente ad un corretto uso dell'HTML5, è quella di poter creare interfacce che si adattino ai diversi supporti sui quali il prodotto si andrà a visualizzare.

Qual'è il problema numero 1 con i quali designer e developer sono costretti a imbattersi ogni volta? Ottimizzare il proprio sito non più (o non solo) per i diversi browser e diverse piattaforme ma anche su diversi device.

Ovviamente la parola “device” fa rima con Smartphone (magari Android), iPhone e iPad in cui le dimensioni dei monitor variano come il tempo e le stagioni rendendo vani ogni sforzo di ottimizzazione.

Fortunatamente per noi, le media queries (media tag in grado di individuare il supporto sul quale la pagina sta girando) sono state potenziate in HTML5 e permettono di selezionare diversi stili CSS, appositamente creati, per ogni tipo di dimensione. E' infatti la dimensione dello schermo individuata dalla media query che fa da volano al tutto. Il resto (colori, posizioni, dimensioni delle font) dipendono solo da noi e dalle nostre necessità.

Questo significa che per ottimizzare una stessa pagina per Browser Desktop e/o Smartphone e/o Tablet basterà aggiungere nei tag <head></head> i seguenti link ai file CSS:

<meta name="viewport" content="width=device-width, user-scrollbar=no"><br />    <link href="style_mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" ><br />    <link href="style_tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" ><br />    <link href="style_desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

La comprensione dei tag appena indicati è molto semplice, soprattutto nell'attributo “media” in cui si specifica la larghezza minima o massima per il quale deve essere utilizzato dato CSS. Gli standard , almeno fino ad oggi, prevedono che per l'iPhone le dimensioni del monitor siano da 0 a 320. Da 321 a 768 per le Tablet. Per dimensioni superiori ai 769 pixel i desktop o portatili. Il tag meta “viewport” forza l'ottimizzazione della pagina per iPhone.

Un esempio pratico di quanto detto fino ad ora è mostrato nelle 3 immagini sottostanti.

Per iPhone:

Per iPad:

Per Browser desktop:


Qualora non abbiate la possibilità di installare l'Emulatore iPhone/iPad utilizzato in questi esempi e scaricabile congiuntamente al software Xcode e in maniera del tutto gratuita  dal sito Apple, potete usare un semplice browser che supporti HTML5 e CSS3.
Nell'immagine seguente abbiamo usato Opera 10 e ristretto le dimensioni della finestra fino a raggiungere quelle dell'iPhone:

Come potete vedere, le potenzialità dell'HTML5 e CSS3 permettono di superare non poche barriere.

Da questo link potrete scaricare un esempio.

The following two tabs change content below.