I agreeto Idea Layout a colonne con scorrimento proporzionale
Voting is Disabled

27 votes

I disagree

Rank3

Idea#137

This idea is active.
Design »

Layout a colonne con scorrimento proporzionale

La rivista WIRED si fa notare. Anche il sito deve farsi notare!

Non il solito sito. Non le solite idee!

Non parliamo solo di contenuto ma anche di forma.

------------------------------------------------------------

NON IL SOLITO LAYOUT!

------------------------------------------------------------

All'indirizzo www.slirk.com potete trovare un esempio di gestione delle colonne intelligente, innovativo, a scorrimento proporzionale, mediante codice javascript scritto per il framework Mootools.

L'azione sulla scrollbar del browser provoca lo scorrimento differenziato delle colonne, proporzionalmente all'altezza del loro contenuto.

A inizio corsa sono visibili header e parte alta delle colonne, a fine corsa sono visibili parte bassa delle colonne e footer.

Il tutto in assenza di vuoti di contenuto.

Lo script è "degradabile", ovvero, in caso di Javascript disabilitato dall'utente, il layout appare tradizionale. Al momento, anche la visione su iPad appare classica, ma è allo studio l'arricchimento dello script per poter essere utilizzato anche su questa device che gestisce le scrollbar in maniera atipica per via del sistema di touch events previsto per default.

Si è scelto di eliminare la possibilità di comparsa della barra di scorrimento orizzontale, poiché evento poco piacevole in caso di sviluppo prevalentemente verticale della pagina. Si lascia all'ottimizzazione del sito per diversi dispositivi, il compito di definire la larghezza ottimale del contenuto alle varie risoluzioni, così come la scelta tra larghezze fluide e fisse.

------------------------------------------------------------

Da quando è nato il web, siamo stati abituati a una sorta di "inesorabile bidimensionalità" del contenuto del browser. L'ipertesto ci dava la sensazione di avere qualcosa di potente in più rispetto alla carta e al testo senza link. Effetti grafici di "profondità" ci fornivano, quando voluto, il senso della terza dimensione, e le animazioni introducevano la quarta, il tempo.

Con questo layout, è come se si andasse oltre, grazie a una quinta dimensione, e un'esperienza di navigazione nuova, capace di evitare il disagio normalmente percepito di fronte agli spazi inutilizzati creati dall'inevitabile diversità di lunghezza del contenuto delle colonne.

Inoltre, la visibilità degli spazi pubblicitari risulta ottimale, poiché è possibile studiare il contenuto della pagina in maniera tale da renderne probabile la visione dall'inizio alla fine.

Tarando qualitativamente in maniera opportuna il contenuto di colonne, intestazione e piede, è possibile ottenere risultati ottimi e adeguati alle necessità.

------------------------------------------------------------

Sono possibili personalizzazioni, estensioni, versioni a scorrimento orizzontale, in puro javascript e per altri framework, nonché, con l'aiuto di chi vorrà contribuire, la correzione di bachi eventualmente riscontrati.

------------------------------------------------------------

Sarebbe solamente "UN ALTRO SITO"?

------------------------------------------------------------

A proposito di framework Javascript, consiglio l'utilizzo di Mootools, anziché jQuery, poichè più avanzato, estensibile, a oggetti, più crossbrowser e, per di più, italico. Gli sviluppatori del CMS Joomla lo hanno incluso di default. Non sarà un caso.

Submitted by Angelo Amoroso 3 years ago

Vote Activity Show

(latest 20 votes)

Attachments

Comments (8)

  1. I like it!

    3 years ago
    0 Agreed
    0 Disagreed
  2. Originalissimo!

    Soprattutto per Mootools (http://mootools.net). Normalmente, un sito con più di 2-3 colonne è brutto da realizzare appunto per i buchi. Qui il problema è risolto. Andrebbe testato un po' per vedere se funziona in tutti i casi, ma merita.

    :-)

    3 years ago
    0 Agreed
    0 Disagreed
  3. Angelo Amoroso Idea Submitter

    Dopo aver sviluppato la versione per JavaScript puro, ho deciso di realizzarne una per il framework Mootools per non "reinventare la ruota".

    Gli scopi dello script coinvolgevano aspetti molto delicati sul fronte dell'ottenimento di un comportamento cross-browser, soprattutto per quanto riguardava la manipolazione di scrollbar e mousewheel, gestite in maniera molto varia dai diversi browser, così come le dimensioni della finestra e di tutti gli elementi contenuti.

    Mootools, tra i vari framework JavaScript, oltre ad essere object-oriented, spicca per le caratteristiche cross-browser, soprattutto nella rilevazione delle proprietà CSS che qui era fondamentale.

    Quindi, lo script risulta ben testato su tutti i browser degni di considerazione.

    Si è scelto, per il momento, di non utilizzare il posizionamento fixed, vista la non ancora uniforme implementazione da parte dei Browser. Forse, più avanti verrà utilizzato, se più efficace.

    Unico consiglio nell'utilizzo dello script è quello di controllare l'utilizzo degli elementi del box-model css (padding, margin, border), eventualmente esplicitando il valore height degli elementi quando noto, sebbene vengano automaticamente rilevati, e ricorrendo anche a un preloader di immagini.

    3 years ago
    0 Agreed
    0 Disagreed
  4. This script is awesome!

    WIRED magazine is great!

    3 years ago
    0 Agreed
    0 Disagreed
  5. Sembra così semplice, eppure non esisteva o non era mai stato implementato.

    Veramente azzeccato.

    3 years ago
    0 Agreed
    0 Disagreed
  6. Questa è veramente nuova.

    3 years ago
    0 Agreed
    0 Disagreed
  7. Provato, e funziona. Firefox, Explorer, Safari, Opera, Crome. Grande. Unica cosa, si può fare senza Mootools? Preferirei.

    3 years ago
    0 Agreed
    0 Disagreed
  8. Angelo Amoroso Idea Submitter

    Per la gestione del Javascript di un sito, è "saggio" appoggiarsi a un Framework, soprattutto per evitare conflitti tra i vari script di volta in volta utilizzati.

    3 years ago
    0 Agreed
    0 Disagreed