The Science Behind a Single Page Website

Oct 4 2010 by Alexander Dawson | 28 Comments

The Science Behind a Single Page Website

We have all come across them whilst browsing the web, and many of the examples that exist are quite awe-inspiring, the single page website is a paradigm of the modern web in which everything that needs saying can be placed in a single document.

Whilst the single page layout option can lead to overwhelmingly large documents of endless scrolling, a series of clever mechanisms using modern standards and techniques such as CSS3 and Ajax have burst onto the scenes, offering a method of simply giving information as they’re required.

This article is on single page websites that use HTML, CSS and JavaScript; we are skipping the discussion of Flash-only websites, which can technically be classified as a single page website as well.

Once Is Enough for Me

It’s understandable that not every type of website will be well suited to having "one page to rule them all," however, a common trend that’s seen especially in portfolio websites shows that certain sites can benefit from a simple, yet still multi-faceted, single page.

The idea that a website can be created with just one page seems crazy, but with our industry shifting towards advocating simplicity for ease of use, single page web designs have become a viable and effective option.

Once Is Enough for MeCSS Zen Garden is a classic example of a single page with multiple layers of interesting bits.

Trends and Tribulations

While traditional designs with multiple pages will always have its place, there are a number of advantages that give the single page website some potential uses for your own projects.

The ability to construct a site that is entirely self-contained gets a bit of getting used to, and involves a lot more thought and planning. Some questions you have to answer are:

  • Will a single page meet the project’s requirements or will multiple pages be better?
  • How do you organize the content?
  • How does the navigation work?
  • What content do I need and what can I leave out?

Benefits of Single Page Websites

Single page designs have the following advantages over multi-page sites:

  • No page refresh when navigating the site (content is either in the page or loaded using Ajax)
  • User experience can be improved because navigating through content is quicker and more responsive than having to go to a new web page
  • Easier maintenance because you only have to maintain one web page
  • You can design for quality over quantity — instead of having to design multiple page layouts for different types of site content, you can focus on just one solid and high-quality design
  • Your Google PageRank applies to the whole site
  • Higher core content density for search engine spiders
  • Distinction from most other websites; single page websites are less common, and can thus leave an impression on your site visitors (and that’s why they are popular on portfolio sites)
  • Easy solution for simple "brochure" sites that serve one product (i.e. iPhone app) or one purpose (i.e. a designer’s work)
  • Preferred solution for web apps designed for the Mobile Web

http://www.squarefour.net/Once the page has loaded, there’s nothing else to download.

Disadvantages of Single Page Websites

Single page designs have the following disadvantages against multi-page sites:

  • Potentially large file size of the page
  • A requirement for scripting or CSS3 support if you want to stand out
  • Tabbing through elements can become trickier (for accessibility) because there might be plenty of content on one page (though this wouldn’t be a big problem for well-structured markup that use headings and other best practices)
  • Producing the design is more time-intensive because it involves a lot more thought and creativity to be able to fit everything in one page and to devise a great interaction design
  • The page can take much longer to load if you have a lot of content

http://2advanced.com/File size is an important issue to contend with, especially where Flash is concerned.

The truth is that whenever you implement a specific design pattern, chances are that you will not be able to please everyone. While single page sites can be made to be 100% accessible and highly usable, there will be situations where a single page site is not a good option for you. For example, an e-commerce site such as Amazon.com wouldn’t be able to pull off a single page web design successfully because of its vast amount of content — and that’s fine because it’s better when these types of sites are multiple pages.

Production Theory

Before we look at some lovely single page designs, it’s worth taking a few moments to explain the various mechanisms used to produce such a site. Your emphasis should be on keeping file sizes as slim as possible and about a thoughtful way of presenting and structuring your web page. Think about user flow and interaction design — how does a user move from section to section of the page?

Here are some techniques that are used in single page websites. It’s important to note that they are not mutually exclusive, so you might find yourself using them in combination.

Manual Scrolling

The first mechanism implemented by conventional single page designs is to display all of the content on the page, structured logically and laid-out in sections.

The way people navigate through the content is simply by using the native scrollbars in their web browser. While this method is simple to implement because it’s just a regular web page with no special interaction, it’s also probably the most boring of the options.

http://www.authenticstyle.co.uk/Sites that have no need for fancy effects could easily produce a simple and beautiful single page layout.

CSS3 Interaction

