- August 14th, 2008
- 73 Comments
By Edison Morais
In the 90s, as the Web was just starting to take off, designers used horizontal layouts — rather in an experimental way, just to give users and designers an idea of what HTML was actually capable of. From the usability perspective it was horrible — sites were hard to scroll and the content was hard to read.
After horizontal approach has lost its novelty, it was quickly discarded and widely rejected. Surprisingly it seems to get back on track. The horizontal scroll is gaining forces and it’s not that horrible this time. Why? Simply because we have a new generation of computer devices, such as mice with a 4-way scrolling wheel1 and widescreen monitors. We have a lot of space area and we have an efficent and user-friendly way to navigate horizontally.
Here are good examples of horizontal layout navigation used in modern web-applications.
A micro blogging platform Plurk3 displays plurks (posts) in a timeline view that makes it easier for users to relate the data to some specific time. Plurks (positioned horizontally) can be easily distinguished from comments (positioned vertically). You can navigate via keyboard arrows or using a usual mouse wheel: when you scroll vertically, the page will be scrolled horizontally.
PicLens5, a popular Firefox plugin that offers a 3D experience for photos and videos, uses horizontal approach for the primary navigation. As the users scroll, images (displayed on a horizontal wall) flow in front of users’ eyes.
It seems that horizontal approach is currently used primarily for visualization purposes, but it can be used for “normal” designs7 too. Will we see this approach more often in the future? Can you imagine further situations in which you would use horizontal layout for your projects? Share your thoughts in the comments!
- Horizontal layout trends8
- The Horizontal Way9
A gallery of horizontal scrolling web-sites.
- How to create a horizontally scrolling site10
Tutorial by Chris Coyier.
About the author
Edison Morais is an insider Brazilian geek. Former SEO analyst, is researcher of new media, cyber culture and information, specifically how information is created, organized and distributed. He’s also a blogger. You can check more of his work on Conexoes11.
This post is one of the finalists of our guest author contest12. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
- 1 http://www.microsoft.com/hardware/mouseandkeyboard/features/tiltwheel.mspx
- 2 http://www.plurk.com
- 3 http://www.plurk.com
- 4 http://www.piclens.com/
- 5 http://www.piclens.com
- 6 http://deanoakley.com/
- 7 http://deanoakley.com/
- 8 http://stylizedweb.com/2008/07/07/horizontal-layout-trends/
- 9 http://www.thehorizontalway.com/
- 10 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
- 11 http://conexoes.edisonmorais.com
- 12 http://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/