Tuesday, May 22, 2012

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.

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.

Download the Source






18 comments:

  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?

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

    Troy

    ReplyDelete
    Replies
    1. FYI: I found that the transitions in http://the-jquerymobile-tutorial.org/test do work on my Motorola Thunderbolt. There may be a trick or two there for you to look into.

      Delete
    2. 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.

      -Troy

      Delete
  3. 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!

    ReplyDelete
  4. Just wondering if this is still working on android phones?

    web design philippines

    ReplyDelete
  5. The information that you provided was thorough and helpful. I will have to share your article with others.Thanks alot.
    website design

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. What about the media queries? it will work too.
    Team S plus H

    ReplyDelete
  8. 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?

    ReplyDelete
  9. Thanks for sharing! This page was very informative and I enjoyed it. Mobile application design

    ReplyDelete
  10. There are some quality design site which are sample show in this site. You can submit fresh site 
    css design

    ReplyDelete
  11. Nice Tutorial. Everyone have to follow the steps. Designing a website is never easy. This process will be help to me. http://bit.ly/1acKauy

    ReplyDelete
  12. The offline browsing capabilities of HTML5 implies that sites is simply accessed ‘on the go’. Contained in hybrid HTML5 internet applications can progressively be consumed on the move and within the absence of a web affiliation.

    Responsive Design Companies | Responsive Web Development Companies

    ReplyDelete
  13. Hii.this post is indeed very helpful ..i got a little idea still far from getting the whole thingy ..

    Responsie Design in India

    ReplyDelete
  14. This blog well briefly explaining to create the Responsive Design for mobile with jQuery by using CSS3.Its really helpful for responsive website designers.
    Web Design Companies Bangalore | Responsive Web Design Companies

    ReplyDelete
  15. I have gone through your blog in details. It is really very relevant and informative..... web design

    ReplyDelete