Creating mobile version of wordpress pages using jQuery mobile

Some days ago I started reading about jQuery Mobile and I had this idea: ”What if we can make mobile versions of wordpress pages using jQuery Mobile and HTML5”. Turned out to be easier then I initially thought. You can take a look at jQuery Mobile site for Demos, documentation and some practical examples or just get started with the syntax. Some hours research later I decided it can easily be implemented in wordpress using Page Templates(previously mentioned here). So I made one new page template and for about 20-30 minutes I had mobile template for wordpress pages written entirely on jQuery Mobile. The coding of the whole thing is not different in any way from standard wordpress coding. You can see the code below. Of course this is just a prototype and I strongly advise you to use wp_enqueue_script and wp_enqueue_style to load js and css to your template.

<?php
/*
Template Name: MiniMe
*/
>

 <?php echo get_the_title(); ?><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script></pre>
<div data-role="page">
<div data-role="header">
<h1></h1>
<a href="<a href=" data-icon="home" data-theme="b">Home</a></div>
<!-- /header -->
<div data-role="navbar"></div>
<!-- /navbar -->
<div data-role="content">
<div>
<div></div>
<?php
//Here you specify the ID of the POST which content you want to display
 $postid=62;
 $post = get_post($post--->ID); ?>
<div>
<div style="width: 220px;" data-role="collapsible" data-collapsed="true" data-theme="a">
<h3></h3>
<?php echo $post--->post_content; ?></div>
</div>
</div>
</div>
<!-- /content --></div>
<!-- /page -->

You can check how that looks on your mobile by scanning the post`s thumbnail with your Android/iOS device.