la larghezza delle pagine web

Prova per un attimo a viaggiare con me indietro nel tempo: è il 2007 ed Apple ha appena annunciato (wow) di voler commercializzare un “telefono”, in giro iniziano a vedersi alcuni robusti framework per la standardizzazione dei fogli di stile, ed un sacco di rumore sta facendo questa nuova tecnica della griglia 960 applicata alle pagine web. L’idea nasce dal fatto che molti sviluppatori iniziano ad essere stanchi di reinventare la ruota tutte le volte, riscrivendo in pratica lo stesso codice di base per i fogli di stile. Serve uno standard, un framework appunto, che possa essere usato come riferimento. Che fissi una griglia per le spaziature, per i margini e gli altri dettagli stilistici, uno standard che renda intuitivo i calcoli per la larghezza delle colonne, che restituisca numeri senza virgola e belli rotondi.

Continuiamo a passeggiare in questo 2007: il W3Counter ci dice che a Giugno di quest’anno più della metà della popolazione del web ha una risoluzione di 1024×768, e la quasi totalità non ha comunque una risoluzione più alta di 1280 pixel. Da qui a fissare la griglia a 960 pixel il passo è breve. Ora schiocchiamo le dita e… bum, è di nuovo il 2011. Sono passati quattro anni in un battito di ciglia, e la tecnologia nel frattempo ha seguito il suo corso. Oggi circa il 30% degli schermi hanno una risoluzione superiore a 1280 pixel e quasi il 10% di questi è in realtà uguale o superiore a 1680 pixel. Ma in forte ascesa sono anche gli schermi dove la risoluzione è di circa 400 pixel: i dispositivi mobili oramai non sono più prerogativa di una fascia elitaria di consumatori. In questo caso, 960 pixel è una risoluzione troppo larga, che iPhone e soci devono “schiacciare” opportunamente per una visualizzazione ottimale.

Un vestito più elastico

Partendo da queste considerazioni, l’anno scorso, ho iniziato a disegnare il nuovo vestito per il mio blog. Che non volevo fosse totalmente liquido: spalmare i paragrafi a 1600 pixel è più inaccessibile per i normodotati che accessibile per i disabili, e pertanto improponibile. Ma non volevo che fosse rigido come la precedente versione, proprio per accomodare le esigenze mobili di quel 5% (in crescita) che visita il mio sito con uno smartphone. Quelli che hanno studiato, chiamano questi layout “responsivi”, cioè in grado di adattarsi in maniera ottimale ad ogni configurazione. Ethan Marcotte ha scritto una bellissima introduzione (in Italiano) su A List Apart, alla quale hanno fatto seguito le prime implementazioni dopo pochissime settimane.

Si può fare di più, con le query CSS

Nel mio caso mi sono limitato a costruire un’impaginazione parzialmente fluida, con una larghezza minima ed una massima fissate, e la possibilità di nascondere la barra di navigazione qui a destra, nel caso il sito venga visitato da un iTelefono. Ma i veri maghi del settore hanno già portato la sfida su un altro livello, sfruttando una capacità del tag per includere i fogli di stile, che consente di specificare a quale dispositivo sia associato quello specifico stile:

<link rel="stylesheet" href="small.css" media="only screen and (max-width: 1023px)" />

Com’è facile intuire, questa riga di codice attaccherà lo stile small.css alla pagina, ma soltanto se la risoluzione dello schermo è inferiore a 1024 pixel. Nel momento in cui la finestra del browser venisse ridimensionata ad una larghezza maggiore, small.css non sarà più caricato. Ovviamente esiste il corrispondente comando per la larghezza minima, ed il suo funzionamento è pressoché identico. Sto conducendo degli esperimenti per capire se questo “trucco” funziona su iPhone ed altri dispositivi mobili. E tu, adatti il tuo sito alle esigenze dei tuoi visitatori?

8
Lascia una recensione

Please Login to comment
5 Comment authors
EmanueleFrancescocamuAndrea moroCarlo Recent comment authors
  Subscribe  
più nuovi più vecchi più votati
Notificami
Carlo
Ospite
Carlo

Utili le query CSS, ma devi sempre fare i conti con IE, almeno per le versioni antecedenti la 9…

camu
Admin

@Carlo: si, come l’articolo di A List Apart (del quale, chiedo venia, avevo dimenticato di mettere il link nel mio articolo) spiega, per IE7, Firefox 1 e Safari 2 c’è un javascript che aiuta a raggiungere lo stesso obiettivo.

Andrea moro
Ospite
Andrea moro

Interessante davvero. Queste query css da chi sono supportate (al di fuori dell’ambiente mobile)?

Perché oggi ho risolto con un coolie e un reload una questione di grafica e sicurmente una cosa del genere sarebbe meglio!!

camu
Admin

@Andrea moro: direi che IE9, Firefox dalla 3 e Safari dalla 3 supportano questa tecnica, ma come dicevo nell’altro commento qui sopra, c’è un codice javascript che la rende “retroattiva” 🙂 Io la sto usando per servire un layout diverso per l’iPhone, e funziona alla grande. Risparmiandomi qualche riga di codice PHP…

Francesco
Ospite

Grande,

peccato che Javascript sia ancora inevitabile, fratello in Accessibilità web 🙂

Notevole la potenzialità del link con condizione al Css, wow!!!

Ancora non ho trovato – invece – novità tecniche su come intervenire sulla fruizione del Foglio di stile.
Vorrei per esempio utilizzare in WordPress per ogni voce di un menu un’immagine differente in background, richiamata dal Css con la funzione Post Thumbnail Images.

camu
Admin

@Francesco: io sono in genere molto “spartano” in questo senso, e tendo a risolvere tutto usando certi strumenti il meno possibile. Ma capisco che volendo creare un template generico, si hanno questi problemi…

Emanuele
Ospite

Uhm, perché tu, in effetti, nella sidebar tieni elementi non essenziali alla navigazione ma complementari. Il punto è che a me non piace mettere elementi nel footer, soprattutto quando sono indicazioni “utili”: obbliga l’utente a scorrere tutta la pagina per trovarli e non sempre chi arriva al volo ha l’attenzione di farlo…
Ciao,
Emanuele

camu
Admin

Beh quello che conta è la possibilità del sistema di adattarsi alle varie situazioni. La verità non si può ignorare: lo schermo mobile è più piccolo. Ci sono tre modi per venire incontro a quest’esigenza: rimpicciolire, spostare o nascondere. Sta ad ogni sviluppatore usare quella più opportuna e confacente alle proprie esigenze…