demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Exploring The One-Page Site Concept

design / sites

Estimated reading time: 2 minutes, 54 seconds

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

PaznowThe 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. This design is perhaps best currently typified by Pintrest, although there are many variations and ascendants.

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 CSS3 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 . 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.