Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Will Horizontal Layouts Return?

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.

Plurk1

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.

Piclens3

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.

Piclens5

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!

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.

Footnotes Link

  1. 1 http://www.plurk.com
  2. 2 http://www.plurk.com
  3. 3 http://www.piclens.com/
  4. 4 http://www.piclens.com
  5. 5 http://deanoakley.com/
  6. 6 http://deanoakley.com/
  7. 7 http://www.thehorizontalway.com/
  8. 8 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
  9. 9 https://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/
SmashingConf New York

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.

↑ Back to top Tweet itShare on Facebook

Advertisement

Some contributors with just a single posting. To learn more look at our ebook.

  1. 1
  2. 2

    I don’t see any difference for horizontal scrolling to vertical scrolling. However users have a lot more varience in their screen height then their screen width, and therefore it will be a difficult to design successfully for all users.

    Daniel

    0
  3. 3

    i like this kind of navigation than vertical
    thanks!

    0
  4. 4

    Interesting!

    I hadn’t even thought of the way PicLens is horizontal- it just feels right the way it is- A sign of truly great design.

    Some further examples and analysis of why designers use horizontal scrolling, and maybe some pros and cons would make this post even better.

    0
  5. 5

    Chris Chowdhury

    August 14, 2008 6:28 am

    I tend to think any layout found to be engaging and functional to the user will win in the end. I like these examples. Stretching my thinking on layouts altogether!

    0
  6. 6

    Björn Rohles

    August 14, 2008 6:29 am

    I think it depends on the overall design idea (as usual). I like horizontal design for pages with a lot of different sections, which can be easily ordered next to one another. Pages with a more linear context should not be ordered horizontally.

    0
  7. 7

    I must admit I’ve never been a fan of these types of layouts, I’ve only seen one that worked well and it was a full flash site that opened out like you were opening a folded leaflet.

    As you say, maybe with the advent of multi-directional mice we might see more of this but personally I don’t think so.

    0
  8. 8

    i think that depends on how sou use it
    piclens just works naturally
    but as soon as you get a standard scrollbar at the bottom… aw, that’s no good
    you can’t move it with your mousewheel, like you’re used to with vertical scrolling and that is what makes it user-unfriendly… at least for me

    0
  9. 9

    Wes Blackmore

    August 14, 2008 7:05 am

    Julia Allison’s NonSociety uses the concept as well, while it’s not a master piece design wise I like the concept.

    Plurk is a little weird for me though, if it’s a timeline it should scroll from left to right not the other way around.

    0
  10. 10

    @9:
    Sure you can, on Firefox for example, I can place my mouse over a horizontal scroll bar and just start scrolling with my mouse button :-)

    0
  11. 11

    yea.. great ideas.. i only can see the dean oakley website..

    i’m looking for a new idea for my next project.. considering this style too..

    0
  12. 12

    Horizontal layouts are the new black!

    0
  13. 13

    As soon as you have to put something in the page, like on the Curiousme site, that instructs the user to “USE BOTTOM SCROLLER TO VIEW WEBSITE,” you’ve potentially lost your user. I find these horizontal scrolling ideas to be pretty unintuitive.

    The problem isn’t so much that it goes against convention. Rather, these horizontal designs display so much information that pulls your eye to the right and left of the screen, even when you’re trying to focus on the central content. That same central content can be easily defined and standardized in a vertical display.

    0
  14. 14

    Colin Robertson

    August 14, 2008 7:29 am

    I personally think this is a terrible idea on an ordinary website! Surely it is only a gimmick done to try and make a website stand out? Some webapps I can understand using it, but only as a last resort.

    The Dean Oakley site is a prime example of why this is a bad idea. I click on the “My Work” link, and could see the primate picuters hovering just off screen but couldn’t work out how to get to them. Just what you want when people visit your site…having to work out how to navigate!

    0
  15. 15

    I think horizontal scrolling on a website is bad news. It’s like trying to evole the wheel… bloody pointless. Vertical scrolling has become the standard for users. Horizontal scrolling should only be used on very obscure sites, eg:- flash site promoting a new trainer, or displaying photographs. Somewhere the average user will not find the site difficult to use. Sites aimed at people who are web savy!
    Why confuse the user… !

    0
  16. 16

    what.. !

    0
  17. 17

    Will horizontal layouts return? What are they returning from?

    0
  18. 18

    I agree with Kenneth Woodward. I don’t recall horizontal layouts ever being popular in the first place.

    0
  19. 19

    As soon as you have to put something in the page, like on the Curiousme site, that instructs the user to “USE BOTTOM SCROLLER TO VIEW WEBSITE,” you’ve potentially lost your user. I find these horizontal scrolling ideas to be pretty unintuitive.

    Yes this intruction have perturbed my mind…
    But it’s also intuitive that a vertical scroll a think but don’t think your visitors are stupid… The scroll is visible horizontally or verticaly.

    Personaly, i like this new vogue of horizontal websites…

    Sorry for my english… Thanks ;)

    0
  20. 20

    Ziro Marketing

    August 14, 2008 7:46 am

    from a user standpoint i can’t ever see horizontal layouts being as popular as vertical. People are used to scrolling down not right to left.

    0

↑ Back to top