Existe dos plantillas básicas para el diseño de aplicaciones con jQueryMobile, una página html con varios <div> con el rol data-role=”page” (multipágina) o varias  páginas html con un sólo <div> con el rol data-rol=”page” plantilla (multi html). Con estás dos plantillas se pueden hacer mezclas de forma que ni toda la aplicación este en una sola página html o que cada página html sólo contenga una pagina jQueryMobile.

Plantilla multipágina

<!DOCTYPE html>
<html>
    <head>
        <title>Titulo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="pagina1">
            <div data-role="header">
                <h1>Titulo pagina 1</h1>
            </div><!-- /header -->
             
            <div data-role="content">
                <p>Contenido página 1</p>     
            </div><!-- /content -->
             
            <div data-role="footer">
                <h4>Pie de página 1</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
        <div data-role="page" id="pagina2">
            <div data-role="header">
                <h1>Titulo página 2</h1>
            </div><!-- /header -->
             
            <div data-role="content">
                <p>Contenido página 2</p>     
            </div><!-- /content -->
             
            <div data-role="footer">
                <h4>Pie de página 2</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
    </body>
</html>

Esta plantilla tiene la ventaja de que las transiciones entre páginas funcionan correctamente ya que todo el código está cargado en el navegador, pero la desventaja es que la carga inicial es mas lenta ya que hay que cargar el archivo completo antes de poder visualizarlo. No debemos de olvidar que estas páginas están pensadas para dispositivos móviles con recursos limitados, la página html final es modificada por jQueryMobile para añadir su propio CSS, lo que hace que su tamaño se incremente hasta incluso 8 veces el tamaño original del código html. La página original, después de ser procesada por jQueryMobile, se carga en el DOM, esto puede ocasionar una respuesta lenta en aquellos dispositivos con bajos recursos.

Plantilla multi HTML

Consiste en usar una página html para cada página jQueryMobile, se consigue que el tamaño del DOM sea menor pero puede ocasionar problemas en las transiciones entre páginas. Además debemos tener en cuenta que en el DOM sólo se cargara el código javascript y css de la primera página ya que los enlaces a las siguientes páginas se cargarán mediante ajax, lo que hace que sólo se tenga en cuenta el contenido que este en los <div> con el rol data-role=”page”. Para que se cargue todo el contenido es necesario actualizar la página

 

Una aplicación jQueryMobile no tiene por que usar un solo tipo de plantilla, lo ideal es mezclar las dos plantillas, es decir varias páginas html dentro de las cuales se definen varias páginas jQueryMobile.