Alcuni pensieri sui cosidetti layout responsive dei siti web moderni…

screen and (max-width:400px)
screen and (max-device-width:400px)

Le media queries sono come dei commenti condizionali per Explorer: posta una domanda, l’azione che ne segue varia a seconda della risposta.

La prima dice al browser di applicare lo stile solo se la larghezza del browser è uguale o minore a 400px.
La seconda dice al browser di applicare lo stile solo se la larghezza dello schermo è uguale o minore a 400px.

E’ giusto proporre stili css diversi a seconda delle dimensioni del browser o sarebbe più opportuno farlo a seconda delle dimensioni dello schermo?

Io trovo brutto – non ho aggettivo migliore – che un sito sia responsive anche al solo ridimensionare la finestra del browser, quindi opterei per la seconda soluzione: un check delle dimensioni dello schermo, poi un css adeguato E BASTA.

Viceversa, usando min-width possiamo dire al browser di applicare uno stile se la larghezza è uguale o maggiore del valore dato.

Trovo min-width migliore di max-width, in quanto partendo creando lo stile per lo schermo più piccolo, posso modificare e – soprattutto – aggiungere stili man mano che creo i Css per le risoluzioni superiori (invece di eliminarli o nasconderli).

Approfondimenti: italianalistapart.com , adobe.com

Poi pensavo anche al fatto che di solito si tende a impostare un layout per smartphone in maniera molto basilare e scarna rispetto alla versione desktop, anche perchè di solito la banda a disposizione dei dispositivi mobili è più “stretta” rispetto ai dispositivi desktop, e senza contare inoltre che la ridotta risoluzione rende inutile usare immagini ad altissima risoluzione.

Quindi perchè non trovare il sistema di rendere “responsive” anche le immagini, riducendole di kb se dobbiamo offrirle a schermi piccoli?
Allo stesso modo: perchè obbligare uno smartphone a scaricare gli stessi kb di dati di un desktop, quando il primo poi ne mostrerà molti di meno?

Sembra che almeno qualcuno abbia già pensato ad una soluzione, anche se non ho modo di verificare: adaptive-images.com

Approfondimenti: html5doctor.com , css-tricks.com , html.it (e successive lezioni) , docs.sencha.io

Css3-mediaqueries-js

Css3-mediaqueries-js è una libreria javascript che serve a dare il supporto alle media queries anche a Internet Explorer 8.

A prima vista può sembrare che Css3-mediaqueries-js funzioni solo con i css inline, cioè scritti dentro lo stesso documento html, e sembra non funzionare con i css linkati…

Dai miei test ho notato che lo script funziona correttamente quando è ospitato su un server remoto – assieme al file che lo richiama – e raggiunto tramite HTTP, mentre se viene testato in locale non funziona come dovrebbe (link).