What is Single-Page Design? Single-Page Design is more than meets the eye. Read this page and be amazed

Many Web design apply to Single-Page Website design, just as they apply to more traditional sites—but there are definitely some special considerations, which are discussed in detail here...

This is a single-page Website, a design approach that works very well for sites that would, in conventional terms, comprise three to six pages of closely related content. Single page Websites work will in the following examples:

  • A brochure site for an artist, an author, small business, or a typical restaurant.
  • When there isn't a tremendous amount of content
  • When all the content is closely related
  • A particular design approach simply works best on a single page

A Single page Website is trendy and can be very engaging—especially when combined with smooth Scrolling. While smooth scrolling is very engaging, this page can also be scrolled by using your mouse wheel, the default browser scrollbars, or your keyboard's arrow keys.

It's about forward thinking which is often considerably better than backwards thinking

Luna uses modern CSS such as fixed position navigation, embedded fonts, column layout, rounded corners, CSS gradients, and shadows—but not a single background image is used. This makes it extremely easy for you to maintain and customize your site.

The advanced CSS we use is deployed in ways that enhance modern browsers while assuring an attractive and accessible presentation in older ones. The idea is to start with a solid foundation that is accessible to all browsers and devices and then enhance it for those that support advanced CSS. The result is that your page is accessible to all, attractively designed for all, and absolutely gorgeous for many. Some techniques, such as the embedded fonts used for section headings, work in almost all browsers—even back to Internet Explorer version 5.

h3 class="section-header">Clients that are using Single-Page Design

California Academy of Dog Behavior

Catchers on the Fly Flyball Team

When to use a Single-Page site

There are endless possibilities for unique designs that can only be done on a single page. Certain types of sites lend themselves to a single-page format, such as brochure sites. What are some benefits of a single-page site?

Single-page designs can have certain benefits over a traditional multi-page site. Here are several things for you to consider:

  • Speed: Only one page needs to load
  • Maintenance: Only one page to manage and maintain
  • Search Engines: Only one page to be indexed
  • Uniqueness: Single-page sites will make your viewers take notice
  • Mobile Devices: Single-page sites are well-suited to iPhones and iPads

Some things to keep in mind

When planning your site, it's important to limit the amount of your content because it all needs to load at one time. Four to six separate content areas or "pages" seem to be about the norm for many single-page sites.

The amount of content in each section should be sufficient to fill a maximized browser window running at high resolution. It is good minimize scrolling while viewing individual sections. Don't worry about small screen users having to scroll within sections. Remember, we are not hiding the browser's scroll bars—they are still usable.

Browser Support for the advaced CSS techniques used in Luna

Single-Page works in all browsers.

The chart below lists which browsers support the advanced techniques used in Sing-Page Design.

  Firefox Opera Safari iPhone iPad Chrome IE6 IE7 IE8 IE9
CSS Round Corners Y Y Y Y Y Y N N N Y
CSS Embed Fonts Y Y Y Y Y Y Y Y Y Y
CSS Gradients Y Y Y Y Y Y Y Y Y Y
CSS Shadows Y Y Y Y Y Y N N N Y
CSS Columns Y Y Y Y Y Y N N Y Y