Il secondo problema da affrontare durante la costruzione di un blog (o di un sito web in generale) è la fruibilità dei contenuti. Tale concetto viene definito dalla legge 04/2004 (Legge Stanca) come “caratteristica dei servizi di rispondere a criteri di facilità e semplicità d’uso, di efficienza, di rispondenza alle esigenze dell’utente, di gradevolezza e di soddisfazione nell’uso del prodotto”.

Vengono introdotti dei termini chiari e insindacabili: rispondenza alle esigenze e gradevolezza.

Il discorso si traduce, tra le tante cose, nell’ottimizzazione delle pagine per far fronte alle possibilità d’accesso dell’utente.

Uno degli aspetti fondamentali era dunque l’individuazione degli strumenti utilizzati per accedere al mio blog. Cellulari? Palmari? NetBook? NoteBook? Display wide-screen? L’esperienza di una visita è decisamente correlata alla dimensione della pagina.

Fortunatamente i browser mobile di ultima generazione tendono a renderizzare divinamente (qui lo dico e qui lo nego) pagine grandi e interfacce come quella dell’iPhone permettono una navigazione più agevole. Questo però è vero finché si rimane in ambito mobile.

I browser dei moderni portatili, sempre più piccoli e con risoluzioni infime (ma su monitor da 7 pollici non si possono fare miracoli) non godono della stessa usabilità dei cugini mobile, così la scelta della risoluzione torna ad avere una certa importanza.

Fortunatamente non andavo alla cieca. Non dovevo realizzare un sito da zero, senza conoscere il target d’utenza e i relativi usi e costumi.

Google Analytics (o qualsiasi altro strumento di monitoraggio degno del nome) permette di conoscere la risoluzione del browser dei visitatori. Confrontando il risultato medio storico (dal 2007 ad oggi) con quello dell’ultimo periodo (gli ultimi 3 mesi), ho notato una costante diminuzione degli accessi attraverso monitor con risoluzioni pari ad 800×600 (tipica dei vecchi monitor CRT da 15 pollici). Ad oggi, tale risoluzione rappresenta appena il 4,03% degli accessi totali. La risoluzione più diffusa è quella 1024×768 (tipica dei monitor CRT da 17 pollici o degli LCD da 15 pollici) che viene utilizzata dal 39% dei visitatori. La restante porzione viene suddivisa da monitor a risoluzione maggiore.

Era dunque chiaro verso quale risoluzione dovessi concentrarmi. Scorrere orizzontalmente una pagina è qualcosa che trovo disgustoso.

Il vecchio tema (e  i due precenti template) avevano una larghezza ottimizzata per risoluzioni 800×600. Personalmente non sopportavo più quella larghezza. La sentivo stretta.

Vedevo i miei post come in una camicia che fa resistenza quando viene indossata.

Nulla è ancora perso però. Non è detto che per ottimizzare una pagina ad una certa risoluzione vada necessariamente trascurata quella inferiore o viceversa. Esiste la possibilità di costruire layout fluidi in contrapposizione a quelli fissi.

La costruzione di un layout fluido prevede la possibilità di allargare o restringere le aree di testo in maniera proporzionale alle dimensioni dello schermo. Più tecnicamente, la differenza si ottiene utilizzando dimensioni in percentuale invece di fissare il numero dei pixel.

div.fisso {
   height;200px;
   width:50px;
}

div.fluido {
   height:40%;
   width:20%;
}

Le due classi fisso e fluido se associate ad un div produrranno un risultato completamente diverso. Il primo avrà un’area pari a 10.000 pixel, il secondo dipenderà (a sommi capi) dalla risoluzione del monitor (ripeto, a sommi capi, perché ci sono anche altri aspetti da considerare, primo tra tutti l’adesione o meno di un browser a certe indicazioni).

Un altro metodo è quello di sfruttare l’unità di misura em la cui base corrisponde all’altezza media di un dato carattere. Ma qui entrano in gioco i vincoli di parentela tra le varie dichiarazioni di un foglio di stile e così via.

Un terzo metodo, infine, è quello di creare dei fogli di stile ad hoc per risoluzioni/browser particolari. Questa soluzione, che può far storcere il naso ai puristi, consiste nello sfruttare delle funzioni (lato server o lato client) che individuano la risoluzione e indicano al browser quale foglio di stile utilizzare durante il rendering della pagina.

Insomma, tutto questo per dirvi che le dimensioni contano e non va progettato un sito web solamente in base alla risoluzione del proprio monitor (che magari è bello grande e ci da l’impressione di avere metri quadri di pagina da sfruttare…).

Ad esempio, a volerla dir tutta, la dimensione del box che scorre sotto l’immagine del blog mi sembra un tantino eccessiva. 🙂

Continuiamo lunedì prossimo…

Emanuele