Single-Page (also known as One-Page or Long-Scrolling) websites have become a staple of modern design. And, when properly implemented, they can form a great combination with WordPress.
Let’s have a look at what a single-page website is and some advantages of using it. Then, we’ll introduce you to some WordPress themes that successfully implement the technique.
What is a Single-Page Website?
Traditionally, a website is comprised of several pages. For example, think of the ubiquitous “About Us” or “Contact Us” pages. While they may follow the same design template and styling as the site’s homepage, they are themselves separate entities. In the days of static HTML sites, that meant they were completely separate files on a server. With the use of content management systems (CMS) such as WordPress, pages are separately stored in a database table. When the user navigates to that specific page, it is generated on-the-fly by the CMS.
A single-page site, however, is exactly what it sounds like. Rather than have completely separate pages, it is designed to display on one long page. As the user scrolls down or uses navigation, new sections of content come into view.
Left on it’s own, some single-page sites could be quite large and slow to load. That’s why you’ll often see a “lazy load” effect on these types of sites. New content sections are dynamically loaded in as the user scrolls or navigates to them. Using this technique, only the content that is being viewed in the user’s browser at that moment is loaded. This is both less taxing on a server and provides a better user experience. This is especially important on mobile devices to limit the use of data bandwidth.
Advantages and Best Practices
A single-page website can have several advantages. For one, there is the convenience of having everything in one place. The absence of having to load each page separately can really keep users engaged with your site. If users are simply scrolling along to access new content, they may be apt to dig a little deeper than they would if multiple clicks were required.
There is also an elegance to many single-page sites. Beautiful scrolling effects and use of animation as content loads in can be captivating to watch.
Depending upon the makeup of your site’s content, there may actually be some SEO advantages with a single page. Google only has one page to index. If that page is packed with good content, you might just get a boost in your page rank.
This leads us to the best practices for a single-page site. We’ve talked a little bit about the load time of the site because it really is important. You’ll want to make sure that the site isn’t so loaded down with giant images and other media that performance suffers. That’s one way to lose any SEO advantages you might have gained.
As mentioned earlier, that’s why you’ll many times see lazy loading implemented into single-page sites. It helps to boost performance and that is something which benefits everyone.
It’s also worth keeping in mind that a single-page setup isn’t necessarily a great idea for very content-heavy sites. Small, brochure-type sites promoting a single product or service are a good example of where single-page works best. If your content needs are quite large, you may want to steer clear of this method.
Single-Page WordPress Themes
Now that we know what a single-page site is and where it’s best used, let’s check out some themes that are making great use of this technique.
Clean and modern, Invisio features smooth scrolling and some lovely content animations. It’s perfect for a small business site. Also included are a copy of Visual Composer, one-click import of sample content and a selection of theme options to help you customize your website.
Layer is a single-page theme that is quite flexible. In fact, there are 15 demo layouts to choose from that cover a wide range of uses. Features include a page builder, sticky menus, parallax scrolling effects, timelines, pricing tables and a copy of Slider Revolution.
Built with restaurants and cafes in mind, Lily brings a unique menu (restaurant menu, that is) to the fold. Clicking on Salads, for example, opens up a nifty animated modal window that contains more details about that selection. The theme includes six different homepage layouts, two navigation styles, interactive timelines, Slider Revolution and Visual Composer.
Amaze is a very elegant WordPress theme that stands out with its use of sticky sidebar navigation. There are six home page layouts available in both light and dark variations (some include top navigation as well). You’ll notice some nice parallax scrolling effects, courtesy of the included DZS Parallaxer plugin. You can also create a portfolio with the inclusion of Cube Portfolio.
25 North is a theme with a very cool and unique use in mind: selling a single property. This could be a great choice for a for sale by owner situation or a real estate agency that wants to showcase a high-end property. The included property details slider lets you combine photos with facts and figures about the property (dimensions, number of bedrooms, etc). 25 North includes Master Slider and can also be configured as a multi-page site.
Created with an event or conference in mind, Summit offers some cool features tailored especially for its subject matter. For example, there’s a tabbed Event Schedule area where you can easily see what’s happening on each day of a multi-day event. Also included are speaker listings, an area for sponsors and a countdown timer.
There are so many interesting uses for single-page sites. Regal is a nice choice for a small bed and breakfast or hotel. There’s a booking inquiry form and an area to showcase specific rooms. Also included is a page builder, the ability to add social media feeds and pricing tables.
Daisy aims to serve as a landing page for a single product or service. The theme sports some terrific animation as content loads in, giving the feel of a high-performance website. Included you’ll find copies of both Visual Composer and Slider Revolution, parallax backgrounds and a theme options panel to allow for customization.
Exline is a more general-purpose theme, meant to fit a wide range of uses. There is lots of room for customization with options for backgrounds, colors and fonts. In fact, there are nine included “color skins” for you to choose from. You’ll also find filterable isotope portfolios, sticky navigation and support for a blog (it is WordPress, after all).
Another great use for a single-page site is a resume/portfolio. Jordan is especially suitable for creative pros as it hosts a filterable portfolio, timeline and a very cool “design process” area. There’s also a testimonial slider, pricing tables and slick animations.
A Single-Page with Many Interpretations
From the outside, you may look at single-page sites as being in a limited niche. But as we’ve seen, there are more unique uses for this type of setup than one might imagine.
As with all websites, content and usability will ultimately dictate whether or not your site is a success. The themes above certainly excel at the usability portion of things. From there, it’s just a matter of creating the sort of content that will make for a compelling website.
Are you looking for an even easier way to make a single-page website? Check out our new website builder, Envato Sites.