Adventures in progressive enhancement

Like many people I was very impressed last year with Bryan Rieger’s slide deck Rethinking the mobile web in which he set out the case for designing websites with mobile users as the first concern, and then progressively layering enhancements for larger screens and more capable browsers using things like CSS Media Queries.

Its been quite a while since Bryan presented – six months or so – and I’ve only just begun to try to put these ideas into practice. For the Omelette project we need to come up with a solution for sharable workspaces that are mobile- and tablet-friendly and incorporate Wookie widgets. Rather than have several template layouts, I’ve been using JQuery Mobile for the Widgets, and have been experimenting with a media-queries driven layout.

I’ve developed a layout for the Wookie admin interface as a demo, replacing the various functions with specialized widgets. On a desktop browser it looks like this:

Whereas on a mobile-sized browser it looks like this:

Note you use the arrows at the bottom to navigate between widgets.

These are actually the same HTML page, and the same JavaScript. The only difference is that the mobile version uses the default CSS stylesheet, whereas the desktop version includes an extra stylesheet that overrides it and loads more images and other furniture. This is accomplished with:

<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-device-width:1024px)"/>

This instructs the browser to only load and apply “desktop.css” if the device supports a screen width of 1024 pixels or greater.

Developing the application in this way feels very natural, with the enhanced stylesoverriding the defaults. For example the HTML for the header is just:

<header><h1>Administration</h1></header>

In default.css even this is hidden:

header{display:none;}

While in desktop.css it gets the full images and style treatment:

header{
    display: block;
    width:100%; 
    height: 60px; 
    background-color: black;
    background-image: url(shared/images/furry_white.png);
    background-repeat: no-repeat;
    position: absolute; 
    left:0px;
    margin-top 0px;
    color:white;
}
header h1{
    margin-left:220px;
    margin-top:10px;
}

Of course writing the scripts to handle different potential layouts requires some thought, but overall I think the approach is looking promising.

I think it could also be combined effectively with dynamic JavaScript binding – for example loading script libraries as needed based on device capabilities.

For example, on this site I may want to do some notifications – on some mobiles this might involve loading a library to talk to the native notifications system (on Android for example), but for the desktop version could use something like the Growl JQuery plugin depending on the browser being used.