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

Wednesday, July 10, 2013

Responsive Design and jQuery Mobile

On Wednesday, July 17th, at 7 PM, I will be giving a talk on Responsive Design using jQuery Mobile to the good folks at jQuery-LA. This is a great group and I hope to make this a very interesting talk. So please come out and join us. The talk synopsis is below:

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

In this talk, I will show how to build a simple responsively designed web site using jQuery Mobile version 1.3.1.  I will begin with a design for mobile, expand it to support tablet in both landscape and portrait modes, and finally show how to take advantage of the desktop's big screen. We will also discuss some of the pitfalls of responsive design and potential work-arounds for them.

All of the code and slides will be available after the talk.

Tuesday, July 9, 2013

2013 - Code Camp - San Diego - Sessions

HTML5 is the hottest buzzword on the web. It gives a lot of new features to websites, so many in fact that it makes it possible to create a fairly decent game in the browser without using a proprietary solution like Flash. Now, we aren't talking about a sequel to Call of Duty, but instead a casual game more in the vein of Bejeweled. When you combine HTML5 with jQuery Mobile you have a great platform for making games which can be played on all of the latest and greatest mobile devices.
In this session, I will present a simple HTML5 game engine, explain the various pieces of its architecture, and most of all explain how you can further expand it.

Node.js is one of the most popular repositories on GitHub. Unfortunately it is still difficult to get a good foothold in understanding Node since so many of the tutorials show super simple examples and not the way it is used in a production app. In this session I will show how to use Node, Express, MongoDB, Backbone, and Kendo UI together to build the core of a real app.

This session will move somewhat quickly in order to cover all the material but all of the source code and slides will be available after the session.

You've probably heard of PhoneGap, the free, open source framework for creating mobile apps using standard web programming, but maybe you're skeptical. You probably have a lot of questions.  How easy is it to create an app with PhoneGap? Can I convert my web site to a mobile app? Will the app be too slow to use?

In the session I will, with nothing up my sleeves, convert a mobile web site into a PhoneGap app for both iOS and Android. I will take advantage of both device and HTML5 features. I will show solutions to the performance challenges PhoneGap apps sometimes suffer from. I will show to structure your web site to make it easy to convert to a device app. And finally I will show strategies around one of PhoneGaps biggest headaches - debugging.

JavaScript, like it or not, has become the most important language on the web. Nearly every developer who builds Internet apps has to use it. But JavaScript can be tough to write and even tougher to read. So here are ten tips to help you get groovy with JavaScript.