Wednesday, July 17, 2013

Responsive Design and jQuery Mobile

"Mobile First!", is the new cry of web designers worldwide. But how do you do it? Do you have to scrap all of your current web skills? Is it magic created by wizard-like designers which could never be understood by mere mortals? Believe it or not with the combination of jQuery Mobile and CSS3 Media Queries, you can easily create a site which looks good on phone, tablet, or desktop.

General Responsive Web Features

The web began as responsive. Now admittedly, the web didn't do very much, so being responsive when the Internet was mainly documents was easy. HTML documents naturally wrapped to the next line and flowed down the page.

Along the way things changed. Developers began designing sites in tools like PhotoShop and wanted pixels perfect renderings of those designs. Problem with pixels is that they are not very flexible. It has always been possible to use percentages instead of pixels, but they were clumsier to work with, so pixels remained the favorite.

With the HTML5 and CSS3 there is more support for responsive design. Lets

Meta tags
Meta tags have been the favorite of the SEO crowd for sometime. Meta tags are used to define keywords, descriptions and even redirects. Here are some rules about meta tags:

  • They always go in the <head> section of the page
  • They are never displayed
  • They consist mostly of key/value pairs: name = key and content = value

The viewport is a special type of meta tag which defines the screen of a mobile device. In the example program the viewport meta tag looks like:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

The attributes above mean:
  • width=device-width - converts the pixels to CSS pixels
  • initial-scale=1 - sets the scale level
  • user-scalable=no - turns off scaling

If initial-scale is some other value than 1, the zoom can be smaller or larger. If user-scalable is set to yes, then the user sets the zoom level by tapping, pinching, or whatever zoom gesture the browser supports.

Media Query
Media Queries are the workhorse of responsive design. A media query is a media type and at least one expression that limits the style sheets' scope. Here is an example:

@media screen and (max-width: 1024px) and (orientation:portrait)


The above media query means:
  • For a screen media type
  • Define the classes only if
    • The width is less that 1023
    • AND the orientation is portrait

The media query begins with @media then a media type, in this case, screen. Other types are: all, braille, embossed, handheld, print, project, speech, tty, and tv. You can compose complex media queries using logical operators like not, and, and only.

  • not - is used to negate an entire media query
  • and - used to combine multiple media features together into a single media query
  • only - used to apply a style only if the entire query matches

Finally there is the comma-separated list which behaves like an or operator. If any media queries return true, the style sheets gets applied.

One pattern for applying the media queries is to define the query for the narrowest device first, then define for a tablet, and finally a desktop. Now all of these definitions are pretty loose and open to interpretation. You may need to adjust them to fit your needs.

If you run the demo on a high pixel phone like a Nexus 4, which has a display 1280x768 resolution, why doesn't it display like a desktop? The key is the viewport meta tag. This tag which read by mobile browsers, redefines the pixels as CSS pixels. The precise number of CSS pixels varies by device, but on the iPhone it is 320 and the Nexus 4 it is 384, both of which are less than the minimum of 480 pixels to be defined as a tablet.

jQuery Mobile Features
So far we haven't looked at jQuery Mobile features. From the get go jQuery Mobile has had responsive features. Some of which are:

  • grid - a simple way to build CSS-based columns that can also be responsive
  • tables - selectively hides or shows table columns based on the display width
  • panels - creates a hidden page which slides left or right to reveal itself

Grids have been with jQuery Mobile since the beginning. They are essentially self sizing columns which dynamically resize themselves when the size of the page changes. The number of available columns ranges from two to five. To change the number of available columns simply change the class on the root div then add or remove a div from the collection.
  • ui-grid-a = 2 columns
  • ui-grid-b = 3 columns
  • ui-grid-c = 4 columns
  • ui-grid-d = 5 columns

Tables were added with the release of jQuery Mobile 1.3.0. They allow for the responsive display of tabular data. There are two basic types of tables: reflow which is the default and column toggle. Reflow tables lay the table data horizontally until it reaches a minimum size, then all of the data for each row is grouped together and it re-flows down the page.

In column toggle mode, each column of a table can be given a separate priority, when the data can no longer fit horizontal, the column with the lowest priority number which is still visible is hidden. This continues until a minimum size is reached or there is only one column remaining.

A panel is a hidden page which reveals itself by sliding from the  left or right on to the page. On it can nearly any support jQuery Mobile widget. When the panel is displayed, clicking any where else on the page will close it.

Best Practices

  • Design styles beginning with "mobile first", then go wider
  • Use "min-width" to constrain styles
  • Prefer percentages and ems to pixels