Pinterest Stumbleupon Whatsapp
Ads by Google

One thing I love about the Internet is how it perennially exists in a state of evolution, adopting new ideas and discarding ones which have ceased to work.

Take Flash, for example. From the mid-90s to the mid-2000s, it was the dominant tool used to add interactivity and panache to websites. Countless security vulnerabilities Browser Plugins - One Of The Biggest Security Problems On The Web Today [Opinion] Browser Plugins - One Of The Biggest Security Problems On The Web Today [Opinion] Web browsers have become much more secure and hardened against attack over the years. The big browser security problem these days is browser plugins. I don’t mean the extensions that you install in your browser... Read More and the mass adoption of touch-screen mobile devices later, Flash has faded into irrelevance, declining both on the desktop and being a non-player in the mobile field Adobe Stops Development Of Flash Plugin For Mobile [News] Adobe Stops Development Of Flash Plugin For Mobile [News] In a surprising move (or not so surprising), Adobe is discontinuing its development of Flash plugin for mobile browsers. According to Adobe’s official announcement, they will now focus their efforts on HTML5 instead, as it... Read More .

Another concept which is being heavily challenged by the rise of the touch-screen device is traditional menu and multiple-page based website design. Given that a significant amount of web browsing is done on screens of ever shrinking sizes, this doesn’t really work as well as it used to.

Enter The Single Page Layout

The single page layout is one which eschews having multiple pages, each encapsulating a piece of text or some media. Instead, we use a single continuous page which contains absolutely everything.

This design paradigm has found countless fans within the web developer community, and has found itself used in a variety of settings, including marketing pages and personal portfolios Making Your Own Website: Your Career Will Thank You Later Making Your Own Website: Your Career Will Thank You Later A personal website is probably one of the biggest aspects of your online presence. Sure other areas such as social networks and blogs are important, but your website is like a home base – a... Read More . This adulation has had the effect of spawning countless Javascript libraries, which make it easy to create single page websites (of which my favorite is fullPage.js). But why? What makes this paradigm work? Here are three reasons why.

You Can Create A Narrative

Don’t be confused. Stories are everything. Take, for example, Apple’s official website for the iPhone 5s. This uses the single page paradigm to its fullest, and shows how you can create a captivating story with using this design paradigm.

Ads by Google

singlepage-iphone5s

When we first browse to the iPhone 5s’s official site, we are first told that the iPhone 5s is ‘Forward Thinking’. As we scroll down, we are told that Apple’s latest Instagram device has been meticulously considered and precision crafted. As we scroll down further, more information about the design and development of the phone is unveiled, painting a picture of vigilant craftsmanship and quality. Eventually the page reaches its climax, and we see its call to action, where we are told how we can buy this miracle device. Would we be able to create the same flowing, linear narrative if we were using separate, individual web pages? Perhaps not.

singlepage-timandruss

Perhaps my favorite example of how the single page layout can be used to tell tales is seen on jessandruss.us. This site was created to invite their friends and family to their wedding, and uses parallax scrolling and all kinds of javascript trickery to tell their story of how they met and fell in love. It’s ridiculously charming, and you totally should have a look.

It Will Make Your Copy Better (And Your Readers Will Love It)

I did some web design consultancy recently. The customer I was working with wanted a website being created for their small business. He had emailed me a 365mb ZIP file which contained a massive cache of photos and copy. I’m not just talking about information that was immediately pertinent to the business, but a biography about each individual staff member. Company news. Just… Fluff.

singlepage-writing

My immediate reaction was ‘his customers don’t care about this’! I was also concerned about how it would effect the layout and flow of his webpage, which was using a one page design. After a bit of negotiation, he acquiesced and let me take a sharp knife to his copy where I took great pleasure in exorcising all extraneous blubber.

The end result was that his website only offered information that the customer would find useful, and nothing else. Choosing a single page design forced us to write copy that was incredibly concise and as a result, phenomenally readable.

It Works Well On Mobile Devices

Confession time: I have fat fingers.

Seriously, I do. At times, they look more like Vienna sausages than they do actual human appendages. As a result, browsing the Internet from the modest screen of a mobile device often sends me into fits of tumultuous rage, as I frequently click links I didn’t intend to by accident.

singlepage-idevice

This rage is compounded when I come across most website navigation bars which simply don’t work on mobile devices. Some simply aren’t optimized for smaller screens. Perhaps the worst navigation offender is where menus exist buried within menus, and can only be reached by hovering with your mouse on an area of the page. As you can imagine, this doesn’t work on touch-screen devices.

Simply put, the old paradigms of website navigation no longer work as well as they used to. The beauty of single page web design is that it reduces navigation to one of two directions – up or down. On most mobile devices, this can be expressed by a single push of your finger in either direction, resulting in navigation that is incredibly intuitive.

Conclusion

I’m quite fond of single page websites. As a natural storyteller, I love how they make it easy to construct engaging narratives which immediately grab the attention of the reader. If you’re looking for inspiration, check out One Page Love, which is a comprehensive compendium of websites using this captivating paradigm.

Will your next website be a single page website?

Photo Credit : Code (Nigel Pepper)

  1. Steve G
    April 1, 2014 at 6:32 pm

    The Jess and Russ timeline is a great page showing off how simplistic a site can be but also quite fun and entertaining to read. Hat off to that site!

    • Matthew H
      April 9, 2014 at 9:05 am

      Absolutely! Thanks for the comment Steve!

  2. Ed
    March 31, 2014 at 6:09 pm

    Yes that Jess and Russ page is great!

    I've noticed this style showing up more and more and originally thought it was just laziness out of not structuring a full site, but now I see the appeal in terms of design and content presentation.

    I currently have a one page, personal landing page, that is technically one index.html file.

    The site is still structured with a left side menu list, but clicking on each menu item brings forward a modal window that displays content written into the html of that single file. This content is "hidden" with CSS3 and HTML 5, but only brought forward when the appropriate menu is clicked on. Technically one file, but structured differently than what this article is describing.

    It is hosted on my google drive at eaponte.com. Anything beyond that one page and those "hidden" modal windows, opens up content written in Google Docs.

    I'm not a web designer by trade, so if you have a look, be gentle with the comments :)

    • Matthew H
      March 31, 2014 at 10:04 pm

      I think it looks good. You should be proud, man. :)

  3. Matthew H
    March 31, 2014 at 4:36 pm

    Agreed. It's also not mobile-friendly.

    Cheers!

  4. Matthew
    March 31, 2014 at 4:15 pm

    A single "long scrolling page" allows you to read and scroll at your own pace, without the need for "page turns". Maybe better with a TOC and some anchors though!

    And yes, as far as FLASH goes, always reckoned it's for games and puke ads rather than content - for another, it's not search engine friendly.

  5. Sunsetsword
    March 31, 2014 at 2:16 pm

    You know, I've been seeing more and more of this kind of layout without really thinking about it -- thanks for bringing it to my active attention!

    I'd agree that such designs support a naturally elegant flow (when done well), but I really do think there are some places where content is king; if I'm reading a site on biographies of interesting people, for example, long "fluff"-filled pages, clearly divided, is exactly what I'm looking for!

    • Matthew H
      March 31, 2014 at 3:10 pm

      No worries! Glad you liked it!

  6. SA
    March 31, 2014 at 12:35 pm

    The Jess and Russ page is awesome...it highlights the benefits of a single page site perfectly!!

    • Matthew H
      March 31, 2014 at 3:09 pm

      Agreed! I loved how they created a narrative, and used JS parallax effects to bring it all together and make it look amazing. :)

Leave a Reply

Your email address will not be published. Required fields are marked *