The next mechanism for navigating through content on a single page website worth mentioning is CSS3. With the latest version of the CSS specification, the ability to go beyond existing CSS2 selectors allow for a more unique single page experience. Most notably, you can do interesting, interactive things that deal with content by using CSS transition properties for animation and messing about with the :target and :checked pseudo-classes.

For example, the ability to use the :target pseudo-class (combined with anchor links) gives you the option to make the targeted section a different color or to give it a different background-image.

http://downloads.sixrevisions.com/css-light-box/source.html#contentUsing CSS3 pseudo selectors, we could form a powerful cross browser "paneling" system.

JavaScript

Finally, we have good old JavaScript, which has been serving us a widespread range of functionality since the web’s early days. With the popularity of web development JS frameworks like jQuery, the ability to swap out existing on-page content has never been easier, and with the rise in Ajax, calling content as it’s required has an even greater potential for eliminating the need for page refreshes. Take note, though, that there are accessibility and SEO concerns with content that is remotely loaded.

You can also use animated scrolling to sections of the web page using JavaScript — a step up from manual scrolling and using anchor links. For example, check out the jQuery ScrollTo plugin. You can see smooth scrolling in action via Laco Janic’s portfolio (click on the primary navigation links such as "identity & print" or "about").

While it’s not an option for the poor souls with no scripting knowledge, using JavaScript is certainly the most flexible and robust method out of all three.

http://jquery.com/jQuery amongst other scripting frameworks offer easy to implement content swapping.

A Showcase of Single Page Web Designs

As we have now finished examining the general ways that designers and developers go about creating a single page site, it’s worth looking at some great single page web designs for inspiration. Perhaps these designs will give you some ideas and inspiration!

Camera+

Camera+

Webdots

Webdots

Pear Hosting

Pear Hosting

Playmation

Playmation

Enrichmint

Enrichmint

Basil Gloo

Basil Gloo

Fran-boot

Fran-boot

Milk ‘n Honey

Milk 'n Honey

Launch List

Launch List

Eric Johansson

Eric Johansson

Hello Kavita

Hello Kavita

Made By Sofa

Made By Sofa

Eclectique Designs

Eclectique Designs

The Dollar Dreadful

The Dollar Dreadful

Elementic Interactions

Elementic Interactions

Richard Turnbull Design

Richard Turnbull Design

James Lai Creative

James Lai Creative

Tim Van Damme

Tim Van Damme

10 20 Concepts

10 20 Concepts

Fish Marketing

Fish Marketing

Banjax

Banjax

Silverback

Silverback

Zee the Designer

Zee the Designer

Tyler Termini

Tyler Termini

Aaron Kato

Aaron Kato

Joni Korpi

Joni Korpi

Molly Yim

Molly Yim

Lataka

Lataka

Jason Reed

Jason Reed

Josh Minnich

Josh Minnich

Is Single Page Websites for You?

The great thing about the web is that it’s constantly evolving, and by principle, the way we build our designs will mould itself to these shifts in our audience’s tastes and needs.

The need for lightweight, compact, self-contained websites and web applications due to the Mobile Web will only increase the deployment of single page websites. All single page layouts can be made to look totally unique. While not to everyone’s taste, they are well worth a consideration in your web design projects.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

28 Comments

Tim

October 4th, 2010

What, if any, are the search ranking effects of not breaking content out across several pages?

Tyler Collins

October 4th, 2010

I currently have a single page portfolio (It was a 30 minute thrown together design) but I do prefer to have everything on one page.

You have mentioned a few things in this article which I am going to take on board when my new site gets released this month.

Sarah Jones

October 4th, 2010

Single page website is cute, easy to access, fast, user friendly and cheap to design and maintain.

Torstein

October 4th, 2010

I see that you include sites with AJAX content in your definition of a single page website. Does a blog with posts loading through AJAX also qualify as a single page website?

Bfred.it

October 4th, 2010

I’ve been reading this website for a while although I rarely comment.
I love the content, keep up the good work! =D

Bradley

October 4th, 2010

I just finished a single page website for a local remodeling company. The site is short on content, displays some photos of their projects, and tells a little bit about the company.

The new site loads faster than their old multi-page site, and contains more meaningful content.

I think in the right circumstance, single page sites are the way to go. The biggest drawback is that the clients isn’t really able to modify the content since their is no CMS.

Bryan McAnulty

October 4th, 2010

Nice post. We are working on a couple single page site designs right now ourselves. :)

Marc

October 4th, 2010

Thanks Alexander – I really enjoyed that

Rob Hope

October 4th, 2010

Great read, check out http://onepagelove.com for more one pagers…

Aaron Kato

October 4th, 2010

