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.

A single-page website can be used for:

  • Personal websites
  • Portfolios
  • Resume pages
  • One-time events
  • Landing pages
  • Brochure websites
  • Single-product websites

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