I use the term, single page or one-pager, to describe a website where the entire content is contained in a single page, is navigated by vertically scrolling, and typically employs heavy javascript for various transitions. In contrast the majority of websites on the web have a home page and separated interior pages. I believe the one page design pattern is a recent trend as a result of mobile web development and responsive design. Done well, the one page design pattern can be useful. Done well, page load for the entire site completed in one shot, after all, there’s only one page! However, done poorly, the one page method is down right painful to visitors.

Here are some ‘one pager’ sites that, in my opinion, don’t work so well. My goal here is to provide constructive criticism just as I would in an artistic critique of a traditional work of art.

  • Go Pivotal – Update (4/24/13) – Pivotal has redesigned their website which does not use the single-page design technique anymore.

Let me preface by saying that I’ve never seen a website employ this technique before: a video that plays as the user scrolls by implementing a series of photographs as frames much like old flip-style animated books. Perhaps this was Pivotal’s goal – to do something that hadn’t been done before. After all, Pivotal builds applications. They’re innovators. Hell, I even use their tracking software. However, it doesn’t change the fact that this long scrollable website is unnecessary and, quite frankly, annoying. Between the performance hit (18.5 MB to load the website) and inconsistent timing between mouse scrolls, this technique seems to fall apart. The black and white photographs that make up the flip-style animation are certainly engaging, but I think a better solution is to simply have a large video near the top of the page. To Pivotal’s defense, the mobile version of the same website is elegant. It’s small in size, still has stunning photography, and makes statements fast. Why not just pull this over to the desktop resolution?

  • Tyler Media – A beautifully designed, well crafted, single-page website. The website is aesthetically pleasing but, it’s over sixteen megabytes to load the site. Performance aside, there are user experience problems. As I’m scrolling I feel like I’m getting lost, wondering how long the page is, wondering where I’m supposed to look or click. I feel like It’s unnecessary to force the user through such a long page to make a statement. I say: Say what you need to say, without the fluff.</li>

  • Designed to Move – Another aesthetically beautiful one-page design. It has delightful information graphics and engaging content. Unlike the previous sites, Designed to Move implements fixed navigation, allowing for quick navigation to the various sections on the page. The problem: It just feels too long. I find myself wondering where the end is, where the main statement will be addressed, where I might take some action. As a designer, I might solve these problems through extreme simplification – a large, bold statement at the very top and some sort of call to action. Period. I might then add small graphical icons to offer navigation to the sub-sections should the user want to learn more. Interestingly, Designed to Move does provide a primary statement and some calls to action but my first action is scrolling… not actually clicking.

Here are some examples of sites that, I think, implement the one page design well. Generally, they all provide consistent context within the site and use javascript as an enhancement of the story being told, not as a necessity through which to use the page.

  • Sputnik   Sputnik employs the single page design method successfully. A fixed navigation follows you immediately after you scroll through their opening statement. Rather than having the punchline at the bottom and forcing the user to scroll through, it’s boldly placed at the top. You can then scroll down to find out more about the company which is neatly broken into sections. There is a lot of javascript here, but it’s not overdone and it’s not forced. At three megabytes, while still large, the load time is much less than the sites mentioned above.

  • Lost World Fair: Atlantis   More of a playful experience rather than a content-rich website, this one pager is also done well. The key to this site’s success is the fixed man in the tube, following the user down the page. He follows you. He’s responsible for connecting your scrolling with a persistent focal point, guiding you to tidbits of content and interesting information. Even though this site does not have a fixed navigation, the site still works because I know how deep I appear to be within the design.

  • Avalanche at Tunnel Creek – This website is almost a hybrid of a traditional website and a one pager. It’s job is to tell a story. There are still sections to this website and I’m assuming this decision was made to reduce bandwidth. This is, in my opinion, the best example for a one page website. It breaks the mold. It brings magazine style story telling to a whole new level – by introducing animation and interaction to enhance the story. It’s engaging, it’s enjoyable to read and it feels thoughtful.

Why > How

When analyzing these sites I’m reminded of Frank Chimero’s big ideas blog post where he says “Why is greater than how”. Was a one page design necessary to execute the goals for these websites? Or was a one page design just something to show off technical prowess? What were the reasons, if any, to create a one page website? My point is this: don’t use design patterns because they’re trends; use design patterns because they’re grounded in thoughtful purpose. I say, make your design decisions solve the problems inherent in the task you’re given.