Menu

The Science Behind a Single Page Website

Advertisement

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:

Benefits of Single Page Websites

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

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:

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.

This was published on Oct 4, 2010

28 Comments

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

Tyler Collins Oct 04 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 Oct 04 2010

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

Torstein Oct 04 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 Oct 04 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 Oct 04 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 Oct 04 2010

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

Thanks Alexander – I really enjoyed that

Rob Hope Oct 04 2010

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

Aaron Kato Oct 04 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 Oct 04 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 Oct 04 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!

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

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

Michael Gaigg Oct 04 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 Oct 04 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.

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 Oct 05 2010

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

Locoluis Oct 05 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 Oct 05 2010

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

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

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!

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/

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

SagaPixel Apr 11 2011

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

Michelle Gugin Aug 28 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!

Not suggested for search engine optimization purpose…

the ‘Eric Johansson’ is good!!!

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners