My thoughts on Side Scrolling Design

**update: Want to know how to create a side-scrolling navigation using jQuery? thebeebs has done a post over on msdn doing just that. Check it out here.**

At the New Adventures conference a few weeks ago, I picked up a few choice nuggets of advice around web design. Mark Boulton‘s two concepts of ‘Content out not canvas in’ and ‘Forget the fold’ left me thinking about new ways to design pages. One of the ideas I had, inspired by the panorama style of the Windows Phone 7, was to have a look at horizontal scrolling.

From the early days of the web, pages were designed to be read from top to bottom. Websites that extend to the right of your screen are often seen as poorly designed, as they don’t fit within the canvas. This was far more important when screen resolution was fairly consistent across all monitors. However, with the wide range of monitors available now, with resolution anywhere from 1026 x 600 to about 10k x 10k, there’s only so much you can do to cater to screen size, which is wear the ‘content out not canvas in’ concept stems from.

While we’ll never see side-scrolling design take off for New York Times, there are a number of great sites out there that, together with a bit of jQuery, implement side-scrolling to great effect. While most of them are fairly design focussed, there’s a few more mainstream examples that shows that it’s not only design folks who are thinking outside the box…

Here are a few examples of some great side-scrolling websites…

A Design Film Festival

A very nice grid style layout that is simple, relying on typography and videos to be of interest. I love the use of static divs to keep the important information in front of you. The use of the scrollbar, as well as jQuery powered buttons mean that the user doesn’t have to go clicking around the page to get anywhere, which is sometimes a problem in side-scrolling websites.

Vanity Claire

Vanity Claire acts as a portfolio of sorts for herself. As a designer/art director, it’s a nice thing to standout from the crowd a little. The use of side scrolling here is more to do with navigation rather than a horizontally laid-out site. To go left and right is taken care of via the menu buttons.

Wall Swaps

Wall Swaps, by Midlands based Erskine Design, is a rather interesting site. However, it isn’t the most friendly UX design I’ve seen on a site… This is mostly down to the fact that instructions are required for navigation. Once those are figured out, it’s an interesting concept, and one that definitely shows that you aren’t restricted to the size of the screen viewing the site.

Sursly

Tyler Finck’s site is pretty. The use of jQuery side-scrolling is nice, and quite similar to Claire Baxter’s Vanity Claire. However, it’s the transitions between pages that I am quite impressed with. It creates a narrative that is often missing in sites, especially portfolio sites.

Dinner by Heston

Finally, the most commercial of all of these sites is for Heston Blumenthal’s new London restaurant, Dinner. Laid out like a newspaper, the site uses side scrolling to mixed effect. The transitions can be a bit dodgy when the vertical length of the page is vastly different.

Interested in giving side-scrolling design a go? Jon Hicks has put together a really nice side-scrolling theme called Shelf if you happen to use WordPress. Don’t use WordPress? Then check out this great post and get your hands dirty with some jQuery.

Do you like side-scrolling websites?