Before starting a series of articles on how to implement one-page sites with JavaScript, it makes sense to explain the essence of the design concept, which has burgeoned in popularity.

Examples on this blog include:

The traditional architecture of a web site is a series of separate pages: an introduction or index page, an “about” page, an order form, etc., divided up into a book-like format (albeit one that may be read in any order). In a site that undergoes continuous growth such as a blog, this model might be extended through pagination. This standard approach has a number of advantages:

  • Dividing site content into clear, logical units makes it easier for users to find the information they are after.
  • Page titles can accurately reflect the particular content of the page, adding SEO value.
  • Assuming they are , each page will load quickly for most users.

Interestingly, the popular design language of the web has recently moved backwards, from a “book” architecture to a “scroll” format. Single page sites are exactly that: a lone document that contains all the information for the site. This page may be effectively infinite in length, continuously updated with older information as the user scrolls. While it encourages creative exploration – there are of lot of clever sites that utilize CSS parallax techniques and/or JavaScript scroll-position detection routines to keep the user engaged – employing a “one page” design is typically restricted to very particular kinds of sites:

  1. The information the site needs to impart is very limited. One-page sites are often promotional, intended to grab the user’s interest rather than conveying complex concepts or large amounts of data.
  2. Information on the site is very frequently updated, with new content added every few minutes. Users will see the most recent information added at the top of the page, and will close the site after scrolling past few screen’s worth of content.

There are a few disadvantages to the one-page format:

  • At the moment, single-page sites are difficult or impossible for casual users to bookmark. Returning to a one-page site means scrolling until you relocate the information you are after.
  • The amount of content in one page sites means that the total file size of the page tends to be very high, making load times long unless the page is very cleverly designed.
  • may be compromised: Google will currently index everything that appears on a webpage at the moment the page loads, but it will not index content that is dynamically updated via JavaScript. The Googlebot doesn’t act like a human being: it doesn’t “scroll” down a page, and won’t see content that is added in response to such actions. In addition, Google will always deliver the user to the top of a page: on a single-page site, this means that the visitor will likely have to scroll to find relevant content after landing. The lower down on the page this information is, the more visitors will abandon the site before reaching their goal.

Single page sites do tend to create higher visitor engagement, as the user doesn’t have to find site navigation or make a decision as to where to go next: they just keep scrolling to find new content. But leading the visitor through that content, designing and displaying the information in a captivating and useful way, is an art in itself.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.