Vita Orizzontale

Il titolo può portare a degli equivoci, non parlerò di persone che passano la vita sdraiati occupati in attività più o meno piacevoli ma di una cosa un po’ più tecnica che interessa il mondo del web design: il layout a scorrimento orizzontale.

Lo spunto me lo dà questo sito

È un sito interamente dedicato alla tendenza non diffusissima ma in crescita del layout a scorrimento orizzontale.

Fondamentalmente esistono due tipi di scorrimento, quello verticale e quello orizzontale. Il più diffuso è quello verticale, tipico dei blog che tendono a generare un layout piuttosto lungo e di altre tipologie di siti.

Il layout verticale in un certo senso è il layout più naturale dato che gli elementi html si dispongono uno sopra l’altro (con l’eccezione dei link che sono elementi inline) se non si interviene con i fogli di stile.

Il layout verticale pone diversi problemi al web designer.

Il primo problema è la ripetitività dello schema, un problema che ogni web designer deve porsi quando realizza un sito, un layout innovativo può spingere i visitatori a fermarsi un po’ di più prima di continuare la navigazione.

Un secondo problema è rappresentato dal fatto che molti utenti dei siti web non amano scorrere il sito verso il basso, un po’ per pigrizia un po’ perché non molti sanno usare bene il browser e la barra laterale di scorrimento.

Terzo problema, forse il più costoso in termini di facilità di accesso al sito è la barra di navigazione che in genere è posta in alto oppure lateralmente. Se noi scorriamo in basso il sito perdiamo contatto con la barra di navigazione e in un certo senso perdiamo il senso dell’orientamento.

Vediamo alcune soluzioni ai problemi citati.

Per vivacizzare un layout verticale si può strutturare il layout come fa

http://abduzeedo.com/frontpage_thumbs

Scegliendo la visualizzazione a griglia, scelta che ho fatto anch’io nel pensare il layout di myWebdesign.

Un altro sistema è quello di far apparire i post in basso con un effetto di dissolvenza come fa facebook, una tecnica ajax implementata con jquery.

Al secondo problema si ovvia cercando di ridurre l’altezza (cioè la lunghezza) della pagina almeno nell’home page, creando un anteprima del post completo con il link leggi tutto e con pulsanti di navigazione che ci portino rapidamente su o giù.

Per il menu di navigazione la soluzione è quella di usare un menu laterale che si sposti allo scorrimento della pagina in modo da essere sempre a fuoco, per fare questo si utilizza del codice javascript.

Veniamo adesso alle problematiche legate allo scorrimento orizzontale.

Per creare un layout orizzontale si deve impostare una larghezza del div contenitore (il div più esterno subito dopo il tag body) che superi la larghezza dello schermo e sia adatta a contenere gli elementi che vogliamo disporre in orizzontale.

Supponiamo che abbiamo cinque blocchi di 500 pixel ciascuno (non ci preoccupiamo di padding e margin, per ora) la larghezza del contenitore dovrà essere di almeno 2500 pixel. Ovviamente i blocchi devono essere flottanti.

Il risultato sarà un layout orizzontale con una barra per scorrere la pagina verso destra.

Ecco, se risulta abbastanza semplice realizzare un layout di questo tipo non altrettanto semplice è il compito di renderlo fruibile, navigabile.

Molti siti con layout a scorrimento orizzontale non si pongono questo problema, lasciano che lo scorrimento sia affidato come nei layout verticali alla barra di scorrimento del browser.

Alcuni esempi:

http://www.kottke.org/portfolio/portfolio.html

http://www.soulwax.com/2007/

http://www.japihonoo.com/gallery.htm

http://hautes.mynes.free.fr/v2/homev2.html

Quest’ultimo sito utilizza una tecnica javascript per far seguire al menu di navigazione lo scorrimento della pagina, inoltre ricorda ai navigatori di usare la scrollbar orizzontale per scorrere i contenuti.

Mi soffermo in particolar modo su questo sito perché ha cercato a differenza degli altri citati di risolvere alcune problematiche che rendono ancora molto diffidenti i web designer nel seguire la filosofia della vita orizzontale.

Io dal mio punto di vista non ho ancora avvertito l’esigenza di utilizzare una tecnica simile, benché i layout a scorrimento verticale mi abbiano stancato, ultimamente sono molto più attratto dai layout a griglia e dai layout stile magazine. Non nego che mi piacerebbe creare un sito orizzontale per un artista o un fotografo, credo che le web gallery siano i siti che maggiormente si prestino ad un simile layout, anche una galleria museale. In futuro posterò la demo di un sito a scorrimento orizzontale che simula la visita ad un museo virtuale, state connessi e alla prossima.

F