Navigation

15 horizontal sites and the case for making them

By Kendra Gaines | Inspiration | Sep 4, 2013

The excitement of scrolling has really evolved since we could use colored scrollbars in Internet Explorer years ago.

Today, we are finding new ways to reinvent the process of scrolling with gestures, parallax scrolling features and more. We’re creating excitement and telling stories. We’re creating great user experiences and making content functional. Problem is, most of these sites use vertical scrolling.

And how can you blame them? It’s normal. It’s what’s expected. And it’s often the easiest thing to implement.

But where’s the love for horizontal scrolling sites? Not many people create them, mainly because of the difficulties in development and the idea that horizontal websites are less functional. The argument against horizontal scrolling is along the lines of: “Why reinvent the wheel?” But, should we be giving horizontal scrolling a chance?

 

When and why?

Horizontal scrolling should be given a chance for two main reasons: (1) The infatuation we currently have with responsive design and (2) Horizontal sites have a place and purpose, much like scrolling sites do.

To quickly go over the reason why it works responsively, let’s think about how we use our phones and tables when pull up a site on them. Most times, we end up flipping the phone so that it shows our content in landscape orientation. Meaning we flip our phones to see the most in width that we can. Why not utilize this by creating sites that can be viewed and navigated this way? Think about how we look at videos online and how we develop and design sites along the width anyway. Why are we shunning horizontal scrolling?

Now, for my second point, I can show you much better than I can tell you. So, let’s jump right in and see how these next few sites do a great job of using horizontal scrolling to be functional and interesting.

 

Reverse Buro 

This portfolio site uses a combo of both vertical and horizontal scrolling to show off their work. It’s becoming more and more popular to feature pieces of work on their own screens with no distractions because it just makes sense. This navigational method is not only intuitive but creates a wonderful feel of innovation for this designer.

Reverse Büro copy

 

Gavin Castleton

Nowadays, it’s imperative that musical artists find a way to make themselves standout. In such an inundated industry, artists have to create the complete package that’s going to get them attention, from the music to the web design. Gavin has created a wonderful website that’s interesting and perfect for housing all his information.

Gavin Castleton copy

 

Bartle Bogle Hegarty

BBH is obviously one of the more well known creative agencies in the world. When you’ve reached the success they have, they start to create different branches and offices in different areas of the world. Instead of creating different sites for each location, they’ve got a way for you to check out what each one is doing across the globe. I like the horizontal navigation because it’s like you’re traveling to and from each different location. 

Bartle Bogle Hegarty copy

 

Jens Lehmann

Jens is obviously a guy that holds many titles and wears many hats. He doesn’t want to mash them all together, so instead he’s created a home on the web that allows him to individually showcase the things he does. The horizontal navigation of this site makes transformation from each title easy to understand and see.

Offizielle Homepage von Jens Lehmann | Official website of Jens Lehmann

 

 

James Joyce

Unlike the Reverse Buro site, we don’t get to see each piece of work individually per screen. However, I think it works for James Joyce and his designs because they’re all so similar. We get a chance to really see and enjoy his style.

James Joyce

 

Here Design

Much like the above web site, we are getting a horizontal site to show off the work. This one creates a great example how to keep your horizontal justification but also add in the other information necessary in this site. 

here design

 

C. L. Holloway

This is one of the most obvious uses of horizontal scrolling I’ve seen. It’s rather clever as this person is an artist and painter who has probably been in various museum exhibits. Why not make that online? Doing this actually gives one a better idea of what Holloway does and how he wants to be seen. I really like this site.

Artist, Painter, Corporate Art, African, Portraits : CL Holloway

 

WWF

This site was created last year to raise awareness for the WWF’s Earth Hour. Instead of just making a site with some graphics and some content, they decided to create a story. This story line scrolls through horizontally and is very reminiscent of turning the pages in a book. Meanwhile, this is a very amusing and interactive site.

WWF

 

Blocklevel

No, this site isn’t explicitly scrolling from left to right. However, there is a strip that allows us to see content from left to right. It’s much like a hyperactive slider, that just makes sense, especially on one of beloved single page sites.

Blocklevel | Digitaal Productiebureau. Wij maken digitale campagnes voor het web.

 

Hot Dot

Hot Dot is a web production company that claims it is extremely innovative. With such bold claims, you’d better hope they have a website that backs that up. Fortunately, they do. Now, we’re accustomed to the parallax scrolling sites that scroll down, but this time we get a parallax site that scrolls left to right. It’s as exciting, if not moreso, than its predecessor and makes for a very innovative look.

Hot Dot - web production

 

Rezo Zero Interactive

A huge part of web design and development is the user experience. It’s about creating an interesting place on the web that’s easy and fun for the visitor to utilize. Rezo Zero is one of those sites that has great effects, pays attention to details, has wonderful layout and so much more. Not to mention they do a great job of creating page navigation that moves linearly. 

Interactive design studio | Lyon | REZO ZERO

 

Quest for the Perfect Pop

If you love black and white photography and story lines in web design, this is the site for you.  The Quest for the Perfect Pop is dedicated largely to the sound your beer makes when you pop it open. This site is an ode to that, creating a very interesting story line that will be available soon.

Quest for the Perfect Pop

 

Nerval

