Having recently upgraded my phone to a Samsung Galaxy SII, acquired an Asus Transformer Prime tablet and reached the end of a big work project I decided it was time to invest in my skill-set and learn the art of mobile application development.
After some research I decided that PhoneGap and jQuery Mobile were the tools I should be using. They bridge the gap between web development and mobile application development really well and, used correctly, produce and app as polished and powerful as one built by any other means.
The key thing to remember when developing is that your code will be rendered by a webkit engine so several of those tricks you might use for Firefox or IE won’t work. A key issue that had me stumped for a while was the fact that you can’t transform any elements that are hidden. However there is a flip side to this in that you are developing for webkit and only webkit so you don’t have to worry about any of that browser compatibility rubbish you normally have to account for in web development.
jQuery has some very good tutorials and demo code on their demo site. All their code is ready to drop straight into an application and is very much geared towards scalability and flexibility with device orientation.
Chances are that once you’ve got into the swing of setting up an app the main issue you will encounter is scaling your app to work on different screen sized and resolutions. This job gets even more difficult when you learn that a pixel is not always a pixel. I strongly recommend reading this article to shed a little light on the situation.
And finally some links and plugins that I have found incredibly useful:
PhoneGap Plugins – The Video Player plugin is particularly useful
Photo Swipe – Great starting point for keeping views scalable and the code is easily modified to go into other apps