The Horizontal Way

Urban Outfitters

Marco Rosella — 2007-06-10T23:17:20Z

Another value of the horizontal site is that it can utilize almost all the space offered by the browser’s viewport: the Blog of Urban Outfitter use 1/8 of the page for the logo and a two levels menu on the top, and the rest for the placed side-by-side posts. These follow the scheme “title-> big linked image -> small description -> category”, using divs with different widths and heights, that only in few cases let display the devilish vertical scrollbar.

Stephane Tartelin

Marco Rosella — 2007-04-29T19:07:27Z

In the Print & Illustration, Animation and Sketchbook pages of Tartelin’s website a div containing title and menu is placed on the “left sider” side by an horizontal scrolling div with an overflow:auto. (In this way the first section seems to use a position:fixed property)
This div on the right contains several floating images with the same height and a small description on the bottom; some of these could be zommed, without leave the current page, using the Lightbox script.

Soulwax/2manydjs

Marco Rosella — 2007-04-04T19:28:27Z

The alternative rock band Soulwax (also knew as the mashup patriarchs 2 many DJ’s) shows in its web space how a problem like the one seen in the last post could be used to extend the originality purpose of an horizontal site, playing with vertical scrollbars, widths and both text and images content. Very unusable, but very unconventional.

Japi Honoo

Marco Rosella — 2007-03-26T11:10:36Z

Although is build with a nested table layout, the site of the designer Japi Honoo shows well one of the main problem (1,2) of the horizontal way: every section has a fixed width an height, so if the text inside is taller than the container an uneasy vertical scrollbar is displayed on the right.

Les Hautes-Mynes

Marco Rosella — 2007-01-17T12:02:34Z

Les Hautes-Mynes du Thillot web site is a good example of how a touristic brochure could be transfered on web using an horizontal layout.
The 460px wide sections are placed side-by-side using CSS floating and contains on the left five links for the javascript scrolling of the page; the same links are replied in a menu on the top automatically placed at the center of the viewport.

Evanescence

Marco Rosella — 2006-12-31T12:35:46Z

Based on my The Horizontal Way template, the official UK website of the rockband Evanescence is divided in six sections linked by the internal anchors of the left sider’s menu.
Every section includes on the top a link that allows to scroll to this menu, and another menu - this time inline - on the bottom.

Stephan Bucco

Marco Rosella — 2006-12-24T16:55:10Z

Power to the images: in Stéphane Bucco’s portfolio the html+css structure is composed by only one absolute-positioned div with a long (32702px) width and fixed (558px) height, where are inserted all the img tags related to the several artworks that are in this way displayed, as usual, side-by-side.
A little (in lenght and font-size) description is included at the bottom of every picture.

Tulipe (CZG)

Marco Rosella — 2006-11-28T08:42:10Z

The sixth entry from the CZG, Tulipe, could help to show again an important difference from horizontal to vertical design: sometimes divs that are at the same distance from the top of the viewport and contains text with the same font-size but different amount of it can’t have the same width. It could cause problems of visualization: in this case, ‘The requirements’ column is so tall that the users with a resolution lower than the commonest 1024×768 px are forced to scroll vertically to view the entire content of the section.

Koniec

Marco Rosella — 2006-11-17T16:33:58Z

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

Marco Rosella — 2006-11-01T00:49:03Z

“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.

Urucu

Marco Rosella — 2006-10-26T19:16:55Z

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.

Tentacle Eye

Marco Rosella — 2006-10-12T17:26:20Z

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.

Nana

Marco Rosella — 2006-09-25T08:09:19Z

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)

Pasquin o Panfleto

Marco Rosella — 2006-09-20T16:50:49Z

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.

Wolfmother

Marco Rosella — 2006-09-14T18:22:13Z

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.

Bluesfear Worm

Marco Rosella — 2006-09-07T17:28:54Z

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.

Radio Zen (CZG)

Marco Rosella — 2006-08-25T17:37:58Z

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.

Beca / Voices

Marco Rosella — 2006-08-12T19:26:35Z

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.

Shin Tanaka

Marco Rosella — 2006-08-04T18:00:26Z

“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.

Sandra Wiegard

Marco Rosella — 2006-07-31T18:29:31Z

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.

Graphic Therapy

Marco Rosella — 2006-07-21T16:06:07Z

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

Marco Rosella — 2006-07-18T17:09:18Z

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.

Self-Growth (CZG)

