: What's up with the one-page website design fad? I've seen an influx of websites that put all of their content on one page, ala this site. Even the sites on some of the lists I see in Smashing

@Angie364

I think you pretty much answered your question in the title - that is, it's a fad.

Just like when Javascript (and then AJAX) appeared years ago and people were doing all sorts of fancy things with it, better support for Jquery and CSS 2/3 and better rendering speed in browsers has spurred a whole new round of experimentation with new ways of laying out sites that may not have been so practical in the past due to certain older browsers.

But just like with CSS, Javascript and AJAX, the fad will mature and mellow, and become more honed, pleasant and useful over time. Your first example is plain headache-inducing with its crazy disjointed scrolling (if you are, say, at the start and you press "Gallery"). In my humble opinion it's gone too far, and it's not a smooth enough experience to justify parting with the normal. This does not mean that all sites using similar techniques will be bad.

It's important that designers experiment with new ways of doing things with new technologies. I wouldn't for a moment suggest that this should never have been attempted. But it is what it is - experimental.

Vote Up Vote Down

@Chiappetta793

I think one of the best ideas behind a one-page site is that there's more of a narrative aspect to it. The best example I can think of is this page: An engagement/wedding invitation site. This is an incredible site, and it works for a lot of reasons, one being that everything flows so nicely together. It wouldn't have the same impact spread out over a set of pages.

This demo that was originally made to show off IE9 is all about storytelling. Almost like a picture book, but with scrolling instead of turning pages. And because of that it's really seamless and cool. Not really practical for making a business site, but it highlights one reason why the one-page vibe is useful.

It also works with smaller pages with not a lot of content. When I got married I had all of our info on a one page site because there just wasn't enough content to warrant going from page to page. It was easier to build and maintain a one page site, and load time was not really a concern.

When it comes to business, I think it's a tougher case. I thought a memorable example was when Google launched its Nexus phone - they did it on a one page site. Since they've launched their tablet and announced their Q it's not like that anymore so I can't link, but it was really neat to see everything in one place. You reduce clicks and create a more immersive experience.

I think you'll be seeing plenty examples of people doing it just to flex their coding muscle or to try to capitalize on a trend. But that happens all the time in the design world. Keep it on the table when you consider your site's purpose and use it when appropriate!

Vote Up Vote Down

@Carla748

One problem is that it could be popular with the clients! These sites hark back to the days of flash microsites for a newly released product, parallax seems to be doing this job at the moment. For a product microsite I think they are fine, for a site that actually has content they are definitely not suitable. I think another thing is that designers like to show they are up to date and 'on trend', having a website in a popular new fad technique could look beneficial. All of the above covering the internet in similar sites.

Vote Up Vote Down

@Cugini998

Two words: User Experience.

Basic portfolio sites shouldn't require a user to click to several pages to see what they have to offer if the content is simple and straight forward.

Or more specifically, of the call to action is singular. When the goal of the site is: "hire me", the site can be counterproductive when it's sitemap is needlessly complex.

EDIT: some examples below...
joelglovier.com/ pixelightcreative.com/ www.tinybigstudio.com/ www.charleselena.com.au/ joshhemsley.com/ www.digitallabs.tv/

Vote Up Vote Down

@Cofer715

I actually think the first item (the drift bar) you linked has a cool factor: it looks good in motion.

It made no sense to me until I actually clicked one of the menu links, and now I see that the animation was the single driving force for the entire idea. Its sort of the old-school 3-plane-camera effect like an old Popeye or Disney cartoon.

I think the scrollability on that page is either a mistake or a feature they could not get rid of.

Vote Up Vote Down

@RJPawlick971

There are two separate trends involved.

The first is the trend to have a simple site. If it's a brochure site, then it likely doesn't need four separate pages. One scrolling page is easier to use, navigate, and maintain. A lot of iPhone app sites use this model. As do a lot of small businesses. A lot of sites can benefit from this.

The other trend is Flash developers finally discovering HTML, jQuery and AJAX and still thinking inside the old Flash model of 'one file = one site'. This is different than the first trend in that this is a large site with lots of content compressed into one page of data/interaction. As you state, this method has all sorts of drawbacks, though they are surmountable with the right code (making sure URLs change/are bookmarkable, Google can navigate the content, load times are managed via AJAX, etc.).

Vote Up Vote Down

@Dunderdale640

There is an upside to this (only one I can think of!), which is that if you want to search using Ctrl+F, all the content is on one page so you can search the whole website at once (assuming the content is searchable).

I think it partly stems from of the concept of "Don't make the user ask for more content — just give it to them". Like Google, Twitter, etc. automatically giving more results the further down you scroll.

It's worth watching Aza Raskin's GoogleTech talk from 2008, "Don't make me click".

The whole talk is very interesting, but the related bit here starts at 29 mins. Here he's hacked up Firefox so that you get all your browser tabs onto one continuous vertically scrolling page.

I wonder if this was the precursor to what you are seeing now.

Vote Up Vote Down

@Michele215

I don't think it is anything more than someone using the latest eye-catching trick to get people to read a website.

Take, for example, the Nike site in @Shauna 's linked article. Honestly, ow much innovation is there left in running-shoe design and in the advertising of those same running shoes? That content could have just as easily been placed in a brochure or in Flash if they want the parallax. Instead they can add a nifty parallax effect as a result of the new navigation scheme without the burden of Flash.

I would even go so far as to guess there is an HTML5/CSS tutorial on the Smashing Magazine website that shows how to do this that spawned the sites shown.

Vote Up Vote Down

@Fox8063795

It looks like it's an attempt to get everything "above the fold" - the precious, precious area where the average short-attention-span viewer stays. Various useability studies have shown this so folks try to put the "important" stuff there. It looks like this designer felt like "everything is that important".

Vote Up Vote Down