How to create Single page website

Is a One-Page Site Right for Your Project?

Single page websites seem to be particularly popular among designers. But that doesn’t mean those are the only sites they’re appropriate for. Other places we’ve seen them include app websites and websites for particular products (like books). So how do you decide if a one-page site will meet your needs?

Try asking yourself these questions:

• Do I have a lot of content?
  Content-rich sites are probably not the best fit for a single-page site. If you have more than a dozen pages worth of information, you’re probably better off with a more traditional, multi-page structure.
• Am I trying to sell a specific product?
  A single page website can be a great solution for selling one product, like a book, website theme, or similar.
• Are you comfortable with Ajax and JavaScript?
  A very large number of single-page sites use Ajax and JS for navigation and other elements. It’s a very valuable way of creating an uncluttered site that still contains a fair amount of content.
• Is my content all related?
  Trying to put a bunch of unrelated content on a single page is likely just going to confuse your visitor. If you have a bunch of unrelated pages, they’re probably best left as separate pages

1. Minimal Content
When designing a single-page website, limiting the amount of content is important. First of all, rememeber that all your content needs to load at one time (unless you’re using Ajax, but even then there’s sometimes a fair amount of content to load at once). Also, if you want to use transitions between your content areas, they often work better when there isn’t a huge amount of content to cover between sections that aren’t bordering each other.

Five or six separate content areas seem to be about the norm on many single-page sites. Some sites limit it to only two or three, even. It’s rare to see a site with more than ten different content areas on a single page.

2. Consider Horizontal Scrolling

Not all horizontally-scrolling websites are single page sites. But a fair number of them are, and it’s an interesting way to break out of the standard single-page box.

Horizontal scrolling can also work better if you have more content. Combining a horizontal layout with JavaScript can also facilitate larger amounts of content without overwhelming the visitor.

3. Consider Screen Size

With a single-page site, you may want to consider the visible area your visitors likely see within their browser. Crafting your pages to fit comfortably within that space can minimize scrolling while viewing individual sections. This can be particularly important if the transitions between areas are important to you. Once a visitor starts scrolling, they may just keep scrolling rather than using your navigation links.

4. Clearly Set Apart Each Section

Most visitors to your site are going to be used to loading a new page for new content. If you squish all the content on your single-page site too close together, they may not see the transitions from one section the next.

There are a variety of ways to differentiate between sections. Using a header for each content area is one way. Some sites use an actual line to separate different areas. And still other sites use ample amounts of white space to set areas apart from one another.

5. Take Advantage of a Bigger Background

Big backgrounds are popular in all kinds of website design, but single page designs open up new possibilities for large backgrounds. Many designers take advantage of large background images as a way to set apart their content areas while maintaining a unified look to the entire site.

For example, some sites might have a scene in the background that starts with a sky at the top with one content area, then further down they have a ground-level scene with another content area, and at the bottom they have an underwater scene with yet another content area. The possibilities with this kind of site are almost endless.

6. Use JavaScript and Ajax to Organize and Display Content

If you have a bit more content to display but still want to stick to a single page design, consider using JS and Ajax to hide some content while others is displayed.

Slideshows are the most popular techniques for incorporating JS, but modal windows and other methods are also us

In Review…

One-page websites can be a fun and different way to design a site, whether it’s your own personal site or for a client. Consider ways to differentiate your one-page site that might not work as well on a multi-page site. Things like big background images or certain Ajax techniques work really well on one-page sites and have a bigger impact than they do on more complex sites.

Here’s a quick run-down of the best-practices mentioned above:

1. Minimal content. There’s only room for so much content on a single page.
2. Consider horizontal scrolling. While not all horizontal-scrolling websites are single pages, it’s a format that lends itself well to the one-page format.
3. Consider screen size. Creating content areas that fit within a visitor’s screen without requiring scrolling is common in single-page sites.
4. Clearly set apart each section. You don’t have the convention of separate pages for different content, so you need to figure out another way to delineate content areas.
5. Take advantage of bigger backgrounds. Single page sites are often longer or larger than other pages, giving more opportunities for creative use of big backgrounds.
6. Use JavaScript and Ajax. Organizing a lot of content on a single page can be enhanced if you use Ajax or JS techniques like modal windows, tooltips and sliders.

View More Example Visit the website Click here