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?”.
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.
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 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.
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.
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.
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.
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.
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.
What metaphisical first entry…Like when “A List Apart” speaks about ‘Lists’: that’s amazing.
