In my earlier post I talked about how I went in search of the best tools for mobile development.
I finally found my way to JQuery Mobile (JQM). And after all the talk and buzz around the tech space about developing mobile sites with JQuery mobile, I discovered that it isn’t as dreadful and uphill as people make you think.
So all you need to set up a mobile friendly page is add these 3 files to your header.
You will have to forget about XHTML validation in this case. Below is the typical structure of the head of a mobile page. You don’t have to start by creating a theme in themeroller as the default JQM theme is just good enough for you to start practicing with right away.
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<link rel=”stylesheet” href=”css/jquery.mobile-1.1.0.min.css” />
Once you have these files in your header you are ready to start using JQM to perform all the mobile magic wonders that you see the so-called “mobile-experts” performing.
You can create lists that look like a phone’s native application navigation list and those fancy rounded buttons that slide into different pages when you click them, all simply using very basic html tag properties called the data-role.
For a detailed guide on the different features and properties in JQM, you may visit the JQuery mobile introduction page here.
The built-in Ajax functionality in JQM means you don’t have to worry about how to communicate with your scripts on the server, just return the results in a suitable format.
Finally, if you need to convert your mobile site into a native phone application, there are several tools that will take your pages and compile them into any platform of your choice.
A good example is PhoneGap.
- Quick Introduction to jQuery Mobile (doctorfox.wordpress.com)
- jQuery Mobile Web Development Essentials – Released (raymondcamden.com)
- What are the Best Tools For Mobile Application Development? (doctorfox.wordpress.com)
- JQuery Mobile Great for Prototyping (smileysteve.net)