Is it better UX wise, to build a web application with traditional multi-page transitions or to have a single page application where the other components of the page use AJAX and jQuery to load content without visible page loads?

I'm not talking about single/multi-page forms. It is the whole web application that I'm referring to here.

  • There's no right answer to this question. One is not inherently better than the other. It all depends on the context of your particular project.
    – DA01
    Commented Apr 19, 2013 at 16:27

3 Answers 3


It all depends on what your web application is supposed to do and how much of your site is changing on every page.

  • if there's a small section of your site that's supposed to change, AJAX is your best option
  • if a large piece of your site is changing (for example, only the navigation and footer are the same on all of your pages), then you should probably go for multiple pages.

NOTE: even if you choose AJAX, I think I'd be best if you have a separate URL for each of your pages (for example http://example.com/index#home and http://example.com/index#browse) so the user can refresh the page or get back to the page by its URL.

  • 2
    Not breaking the back behaviour of the browser is a big plus Commented Apr 19, 2013 at 15:31
  • 5
    +1 for mentioning unique URLs in ajax implementation.
    – rk.
    Commented Apr 19, 2013 at 15:38
  • Agree with answer. Modern technologies (like Angular >2) are introducing lots of enhancements that blur these lines, like progressive loading of the page, HTTP/2, smaller js to download, and much more. But this doesn't fundamentally change this answer (yet)
    – cmonkey
    Commented Mar 17, 2017 at 16:18

I say single page if built properly and for a mobile device that way the user doesn't have to navigate and load each page on a device with probably slower and limited bandwidth.

There are user research studies that show that mobile-users understand that they will have to scroll more or click more to get to the content since they are on a mobile device.

Then you can choose to keep the single page layout for the desktop experience or choose to do a multi-page layout.

If you are doing a single-page layout, I recommend making the sections of the page navigable with anchors.

so the navigation will have links such as

<nav role="navigation">
        <li><a href="#about">About</a></li>
        <li><a href="#content1">Content 1</a></li>
        <li><a href="#content2">Content 2</a></li>
        <li><a href="#content3">Content 3</a></li>

Then have the markup that makes up the content look like:

<section id="about">
    <a name="about"></a>
    About content goes here
<section id="content1">
    <a name="content1"></a>
    Content 1 content goes here
<section id="content2">
    <a name="content2"></a>
    Content2 content goes here
<section id="content3">
    <a name="content3"></a>
    Content 3 content goes here

I would also recommend giving the navigation fixed positioning ( in CSS ) so that as the user scroll down to these pages or clicks the links in the navigation and the browsers goes to these sections of the page, that the navigation is always on top of the viewport. Yes, this gives less viewing area for the content, which may be a problem on mobile devices, but it allows the user to navigate the site without having to scroll up all the time to go to the navigation.

Hope I helped some!


If "single page" app is built properly, you can't see a difference except for faster "page loads".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.