Responsive Design in jQuery Mobile using CSS3

Wouldn’t it be nice to have one set of code which supports both smart phones and tablets. I don’t mean a stretched implementation of the smart phone UI, which looks awkward and awful on a tablet. No, I mean a smart UI which dynamically shows and hides parts of itself in response to the amount of available screen real estate. This is the definition of one of the hottest internet catch phrases, “responsive design”.

Responsive design is a troubling topic for me. Everyone has seen those magical websites which scale to fit whatever device they are running on. They usually work by sending all of the markup for the largest possible screen down to even the smallest device and letting CSS position everything so it look right. When non-engineers see those sites they get that glazed look of love in their eyes. I see those sites and the first thing I do is proxy up my iPhone and watch in disgust as my phone is choked by all of the data being jammed down its binary throat. Don’t get me wrong, this style of responsive design has a place, it just isn’t on a portable device, especially not over a 3G connection.

Examples of Responsive Design

For this week’s tutorial, I have made my first in-depth pass at responsive design in jQuery Mobile. In it I will use CSS3 media queries to enable/disable parts of the UI. And please don’t call me a hypocrite yet. Since only a few classes will be tweaked   

The App

The application, like all of the apps in my tutorials, is simple. It is a squirrel viewer program. You select from one of three types of squirrels, and the viewer shows you a picture of the squirrel. 

Above is how the UI looks on a smart phone. It consist of two pages, the first allows the user to select a squirrel, the second to see the squirrel. But what happens when we have more room, like when the user is using a tablet? 

With the increased real estate, we allow the user to see their squirrel as they select it. Also, since there is no need for a second screen, we remove the “See Your Squirrel” button. And if the user should put their tablet in portrait mode, we change the UI again.

Now instead of elements being side-by-side, the UI is stacked. Now that you have seen the app, let see how it is done.

CSS3 Media Queries and HTML (that’s right no JavaScript)

The main keys to a dynamic UI are CSS3 media queries. They allow us to define classes based upon the metrics of the current device. If we keep in mind that the ‘C’ in CSS stands for cascading, we will realize that what we can do is define a base set of classes at the beginning of our style sheet and then redefine some classes in response to the metrics of the device. 

Two classes are the star of this application with a third in a supporting role. The star classes are ‘content-primary’ and ‘content-secondary’. ‘content-secondary’ is a class for the div which surronds the radio buttons and the ‘See Your Squirrel’ button. ‘content-primary’ wraps the image of the squirrel on page one. 

Normally both of the star classes are on and they divide the width the screen between them. When the screen is in tablet, portrait mode, we tweak the width of both class to 100%. This cause them to stack on top of each other. Finally when the screen is in smart phone dimensions, we turn off ‘content-primary’ and keep ‘content-secondary’ at 100% width. The results of this is that the user only sees the radio buttons and the image of the squirrel is gone.

The class in the supporting role is, ‘show-page-button’. Normally is set to ‘display: none;’ which turns it off. But when we are in smart phone, two page mode, we set it to ‘display: block;’, which turns it on and reveals the ‘See Your Squirrel’ button.

A little bit of JavaScript

OK, there is a little bit of JavaScript. In the code for page one, we hook the change event for the input type radios. Each of these inputs holds a value which is the path to its image. The handler for the event copies the new image path into src property of the img tag, all of them. That is the final trick of application, whether the app is in single or two page mode, it always updates the images on both pages. Don’t worry, the extra update has almost no affect on performance and no extra code. It is important to note that not all jQuery manipulators will modify all of the elements in a collection, but the attr() manipulator does.

Is it possible to read media queries with JavaScript? Yes, it is possible, but it is more efficient to let CSS do it. Plus it also makes your code cleaner. If you insist to do it in code, media queries are access through the styleMedia property of the window object.

If you omit the “@media” element, the string passed to the matchMedium element matches that of the media query in the style sheet and not accidentally.


Cellphone displays continue to increase in size. The code is vulnerable to these changes. There are already super phones whose dimension’s match those of tablets, only there orientations are different. So be prepared to have to tweak the dimensions in the media queries. 
There are more files in the project which I haven’t mention since they are part of my standard bag of tricks. Be sure to download the complete project to check them out.

Download the Source


14 thoughts on “Responsive Design in jQuery Mobile using CSS3

  1. Thanks for the tutorial. I found it incredibly helpful. I do have a question, though. On my Motorola Thunderbolt, the data-transition=”slide” does not slide. Page 2 just shows with no transition effect (worse, it is a jumpy redraw). Are you seeing this same behavior?


  2. Hi adab,

    Yes, I have seen it before. Here is the quote from JQM docs,

    “Only seeing fade transitions? To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to “fade” for all transition types. This behavior is configurable (see below).”

    Unfortunately even though the Thunderbolt is a fast phone, it is paired with Google's less than ideal nameless browser. Nothing you can do except rest assure that the transition will work on phones which support it.



  3. Hi adab,

    No tricks involved. That site was built using an older version of jQuery Mobile, version 1.0, mine uses with version 1.1.0. Changes were made to the transitions in response to issues reported. Starting with 1.1.0 they only work on systems which support CSS3 3D transforms.



  4. This is such a tough concept to imagine applying to a larger project – i'm getting a little “squirrelly” just thinking about it – but I'm going to give it a shot. I especially like how you show how checking against @media queries is done in Javascript but, bring us back down to Earth and recommend CSS. Thanks!


  5. Scratching my head here, how would you control the main content by the selection on the secondary panel. For example if you had a whole lot of pages created and you just wanted to swap them out depending on what was selected in the secondary panel?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s