Creative Techniques for Single-Page Websites

Jake Rocheleau

11 years ago

Over the past few years there has been an emergence of new custom trends in website design. A very popular idea is placing all your major content onto a single page and using dynamic scrolling animations to locate bits of content. These single-page layouts are popular among landing pages and mobile apps which only need to display a small section of related information.

In this article I would like to go over some interesting techniques you’ll find in single page websites. Hopefully these ideas may provide inspiration for younger designers who are looking to move into this area. Generally the frontend will require some type of scripting effects through a library such as jQuery. Overall the techniques can be practiced and learned very quickly, and it’s a wonderful style for basic webpages.

Parallax Sliding Effects

The concept of parallax scrolling is still fairly new to designers, possibly because of the complexity to get this working. I have seen a dozen great examples but Pixel Stadium really stands out from the crowd. Their website is easy to navigate and the textures are simply mindblowing.

I could not commend their designers enough for building such a scalable webpage. As you scroll down the page a top navigation bar will appear locked onto the window. This allows users to quickly skip up or down the page into various sections. Also the layout is completely mobile responsive and will adjust based on the width of your browser window! It goes to show that single-page layouts can be pretty-looking and also flexible.

Mobile App Landing Pages

Mobile smartphones have created a niche in web design for advertising their applications. Android and iOS app developers know that launching a brand is crucial to their marketing effort. This is why smaller mobile app websites often contain information located on a single page. It takes less effort and also looks a whole lot better.

Infomatic App uses a fairly minimalist website without a whole lot of details. But you can tell this website was not created solely for data presentation. Much of the design is centered around screenshots of the application, along with the App Store badge button. You want to promote sales with your website and single-page layouts are the best style for getting this accomplished.

Hidden Navigation Bars

In order to save space on the screen you will find layouts which attach scrolling bars onto your window only after panning down a distance. You may think of these extra navbars as hidden from the rest of the content, as they only appear when the top navigation isn’t visible anymore. The website for Radiologie provides an excellent demonstration of this technique.

It is always nice to match your current navigation bar into the theme of your website. But since it will stay fixed on the page, you could theoretically use any number of design styles. Make sure your navigation is catchy but not annoying or impossible to use. I think a better example of design blending can be found on Rule of Three.

Their website is focused on a copywriters guild of professionals which uses dark textures for professional tones. The color scheme also matches the page design, and you can see it all along the top navigation links. As you scroll down the page you’ll notice their fixed top bar appends the colored texture into the background. This can be an excellent solution to get your navigation jumping off the page.

Dynamic Transitions

The process for creating your own dynamic page animations can be rigorous. I do not recommend this path for new developers who are just getting started with JavaScript, but it can be a great learning experience. To see an example check out the FK-Agency website.

Their website is designed to scale both vertically and horizontally. Notice that you cannot page up/down in the layout and must slide using the navigation links. Also true in some pages like the services and portfolio listing where you must scroll horizontally across the screen. For some visitors this technique can be very confusing, so be cautious and use common sense when building your own UX transitions.

Horizontal Sliding Panels

This technique is very similar to the dynamic transitions style, but horizontal panels have been covered by dozens of open source plugins. Just searching through Google should yield very positive results. However the execution isn’t always the problem, as much as the design aesthetics and user interface.

Numidia is one example I really enjoy which doesn’t look exactly how you would expect. The top right navigation buttons actually behave as horizontal page sliders. jQuery has allowed even legacy browsers to adapt and support these codes. So it is not difficult at all to run your website layout using horizontal panes in a single-page style design.

Inspiration Gallery

Along with my points above I want to present more helpful resources for designers. This showcase gallery is a collection of some other brilliant single page websites worthy of attention. Check out these different layouts and you will notice an assortment of different user interface techniques. Also be sure to let us know your thoughts in the post discussion area.