Single or Multi page web application

Question

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.

Answer 1

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.

Answer 2

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">
    <ul>
        <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>
     </ul>
</nav>

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

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

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!

Answer 3

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