Question

I am developing a mobile application using Jquery mobile framwork & phonegap. So, I was wondering whether to use different html pages for my application or different to make the transitions smoother and to provide better UI experience.

Answer 1

Keep in mind that if you include your whole application in one html file that your dom size could easily get unreasonably large. To quote the documentation

Usually, it’s a good idea to store your app’s pages in several
single-page templates instead of one large multi-page template. This
minimizes the size of the page’s DOM.

Also the next paragraph may help you.

When using single-page templates, you can prefetch pages into the DOM
so that they’re available instantly when the user visits them. To
prefetch a page, add the data-prefetch attribute to a link that points
to the page. jQuery Mobile then loads the target page in the
background after the primary page has loaded and the pagecreate event
has triggered. For example:

<a href="prefetchThisPage.html" data-prefetch> ... </a>

You can prefetch as many linked pages as you like. Just add data-prefetch to all the links you want to prefetch.