The Horizontal Way

The portfolio of Koniec, spanish designers and illustrators, displays a fixed menu on the left where is possible to select the five horizontal pages showing (in divs with float:left) the published artworks.

“Freeware/Delaware”, digital home of the japanese “musics_designs” group Delaware, has the numbers ( (2001->2006) to be cited as one of the patriarch of horizontal scrolling. Especially in its ‘vision‘ pages, it displays ten or more squared artwork, 500×500 px big, placed syde-by-side everyone with a simple title (with scheme #’num’/'title’/'date’) on the right.

The flash website of the Provincia petrolifera de Urucu is organized in nine section that can be scrolled with a menu on the bottom-right on the movie, and with two arrows that carry to the previous and next one. In every section the text content is displayed ian about 360×250 space (with a vertical scrollbar on the left), under a subsection title and right to the section title, that has below some links to switch to the various subsections.

Like the other portfolios already seen, Tentacle Eye is a (french) long collection of artworks and photoes with same height and different width placed side by side in a nested table layout. The first section, dedicated to news, display a vertical bar to scroll the content; a vertical bar is displayed, unfortunately, in the entire page for those screen under 1024×768 resolutions, that can’t immediately view the links in the footer section.

As we saw more time, for an horizontal web layout is recommend the use of few text and big images. Leben column from Die Zeit break this rule, displaying in horizontal -like a real magazine- an entire article: the page is splitted in 8 sections, each contains 3 text column (about 250px wide) with absolute positioning in inline CSS. A menu on the bottom, replyed under every section with the number of it marked, allow to navigate the page using distance from the left side of the body. (could be more correct the use of internal links: 1,2,3)

A thin blue line drawn by a biro guide the Nana website ’s user to do an horizontal tour along what this clothing shop offer and feedbacks all displayed in a series of images. (unhappily insterted in old nested table tags…this is real vintage style)

The ‘drawing showcase’ Pasquín o Panfleto is the first dynamic site-a weblog- listed in these pages. The hp shows a series of images with ‘category’ and ‘comments’ hidden links below; every page related to a post (like this) has a different width (set inline in “content” div) and display the artwork with on the right a div with text content, a div for comments with vertical bar (see here), and a div with form for comments -all tall about 510px. An horizontal menu with hidden items is placed on the left side of the body under the title.

The content of Wolfmother (australian rock band) flash site is placed in a long semi-transparent strip -about 400px tall-where there isn’t empty space from one section -about 760px wide- to another.
A menu with cardinal numbers (that let display the name of section on the left) under the strip scroll it placing the chosen section at the center of the viewport, and text+images paragraphs are inserted in boxes with vertical scrolling.

The ’side by side images’, a constant of the horizontal way, aren’t only pictures placed one near the previous: they sometimes describe a journey, an evolution, a step-by-step in a long walking towards right ( = the end or the next page?).
The Bluesfear Worm explode in the first screenshot ready to show this infinite mutation, scroll after scroll.

Instead of the absolute positioning like in the previous CZG designs, the text sections of Radio Zen use the more comfortable float CSS property to be placed side by side, avoiding the calculation and the setting of the distance from the left side of the body.
The two menus are displayed inline under the content, and a fixed image on the top create a nice effect taking advantage of the page scrolling.