Hello! Thank you for this awesome article and also for including my site as an inspiring example :) I’m really pleased now, highly appreciate it. :) I have enjoyed all the other sites, it is a brilliant article.

Jon Gamble

October 4th, 2010

Great article. I, too, have created a single page site for my own business. I use a jquery script to power it and keep it all to one page. http://www.JonGambleLLC.com.

I welcome all comments on the design/functionality of it as well.

Alexander Dawson

October 4th, 2010

Thanks for the comments everyone, I’m glad there’s people who love single page sites as much as I do (it really gives us the opportunity to be creative yet careful in equal measure to balance size VS effects). Though of course not all sites are suitable for it!

@Tim: Basically, all of your PageRank is condensed upon a single page so that will be the main and only result upon those terms. A great thing if you’re trying to encourage browsing (outside of the content they wanted) and you want every backlink to count for one page (boosting the PR).

@Torstein: If there’s only one physical page… then yes!

@Bradley: There’s definitely a place in the market for a one-page-site CMS if someone took the time to put it together. It may even reduce the complexity of the process as there’s less things to account for. Beginners + multiple pages = 404′s, navigation issues and more!

SoHo

October 4th, 2010

Nice showcase of one page websites on this website -> http://onepagelove.com/

Luke

October 4th, 2010

Interesting read! We used to have a single paged website as our own!

Michael Gaigg

October 4th, 2010

Here is what I believe is another creative example for a single page website: http://www.michaelgaigg.com

I’ve heard many people bashing on tag clouds – I actually used a tag cloud instead of “I’m am specialized in …bla…” to show off what I’m doing.

Cheers, Mike

Michael Tuck

October 4th, 2010

Excellent as always, Alex. Your examples are particularly good; you have a knack for finding lesser-known yet powerful examples to illustrate your points.

Greg

October 4th, 2010

Some practices for single-page sites with Ajax for content provide for ‘traditional’ browsing when Javascript is absent (The content is indeed loaded in a new page instead).

If you are fetching content with Ajax and don’t have this ‘fallback’, the search engine crawlers will only see your default content as your one page, which is no doubt going to be very harmful to your ranking.

And if you DO have this ‘fallback’ (as you should!), as far as the bots are concerned you no longer have a single-page design, so the ranking is not concentrated on the one page as the article seems to claim.

There are ways around this, of course… like in the absence of Javascript, you could provide all the content “stacked” on top of one another on the one page, in which case the points in the article could still hold true. But if you’re talking Ajax, you definitely have to be aware of how the content is going to look to a non-Javascript-enabled ‘reader’… aka… the crawlers! and then decide on your strategy from there.

Sarah Jones

October 5th, 2010

I am planning to launch my own single page site. Its going to be my own design too.

Locoluis

October 5th, 2010

To each their own.

I prefer my content in many small pages. I only load and visit what I want, not the whole site at once. It’s also easier to link to specific bits of content.

Some webmasters get irate at the latter idea, yelling “Bandwidth thieves!” and only allowing links to the homepage, even if navigating within the site to find what the visitors want is a nightmare.

Peter J

October 5th, 2010

Great choice in the way of designs. Just have to make sure you have the right content when you go single page.

fiona

October 5th, 2010

i think that single page is good just for “landing page”

Marco

October 6th, 2010

As a web minimalist fan, I do like single page website. I really think that with AJAX you can do it quite easily, efficiently and effective. And fast! Everything is there or conveniently loaded. As a side note: some website’s navigation are truly a nightmare and you never find what you want. Single page website might be solution!

Paul

October 6th, 2010

I am personally a big fan of the single page design but they are very limiting for SEO purposes as it would be difficult to optimise for many different keywords. However this isn’t a problem for many sites and there are some amazing examples out there with one of my favourites being http://www.johnharfield.com/

azul

October 9th, 2010

one page website design really make user more easy to navigate our website content

SagaPixel

April 11th, 2011

http://www.sagapixel.com is also a nice little website

Michelle Gugin

August 28th, 2011

The one page website is what we are all about! The goal of our sites is to give quick hits of information, the way the user wants it delivered. No searching or clicking around.

These sites are sophisticated and much more elaborate. Our simple one page designs allow us to keep the cost low for your clients. An important factor for those businesses struggling to make ends meet. Nice article!

Extore

September 19th, 2011

Not suggested for search engine optimization purpose…

Aaron

October 9th, 2012

the ‘Eric Johansson’ is good!!!

Leave a Comment

Subscribe to the comments on this article.