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