Condividi!

Ormai è un dato di fatto: per aziende e professionisti, è sempre più stringente la necessità di dotarsi di siti web o e-commerce che siano adatti a smartphone e tablet oltre che ai normali monitor di notebook e computers fissi. Poter “catturare” l’attenzione degli utenti “mobili” è, al giorno d’oggi, un fattore primario per chiunque desideri pubblicizzare la propria attività su internet attraverso il proprio sito web o e-commerce.

Il principio: tanti layout per tanti dispositivi

Agli albori del web design, in ottica multidispositivo, l’idea fondamentale era semplice: date alcune risoluzioni “standard”, per smartphone, tablet, netbook, notebook o grandi monitor, il layout (cioè la struttura) di un sito web veniva costruito e memorizzato in modo indipendente. Attraverso semplici funzioni javascript, poi, il browser riconosceva la risoluzione del dispositivo “visualizzante”, ed il server caricava il layout predisposto per tale risoluzione.

Inutile dire che progettazione, creazione, manutenzione ed aggiornamento di layout siffatti comportava un dispendio di tempo (e denaro) molto elevati. Da qui, la necessità di trovare una soluzione migliore.

La soluzione: i layout fluidi e responsive

Durante gli anni successivi, furono messi a punto una serie di strumenti che, ad oggi, consentono a web designers e web developers di creare siti web che adattano la loro struttura automaticamente in funzione del dispositivo “visualizzante”. Questa tipologia di siti web è chiamata “responsive“.
Oltretutto, utilizzando appositi framework css, è possibile rendere tali siti web “fluidi”, ciò significa che non solo il layout, ma anche i contenuti all’interno dei singoli blocchi si adattano alla risoluzione corrente.
Per averne una prova, provate a restringere questa pagina web attraverso il vostro browser.

Lo strumento fondamentale per la creazione di siti web responsive: le Media Queries

Per creare siti web responsive secondo il principio sopra esposto è necessario fare uso delle “Media Queries“.
Le media queries sono moduli CSS3 che consentono di stabilire, semplicemente tramite i fogli di stile CSS appunto, in che modo visualizzare le varie strutture del layout di un sito web semplicemente definendo un range (o valori fissi massimi e minimi) di risoluzioni.

Ecco alcuni esempi, in cui definiamo l’utilizzo delle media queries per un blocco html con id uguale a “footer”.

Il footer, fino a quando il viewport è largo al massimo 600px, non viene mostrato.

@media (max-width: 600px) {
  #footer {
    display: none;
  }
}

Il footer, fino a quando il viewport è largo almeno 600px, viene mostrato ed il suo sfondo è verde.

@media (min-width: 600px) {
  #footer {
    display: inline-block;
    background: green;
  }
}

Il footer, fino a quando il viewport è largo almeno 600px e l’orientamento è “landscape”, viene mostrato ed il suo sfondo è rosso.

@media (min-width: 600px) and (orientation: landscape) {
  #footer {
    display: inline-block;
    background: red;
  }
}

Questi esempi, seppur banali, danno l’idea di quanto potente sia questo strumento. Per una guida esaustiva sull’utilizzo delle media queries potete cliccare su questo link.