StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Horizontal layout trends

While i was going trough CSS galleries i ran into couple of interesting web sites with horizontal based layout and asked my self is this going to be next trend in web site development and what are the good and bad sides of this kind of web sites and where we can use this? So I've interview two developers and asked them these questions.

The first one is Luke Larsen, web designer from Utah, and the second one is Dean Oakley from Gold Coast, Australia also web designer and developer. Enjoy!

What inspired you to go with this kind of layout?

Luke Larsen: I choose to go with a horizontal layout because I wanted to do something different from all of the other websites that I create everyday. I had this idea back in college and was going to use Flash technology for it but when I started this time I wanted to stay away from Flash so I could help the site be more searchable.

Dean Oakley: I just wanted something different I guess. Always wanted to try a horizontal layout and I haven't seen many around the CSS galleries.

We don't see horizontal layouts so much today, by your opinion why is that?

Luke Larsen: I think horizontal layouts are sparse on the internet because they break the norm. I have done quite a few usability tests and found that when we break the norm for website layouts people tend to get lost or frustrated because the website can't be used in the way the user expects it to. It's like reading a book. If you were given a book that was written from right to left instead of left to right it would discourage you from reading it. You might be thinking then why did I use it. If the design of the website and the layout makes sense for it users will catch on and not have a problem using it. The problem arises when the horizontal scroll happens by accident. It then just becomes annoying to the user.

Dean Oakley: Well it's consistent in all browsers and gives you a lot of room for innovation. One of my Favorites would have to be blog.urbanoutfitters.com Also because monitors are generally wider than higher so it makes sense.

While you are using it can you tell us the good and bad sides of it?

Luke Larsen: The pro to using a horizontal layout is that if it is well planned out it is very unique. If well implemented the user doesn't have a hard time using it and actually enjoys a site that is different and yet still easy to use.
The cons is that if the site isn't well crafted the user has a hard time using the site and gets annoyed while trying to use it and then tends to leave and not come back. Like I mentioned before this layout breaks the norm and when that happens there is a small adjustment the user has to make. How well the design enables the user to make that adjustment will make or break a horizontal layout website.

Dean Oakley: Initially my idea was to have a repeating background with a footer positioned at the bottom but this proved impossible because of the horizontal scroll bar. So this limits the design in this respect and is what made me think of the floating ground design.
It's a good idea to give the user multiple options for navigation. The script I used for the navigation can be found here This gives you not only a smooth scroll effect but the use of the mouse wheel in IE and Firefox

What people usually say about it? Is it confusing sometimes?

Luke Larsen: I have only had people say positive things about the the lukelarsen.com website. I did do a horizontal website in college and the only reason I did a horizontal layout was because I felt like it. People did say it was confusing and that they would have preferred a vertical site. I think the difference in the two sites is that the lukelarsen.com site holds the concept of the fish tank. Fish tanks are normally wide therefore it makes sense in the users mind that the website should be wide.

Dean Oakley: I was surprised to get a few negative comments like "horizontal scrolling sites are ugly and annoying" or "horizontal scroll is bad" but why is this? What's the reason? I don't know.
But generally the feedback has been good. For this kind of site it works well. If you had a lot more information I think it might get confusing.
I don't know why horizontal layouts are sometimes deemed bad or uncool. The code is still valid and works flawlessly in all browsers, for the right kind of site it makes sense!

Do you think this could be one of the next popular things on the web?

Luke Larsen: I think as the internet gets older and older and people get more creative we will see other well crafted websites that are user friendly and are horizontal based. I don't think that horizontal website will ever be more popular than vertical sites. It's just the nature of the web. Just like books will always be left right, websites will always be mostly top to bottom. Regardless of that I think we will see more horizontal websites cropping up, just not ever taking over.

Dean Oakley: Well maybe. I would like to see it used more. I think there a lot of unexplored design ideas available with the horizontal scroll layout.

Leave a comment on Stylized Web Have some feedback? Leave a comment

