jQuery Mobile for mobile and desktop?

Question

I'm developing a web app. MySql/PHP back-end, and HTML/jQuery front-end.

I wanted to use jQuery UI framework.

Now is see that jQuery Mobile is out, and I want to make the app accessible to mobile devices as much as possible.

I Googled, but didn't find a quality answer.

Can I make it all to work form the same code if I use jQuery Mobile?

I'd like it to show mobile widgets if accessed form mobile browser.
But use jQuery UI widgets is accessed from desktop browser.

Is that possible just by using jQuery Mobile and its markup, or I have to write the front-end for mobile (jQuery Mobile) and desktop (jQuery UI) separately?

That is, can jQuery Mobile, automatically "fall-back" to jQuery UI if accessed from desktop browser.

Solution 1

I think it largely depends on what you want to do and functionality you're trying to capture. If you want a webpage to behave a certain way on mobile and the same desktop, then with some careful coding/testing, you'll be alright with jquery.mobile.

If you check out the CSS for jquery.mobile (uncompressed version), you can actually edit the code directly to show the HTML elements the way you want to for particular screen sizes. Just select the one for desktop / large screen sizes to scale appropriately.

Depending on what you're trying to accomplish in terms of your mobile version, I'd also check out jQTouch - which allows for mobile-specific functionality, such as "tap" (in place of "click"), as an example - but also has a desktopCompatability option, so it reverts for desktop browsers.

One note, with either of these libraries, you'll still need the root jquery library.

Hope this helps.

Solution 2

First of all you will have to consider that the workflows for mobile and desktop differ vastly. Trying to flip between the desktop version and the mobile version will not be just a toggle between resources.

Secondly the two UI frameworks differ vastly in how they are used. jQuery UI is a collection of widgets that you can invoke when you like and where you like, it is in a sense library(ish) with a CSS framework backing it. jQuery mobile works quite differently however, by default it is a markup driven framework and to get it up and running it doesn't require you to write even 1 line of Javascript.

My advise to you is to think about the data layer as your common code and the client side as 2 completely separate pieces of work. Personally I have managed to create applications using common REST webservices. I use the jQuery UI to consume webservices and create mashups for the client-side. I then for the mobile version consume the webservices server-side to produce jQuery-mobile html pages for use on mobile.

Also note that generating dynamic HTML on the client side using jQuery Mobile will most certainly cause you huge headaches. Until the project matures I would use it only to enhance the frameworks highly semantic markup. Create a good solid data layer and the rest will be piss easy :)

Solution 3

Here is the full source code: https://github.com/ti-dev/Scrum-it for an open source Scrum Board which is designed for desktop devices and Apple iPad. So it is possible to combine these two worlds in one webpage.

Comments

[ZolaKt]

Thanks for replay. I'll probably separate front-ends, because I probably don't have enough space to show all on mobile, as on desktop. But I'm just wondering should I use jQuery UI at all, or go straight to mobile.

[TNC]

Unless you're needing specifics in the UI library, I'd go straight mobile, IMO.