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.
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.
Summary
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.