As we discussed in class, sometimes we’re unable to accomplish exactly what we hoped, and we have to find work-arounds. If we stick with HTML 4 or XHTML plus CSS level 1, we have a lot of confidence that any browser is likely to render a page properly, but when we use HTML 5 and CSS 3, things aren’t always as straight-forward.The price for using the latest features is sometimes additional debugging and testing of work-arounds.

The issue we ran into involved the Chapter 7 case studies, which created mobile versions.  As we saw in class, the same code worked fine in the Opera Mobile emulator, the Opera Mini simulator, and Opera Mobile running on an Android phone, but did not work properly — the mobile version of the stylesheet was not used — with the Mobilizer emulator and the default Android web browser.

I contacted the author of our textbook, and she replied later the same day. The most important points in her message:  She indicated that Mobilizer doesn’t handle queries in link tags well — it works better with media queries coded directly in the CSS.  And she now suggests using media queries coded directly in the CSS file instead of in the link tag. “This method is better-suited to responsive web design (especially when you add in a display optimized for tablets).”

In my own professional work, I’ve found that my thinking evolves over time, along with the recommendations I make to clients. Working in a field as dynamic as IT, flexibility definitely gets you further!

So how do you implement her recommendation?  Fortunately, it’s very simple, and there are a couple of ways of doing it. As an example, if your HTML file contains this line

<link href="javajammobile.css" rel="stylesheet" media="only screen and (max-device-width: 480px)">

you would instead code into your css file the following

@media only screen and ( max-device-width: 480px ) { … }

and put the entire mobile stylesheet within the { } pair.  Or if you prefer to keep the mobile styling in a separate external stylesheet, you could put just this line in your main stylesheet:

@import url( javajammobile.css) only screen and (max-device-width: 480px);

As always, be sure to actually try the code to see how it works. For full specifications on media queries (not to be read when you’re already feeling sleepy!), look at  www.w3.org/TR/css3-mediaqueries/.

Additional notes, a month later: We finally figured out to use max-width instead of max-device-width. A quick Google search turned up (at http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web):
max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height. Using multiple max-width (or min-width) conditions you could change the page styling as the browser is resized or the orientation changes on a device like an iPhone.

max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing. This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.