When should use jQuery Mobile? What is the proper "Use Case"?

Question

According to SO's FAQ, questions addressing "software tools commonly used by programmers" are appropriate, so here goes.

I like the UI for jQuery Mobile, but I'm just really getting into Responsive Design whereby my site responds based on screen size (media queries, etc.). So where does jQuery Mobile fit into the mix?

Say for example...

1. I've already designed the "look and feel" of my site at all my screen sizes.
2. My design does not currently use any of the jQuery Mobile UI elements (at any size).
3. So ...how would my site benefit by using jQuery Mobile?
4. Wouldn't I literally have to redo my whole site to use jQuery Mobile?
5. Or is jQuery Mobile just (or primarily) for Mobile Apps?

It's amazing I see so many tutorials that jump straight into the HOW to use it, but skip right over the WHY and WHEN to use it.

Answer 1

Yes jQuery Mobile is just for Mobile Apps, that means it will be used in different web pages to your existing desktop site.

It is possible to create a mobile site using 'responsive design' as you mentioned, but jQuery Mobile is more than this, its designed to be used for a fully dedicated mobile site.

I would look at it like this:

-If you want a web page that looks good on a desktop browser, but also is viewable on a mobile device, use responsive design techniques such as CSS Media Queries

-If you want seperate mobile pages (eg. www.mysite.com/mobile) that mobile devices are forwarded to, jQuery Mobile is for you

Also worth noting, that JQM is optimised for mobile browsers by reducing the number of http requests made by the server (important when you are on a 3G connection etc), something that your normal website probably doesn't do.