15 horizontal sites and the case for making them
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.