What is Luna? Luna is more than meets the eye. Read this page and be amazed

Many Web design best practices apply to single-page site design, just as they apply to more traditional sites—but there are definitely some special considerations, which are discussed in detail here...

Luna is a single-page Web site, 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 sites are becoming quite popular among Web designers—for their own sites and for client sites, as well. A brochure site for an artist, an author, or a typical restaurant, would work very well. On the other hand, the Harvard University or Library of Congress sites would not be good candidates. Single-page sites can be a good solution if there isn’t a tremendous amount of content, if all the content is closely related, or in cases where a particular design approach simply works best on a single page. In any case, single-page sites are cropping up all over the place. They are trendy and they can be very engaging—especially when combined with PVII smooth page scrolling and some cutting edge CSS, as this page is. 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.

Advanced techniques you'll learn

The Luna user guide will teach you how to use these CSS 2 and CSS 3 techniques:

  • Font Embedding
  • Rounded Corners
  • Box Shadows
  • Linear Gradients
  • CSS Columns

When to use a single-page site

Single page Web sites are particularly popular among advanced CSS authors—especially for their own sites . 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.

CSS 3 Browser Support for the advaced CSS techniques used in Luna

Luna works 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 which browsers support the advanced techniques used in Luna.

  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