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:

Web version of my wookie dashboard showing widgets arranged against a colourful background

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

Mobile version of the same site - but only one widget displayed at a time, along with controls for selecting a widget

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.

About these ads
This entry was posted in apps, development, javascript, mobile, widgets. Bookmark the permalink.

3 Responses to Adventures in progressive enhancement

  1. Pingback: Widget development | JISC W2C Project Blog

  2. Pingback: Progressive enhancement and Graceful Degradation « Pilar’s blog

  3. Pingback: Homework 1: Graceful Degradation & Progressive Enhancement « xIJinZ's Blawgs

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s