28 Comments So Far

  1. By Mike posted on July 7, 2008 at 9:55 am

    Very interesting and inspiring,
    thanks for sharing!

  2. By Anna posted on July 7, 2008 at 9:57 am

    I really like their designs and i also thing this is really good for portfolio web sites

  3. By vFragoso posted on July 7, 2008 at 2:28 pm

    Well, I agree that horizontal layouts allows us to explore a bunch of new ideas, and there are a lot of.

    Browsers were created to show the internet as pages, not webpages, paper pages, just like any magazine. And I think that it’s valid, and at some point good, providing new ideas for navigation.

    But, I guess it’s something more complicated than just a script that provides methods for scrolling, or those kind of “solutions” that don’t even solve the usability problems.

    Scrolling down to right or top to left just don’t make much sense.

    I like the idea, but it needs more thinking about usability issues.

    Keyboard arrows also don’t solve the problem, since users are always expecting less and less dependance of devices for navigation.

    Think about that. If possible, wouldn’t you prefer using your mind than having to click? Imagine clicking and typing.

    I like the “coda way” that Luke’s profile shows the page. But it needs some fixes (looking at FF3).

    Dean’s is also very beatiful and well made, but, since we are trying to raise the navigation to a new level here, a better interaction of the background with the scrolling would be much better. I think a panaromic view changing as we scroll should be lovely.

  4. I just happened across your site, i really like the design and layout and wanted to compliment you on such. Sometimes people forget how much time and effort goes into perfecting a site in both the design and implementation phases, but i haven’t and i find this site to be AWESOME!! :)

  5. By Dejan Cancarevic posted on July 8, 2008 at 2:34 pm

    vFragoso,

    Well yes, usability was the main thing i was thinking about when i was going trough these sites that is why asked them to participate.
    So i share your opinion, it looks interesting and seams good for smaller portfolios but I’ll stick to vertical ;)

    Clay,
    Hey buddy, thanks a lot i really appreciate it :D

  6. Pingback: lukelarsen » Blog Archive » Horizontal website discussion

  7. I thought about making a horizontal layout, but everyone I talked to shot it down. Although, I think if you really point out the direction the users needs to go, they will be fine. Some people don’t know to search for horizontal bar, I once didn’t even notice it on my own website a few years back.

  8. Aside from a full scrolling site, with the widescreen monitor becoming more popular among conumers, designers can have some more fun with a wider layout and still give their users the whole experience. Great article and inspiration for later :)

  9. Pingback: Bookmarks for July 8th & July 9th | isuckatdesign.com

  10. Dejane you are so clever! :-D

  11. This ones are great implementations and really nice visual experiments, but most web content lends more to vertical scrolling, due to the fact that we are accustomed on reading pages up to down with ‘thin’ columns. For example, a Newspaper is more useful with thin and long columns.
    Maybe it lends for other kinds of visualization, but just as said by one of the interviewed, I don’t think is quite good for long text.

  12. Pingback: BlogBuzz July 12, 2008 | Webmaster-Source

  13. Pingback: Ledger Pad » Why Design Experts Are Wrong

  14. As the new VP, I see we need a complete re-do on our website. I really like the horizontal scroll but would like it with big,(giant) arrows that pull ones attention rather than count on them using the bottom scroll bar, is this possible? Any websites come to mind who have done it?

  15. Pingback: Will Horizontal Layouts Return? | Events | Smashing Magazine

  16. Pingback: Will Horizontal Layouts Return? | The Creative Children

  17. Pingback: Will Horizontal Layouts Return? « ATI - All Things Interesting

  18. Pingback: Will Horizontal Layouts Return? | [w3b]ndesign

  19. Although I sometimes would prefer using a horizontal layout for a website, I usually don’t. Not because of useability or aesthetics, but simply because I knów most clients will keep on adding extra items to the menu in the future. And it’s a lot easier to do that with a vertical menu.
    Making the entire site (including the menu) scroll horizontally is only an option when the content is short enough to fit ‘under the fold’, as it is that urbanoutfitters example. But the length of (dynamic-) content is not something you can control, in most cases.

  20. errrr. that should be ‘above the fold’ of course.

  21. By jeremy silver posted on September 1, 2008 at 5:40 pm

    I’m an artist and I’ve made a few of my portfolio sites scroll horizontally to give the impression of walking through a gallery. It makes sense to view paintings next to each other because that’s how they would actually be displayed, and not on top of each other. While this works for me I know it wouldn’t work for most. I don’t have to worry about a large footprint for navigation or someone else updating and changing the content.

  22. Pingback: EGNM 2001 – Brief 2 - Craig Massingham

  23. thanks you
    You will have to crawl very nice

  24. Pingback: Craig Massingham — EGNM 2001 – Brief 2

  25. magaling talaga ang yahoo, sapagkat lahat ng isearch namin ay nakikita

  26. thanks good admin

  27. Dejane you are so clever! :-D

  28. Pingback: Will Horizontal Layouts Return? |Layout to HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>