Tag: responsive design

Media Queries (Cosa sono e come si usano)

Abbiamo parlato recentemente nell’articolo intitolato “Il Responsive design” della tendenza ormai diventata necessità di tener conto del tipo di dispositivo che l’utente di un sito web utilizza.

L’esplosione dei dispositivi mobili come tablets e soprattutto smartphones impone al web designer di prevedere un layout fruibile da questi dispositivi e, come abbiamo visto, non solo il layout, ma anche i contenuti possono essere in qualche modo differenti (classico l’esempio di Microsoft che è alquanto inutile che proponga il download di service pack, patch e programmi vari per computers a chi si è collegato da uno smartphone).

In quell’articolo abbiamo fatto cenno alla metodologia che oggi permette agli sviluppatori di differenziare il modo di presentare il sito web a seconda del dispositivo usato dall’utente senza dover sviluppare più volte il sito in formati differenti, cosa che rendebbe complicatissimi aggiornamenti ed ordinaria amministrazione, oltre a non mettere al riparo dai progressi della tecnologia. La metodologia è quella basata sull’utilizzo di delle ‘media queries’ nei fogli di stile CSS.

In questo articolo vogliamo quindi affrontare in dettaglio cosa sono e come si usano le media queries.

Continua a leggere…

Il Responsive design

responsive_design
Nome più balordo forse era difficile trovarlo, ma tant’è orami questo è il termine che si deve usare per descrivere un layout di un sito web che sia studiato appositamente per essere fruibile dagli utenti di smartphones e tablets.
Possiamo quindi dire che il ‘Responsive web design’ si riferisce a un sito in grado di rimodellare se stesso a seconda del formato e della risoluzione del dispositivo con cui si accede al sito, dal più grande desktop allo smartphone.

La tecnica per ottenere questo è quella di utilizzare le ‘media queries’ CSS e più fogli di stile CSS per modificare il layout del sito web di conseguenza. Questo metodo di web design è pensato per dare all’utente la migliore esperienza di visualizzazione dei contenuti sul dispositivo o piattaforma che si sta utilizzando.

Le media queries possono essre utilizzate a livello di pagina web con dichiarazioni del tipo:

<link href="ar169.css" rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" />

oppure inserendo una media query all’interno di un CSS, così:

@media screen and (device-aspect-ratio: 16/9)
{
   /* nostre regole CSS */ 
}

Continua a leggere…