Need to convert my HTML5 based web application into a mobile app which will target all mobile devices
You may avoid the need for two code bases if you design your Web app in a device-agnostic way. That means that it can be displayed on many different screen sizes (anything from small mobile phones to plasma TV sets) and navigated using many different input methods (mice, keyboards, touch screens, game pads, etc.). Various techniques to do that are nowadays known as "mobile first" or "responsive design". For a good start, see:
- Creating a Mobile-First Responsive Web Design
- 320 and Up - the ‘tiny screen first’ responsive boilerplate
- Mobile HTML5 Boilerplate
- the Responsive Mobile First template from Initializr
- Twitter Bootstrap
- Zurb Foundation
- For more see: Nice intro to Web Design frameworks (a video by Edreih Aldana)
Keep in mind that it may not always be possible or convenient if your application is very complicated and in the end you may end up with two (or more) code bases in that case, but most of the websites and Web apps can be built using those principles in mind.
Also keeping in mind the Web Content Accessibility Guidelines can make it much easier to design websites that can work on many devices and with many input methods.
You haven't specifically asked for this but additionally you can use PhoneGap to convert mobile websites or Web apps to actual native mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian, so you can have your apps available for installation from various app stores for those particular platforms.
Update 2016
I wrote this answer in 2012 and some relevant tools have been developed since then:
- Ionic - a hybrid mobile app framework based on Angular
- React Native - a framework to build native apps based on React
- Framework7 - a hybrid mobile app framework based on Dom7 (similar to jQuery)
- Intel XDK (formerly known as appMobi)
- Appcelerator
- AppGyver
- NativeScript
- Onsen UI
- More at the Mobile Frameworks Comparison Chart
This question was asked 3 years ago and has good answers, I just want to add some info, based on my experience:
It's better not create separate mobile design, but modify existing web with responsive web design using Bootstrap.
Then you have two options:
- Create Hybrid Web App using Apache Cordova, it's almost the same as PhoneGap, mentioned above. I'm using Visual Studio, so I used VS project template.
- Hosted Web App using Manifoldjs. I thinks this option is easy, you just take your existing web site and wrap it, creating Web App.
And if you use Visual Studio, you can create hosted Web App even without Manifilod.
You can try PhoneGap, a fast way to deploy your app to various kinds of devices.