The one-page wonder

Simple websites which can get all of the information on one page without compromising on usablity should put all their stuff on one page.

Spreading information across many different pages has become an accepted and expected convention of websites. But I feel it’s often done without proper reason, especially since keeping everything on one page can have some real benefits.

Why a webpage rather than a website?

With one-page websites, since it’s just a page, there isn’t anything to be explored. It simplifies the whole process of finding information, as the user quickly learns (through the lack of navigation) that all the information they want will be on that page.

Searching, therefore, is simpler for both developers and users. Since there is no site, there is no need for a search engine, and the browser’s standard ‘Find…’ feature may be used in confidence that all information is being searched.

This does all rest on a reasonably well structured page, though. In this situation it’s not necessarily a good idea to stick to the standard header-paragraph-subheader-paragraph linear layout. Users will be scrolling down the page and reading it much like a newspaper or magazine—with which they’ll be very familiar—so designing with techniques used for print is welcome. They may even feel more comfortable dealing with information laid out like that.

Case study: Parkside Dental Centre

The entire webpage Take a look at Parkside Dental Centre, a one-page site I recently worked on. It uses the fabulous Blueprint CSS library/application for it’s grid-based glory. It makes print-like one-pagers much easier to make, and much more robust with regards to the code.

All of the information is there, neatly displayed in about five screens worth of scrolling down, and it means in a matter of seconds, by scrolling and scanning, you can find what you want to. Much better, I think, that having to dig through a website to find what you want.

Fred 10th June 2008

Interesting how far we’ve come along since the days of “Never put anything under the fold!”

gm 10th June 2008

Hmmm… interesting case study… I did not like it though. I was all the way down in appointments, and I wanted to know what number to call to make one… and had to hunt upwards for the phone number. Turns out the phone number was all the way up top (so scroll all the way up top scanning for a phone number).

I think the one page thing would work well… If everyone else did it. Since no one else does it, it is unusual… and since it is unusual, people are not used to this and hence it takes longer to find what you want, evenm though if one was used to it, it would actually be quicker.

All in all, a tabbed, “normal” design would be better. I would have known exactly where to look for the phone number (”contact us”) if it had a normal page design.

Too much info for one page, in my opinion. Dividign it into pages has the side effect of organizing infromation, so it is easier to find.

Just my opinion.

Dan W 11th June 2008

This page was linked from http://news.ycombinator.com/item?id=214184 and there is some discussion there. Personally I enjoy one page designs and am currently redesigning my personal site to a single page so I’m very surprised at the amount of negativity. I’m pretty sure people have figured out they can scroll to the page below the fold! Hope you keep experimenting with different designs.

[...] [Dech] addresses the interesting issue of simple websites. I have to say, its a well written piece and worth reading. I personally have a couple sites that could be simplified like this. In fact, HeyGeeks was designed to be a one page wonder. I have wordpress configured to display 100 posts. There are no “next” and “previous” buttons. This is about the now, so there is no need. Search? Ctrl+F and there you are. Everything in the world on one easy to read page. No frills. [...]

Lemon 11th June 2008

I just redesigned one of my sites (www.coconutapp.com) with the same thought in mind. However I kept my navigation and added in a little js for smooth scrolling. I am definitely considering the same for my next simple site.

Niobe 11th June 2008

I think a solution to GMs objection could be a bottom-screen footer that’s stuck despite scrolling, containing the address and contact info and maybe a small horizonal menu with anchor links to the headers in the page.

Justin George 11th June 2008

Are you doing any user studies to back your theory up? I’d use a click tracking tool, there’s a couple open source ones freely available.

I’ve also seen ’scroll distance checkers’ that record how far down the page people are seeing, those might also be useful to provide hard data about whether one page is superior to several.

And, of course, for sites with a conversion rate or action percentage, you can always do good ol’ A/B testing.

RIchard Hollerith 11th June 2008

“I think a solution to GMs objection could be a bottom-screen footer that’s stuck despite scrolling”

Name one successful web property that has a page with an element (footer or whatever) that is stuck despite scrolling.

Anonymous 11th June 2008

Your dentist website would be better with anchor links imo.

Justin George 11th June 2008

“Name one successful web property that has a page with an element (footer or whatever) that is stuck despite scrolling.”

Facebook. Their chat bar is fixed to the bottom of the screen.

RIchard Hollerith 13th June 2008

Thank you, Justin George.

Leave a Reply