Getting it Right: Single Page Website Design

Single page websites have been around for a long time, but over the last few years there’s a resurgence of interest for these one-page beauties. A single page website is just what you think it is—the whole website is contained within a single HTML page. Visitors interact with it by scrolling or clicking on links that jump you to a different part of the page.

There are a number of reasons why a single page website intrigues designers, developers and content managers:

Project Spotlight: Gallagher Sales Assocaites Website

1. They’re faster to create and easier to maintain – there’s only one HTML page to worry about.
2. They have great usability on mobile – no need to fumble with a hamburger nav, just keep scrolling.
3. There’s less content to write and fewer pages to write for.
4. You get an overall higher Google page rank because all of your content is on one page rather than split amongst several pages.
5. The site will have a higher content density for search indexing.

However, single page websites have their challenges too. There are several things you need to be conscious of and plan for with a single page site that may not be a concern for many multi-page sites:

1. A potentially large file size. Imagery, multiple sections of content, animation effects, styling all contribute to page size. A large file size could cause slow load times and weaken usability.
2. Google search ranking. With a single page site, there’s only one page that gets indexed by Google.   
3. Accessibility issues. You’ll need to make sure tabbing through the site is possible.

When Should I Consider a Single Page Site?

Single page websites are best for smaller organizations, personal and portfolio sites, landing pages, or single-product sites. They’re poorly suited for ecommerce or larger organizations.

To determine whether this type of website is right for you, think about the overall goals for the site and consider how your audience may react to a single page site. Some questions to ask during this process include:

1. What is my core messaging?
2. How much information do I need to provide to persuade visitors to take the action I want them to take?
3. How mobile savvy is my audience?
4. How much research would a prospective customer like to do prior to taking action?

Design Best Practices

Develop the Site’s Hierarchy

Just as you would with a multi-page website, define the information architecture. How many sections will it be? What information are your trying to convey?  Then, break the site up into manageable sections that are organized by topic.

Create the Site’s Narrative

Organize the content areas in a way that persuades the visitor to take action. What do you want them to do? How do you want them to perceive you? With a single page site, you have the opportunity to create a narrative starting from the top of the page down to the bottom.

Design for each section

Overall, you’ll want a cohesive design for the whole site. However, with a single page site you have the opportunity to be more creative and to customize each area to best showcase its content. Define each area with the styles, overlays and visual effects that best suit the content and the impact you’re trying to make.

Examples of Parallax scrolling (left) and Sticky Navigation (right).

Employ Scrolling Effects

Single page sites can get a little long, so to maintain interest and delight visitors, there are a number of visual effects you can employ when scrolling down the page. Parallax scrolling – where background and foreground elements move at different rates; lazy loading – where elements appear or “float” in as you scroll; and timed animations can enhance the visual design and user experience.

Include a “Sticky” Navigation Bar

Including a navigation bar that remains “stuck” to the top of the browser window offers an alternative way for people to access sections of the site. Navigation links become shortcuts that jump to each section. Having a sticky navigation bar also keeps the user from becoming disoriented or losing their place.

Conclusion

Not all web content is suited for a single page website, but when done well you can create an engaging, powerful narrative that both informs and delights visitors.