Single page websites have been popping up everywhere on the web these days. Web designers are showing us that navigating a website doesn’t have to be clumsy and confusing. Remember how traditional websites usually involved a lot of hunting and clicking the right links. With single page websites we simply scroll and let the page glide fluidly right before our eyes.
Last year, there gloomy predictions were made about the death of websites as users are increasingly using mobile apps instead. And yet beautifully designed websites continue to sprout on the Web, proof that there’s always a good reason to visit the .com version for a more thorough experience. Fortunately, thanks to single page web design, thorough no longer means cluttered and heavy.
Actually one of our most successful projects this year was a single page website we did for Mains Lib, a French helmet storage startup. It’s simple, yet effective, with a great design to back it up. So far it’s been nominated to a French Design Index award and was site of the day on Design Licks.
What Makes Single Page Websites Work?
The magic behind the animation of single page websites – which is what differentiates great ones from boring infinite scrolling blog style websites – is jQuery. This JavaScript library is one of the main ways of creating effects such as triggered animations at certain points on the page, sideways scrolling and parallax effects. Although a lot can be done now using CSS3 and developers could code these jQuery effects from scratch, using jQuery is more efficient, ensures functions are optimized and speeds up development as well as loading time, improving performance. These are all things that help bring the design to live and turn single page websites into something exciting that will leave you wanting more.
On that note, here are other reasons that make single page websites so popular nowadays:
We like scrolling!
Through being glued to our smart phones and other touchscreen devices, scrolling has become second nature to us. Single page design naturally takes advantage of this fact.
Our generation has short attention span
Let’s be honest, patience isn’t our generations’ biggest virtue; we want information here and now, no matter where we are or what we are doing. If we can’t find it right way or it’s buried inside links in pages within pages, we bounce!
- With single page websites, info is presented in a minimal & straightforward manner—everything is right there.
- A good example is Every Last Drop which sends its message of water conservation through a single page design, lovely animation, and minimal text so that people will care to stick around.
We ♥ Parallax Scrolling
Sure, parallax scrolling—where the background image moves slower than the foreground, has been around for ages (think Super Mario Bros.), but it’s only recently that it was put to brilliant use on website, thanks to advances in HTML5 and CSS3.
- Users are wowed by the simple yet magical 3D effect. Of course, we shouldn’t let parallax scrolling upstage the website’s message. When used appropriately it becomes an effective hook for a website’s visitors.
- The website for Life of Pi beautifully uses parallax scrolling to draw the visitors to the wonderful behind-the-scenes CGI effects used in the movie. So effective was their approach that it’s almost like watching an entirely new movie.
We like a good story
One-page websites are usually story-driven, even e-commerce ones. This is a good thing because users don’t appreciate websites that bluntly advertise a product or do a sales pitch. Instead, users want to see for themselves what the story/product is all about.
- A good, compelling story will encourage users to find out more by scrolling down again and again, eventually reaching the a call to action button and hopefully becoming a customer.
- Single page websites are share-worthy
- Flat Vs Realism tells the “classic” tale of two conflicting design philosophies—flat and realism. It’s a rather simplistically told story, but made enjoyable because of the parallax scrolling.
We like to be part of the story
Single page websites immerse the user in its story. We’re required to participate if we want to move that story along. All we have to do is scroll down and the story unfolds (or simply scroll up if we want to go back a bit). Ultimately we are in control.
- Traditional websites can be interactive too in the sense that users have to click this and that link to make things happen, but one-page websites maintain the interactivity throughout the entire page in one fluid graceful linear way.
- Scrolling down the Jess and Russ website makes us feel like a privileged friend who gets to know the love story of a lovely couple about to get married. It’s a wedding invitation too!
Need More Single Page Web Design Inspiration?
- http://www.awwwards.com/websites/single-page/
- http://www.webdesignerdepot.com/2013/10/30-one-page-sites-youll-wish-you-had-built/
- http://www.smashingmagazine.com/2012/11/05/navigation-patterns-in-single-page-websites/
And of course the king of all single page websites:
- https://www.apple.com/mac-pro/
If you’d like to design a single page website for your business or yourself but don’t know where to start, give us shout! We’ll be happy to help!