Ever since stumbling across The Horizontal Way, we’ve always been really keen to try to create a horizontally-scrolling website. There’s something about the look of such a site that really turns web design on its head (well, on its side, I guess), and it can lend itself particularly well to a comfortable way to consume the information because of the landscape orientation of most computer screens (especially the widescreen 16:9 laptop screens that are so ubiquitous these days).
When Romeo Salon & Spa approached us to do a high-impact “brochure” site, we thought this would be the perfect opportunity to wrestle with some of the challenges that are inherent when you shift navigational paradigms:
- ensuring that the user realizes that off-screen content can be accessed by scrolling horizontally rather than vertically?
- rewiring the middle mousewheel to horizontal rather than vertical scrolling
- finding a way to provide the conventional, ubiquitous nav bar (even though all “pages” are actually all on a single page) that is still search-engine friendly and is not dependent on JavaScript in order to function correctly (ie: degrades nicely)
- providing horizontal flexibility in terms of page “length”, based on amount of content
- use semantic and standards-compliant markup as much as possible.
Well, we succeeded in 4 out of 5 of these points. On the last one we had to make a few compromises for the sake of project timing (and our own sanity).
