35 of the Best Horizontal Website Layouts For Inspiration

35 of the Best Horizontal Website Layouts For Inspiration

Posted on 26. Nov, 2009 by in Inspiration


This design style elicits quite a response from users and design traditionalists, people either love them or down right hate them.  There does not seem to be much middle ground for discussion but more and more you see horizontally scrolling websites popping up around the net.  I have compiled 35 of the best examples.

Instead of the traditional up and down scroll this style moves from side to side.  Sometimes to enhance the experience it has auto scroll, or dragging capabilities, and sometimes its just a manual slide using the scroll bar.  It should be noted that horizontal designs are not for every type of website. They generally work very well for portfolios and image heavy sites, but not as much with content heavy sites. With the combination of wide screen monitors taking over the market and multi directional mice, this experience could be a great new way of interacting on the web.

Dean Oakley

Horizontal Layout - Dean Oakley

Horizontal Layout - Dean Oakley

Alex Flueras – Photography

Alex Flueras - Photography

Horizontal Layout - Alex Flueras - Photography

F. Claire Baxter

Horizontal Layouts - F Claire Baxter

Horizontal Layout - F. Claire Baxter

InHouse

Horizontal Layout - InHouse

Horizontal Layout - InHouse

Peter Pearson

Horizontal Layout - Peter Pearson

Horizontal Layout - Peter Pearson

Farmhouse Fare

Horizontal Layout - Farmhouse Fare

Horizontal Layout - Farmhouse Fare

Ricardo Arce

Horizontal Layout - Ricardo Arce

Horizontal Layout - Ricardo Arce

Stephane Tartelin

06_horizontalHorizontal Layout – Stephane Tartelin

Wika AG

Horizontal Layout - Wika AG

Horizontal Layout - Wika AG

Jason Love

Horizontal Layout - Jason Love

Horizontal Layout - Jason Love

Les Hautes-Mynes Du Thillot

Les Hautes-Mynes Du Thillot

Horizontal Layout - Les Hautes-Mynes Du Thillot

Carrot Creative

Carrot Creative

Horizontal Layout - Carrot Creative

Publicidade Viva

Horizontal Layout - Publicidade Viva

Horizontal Layout - Publicidade Viva

Tom Hoops Photography

Horizontal Layout - Tom Hoops Photography

Horizontal Layout - Tom Hoops Photography

Sursly/Tyler Finck

Horizontal Layout - Sursly/Tyler Finck

Horizontal Layout - Sursly/Tyler Finck

Front End Design Conference

Front End Design Conference

Front End Design Conference

GUDANG DAMANSARA

Horizontal Layout - Gudang Damansara

Horizontal Layout - Gudang Damansara

Gavin Castleton

Horizontal Layout - Gavin Castleton

Horizontal Layout - Gavin Castleton

Graphic Therapy

Horizontal Layout - Graphic Therapy

Horizontal Layout - Graphic Therapy

Lucuma

Lucuma

Lucuma

Hasrimy

Horizontal Layout - Hasrimy

Horizontal Layout - Hasrimy

We Shoot Bottles

Horizontal Layout - We Shoot Bottles

Horizontal Layout - We Shoot Bottles

Fondation Nicolas Hulot

Horizontal Layout - Fondation Nicolas Hulot

Horizontal Layout - Fondation Nicolas Hulot

Visuall

Horizontal Layout - Visuall

Horizontal Layout - Visuall

Hank Olguin

Horizontal Layout - Hank Olguin

Horizontal Layout - Hank Olguin

Artemis Eternal

Horizontal Layout - Artimes Eternal

Horizontal Layout - Artimes Eternal

Glass House

Horizontal Layout - Glass House

Horizontal Layout - Glass House

Sense Hub

Horizontal Layout - Sense Hub

Horizontal Layout - Sense Hub

Artist in Design

Horizontal Layout - Artist in Design

Horizontal Layout - Artist in Design

Charlie Gentle

Horizontal Layout - Charlie Gentle

Horizontal Layout - Charlie Gentle

Eric Johansson

