Need to convert my HTML5 based web application into a mobile app which will target all mobile devices

Question

Is it possible to convert my existing HTML/jquery.js website into a mobile app that targets all device (iPhone, Android, Blackberry, etc.). Below are the points I can think of. Please correct me if I'm wrong. Add jquerymobile.js and change the css style (based on the device which is accessing your site).

What all points should I consider while converting my existing desktop based website into a mobile one. Or should I start creating a mobile website (MVC4 mobile website) from scratch? If that is the case then I have to maintain 2 code bases (1 for desktop and 1 for mobile) which I don't want to do.

Answer 1

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