Single-Page Sites

It's About Forward Thinking!

Our single-page sites use modern CSS, including fixed position navigation, embedded fonts, column layout, rounded corners, CSS gradients, and shadows – and amazingly, not a single background image is used. This makes it extremely easy for our clients to maintain and customize their sites, after we build them!

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.

When To Use

Single page web sites are particularly popular among advanced CSS authors. 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 for designers, novelists, or restaurants. On the other hand, you wouldn't want to squeeze the Mercedes Benz site into a single page. So 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. You may want to consider the visible area your visitors likely see within their browser. Crafting your sections to fit comfortably within that space can minimize scrolling while viewing individual sections.

Keep in mind that the smooth scroll is designed to scroll the page up so that the target heading is at the top of the window, which means that your last section should have sufficient content to allow it to scroll all the way to the top. If that's not possible, all you need to do is to assign the last section a large amount of padding on the bottom. 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, as are mouse wheels and arrow keys.

Browser Support

Our single-page sites work in all browsers. The advanced CSS 3 we use is deployed in ways that enhance modern browsers while assuring an attractive and accessible presentation in older ones. The chart below lists the browser support for the advanced techniques used in our single-page sites.