The benefits of single page design
Obviously, single page designs are not ideal for every project. But there are a host of reasons to use them if they’re a possible fit.They’re intuitive to use
By default, all a user needs to know to navigate a single page site is how to scroll. You might include arrows or other navigational clues, but with rare exception, simply scrolling will bring your visitors from one section to the next.![green 13](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/green.jpg)
It can be faster and easier to maintain
While this one is not a given, a well-coded single page site is probably going to be faster to code than a multi-page site. The design process can sometimes take less time, though that depends on how complex the single page is going to be.![andrea](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/andrea.jpg)
You’re forced to simplify
This one builds off the previous point. When you only have a single page to work with, you have to simplify things to their most essential components. No more pages and pages of useless marketing propaganda. You have to get to the point right away.![varsity](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/varsity.jpg)
Better SEO potential
Quality inbound links are a big part of how well a website performs in search engines. While search engines aren't necessarily the largest traffic source for a lot of sites, they're still generally important. By only having one page, you only have one page being linked to. That can increase the importance of the site as far as search engines go.Storytelling can increase action
Single page sites often use a storytelling angle that multi-page sites aren’t as good at. This can increase conversions and inspire visitors to take action.![wild](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/wild.jpg)
Easier to organize
There are no more endless lists of pages and sub-pages to organize. No more wondering if this page or that page should be a parent or a child. No more huge navigation menus and sub-menus. It’s all on one page. And whether you decide to include navigational links, or simply let users scroll, is up to you and whether you think it will add to the user experience or not. That’s just not an option when a site has multiple pages.![ssdd](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/ssdd.jpg)
Reduced bandwidth
While this isn’t as much of an issue on the hosting end anymore, consider how many users are accessing your site using mobile devices these days. Decreasing the amount of bandwidth your site takes is appreciated by users with limited data plans.Eliminate mobile sites
Responsive design is, of course, not limited to single page sites. But the more complex a site is, the more difficult it is to make it work well on a smaller screen, even with a responsive design. A single-page site is, by necessity, not complex. Making the design responsive is generally easier. Simplified navigation and similar changes also make a design that works well on small screens easier.![bear on unicycle](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/bearonunicycle.jpg)
To parallax or not to parallax?
Depending on your point of view, parallax scrolling is either the best thing to ever happen to the internet, or an overused, gimmicky scourge upon our browsers. But regardless of where you stand, it doesn’t look like it's going to disappear any time soon. Personally, I feel like there’s a time and a place for parallax scrolling. Some one page sites can really benefit from the effect, while others come across as gimmicky, or worse: hard to use. The key is to decide if the parallax scroll effect you want to use is something that will actually enhance the usability of the site, or if you only want to use it because it’ll look cool. Another thing to consider if you decide you do want to use parallax scrolling is whether to use JavaScript or a plain CSS technique for doing so. See the resources section for more about both options.When to use a single page site, and when not to
While there are a lot of benefits to single page sites, they’re not a perfect, one-size-fits-all solution. There are plenty of times when you shouldn’t use a one page design, while there are plenty of other times where a single page site makes a lot more sense than a multi-page one. If you’re setting up a site that would only have a handful of pages anyway, then a single page site might be perfect. Condensing everything onto one page can give the overall site a more modern look, and if it’s light on content anyway, then a single page site can make it look like it has more substance. Another common example of the one-page site is the pre-launch website. These are, more often than not, a single page, often with a form for a newsletter sign-up. In most cases, the information provided to the public during the pre-launch can easily be organized on a single page, so it makes sense to consider this style first when designing these pages.![clientsy launch page](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/clientsy.jpg)
![franz sans ecommerce site](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/franzsans.jpg)
![simply gum ecommerce site](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/simplygum.jpg)
Hybrid sites
While there are a ton of great single page sites out there, there are also a lot of hybrid type sites. They give the impression of a single page, but by using ajax, modal windows, and the like, they actually contain multiple pages of content. The Dang & Blast site is a great example of this.![dang and blast hybrid site](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/dangblast.jpg)
Best practices for single page sites
Most of the principles of good design are still applicable in single page sites, as they are with any good website design. But there are some additional things you need to keep in mind, some of which have already been touched on above.Keep it simple
Trying to make a design that’s too complex for the content you’re trying to present isn’t doing you or your users any favors. Instead, simplify both your design and your content as much as possible, while still presenting what you need.![peter toth](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/peter.jpg)
Navigation links are still helpful
Just because users can scroll to navigate your website, doesn’t mean that's the most user-friendly way to do so. This is especially true if you have a long page with many sections. Unless there’s a very good reason not to include them, adding navigation links to particular sections makes your site more user-friendly.![fraud force navigation](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/fraudforce.jpg)
Divide up your content
A single page doesn’t mean everything has to be one long section. In fact, it shouldn’t be. Divide your content into logical chunks and sections so that users can better find what they’re looking for.![liftoff sections](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/liftoff.jpg)
Do something with all that background
Single page sites tend to have large backgrounds. Granted, sometimes those backgrounds are left plain or with a repeating pattern; but other one page sites take advantage of all that space to do something creative. This can also help to divide up your content, as already mentioned. Your background doesn’t have to be one single image. It can be a series of images, if that fits your content better.![new york background](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/11/newyork.jpg)
Resources for your single page sites
There are hundreds of resources, including templates, for single page sites out there; but here we’ll focus on the ones that stand out. Pure CSS Parallax Scrolling: This article from Keith Clark explains how to create a parallax scrolling technique using only CSS. This is a great option if you don’t want to use JavaScript (or don’t really know how). Skrollr: "Parallax scrolling for the rest of us". It’s a stand-alone library that works with mobile and desktop. There's no jQuery required, just plain old JavaScript. Stellar.js: Stellar.js is another easy to use parallax scrolling library. It offers a lot of configuration options and iOS support. One Page Website Wireframes: This set of wireframes for single page designs can be a great starting point if you're unsure of how to structure your site. They’re free to download. There’s a second set you can download here. One Page Love: One Page Love is the premier one page website gallery, with more than 5000 example sites, and adding more all the time. They also feature tons of templates and other resources. Start Bootstrap: Start Bootstrap has a large selection of free one-page Bootstrap themes. There are themes for agencies, freelancers, portfolios, landing pages, and more. One Page Love Templates: In addition to their extensive gallery, One Page Love also offers both free and premium templates. One Page Mania: One Page Mania offers up a gallery of both unique sites and templates you can download or purchase.Conclusion
Single page designs can be an excellent option for a lot of different kinds of websites. While they're not the be-all and end-all of small site design, they are worth considering on many projects. Consider the reasons for using a single page, and then consider the reasons not to, and decide from there.Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…