Responsive Design and jQuery Mobile

x7ian writes:
Hello! I like jQuery Mobile and I can see its power. The problem I find on using it is that I like to use responsive design. I would like to ask you if there is a way to create a responsive website where jQuery Mobile loads only in the mobile versions. The problem is that if I load jQuery Mobile libraries, they will load even in the normal or wide displays. That’s the reason that I haven’t been able to use jQuery Mobile, and I always end up using traditional jQuery to do things like creating a collapsible menu, like the ones in this post. I always have to do a collapsible menu and make it work with jQuery so it shows up collapsed only when the website is on a mobile device. I’ve been Googling a lot looking for a way to combine responsive design with jQuery Mobile without any success. Do you know a way to do that? or is it that when using jQuery Mobile I always have to do a separate theme on a different subdomain say, www.example.com for my main website and m.example.com for the mobile version?? This is something I struggled with as I was writing my book and with a current client I’m working on now.
This is something I struggled with as I was writing my book, Creating Mobile Apps with jQuery Mobile, and with a current client I’m working on now. Let's look at a few ways this can be handled.

Mobile First - JQM the whole way.

jQuery Mobile is not a mobile only framework. They took meticulous care to make it a mobile FIRST framework. When you're building your site, create the mobile version first. Think in terms of short bursts of focused productivity. Then decide, as you go up in size, how you might change the layouts, how you might scale up the images, how you might hide certain parts and reveal others. You can use CSS Media Queries to define which parts are revealed and how they are re-flowed. The docs site of jQuery Mobile is a fine starting example. Nothing says that just because it's jQuery Mobile that it can't be used everywhere.

jQuery Mobile and WURFL

WURFL is an amazing, community-driven library that is very easy to install and configure on any backend system. At its core, WURFL is a database of device detection. It's very simple to get information about the devices viewing your site no matter what backend you’re using. Then you can simply ask WURFL if the user is classified as a smartphone, mobile, tablet, etc. and inject the jQuery Mobile libraries.

Single Domain - .load Content

I honestly, wouldn’t do a separate sub-domain. I know the convention is to host your mobile site on m.whatever but only the serious geeks know about that kind of thing. Most people are just going to come to your regular site anyway. Keep your mobile site on the primary domain. There are a couple of good reasons for this.
  1. You can easily ajax in content into your site because you do have to deal the with headache of the same origin policy. This can give you a third way to get your desktop content into a mobile page. You simply ship them to a mobile page that knows what desktop page holds the primary content and then use a .load with specific selectors to pull in the desktop page, carve out what you want, and dump it into the right part of the mobile view.
  2. Have you ever logged into a mobile site and then clicked on the full-site link and, guess what?, you’re not logged in anymore? You jumped domains so the authentication didn’t pass through. By keeping the mobile site as part of the main site you avoid the hairy authentication issues that can happen.
  3. m.yourdomain.com isn’t really all that much better than yourdomain.com/m
  4. I hope this helps you. Let me know in the comments if this helped and what you end up doing.