Let’s Make a Single Page Web

Constraints in design can never be avoided. Every problem has a context, and every context has its own unique set of constraints. So it is with web development. Early websites were simply static HTML pages that you requested from the server. Each new page you go to is a completley new request with completely new HTML. Sites began implementing layouts on websites that kept consistent headers and footers across all pages. So although users are seeing the page go blank and then reload, sites would still attempt to create a smooth experience thoughout.

Now, in 2012, not much has changed. Sure, we have more friendly routing and much faster page loads, but the experience has remained roughly the same. For every new page a user navigates to, the browser window goes blank and a completely new page is rendered.

With the introduction of AJAX, and its popularization by libraries like jQuery, the web has seen a giant leap in development. Single page applications have been built that are able to recreate both the functionality and the experience of native desktop apps. These applications have consistent navigation, and using AJAX and Javascript the app will render new pages and update data without re-rendering what doesn’t need to be re-rendered. This is the web of the future.

A single page web

The effort towards making single page web applications has been focused on websites that have a lot of interactivity. Specifically, applications that would typically be found on the desktop are being made into single page web applications. Although this is the most logical place to implement these new technologies, it shouldn’t stop there. The entire web deserves this same intuitive experience. Whether its a calendar app or a blog, every website should be a “single page app”.

Re-rendering navigation is not acceptable

When the web was simply a collection of static HTML documents being downloaded by users, and there was no way to display new information without downloading an entirely new page, re-rendering a site’s navigation was completely acceptable. In fact, it was necessary due to the constraints of the web at the time.

Some may argue that there are no reasons to make informational websites like blogs or brochure websites single page. This attitude comes from years of seeing navigation re-render on every website. The typical re-rendering is not actually the most intuitive design for websites, it’s just become the accepted design for websites.

What’s in a website?

Even a website as simple as a blog is an application. It’s something of a micro-application, within a browser, within an operating system; a micro-application designed to allow users to navigate and consume content. As with desktop applications, any links or controls that consistently apply to each page of the website should remain rendered on the screen.

How odd would it be if your browsers menu bar options disappeared and then reappeared each time you switched tabs?

Developers, let’s keep moving in the right direction

Although AJAX and Javascript make it possible to accomplish one page applications, the development process is still not streamlined. It’s more difficult to code and there are SEO concerns when content is rendered using Javascript. What we need to focus on right now is developing technologies that make it easier to make websites this way. Rails 4 Turbolinks is a great step in the right direction. Turbolinks address the problem in a great way:

  • Doesn’t interfere with the standard development patterns
  • Degrades gracefully
  • Doesn’t require extra work from the developer
  • Still allows for crawler access to content without doubling up on work

As popular frameworks and platforms make it easier to use this pattern, we will see an overall improvement in the web experience. I’d like to see WordPress implement something similar using PJAX or something similar.

Find any interesting project people are working on to this end? Add them to the comments.

7 Responses to “Let’s Make a Single Page Web”

  1. Matt

    I don’t necessarily think designers need to start using other design patterns (modals, tabs) just to start making single page sites. The idea is sites would work very similar to how they do now, but they wouldn’t completely refresh and re-render the header/footer.

    • Matt

      I’ve checked out pjax-menu before. I really like what they’re doing, but it only works on links in the navigation, but not on the rest of the page. I’d like to see or make something that uses pjax for all the local links on the page.

      And awesome! I love what you guys did on starccount! I don’t think I considered the fact that the page refreshing completely generally serves as the user feedback that something is loading. I love how you addressed that problem by adding an ajax spinner in the top spinner. I think that could be a pretty standard design pattern right there. Great work.

    • Matt

      You know, I played with your site a bit more, and I still found myself wondering if I hadn’t clicked a link yet because I didn’t see the spinner. I might try playing around with some other indicator that the current content is switching. Maybe something like making the main content’s opacity 50% immediately after clicking a pjax link.

  2. Keith

    I agree, you really want every link to be ajaxy.

    Thanks very much for your kind comments. I notice Twitter do a similar thing on their website too by having a loading spinner on the top bar – seems to work pretty well.

    That’s not a bad shout – you definitely do get cases where the user isn’t sure whether or not they’ve clicked a link.

    Just thinking – what does a browser do to indicate loading? It animates the favicon of the tab that’s loading. Do you think the average user recognises this? If so, great, could use something like https://github.com/tommoor/tinycon to do it. If not, silly idea – something like you suggested would be much better and more obvious.

    • Matt

      Using tinycon to add a spinner is a good idea. For a normal page load, it seems that Chrome adds a spinner in place of a favicon, which you could do with Tinycon, and it also makes the page go completely blank before loading the new one. That’s probably the biggest indicator. I’d want to fool around with different combinations and see what feels best.

Leave a Reply