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 wheel and widescreen monitors. We have a lot of space area and we have an efficient and user-friendly way to navigate horizontally.
Here are good examples of horizontal layout navigation used in modern web-applications.
A micro blogging platform Plurk2 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.
PicLens4, 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” designs6 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!
Related articles Link
- The Horizontal Way7
A gallery of horizontal scrolling web-sites.
- How to create a horizontally scrolling site8
Tutorial by Chris Coyier.
About the author Link
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.
Editor’s note Link
This post is one of the finalists of our guest author contest9. 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.plurk.com
- 2 http://www.plurk.com
- 3 http://www.piclens.com/
- 4 http://www.piclens.com
- 5 http://deanoakley.com/
- 6 http://deanoakley.com/
- 7 http://www.thehorizontalway.com/
- 8 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
- 9 https://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.