SXSW - South by Southwest 10th Web Awards Winner - Best CSS

Interview Magazine

Interview Magazine websiteAs in this html feat. js example, the Interview Magazine’s flash website displays a menu that is automatically placed at the center of the viewport when the page scrolls to right or left, and every links inserted smooth scrolls to the related sections.
In each section a text with a vertical scrollbar (that could be repeat in html like in this extreme site) is, for the most part, accompanied by one or two images with the same height and variable width.

Urban Outfitters

Stephan Tartelin websiteAnother 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

Stephan Tartelin websiteIn 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

JapiHonoo websiteThe 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

JapiHonoo websiteAlthough 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

Particular Les Hautes-Mynes websiteLes 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

Particular of Evanesce Official UK websiteBased 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

Particular of Stephan Bucco portfolioPower 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)

Particular of Koniec websiteThe 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

Particular of Koniec websiteThe 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.


Index of sites

About this project

The Horizontal Way is the showcase for those particular sites that display its content in horizontal either vertical direction.
Turn to Horizontal is an original, but still rare, solution to display in one (or sometimes more) page a low quantity of text and big images like does, for example, portfolios or design publications. Every short review is focused to enlight layout and communication aspects [including some ideas from obsolete don't try this at home! nested tables ones ] I found interesting for the creation of an 'ideal' horizontal website. In March 2007 this site won the South By Southwest Web Award as "Best CSS". To enjoy you too the Horizontal Way karma I created a template with scripts (HTS & other tips) included: Don't forget to submit your creation, DONATE!, and/or to subscribe the RSS feed.

Submit a site

Have you found an unexplored horizontal website? Have you downloaded the template and want to show here your horizontal new creation? Great! Send an email to: submit@thehorizontalway.com or use this contact form. The form is not available at the moment