Progressive enhancement is the practice of using web techniques in a layered fashion to allow anyone with any web browser to access your content, regardless of its capabilities. This means that you are creating not just one ideal experience, but multiple less-ideal experiences, depending on who views the content, also called graceful degradation. To illustrate this, take a look at FIG 11-1.

Our unstyled experience or markup viewed in its rendered form is at the center. We can assume that all devices can show at least this level of presentation. However, in order to make sense of it we need to ensure our markup is written semantically, in other words, ensure that it can remain useful without a presentation. Next, we add basic styling techniques for our lowest common denominator devices that support both our markup plus very basic styling techniques. We continue to add layers until we reach the best possible experience on the outside.

This can be done with or without content adaptation, although my advice is to always start your project without. It’s far faster and easier to start with one code base that gracefully degrades than immediately jumping into creating multiple versions of your site.

It should be noted that you can add a desktop layer to your site using progressive enhancement. There is absolutely nothing wrong with this approach, because you built the desktop layer on top of a layer designed for the mobile context. In fact, this is something I did with the original Mobile 2.0 event site (FIG 11-2), creating a useful mobile experience, then creating multiple layers for different viewing contexts, and ending with the desktop.

The problems arise when you go the other way around, starting with the desktop and trying to create a useful mobile experience from it. Nine times out of ten, you end up with an awkward, barely useful version of your site that is both slow and expensive to load.

The following tips are tricks I’ve been using since the early days of the mobile web. Regardless of how advanced browsers have become, I still employ these five techniques for every mobile project I do:

• Always code your markup semantically. I like to keep a live preview window open so that I can see the rendered page as I code. This way I can ensure that the page is always usable, even with no stylesheet in place.
• Have a device plan. Know which device classes you intend to support before you start to code. This will influence how you code your pages.
• Have both your lowest common denominator and high-end device designs before you begin to code. Try to visualize a way to create both versions from one code base.
• Test on different mobile devices from the beginning to the end to ensure that your incremental work will display correctly in the intended devices.
• If you plan to add a desktop layer, always create the mobile version first.