Beca / Voices is a simple but beautiful example of how Javascript can help for a better navigation of a horizontal site: the content of this site -the introduction of a house music vocalist- is splitted in the three section (containing title+subtitle+one paragraph) that could be displayed after a scroll on the left of the body near to a fixed menu with internal links inside.
Three arrows guide the user to the next section inserting so a path to follow in the exploration of the page.
“Custom Designed Paper Model Collection” by Shin Tanaka is another nested table showcase of artworks that display them in a series of side-by-side images with same height and width, with below the related title and designer/writer’s logo.
The sites that follow the horizontal way could find in Javascript a good allied in the search of a better usability.
In Sandra Wiegard’s web home there are two examples of this: the implementations are not unobtrusive, but remain interesting. 1)The scrolling of the four pages is accompanied by a menu on the top of the page that automatically is positioned (approximately) at the center of the viewport; 2)Clicking on one of the links on the sub-menu, furthermore, the page scrolls to the selected (max 320px tall) text section.
The second flash site, Graphic Therapy, show a series of imagines contained in three “portfolio books” (selectable from the principal menu under the title): three “strips” with a series of project placed side by side with a little description below.
The user can directly scroll to one of this using a menu inserted at the top-right of the page or drag’n'drop with the mouse on the strip to scroll on left or right.
Vault49’s site is a piece of pure art inserted in a HTML+CSS (all in one! with very old inline properties and obsolete maps and fonts tags) page displaying big images spaced out by four text section like the “portfolio”-a big div with links inside opening popups-and the “news”,a div that face to a big problem of the horizontal way:the “dynamic” lenght of the text. IOW, the text which the developer can’t know the height at the creation of the code: it is insterted here in a div with overflow:auto displaying a vertical bar to scroll the content.
The fourth CZG horizontal design use (this time too) absolute position to place, under the title, two text sections in the header div and four ones (with the same height but diffent width) side by side under an inline menu and before the three other menu lists.
The second photographic portfolio presented is the one by Meghan Petersen: a very long collection of pictures with equal height but different width placed -this time too- side by side in a nested table layout inserted in a (please don’t copy this) HTML frame.
The gallery is accompanied by another frame on the top that contains a fixed image with studio’s informations.
The Jason Kottke’s Portfolio is an XHTML page that position its content side by side, at the same distance, using the foundamental (for the horizontal way, but not only) CSS float property.
This content is composed (except the last three text-only divs) by equally width & height boxes divided in a description part (a title plus three or less paragraphs) and a screenshot big as a half of the page.
First Flash site here, Biok displays a static page with some sections (with a low quantity of text) scrolling inside.
Instead of lose the content of the previous page after a refresh (or better the change of the flash layer) the menu under the header allows so to navigate in a complete “overview” of what the site- in this case a consulting firm one- can offer.
Like the two previous CSS design from CZG, the text colums that contains the demostrative sections are putted in the template with an absolute position. 1/2 difference: the distance of this colums from the top of page (few pixels for the even ones, about half of the page’s height for the odd). 2/2 difference is about the dimensions of the colums: previously there was an equal ‘limit’ of width, now the various column have different width to display, each one, a column’s height almost equal to the half of the page’s height.
