Question

If the goal is to develop a web app that will currently be used on desktop computers but eventually will also support mobile devices such as smart phone or pads , what strategies is recommended in organizing the code ? Should there be one set of code for desktop clients and then one set of code for mobile clients ? In the past I have used jquery and jquery ui . How does jquery , jquery ui and jquery mobile fit together in a web app ? What are main differences between developing for non mobile web client and mobile web clients ?
I am using asp.net mvc .
my sponsor prefers a single-page web app . So I am looking into Knockout.js . I am also looking into some widgets set such as
dhtmlx
jqwidgets
Please feel free to comment on my choices.

Answer 1

To keep things simple and short – you should use (or consider using) Responsive Web Design. The main idea is you develop your CSS to handle re-sizing / reorganizing depending on the width of your screen. This allows you to handle situations where the screen is wide enough to be recognized as a Desktop screen while simultaneously being able to adjust to Mobile screen sizes – no matter the device.

Having your CSS adjust the size / position of elements on the page allows you to have one set of code for all users (no separate mobile / desktop sites). You will simply have to spend a little more time and effort designing your website to handle the re-sizing of the page width.

The jquery library works the same on mobile as it does on ‘traditional’ platforms. There are times when you may want to take advantage of mobile-enhanced versions of various jquery libraries though.

• An example: When you have nested links on a navigation menu that comes out when you click on say a category like, “shirts”, then a sub-category like, “button-up,” then a sub-sub-category like, “blue.” On a ‘traditional’ platform the user can hover their mouse cursor over the elements to expand the nesting – on a mobile platform the user may want to tap each category / sub-category to expand the nested navigation buttons.

This is completely dependent on your website’s design – when designing responsive websites, I typically have very little variation in the scripts between views intended for ‘mobile’ and ‘desktop’ devices – so development for either does not vary for me, I treat new websites as, “responsive,” and design it with the re-sizable browser in mind from the beginning.

Also, for further elaboration of the specifics of the jquery, jquery ui, and jquery mobile libraries, see the link that Tats_innit referenced.