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 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 Plurk 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.
PicLens, 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” designs 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
- Horizontal layout trends
- The Horizontal Way
A gallery of horizontal scrolling web-sites. - How to create a horizontally scrolling site
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 Conexoes.
Editor’s note
This post is one of the finalists of our guest author contest. 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.
Richard
August 14th, 2008 6:11 amhttp://www.curiousme.com
another example
Daniel
August 14th, 2008 6:11 amI 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
hdoug
August 14th, 2008 6:16 amAhh, memories. I remember configuring a JavaScript that would advance the frame horizontally to the next page when the user clicked the “next” button. I thought it was quite advanced for 1998 and at the time it was. Tables and frames in non-compliant glory…
I still use the horizontal scrolling method on occasion when a site can benefit from it, but now I use a better method: Coda Slider using JQuery
Nice sites featured, BTW. I wonder if the world can handle horizontal scrolling now that we’ve gotten them used to vertical. :-)
canute
August 14th, 2008 6:19 ami like this kind of navigation than vertical
thanks!
Laura
August 14th, 2008 6:23 amInteresting!
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.
Chris Chowdhury
August 14th, 2008 6:28 amI 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!
Björn Rohles
August 14th, 2008 6:29 amI 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.
Marc
August 14th, 2008 6:35 amI 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.
Anne
August 14th, 2008 7:00 ami 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
Wes Blackmore
August 14th, 2008 7:05 amJulia 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.
Steve
August 14th, 2008 7:11 am@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 :-)
myadlan
August 14th, 2008 7:20 amyea.. 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..
eddie
August 14th, 2008 7:24 amHorizontal layouts are the new black!
Josh Smith
August 14th, 2008 7:29 amAs 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.
Colin Robertson
August 14th, 2008 7:29 amI 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!
Lee O'Neill
August 14th, 2008 7:31 amI 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… !
Lee O'Neill
August 14th, 2008 7:32 amwhat.. !
Ken Woodward
August 14th, 2008 7:37 amWill horizontal layouts return? What are they returning from?
Dick Spiker
August 14th, 2008 7:40 amI agree with Kenneth Woodward. I don’t recall horizontal layouts ever being popular in the first place.
Jonathan
August 14th, 2008 7:45 amYes 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 ;)
Ziro Marketing
August 14th, 2008 7:46 amfrom 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.
Geoff Kaile
August 14th, 2008 7:51 amLast year I had the great task of updating the Aussie website in a horizontal way, I humbly think it is a great way to differentiate a site from the competition, and great fun to make too!
h-a-r-v
August 14th, 2008 8:00 amWill they ever return? I guess they never ruled the world ;-) They’re nice if done well, but because of breaking some key usability / accessibility rules, they rather shouldn’t be used more often than they are now (for unusual / concept sites only). Personally, I don’t find horizontal scrolling intuitive. And.. 95% of mouses would have to get additional scroll wheel ;)
Stephanie
August 14th, 2008 8:05 amhmm.. good topic very poorly written. “Surprisingly it seems to have managed to get back on track recently. ” blegh
Stephanie
August 14th, 2008 8:08 amugh, and there I go submitting a poorly written comment.
Jeffrey
August 14th, 2008 8:33 amI 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.
ty
August 14th, 2008 8:43 amAny mention of horizontal layouts wouldn’t be complete without mentioning:
http://www.thehorizontalway.com/
Richard Livsey
August 14th, 2008 8:53 amAfter reading this I thought I’d experiment with what it would be like if you could scroll horizontally with the mouse wheel.
It’s a bit disconcerting!
Jenn
August 14th, 2008 9:37 ama lot of my feelings of the matter have already been said, but i shall share them any way…
- if you need to instruct the user how to navigate, the design is fundamentally flawed, in my opinion. that isn’t to say horizontal designs can’t work, but as josh smith said, if you have to say so, you may have already lost a viewer.
- horizontal formats are unnecessary and counter intuitive to the way one would normally read, say, a news paper, and really, books. the first tendency is to read top to bottom, even before reading left to right (in american/english manners i suppose). it is more comfortable to read (text or visual information) in that way: continuous flow from top down, where lengthwise is only as long as necessary. this may, however, might just be a norm created by conditioning, what with the net primarily being displayed in this format.
- i can’t say for sure, being that i’ve never designed a horizontal website, but i imagine there being more discrepancies when designing and coding, verses vertical. more chance for something to not look right or display right on various screens and browsers.
- that being said though, there are a number of artist/portfolio based websites that use this layout. some good, some not, but it bring to light an issue: the size of the content is limited to the height of the area. i suppose this could be good or bad for a graphical website. bad in the obvious limit-of-the-size you can use, and good in that the inevitable size constrictions may result in smaller file sizes/faster load times, instead of what may be a tendency to go larger in a vertical layout.
Joana
August 14th, 2008 9:53 am@Steve! Thanks for the tip!
I didn´t know that!
I´m playing like a child scolling everythin horizontally with my firefox!
Long new life for the horizontal layout!
Valeu Edison pelo artigo! Saudações brasileiras!
kleight
August 14th, 2008 9:57 amWhile an okay feature, it seems like it’s more of a half-assed top ten than a discussion. I think a full ten list of horizontally laid out sites would have been appreciated.
Martyn Cooling
August 14th, 2008 10:00 amI really enjoy this horizontal site…
http://www.modularpeople.com/03/08.asp
mark
August 14th, 2008 11:27 amIn my opinion horizontal works in very few instances. This being that users have tools to navigate through a site vertically more so than horizontally. In addition some implementations require too many mouse clicks.
But I do think that what’s more important is not whether it’s horizonal or vertical but who is the intended market. That usually will determine what layout works best.
Roy
August 14th, 2008 12:05 pmWe recently launched our new -horizontally oriented- site. It’s in Dutch but without knowing our language you should get the picture:
Our horizontal layout
Like to know what you think about it!
Szymon Kiedyk
August 14th, 2008 12:28 pmSorry, horizontal layouts are generally counter intuitive. The website that was shown as an example, was a pretty bad example of good horizontal scrolling. Besides, I really don’t see how his horizontal solution was any better than doing the same thing with a vertical one.
Tiago Sá
August 14th, 2008 1:08 pmI don’t get it. Why do people keep thinking wide screen monitors are actually wider? They’re just less tall, that’s what. A 17′ widescreen goes 1280×800, while a 17′ normal screen goes full 1280×1024… WAY more space.
Mark
August 14th, 2008 3:02 pmHP Showroom – a site I built that uses horizontal layout and some fancy JavaScript.
tayron
August 14th, 2008 3:03 pmI think it would be nice, it would fit betterin widescreen dimensions, 1680x1050px, for example.
D. Cellucci
August 14th, 2008 3:09 pmI remember being in Journalism class, where our teacher, very pumped about an idea he had, pitched it to the editors. He was about thirty seconds into the idea when someone in the class just blurted “who cares?”
I am reminded of that when I see this article. It seems like someone isn’t trying to engage me as a reader, but just show a series of examples of where this system is being applied. It would have been better if he was giving 10 great horizontal sites or trying to make a case for using a horizontal design.
Bart
August 14th, 2008 3:25 pmAt my previous job I made this horizontal scrolling site:
http://www.verpakkingstaks.be/index2.html
It was kinda hard to make the navigation fixed in various browsers.
niemi
August 14th, 2008 5:03 pmNice article, made me think of my aging portfolio site. :D
http://niemi.it/portfolio/
Simon SC
August 14th, 2008 5:42 pmI’m just dropping by to mention an effective use of combined navigation. The Twitter/Adobe AIR app: TweetDeck consists of a couple of columns. You have to scroll to see them and you can add more columns should you choose.
However it’s not all horizontal. The columns themselves are vertically scrolling, making for a sort of “hybrid” design.
Rom
August 14th, 2008 6:39 pmHorizontal layouts are getting the attention of designers, well, I don’t think it would be usable for everyone who were used to vertical scrolling (If only I can move the mouse wheel in a horizontal layout website). Peace!
Scott Mackenzie
August 14th, 2008 7:12 pmI personally don’t enjoy using horizontal sites. They aren’t really intuitive. You have to think before taking the next action… which slows you down.
I think for portfolio sites they have a place though.
JP
August 14th, 2008 8:12 pmyes, let´s put it that way…
WHY SO VERTICAL?
=)
NeoSheet
August 14th, 2008 10:47 pmyeah.. horizontal design make a new taste for me.
Daniel
August 15th, 2008 12:12 amLove the piclens layout
Zub
August 15th, 2008 1:41 amI have always liked Red Interactives website. Horizontal and vertical layout (although content is really just grouped at 1 location)
http://ff0000.com/
Artofid
August 15th, 2008 3:04 amAhh it’s nightmare of usebility!
Joe Schuch
August 15th, 2008 4:32 amThe timeline a dreadfully underutilized visual aid. Perhaps because it hasn’t fit web pages (or printer pages) well (historically)? I wish there were better resources available for adding flash timeline widgets to webpages (without having to build one from scratch).
Horizontal, in the right hands, offers awesome potential.
Joey
August 15th, 2008 4:58 am… you said penetration …
nathalie
August 15th, 2008 5:28 ami 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.
Rick Curran
August 15th, 2008 5:33 amThis agency has an interesting horizontal Flash site:
http://www.ff0000.com/
Edison Morais
August 15th, 2008 5:46 amHi 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.
matte
August 15th, 2008 11:49 amTry 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.
Pinar
August 15th, 2008 12:53 pmJosh – 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.
Pinar
August 15th, 2008 1:05 pmJonathan – 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.
Libor Fikr
August 16th, 2008 10:23 pmI don´t like horizontal layout. It´s useless. Online hry
KaiToU KiD
August 17th, 2008 1:57 pmwew, celotehsaya, how r u? :)
Birgit
August 18th, 2008 2:09 ammore 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…
Phillip B
August 18th, 2008 4:27 amTry 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.
Jason
August 18th, 2008 2:01 pmThis one doesn’t bother me and allows for vibrant advertising. http://www.bluevertigo.com.ar
css_godess
August 19th, 2008 4:54 amas if they ever disapeared..
James Fleeting
August 19th, 2008 8:01 amI 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.
Raj
August 19th, 2008 11:27 amI 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.
Mike Anderson
August 29th, 2008 3:25 pmI 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.
Morkovka
September 20th, 2008 12:11 pmI found a scroll method, based on jquery on nulllab.net site. Think it’s be great for use.
Marc Miles
September 23rd, 2008 7:31 amand another pretty funky one: http://www.gannaca.com
Jollymoon
October 29th, 2008 10:38 amWe love horizontal !
http://www.sade-usa.com
Jollymoon
October 29th, 2008 10:44 amWe 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!
Applebush
January 20th, 2009 3:58 amAnother example of horizontal scrolling constructed with java.
Link [http://www.quadradao.com.br/]
mag
January 19th, 2010 11:38 amcheck 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
Wows
June 7th, 2010 1:23 pmHi,
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