Marco Rosella — 2006-07-18T09:14:29Z

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.

Meghan Petersen

Marco Rosella — 2006-07-14T14:56:49Z

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.

Kottke's Portfolio

Marco Rosella — 2006-07-13T16:48:55Z

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.

Biok

Marco Rosella — 2006-07-11T10:02:37Z

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.

HoriZental (CZG)

Marco Rosella — 2006-07-10T17:58:50Z

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.

nDroid

Marco Rosella — 2006-07-10T09:25:50Z

Unbury from the Web Archive limbo, the nDroid could be one of the first sites with horizontal layout ever appaired (the Archive shows 2000’s pages). The pixel-build fantasy of its creator illustrates a in a panoramic context - a very strange wide house - an harlequin mix of text and images that let ask ourself: “What is there on the right?”.

Sonido

Marco Rosella — 2006-07-07T08:20:49Z

As we saw in the photographic example, an horizontal layout could be an original way to create a design portfolio. It’s the case of the guys of Sonido, who use an old nested table to place a very wide image where the transition from a section of a page to an other is very pleasant. The direct “jump” to these section is (this time, too) allowed by a menu with internal links. Except titles and the introduction, there is a so great quantity of text use expecially for links to agency’s projects: for this are necessary some (about four lines) boxes tall as much only 100px.

Pret-a-porter (CZG)

Marco Rosella — 2006-07-05T21:58:52Z

The second (CSS, naturally) extract from the CZG. There aren’t so much layout differents from the previous: the sbs colums - that uses a CSS position:absolute property - this time are more thin and the last section is wider then the others to be tall as the others. A big image, tall as the page, is fixed at the left of the window and the menu is this time at the right of the last column.

Eolo Perfido

Marco Rosella — 2006-06-30T16:58:39Z

Eolo Perfido is a good example of how the horizontal layouting can help photography to show its best in the web world. Portfolio’s pages displays a series of equal height and equal width phographaps inserted side by side in table layout, and includes a simple menu on the left to switch over the other horizontal galleries. In the news page, instead, the images are smaller in size to let space to a little description below.

Dmitry Kirsanov Studio

Marco Rosella — 2006-06-15T12:34:22Z

The Dmitry Kirsanov Studio’s website - horizontal version born in 2002 - represents its contents with an old nested table layout divided horizontally in two parts: in the part below a title and image represent several projects, in the part above a small text completes the description. In some page, like “Our offer” these paragraphs are splitted in two or more colums. A fixed height but an unknow amount of text: in the building of a layout including a section with this feature a big help could come from the CSS3 dedicated module.

Modular People

Marco Rosella — 2006-04-25T15:56:47Z

A fast return into the old nested table layout. Modular People plays for me the ideal horizontal way: a low quantity of text and a big images. Interesting are the vertical menu -tall as the page- at the end/right of the site, with internal links that carry to the sections; these are composed by a title on the top with below an image, a group of images with a description on the right or a form.

What lies beneath (CZG)

Marco Rosella — 2006-04-14T12:28:58Z

The first CSS site presented in this blog is the first of 8 horizontal design featured in the legendary CSS Zen Garden (from now CZG). One of the caratheristic of this project is that the text, only demonstrative, never will be changed and so there aren’t problems with the growth of DIVs height as with a dinamic page.
This text is divided in five (as the number of sections) boxes with equally width and at an equally distance from the top of page: with menu, summary and footer links they are placed side by side with an CSS absolute positioning.

Blue Vertigo’s resources

Marco Rosella — 2006-03-27T19:33:07Z

A very long collection of interesting web design resources, subvided in chapters. The code (composed by frames, table layout, not standard list) must be traduct from scratch in XHTML + CSS, but the alternation of titles and lists, that are disposed in multi-colums way, is interesting as the fixed footer for the site menu and the small javascript that allow - Opera excluded -a mouse scrolling as with a vertical page.

Flight to a floating horizon

Marco Rosella — 2006-03-08T19:11:01Z

Chris Guest had the good idea to use an horizontal web page to dispose his original art work composed by a long series of images placed side by side, putting a long description of the project under them. This text is divided in equally small paragraphs inserted in colums with also equally height and width: this is due to the use of table layout, that cause, however the same large series of problems as in vertical scrolling sites.

Return this;

Marco Rosella — 2006-03-08T18:34:36Z

What metaphisical first entry…Like when “A List Apart” speaks about ‘Lists’: that’s amazing.