due chiacchiere

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?

Commenti

  1. Carlo
    ha scritto:

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

    Risposte al commento di Carlo

    1. camu
      ha scritto:

      @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.

  2. Andrea moro
    ha scritto:

    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!!

    Risposte al commento di Andrea moro

    1. camu
      ha scritto:

      @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…

  3. Francesco
    ha scritto:

    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.

    Risposte al commento di Francesco

    1. camu
      ha scritto:

      @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…

  4. ha scritto:

    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

    Risposte al commento di Emanuele

    1. camu
      ha scritto:

      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…

  5. Trap
    ha scritto:

    “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.”

    Commovente 😅 mi ricordano i monitor CRT da 17″ della nostra cara aula H (ricordi le estati passate li?). Oggi con i telefoni penso sia più difficile trovare una risoluzione così diffusa. Le tue statistiche cosa dicono oggi?

    Risposte al commento di Trap

    1. ha scritto:

      Eheh, son tornato anch’io qui per la stessa ragione: «il 5% di accessi mobile» in che percentuale si è trasformato da te oggi? 😀 La rivoluzione è letteralmente avvenuta!
      Ciao,
      Emanuele

    2. camu
      ha scritto:

      Ovviamente la diffusione capillare dei cellulari rispetto a 15 anni fa ha cambiato tutto. Sul blog non ricevo tanti visitatori “mobili” ad oggi, diciamo un 15% del totale. Probabilmente perché la gente non tiene lettori RSS sui cellulari? Al lavoro uso strumenti come Bootstrap per gestire sistemi di griglia (si traduce in italiano, o rimane grid systems?) che si adattano a qualsiasi schermo e dispositivo. Sul blog mi sono limitato a più semplici media queries. La prossima frontiera, per me, è la domotica, e gli altoparlantini intelligenti (con e senza schermo), e come i siti vengano visualizzati.

Rispondi a Andrea moro

Torna in cima alla pagina