Will Horizontal Layouts Return?

Advertisement

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.

Plurk2

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.

Piclens4

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.

Piclens6

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!

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.

Editor’s note

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.

Footnotes

  1. 1 http://www.microsoft.com/hardware/mouseandkeyboard/features/tiltwheel.mspx
  2. 2 http://www.plurk.com
  3. 3 http://www.plurk.com
  4. 4 http://www.piclens.com/
  5. 5 http://www.piclens.com
  6. 6 http://deanoakley.com/
  7. 7 http://deanoakley.com/
  8. 8 http://stylizedweb.com/2008/07/07/horizontal-layout-trends/
  9. 9 http://www.thehorizontalway.com/
  10. 10 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
  11. 11 http://conexoes.edisonmorais.com
  12. 12 http://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/

↑ Back to top Tweet itShare on Facebook

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

Advertisement
  1. 1

    I think the horizontal scrolling is here to stay. Thanks to iphone/ipod touch’s horizontal scrolling penetration. The Coda Slider is the closest that you can get to that feeling.

    … you said penetration …

    0
  2. 52

    i actually have been seeing a lot in design websites, as a form os exposing a portfolio. it is a quite nice, visual option to paginating, that is not all that practical once you think about it.

    0
  3. 103

    This agency has an interesting horizontal Flash site:

    http://www.ff0000.com/

    0
  4. 154

    Hi everyone.
    Thanks for sharing your thoughts and links. Very useful complementary resources,

    I could not agree more with @Jenn: our reading habits shape our usability. That’s why images (Piclens) in horizontal layouts are more comfortable to see. In the case of Plurk, the text is limited in boxes of a certain width.
    That might answer the @Daniel question.

    Thanks, Joana, for the Brazilian Greetings. I’m trying all my best to serve you with thoughtful insights from a foreign perspective.

    0
  5. 205

    Try using a horizontal scrolling site in widescreen mode on a iPhone or iPod Touch & I think it’s obvious that they’re here to stay – such a pleasing way to flick through a site.

    0
  6. 256

    Josh – coincidently I am the designer and owner of the website Curioume and am in between agreements with your comment. I have found after a few weeks of my website being live – the horizontal stroller can be unintuitive.

    I think it is also down to the placing of the images, where for example on curiousme the images don’t indicate there is further information to the right.

    Which is my downfall in this website.
    Therefore I then added the caption to be sure users would use the whole of the website.

    In my opinion I feel horizontal website could work through having flash coding added to the mouse cursor where movement to the right of the website would also move the web page
    allowing users to view the website without an unfamiliar movement scrolling right as to using your mouse stroller to go down and up.

    I am now reverting to a central dynamic website where i think this will allow users to view all
    project effectively and not waste time, as you have also mentioned in your comment.

    0
  7. 307

    Jonathan – coincidently i am the Designer and owner of the Curiousme website as mentioned before.

    Just to explain my reason for adding this caption – i have states for my website which allows me to see which pages where viewed and found users were not accessing the whole of the website and just the first three projects which are in view. therefore i added this caption for testing purposes to find out if this made a difference and found in fact it did.

    Users begun to view the whole of the website which I am please about but also not pleased, as this does make the site in my opinion unattractive and also shows that there are problems with the site.

    I now am looking at different ways of developing the site horizontally but have found maybe (just from a users prospective) a site is more usable if everything was centered (without scrolling) and develops from this one central piece which can still be dynamic with animations in flash and have a different movement and feel to a site rather then the burden of the unfamiliar scrolling horizontal action.

    0
  8. 358

    I don´t like horizontal layout. It´s useless. Online hry

    0
  9. 409

    wew, celotehsaya, how r u? :)

    0
  10. 460

    more examples please! :-)

    I think horizontal layout should fit better to natural perception… but will only be interesting for screen media if we get some devices that are able to deal with 2-dimensional scrolling…

    0
  11. 511

    Try resizing the text on any of these sites. It failed on all the ones I tried (using IE7), which seems to indicate that there is an accessibility issue which is being overlooked/ignored simply to achieve the horizontal scroll. Had any of the sites had on-screen controls to resize the text, they might be forgiven.

    In the UK (as I’m sure it is in most countries) accessibility is law – consider how a company/corporation is discriminating against people who can’t read the job advert posted on their site.

    0
  12. 562

    This one doesn’t bother me and allows for vibrant advertising. http://www.bluevertigo.com.ar

    0
  13. 613

    as if they ever disapeared..

    0
  14. 664

    I have always loved horizontal layouts and there have been some amazing ones in the past. I personally tried once but could never get it to look how I wanted with side scrolling. There are some that are a pain but plenty that look amazing and break out of the normal ‘blog’ format. I hope to see more in the future.

    0
  15. 715

    I like it when horizontal scrolling is done via a navigation or UI element with an intuitive way for the user to get back to the previous “screen”. Using the browser scrollbar at the bottom is not very user-friendly in my opinion. I personally don’t like it done that way.

    0
  16. 766

    I once got yelled at by Paul Boag from proposing a horizontal scroller layout, also, I may have been using frames… hehehe. In hindsight, it would have been for an audience that would not have understood it.

    0
  17. 817

    I found a scroll method, based on jquery on nulllab.net site. Think it’s be great for use.

    0
  18. 868

    and another pretty funky one: http://www.gannaca.com

    0
  19. 919

    We love horizontal !

    http://www.sade-usa.com

    0
  20. 970

    We love horizontal !

    http://www.sade-usa.com
    http://www.nanyana.com/nanyana2/
    http://www.edparton.com/plane/

    You got to have a menu or pointing system, just side scrolling is not enough.

    Sure beats spinning that little wheel. Just point your mouse and click!

    0
  21. 1021

    Another example of horizontal scrolling constructed with java.
    Link [http://www.quadradao.com.br/]

    0
  22. 1072

    check this one

    http://www.magicmarinac.hr

    flash resolves the dilema and i think it is a good way to see things in all screen resolutions
    try a central site on 24 inch monitor – quite small

    but lot’s of things too think before making a horizontal scroll site

    0
  23. 1123

    Hi,

    I really like horizontal sites for portfolio and other creative related artist sites, my own portfolio site is horizontal as well: http://www.wows.nl

    Regards,
    Wouter
    Wows.nl

    0

↑ Back to top