HTML 5 and JQuery Mobile for Mobile Applications!

Marc Whitlow, 26 January 2012

JQuery Mobile is a mobile framework which is designed to make the development of mobile web applications a lot simpler. By Integrating HTML5, CSS3, JQuery and a custom JQuery UI into a single framework we are able to create elegant and useable solutions which are Cross Platform friendly.

JQuery mobile is very small in size (20kb when compressed). The UI uses minimal image dependencies which makes the speed in which web applications can load a lot faster. JQuery Mobile has automatic initialization by using the HTML5 data-role attributes which are built into the new HTML5 mark-up. These act as a trigger when loading the page and load all JQuery Mobile widgets and parts found within a page.

With JQuery Mobile and the use of data-role we are able to have multiple pages in one document. In doing this we are saving on loading time and also avoiding the need to load a new document when a link is selected. Below is an example of how the data-role is used with a unique id to display more than one page in a document.

The UI used by JQuery Mobile means all elements which are added to your page are “Touch Optimised”. This is also cross platform supported and avoids the need to develop multiple versions of given applications for different devices.

Jquery Mobile is fully style able using CSS3 and Style Sheets however also available when using JQuery Mobile is “Theme Roller for Mobile”. This application makes building mobile themes easier than ever. The application is a WYSWIG designer which will output a style sheet which you can plug directly into your application.

When looking at developing a mobile application it is HIGHLY advised that you look into the use of JQuery Mobile before spending hours and hours developing applications for each device. The use of HTML5 with Jquery Mobile means the offline storage capabilities of HTML5 can also be taken advantage of to get the most out of your application.