Much like the site above, you get the opportunity to scroll through this work as if you are walking in a museum. Without the obvious graphics, this is a very clean and classy way to create this feel. You have absolutely nothing in your way to distract your view from the work besides the necessary. This is a great way to show how minimalism blends in with this technique.

Nerval / Pierre Georges, interaction designer.

 

Myspace

Some of us are old enough to remember “Myspace Tom” and the arguments we had with our friends about not having them in our top 8 or 16. Myspace has decided to make a comeback, but has decided to trash the pages with glitter and teddy bears falling from it and instead, we have a super clean and responsive design that scrolls from left to right. While other social networks are going up and down, Myspace is doing something different by creating a horizontal navigation.

Myspace is a place where people come to connect, discover, and share.

 

Giellesse

Giellesse is a furniture design company with some super modern designs. Aside from their stunning collection of pieces, they’ve created a really beautiful web design that allows you to scroll from page to page horizontally. This feels a lot like swiping a page on a phone and would obviously translate well on mobile devices. This blends the old vertical page with a new navigational method.

Giellesse | Home

 

Conclusion

Obviously, we are taught to keep things simple, but we are also told to create solutions to problems. As you can see, there is obviously a place on the web for horizontal sites. Whether you want to show something off or create a neat and fresh concept, moving from right to left, rather than up to down can be beneficial. How will you utilize this technique? 

 

Have you built a horizontal scrolling site? Do you prefer horizontal scrolling, vertical, or none at all? Let us know in the comments.

Share this post
Comments (no login required)
  • musto 83

    The main problem I have with sideways scrolling is PC mice don’t scroll sideways meaning PC users need to using the scroll bar on the browser which is very annoying. I understand what you mean with the flipping your phone/tablet comment but when the site is responsive you won’t do that.

    • http://digitalxbridge.com/ Jay Melone

      People still have PCs with these kinds of mice? 8P

    • JM

      Web designers could also place arrows or other forms of interactive scrolling features to draw people away form the scroll bar.

  • http://www.inverselogix.com/ Hemanth Malli

    Pretty good website designs !! I liked ‘hotdot’ its amazing design. I basically like vertical scrolling but these are also good !!
    http://www.inverselogix.com

  • http://digitalxbridge.com/ Jay Melone

    People seem to be enamored by our horizontal scroll and parallax – http://digitalxbridge.com

    • junibaba

      Wow. Really nice website. Grats and all the best! :)

      • http://digitalxbridge.com/ Jay Melone

        Thanks! 8)

  • http://www.karrcreative.com/ Karr Creative

    Really nice post!!

  • http://oddentitymedia.com/ Jon Armstrong

    Still not going the horizontal route. Ive mocked up a few for clients and they immediately say no every time. I have a few examples though at http://oddentitymedia.com

  • Bobak Nasirpour

    thanks kendra, was inspiring. after reading this post i realy wanna a post about horizontal web designing techniques, like simple css tricks, jquery plugins and etc. tnx again

  • http://www.web123partners.com.au/ Bianca Board

    Not a massive fan of horizontal sites, but some of these designs may convince me to look into them. Nice selection.

  • Biathanatos

    May also want to check out http://stephensaucier.com/portfolio/ for a good horizontal design. Nicely responsive for large & small screens.

  • James

    Excellent blog here! Also your website loads up fast! What web host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol

  • orange county web designer

    These sites are awesome. I haven’t seen some of these before. Thanks for sharing.

  • J1F

    Reverse Büro is made with Ascensor.js (http://kirkas.ch/ascensor/#/Home) ;)

  • pixxelfactory

    Recently, we built a website that uses horizontal parallax scrolling while scrolling up and down with the mouse.
    Since we did not find any plugin or js-library that accomplishes that task while being easy to setup, we developed our own jquery plugin and released it under the mit-license:
    http://www.pixxelfactory.net/jInvertScroll/

    I hope some of you can make use of it =)

  • http://responsivewpthemes.org/ Akhtar @rewpthemes

    Great vertical scrolling sites I like “blocklevel”

  • Tobias Haugen

    A few of these sites pulls it off, but most of them are nightmares when it comes to navigating, overview, and intuition, both on desktop and mobile. Regarding your statement on how we use our smartphones, I also think it’s much more common to browse the web in portrait mode on phones and tablets. Personally, I only switch to landscape mode for watching videos.

    The main reason we stack our websites in a vertical way is because that is how the building blocks of the web works. This is how it is intended and this is how it’s built from the foundation. For example, we don’t build cars that drive sideways, do we? Working in a horizontal way will force you to fight against the native rules of web development and leave you with a lot of headaches, I promise you.

    Conclusion: If you really want to create things in a horizontal way, maybe you should leave the web alone and attend print design instead?

  • Facebook Employee

    First image I see, Myspace…….. OHGAWD >.>

  • Archiblog

    Thanks, Kendra! I found this really useful with some interesting lessons to be learned…

  • David Beer

    I very often don’t have my tabs open in full screen as I’ll have two things open at once, so I get annoyed when I have to widen the window (e.g. to turn off a video that’s autoplayed on the side) because horizontal scrolling isn’t enabled. mice are available that scroll side ways, but even if you don’t have one, using the arrow keys is easier than having to widen, then narrow, the window