Horizontal Layout - Eric Johansson

Horizontal Layout - Eric Johansson

Pixel Lounge

Horizontal Layout - Pixel Lounge

Horizontal Layout - Pixel Lounge

Graphic Evidence

Horizontal Layout - Graphic Evidence

Horizontal Layout - Graphic Evidence

SectionSeven

Horizontal Layout - SectionSeven

Horizontal Layout - SectionSeven

Faub

Horizontal Layout - FAUB

Horizontal Layout - FAUB

Tags: , , ,

48 Responses to “35 of the Best Horizontal Website Layouts For Inspiration”

  1. [...] Visit Source. [...]

  2. [...] posted here:  35 of the Best Horizontal Website Layouts For Inspiration | Web … By admin | category: dreamweaver | tags: creative-inspiration, description, design, [...]

  3. uberVU - social comments

    26. Nov, 2009

    Social comments and analytics for this post…

    This post was mentioned on Twitter by NorwichDesigner: 35 of the Best Horizontal Website Layouts For Inspiration – http://chilp.it/?758408

  4. Elizabeth

    26. Nov, 2009

    Also take a look at http://www.smashingmagazine.com for web design trends, templates, icon sets and free fonts – they definitely have their finger on the pulse.

    [Reply]

  5. Grant

    27. Nov, 2009

    What about http://greenermags.com. I’m pretty sure we were the first horizontal scrolling platform. Nice to see people using it wisely.

    [Reply]

    bmackler Reply:

    Thank you for adding this. Wonderful example of horizontal scrolling. I tried to find the best ones, but I knew I would miss some. Great addition.

    [Reply]

  6. Alex Flueras

    27. Nov, 2009

    Thanks so much for featuring my site!

    [Reply]

    bmackler Reply:

    My pleasure. its a great site and wonderful example of horizontal navigation.

    [Reply]

  7. Torontoweb

    27. Nov, 2009

    What a great collections of Horizontal Web Design. But from the rest, “We Shoot Bottles” catches my eye more. It’s design is just simple but it look elegant.

    [Reply]

  8. DB

    27. Nov, 2009

    another nice showcase is http://www.thehorizontalway.com/

    [Reply]

  9. Lewis Litanzios

    27. Nov, 2009

  10. [...] 35 of the Best Horizontal Website Layouts For Inspiration [...]

  11. [...] 35 of the Best Horizontal Website Layouts For Inspiration [...]

  12. Bluefaqs

    28. Nov, 2009

    Nice collection! I thought that the Wika AG one was designed well. Some of these I haven’t seen before.

    [Reply]

  13. [...] See the original post: 35 of the Best Horizontal Website Layouts For Inspiration | Web Design Tutorials and Journal | Learn… [...]

  14. 35 of the Best Horizontal Website Layouts For Inspiration…

    This design style elicits quite a response from users and design traditionalists, people either love them or down right hate them. More often you see horizontally scrolling websites popping up around the net. I have compiled 35 of the best examples….

  15. LionFlight

    30. Nov, 2009

    Those nice examples reminded me of these two great flash sites that scroll horizontally;

    http://www.jonathanyuen.com/main.html
    http://soydeaire.labuat.com/

    [Reply]

  16. ldii

    01. Dec, 2009

    Thank you for the share. I love it and I’ve bookmarked it.

    [Reply]

  17. write my essay

    01. Dec, 2009

    Thank you for this nice article!

    [Reply]

  18. [...] View Post [...]

  19. derek

    01. Dec, 2009

    here is another cool one: http://www.edarci.com

    [Reply]

  20. Peter Pearson

    01. Dec, 2009

    Thanks for the feature!

    [Reply]

    bmackler Reply:

    @Peter Pearson, My pleasure. Its very deserving of the spotlight.

    [Reply]

  21. The websites are wonderful and Excellent

    [Reply]

  22. [...] 35 of the Best Horizontal Website Layouts For Inspiration [...]

  23. Guga

    06. Feb, 2010

    My horizontal website: http://www.elastika.org
    Thank you

    [Reply]

  24. Wows

    07. Jun, 2010

    Hi,

    I really like the list, my own portfolio site is horizontal as well: http://www.wows.nl

    Regards,
    Wouter
    Wows.nl

    [Reply]

  25. [...] 35 of the Best Horizontal Website Layouts For Inspiration [...]

  26. Internet Hosting

    08. Aug, 2010

    More often you see horizontally scrolling websites popping up around the net. I have compiled 35 of the best examples….

    [Reply]

  27. Lovely Horizontal layout designs but this is not useful for search engine optimization…..

    [Reply]

  28. steven riley

    11. Aug, 2010

    Great post, after seeing these, we’ve just put together our FIRST on pager AND we’ve gone horizontal, http://www.welovechief.com thanks again guys.

    [Reply]

  29. plumber welwyn

    01. Dec, 2010

    You should keep in mind that horizontal designs works only for portfolios and image heavy sites. they are not for every type of website !

    [Reply]

  30. iovision

    11. Dec, 2010

    Awesome! Thanks for sharing…………

    [Reply]

  31. Jogos

    24. Dec, 2010

    Good collection, I like the first design “Dean Oakley”. Thanks for sharing the layouts and best wishes to you.

    [Reply]

  32. [...] 35 of the Best Horizontal Website Layouts For Inspiration [...]

  33. kopecky

    20. Feb, 2011

    Often in comments on horizontal websites one may read about odd layouts and the difficulty to foresee the user’s screen resolutions.

    Well I disagree this being an obstacle really. I take the “odd design” as a compliment to all those who think out of the box tracing new ways, captivating audience. The layout is a discussion not to be, if one observes the question from the content side of the site rather than as a pure technical issue.

    Imagine a museum. You walk around from room to room holding a guidebook of some sorts in your hands. Well I designed this site pretty much following that philosophy: http://kopecky.online.fr/

    The menu serves as “guidebook” moving the visitor to the specific “room”. Like in a building the graphic design is continuous. One horizontal page. Just like walking from one room to the next. The alternance between text and picture “pages” makes things quite easy. The rainbow coloured band divides the different sections the same way than it unifies the site. The fact that – just like in an exhibition – comments and texts always link to the pictures creates common sense between the different sections or “pages” (“rooms”). This way, even if the screen resolution is rather high and several secions are displayed the same time, the layout keeps its full sense.

    Several sites shown in the examples here above do already use theese techniques.

    [Reply]

  34. pandora sale

    02. Mar, 2011

    I agree on the usability issue. That’s why I’m not that big on the horizontal style.

    Originalspirit,
    That’s a good point that I didn’t mention. It is much easier to scroll through photos horizontally than it would be to deal with text.

    [Reply]

  35. Flowers

    16. Mar, 2011

    Great samples for beginners. Thanks for this post!

    [Reply]

  36. Very inspiring designs. I’d love to create one for my photography. Thanks!

    [Reply]

  37. Offshore Lead Generation

    30. Mar, 2011

    Awesome compilations of Horizontal layout. However this type of designs aren’t applicable to all types of websites and much more with search engine optimization…

    [Reply]

  38. 3-60

    23. Apr, 2011

    Great sites. Thanks for the inspiration.

    [Reply]

  39. mosquito nettings

    03. Jun, 2011

    Thanks for share this post! Very nice!

    [Reply]

  40. [...] 35 of the Best Horizontal Website Layouts For Inspiration [...]

  41. Upright Vacuum

    17. Jun, 2011

    The designs are quite simple but with great quality. I hope there are more of these in the future. I am looking forward on seeing more designs to give me ideas on how to create my own.

    [Reply]

  42. london

    28. Aug, 2011

    beautiful graphics, i found you on google

    [Reply]

  43. Friv 4

    10. Nov, 2011

    thanks!
    Content very good

    [Reply]

  44. Friv 10

    10. Nov, 2011

    thanks sharing info

    [Reply]

  45. ipad 2 case

    18. Mar, 2012

    Excellent and helpful post, these layout can be great for ecommerce site.

    [Reply]

Leave a Reply