jQuery Mobile and desktop browsers

jQuery Mobile and desktop browsers

Having spent the last year or so working with jQuery Mobile, there are certain aspects of the framework that I think could also benefit my traditional, desktop projects. From a design perspective, I think iPads and other tablets share much more in common with desktop sites than with true, phone-oriented mobile sites, so I would prefer to design based on screen real estate first, and input type (touch vs. mouse) second. Obviously, there are a ton of caveats that could be highlighted here, but what I'm really driving at is whether jQM makes sense for any non-mobile site?

Excluding all of the mobile aspects of jQM, I really like how they manage page elements with "data-role", list, form and button behavior, but most importantly, how easily themes can be used to customize the look and feel of these elements. The themes alone are way slicker than anything you can do with jQuery UI, for example.

There are, however, some parts of jQuery UI that are great. All of the animation effects, for instance. In a way, I guess what I'm wondering is if there might be a way to incorporate elements of both jQM and jQuery UI for desktop applications? Although I've used lots of jQ UI in the past, it's really only been for things like sliders and date-pickers, so I'm not all that familiar with its capabilities.

At the end of the day, my goal is really to reduce the total numbers of pages and page elements that need to be created, while still supporting users on a wide variety of devices. I don't expect to have a single site that works great on everything from an iPhone to a MacBook Pro, but I would like to devise a system where some items are shared between the phone and tablet pages, while other elements are shared between the tablet and desktop sites, leaving only a handful of items specific to any one platform.

Any thoughts on how best to leverage various jQuery components to achieve this goal (at least in spirit) would be greatly appreciated.

Cheers!