These are some examples of how you can transform a normal web page into a Web App using jQuery Mobile, that I created based on well known native applications
Written by: Cat | Article: Direct LinkI make the boring things look pretty
The examples in the slider are real screenshots taken on my iPhone 4S and use jQuery Mobile – v1.1.1 to demonstrate just how customisable the framework is. In the smart viewer you can see the demos working, remember though that the display varies slightly from that of a smartphone.
‘Seriously cross-platform compatable
jQuery Mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique applications for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded responsive web site or application that will work on all popular smartphone, tablet, and desktop platforms’
Skin design
The examples use heavy css customisation but if you are just looking for a new colour scheme you can create this quite easily yourself. If you visit themeroller.jquerymobile.com you can create your own skins for jQuery templates quite easily with their custom built tool. There is also a pretty good tutorial from the jQuery people here
‘Theming: Built to be branded
We believe that your web site or app should feel like your brand, not any particular OS. To make building highly customized themes easy, we’ve created ThemeRoller for Mobile to make it easy to drag and drop colors and download a custom theme. For polished visuals without the bloat, we leverage CSS3 properties like text-shadow and box-shadow.’
Free Sample
The free sample of a jQuery mobile site with a custom skin is yours to do whatever you want with, it comes as is, with no warranty.
Instructions for free apps
These 5 page apps contain all of the most popular jQuery mobile elements for you to experiment with. If you are going to edit the file its suggested you make a copy of the desired base template first.
You can more pages to the templates by copy pasting the code between the start page one and end page one tags, be sure to change the title of the page from one if you do.
Menu Button - You may need more then 5 pages to link to so there is an added menu from a button that calls the menu popup, in the left hand corner of the header. If you do not want the extra navigation simply comment out the code.
Contact links – Three types for phone shortcuts, SMS, EMail and Call. You can delete any buttons that are not need. Remember anywhere you put an email address or phone number, smartphone users can click to call also.
Photos - Replace the ‘imagename_thumb’ files with thumbs of the images you are using in your gallery. Replace the image names in the links below with that of your large images. To add more images simply copy paste the gallery code. You can change the size of your images by editing the width and height style tags in this html.
Other then that the rest is up to you, the best way to learn is to tinker with these templates and head on over to the jQuery mobile official documentation.
Once you have become acustomed to the different elements of jQuery mobile you can learn to skin them yourself!
Happy practicing