10

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 Magazine do this (like this one, with what seems like a hundred sites, the majority of which use it).

As a programmer, this style bugs me (for a number of reasons, mostly technical, not the least of which including maintenance, SEO, loading times, etc.), but more importantly, I'm curious as to why it became popular among designers to begin with?

2
  • 2
    Wow! I haven't seen that yet - but I realllllllllly hate it.
    – Farray
    Jul 11, 2011 at 19:07
  • The effect in that first link is called a parralax. A few sites did it stylishly (e.g. most famously Nike Better World ) leading, inevitably, to a bunch of people saying "I WANT ONE OF THOSE" without thinking about whether it's appropriate in their case. When there's a legitimate case for a fixed top-bottom reading order for a lot of content across a range of themes, and where there are good jump-link navigation aids, it can work. Sep 4, 2012 at 12:51

10 Answers 10

9

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.).

3

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!

2

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.

1

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...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/

2
  • 2
    I would agree more with this if all of them could scroll down, but that is neither their general function nor intent. Several scroll sideways, and many don't show evidence of being scrollable at all and are, in fact, designed to look like multiple pages, throwing your theory out the window.
    – Shauna
    Jul 13, 2011 at 12:23
  • Shauna, while I am familiar with the horizontally scrolling sites, I'm not familiar with the others you are referring to. I can however point you to a half dozen of those I'm talking about off the top of my head. (see edits above) Jul 14, 2011 at 12:53
1

From SEO perspective, the one-page website design is a fad.

It is something that will probably ruin your SEO performance, especially when you work in a highly competitive business background. I know graphic designers rarely take this into consideration, and on the other hand clients do not have enough knowledge on SEO, but if you ask any SEO specialist, they will say the same.

My tip? Ask your SEO specialist to make a keyword research and give you an outline of your website structure.

You can read more on Search Engine Land, these guys know SEO very well ;) https://searchengineland.com/single-page-websites-seo-182506

0

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".

1
  • What baffles me is the number of sites I've seen that do this. Here's one of the Smashing Magazine lists I referred to, I gave up on it about a third of the way down because they were all like that: smashingmagazine.com/2011/04/19/…
    – Shauna
    Jul 11, 2011 at 19:51
0

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.

3
  • The downvote? Yeah, that was fair. Not one of my best answers. I think I was a bit punchy when I wrote that. Jul 14, 2011 at 2:10
  • Shrug I don't have enough rep on this site to downvote, so it wasn't me.
    – Shauna
    Jul 14, 2011 at 14:10
  • I gave it an upvote to cancel it out cos you seem to be coming from a good place ;) Sep 5, 2012 at 3:44
0

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.

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.