Progressive Enhancement

Let’s talk about mobile web development some more! The principle of progressive enhancement is a general principle of front-end web development with wide applicability. Because you have a wide range of capabilities in mobile browsers, the principle is very important in this space as well.

So what is “Progressive Enhancement”? It is the practice of building a web page (and can apply to Css, Html and JavaScript) that works broadly, but with enhancements for more advanced browsers. Perhaps an example is in order. Note the following:

In fact, that rectangle might be so cool that it isn’t a rectangle at all. On most newer browsers, you should see something like this:

On not as awesome browsers (in this case IE 9), you may see something like this (or worse, because this is actually pretty close).

Here is the css:

<style type="text/css">
    #_rockinsamplesquare
    {
        background-color: rgba(240, 140, 240, .2);
        border: solid 1px #555;
        border-radius: 20px;
        box-shadow: 5px 5px 5px #AAA;
        font-family: helvetica, verdana, sans-serif;
        font-size: 1.3em;
        font-weight: bold;
        padding: 20px;
        text-align: center;
        text-shadow: 0 0 20px #000;
        max-width: 450px;
    }
</style>

The basic idea behind progressive enhancement is that some things are not crucial for an app/site and if they are not, progressively enhance the thing so that better browsers can have a better experience. But the key here is that older browser users don’t suffer. They still get to read the content or use the app, whatever the context. They just may not get the same experience as someone else.

I remember employing this on a feature we launched when I was on the international team at work. We had a fancy new advanced search page that we wanted to try out. One (very small) part of the design included a portion of the page that had rounded corners. The old school pre-Css 3 way of doing this was to use images to round those corners off, but a) that seemed boring and b) I figured it was too insignificant of a “feature” (if you could even call it that) to spend time on, so I rounded the corners with Css. Did it look better with rounded corners? Maybe a bit. Did it really matter if someone viewed the site in IE 6 and didn’t see the rounded corners? Not at all. I saved time, had a less annoying task and still created a good enough experience for everyone, though it differed between browsers. This is progressive enhancement.

The principle could also be applied to features. For example, you could use the newer application cache features of Html 5 to enable offline access to some content on your site for those who have it. Browsers that lacked support would simply not be able to browse the site while offline, which is normal behavior anyway. Assuming this was not a key feature of your website, this is another good example of progressive enhancement.

Next

What is next? We are going to talk about the problem of splitting your markup to support desktop and mobile.