Adventures in progressive enhancement (pt 2)

I’ve had some more time to play with progressive enhancement (see my earlier post) and I’ve learned a little more about the kind of techniques needed.

One of the interesting statements that Bryan made in his slides is “the absence of media queries is the first media query”. In other words, start with the assumption that a mobile browser – especially on a low-end device – won’t support media queries.

For my “widget workspaces” project this poses something of a challenge as each workspace consists of a number of widgets, each potentially with a different width. I can set a default max-width of 320 pixels in the default stylesheet for very small screens, and can override this with a max-width of 100% for very large screens. The trick is to target the ones in between – like a 800×480 smartphone in either portrait or landscape mode.

For this I’m making the (possibly rash) assumption that these devices will support media queries and set the widget and navigation bar to 100% width using:

@media all and (max-device-width: 1000px) { 
.widget { width: 100%; max-width: 100%} 
nav { max-width: 100%}}

This means that in desktop mode, each widget takes up the amount of space its designed for, whereas on smaller screens using the navigation controls they take up the full width of the screen:

widget in opera mobile in landscape mode

… and on small screens, and ones that don’t support media queries they take up 320px:

… though to be honest I don’t think I’d expect a really low-end device to support all the capabilities I’m throwing in here (maybe I’ll have to charge up my old Nokia and give it a go).

(NB: The above screenshots were taken using the Opera Mobile Emulator).

I think to really test this out I’m going to have to use a lot more different devices, browsers and emulators as the folks over at MMU seem to have found some gotchas with JQuery Mobile on IE and Windows Phone 7 and Blackberry’s native browser.

This entry was posted in apps, development, mobile. Bookmark the permalink.

1 Response to Adventures in progressive enhancement (pt 2)

  1. scottbw says:

    NB: All of this only works if you define the viewport:

     <meta name = "viewport" content = "width=device-width, height=device-height"/>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s