Progressive enhancement for mobile: media queries

Good web design is as much about making your websites work across browsers as it is across devices such as mobile. On top of that you want your websites to be universally accessible to disabled users – which can seem a challenge in itself.

Earlier this year Jakob Neilson said that the the mobile web 2009 mirrors the desktop web 1998 highlighting how hard it is to browse on a mobile. He’s right of course, mobile browsing can be frustrating and tiresome at the best of times. His solution however is to design not just ‘different websites’ for desktop and mobile but in the case of ‘moderately rich sites’ build ‘two mobile designs: one for low-end cellphones and another for smartphones and big-screen phones’.

Sound like unnecessary hard work? I think so. It also hints at repeating the mistakes of desktop web design circa 1998 where we thought the answer was to design for one browser, use proprietary technology, build text only websites for disabled users…the list goes on.

So let’s not make that same mistake and instead fast forward to one of the principles of good web design that dug us out of the dark hole of 1998: progressive enhancement. Add to that one of the biggest problems we face on mobile today, varying viewport sizes, and we have a good case for one website fits all.

Accommodating the multitude of different screen sizes is tricky and unpredictable. Mobile browsers try to work around this by offering a desktop view (which renders the whole site and is zoomable) and a mobile view (where content is rendered as a single column with some CSS stripped out). You can try this for yourself using the Opera Mini Emulator or looking at the screen shots below.

The image above shows this site as seen in desktop mode on Opera Mini. The square on the top left can be activated (using either a keypad or touch screen phone)  so that the area within the square is scaled up to fill the viewport.

This second image shows my site rendered as a single column of content. Some of the CSS has been stripped out so that there is basic styling and limited images. Note: screen shots were taken using an emulator for Opera Mini 4.2 which doesn’t have as good CSS support as Opera Min 5 beta.

As a developer you should never rely on the mobile browser to fix content rendering problems that arise from design so you need to find ways to accommodate varying viewport sizes yourself using techniques such as CSS 2.1 media types.

Media types are style sheets or styles tailored for different media such as ‘print’, ‘screen’, ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’, and ‘all’. You’ll notice that not only do these include special outputs for handheld and mobile devices but also braille and tty making them a handy accessibility tool too.

Media types can be easily added using stylesheets as follows:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

Alternatively you can declare that sections of your CSS apply to certain media types within existing stylesheets using @media:

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
]

So far so good as Mobile Web Best Practices 1.0 recommends media types in their default delivery context – a base set of design guidelines for mobile. They also state you shouldn’t develop to only the DDC specification – and therefore limit design to the capabilities of low end phones – but adapt content to exploit the capabilities of higher end devices that can handle more robust styling and technologies.

Sound familiar? Step in progressive enhancement and CSS 3 media queries.

Media queries extend media types by using features such as ‘width’, ‘height’, ‘device-width’, ‘device-height’, ‘orientation’, ‘aspect-ratio’, ‘device-aspect-ratio’, ‘color’, ‘color-index’, ‘monochrome’, ‘resolution’, ‘scan’, and ‘grid’.

In short you get more for your money than you do with media types as you can specify things such as screen width that can target a style sheet to only apply to a screen which is 480px or less as shown in the example below:

@media screen and (max-device-width: 480px) {
// insert CSS rules here
}

You can check out a working example of media queries here (just resize the window to see content reflow) and read a write up of how it is done in the optimizing for mobile section of a developer’s look at Opera Mini 5 beta.

Media queries are still being adopted by desktop and mobile browsers alike with support at the time of writing as follows (as far as I could see): Opera Mobile, Opera Mini 4, Opera on the Nintendo Wii, iPhone, Bolt, Iris and the Nokia s60 browser.

Within that the full set of media query features may or may not be supported by any one browser however I would expect the key ones are such as  ‘width’, ‘height’, ‘device-width’ and ‘device-height’ to be included. I’ve not been able to track down any up-to-date information here so let me know if you do.

The principles of good web design still seem to hold true when it comes to designing for mobile and we’d do well to learn from some of the mistakes from desktop rather than repeat them. Happily this makes our jobs a bit easier as the same rules apply:

  • Set your baseline of supported web technologies
  • Use web standards: HTML, CSS, JavaScript, XHTML etc
  • Apply progressive enhancement
  • Test, test, test

7 thoughts on “Progressive enhancement for mobile: media queries

  1. Pingback: Laura Carlson (lauracarlson) 's status on Monday, 21-Sep-09 11:49:26 UTC - Identi.ca

  2. Pingback: Thoughts around universal access on mobile from Accessibility 2.0 » iheni :: making the web worldwide

  3. Pingback: Best approaches towards a mobile Intranet « A Pretty Simple blog

  4. Pingback: Nintendo DS Browser "Real Life" Test (Video) | AboutBrowsers.info

  5. Pingback: Design Stories > Progressive Enhancement in Mobile Design

  6. Pingback: How to optimize your web based software application for the mobile web « Hub Tech Insider

Comments are closed.