Skip to content

Getting better at Progressive Enhancement

Alex, smart cookie that he is, wrote a thoughtful, well-reasoned, post about PE (Progressive Enhancement), in response to a conversation on The Twitters (which was in response to another post of his). I think he hits the nail on the head with "It’s actually an argument about practicality." If you're new to PE, it can take longer at first (like any new thing), and I think there are two big reasons why. Firstly it's a big shift in mindset. It requires you to think about a continuum of experiences, and to solve really hard problems. Secondly, it means writing different code. Here are some thoughts around how to make these things a bit easier.

Aside: see also Progressive Enhancement: busting some myths

Shift in mindset

PE starts with design. You need to consider the simplest possible version of the thing / feature / task. Think about it in terms of what can be done using just HTML (and a trip to the server and back); ignore CSS and JS for now.

Once you've found and figured out that core functionality, you can layer on some CSS. Think about how you can enhance the presentation with CSS, change the layout for larger screen sizes. Finally, layer on JS. Think about what extra behaviours and interactions you can add to aid the user completing their task.

Keep in mind that this layering isn't a smooth curve. Newer devices don't automatically have better CSS and JS support for various features: low cost Android phones are still being released that run version 2.3

For me, it has a lot in common with a Mobile First philosophy: solve the hardest problem first. Reduce things to their essence and think about what you can do with very little (small screen size, low browser capability, crappy network connection) to work with.

Examples

Not picking on Le Roux, but taking some of his list as ideas to bat around, here as some quick thoughts on how you could PE some more complex apps. These are tricky ones, and these ideas aren't fleshed by any means, but they do try and think about what the simplest possible version of a thing is. What is the most basic version of the experience: what can we do with just HTML?

  • image editors. There are a number of things you might want to do: applying a filter, cropping or resizing an image. For filters, you could have checkboxes or radios with the names / examples of the filter on, and an "Apply filter" button that returns the filtered image from the server. For cropping, you could display the image's dimensions in pixels and ask for the new dimensions, along with a series of checkboxes for choosing the cropping direction (to the top left, left, bottom left, etc.)
  • wysiwyg layout tools. Here you want to set the position on a grid of a content module. You could use an ordered list to represent rows, with each row having an input type="number" to set the row order. Each row could contain an ordered list of content items, and for each you could use input type="number" to set their column position and width.
  • word processors. The core functionality here is writing. Formatting is an enhancement! What could work is to use markdown for formatting, and convert that into a wysiwyg editor for more capable browsers.
  • games. Honestly, exceptionally tricky to do with PE, except for fairly rudimentary games. PE depends on having a server-side fallback for functionality. The nature of many games kind of goes against that.

Writing different code

Adopting a PE way of coding means doing things differently, which means writing code a bit differently. I read a lot and keep a list of PE-related links on Pinboard to help keep my brain in order.

Writing modular, re-usable, components and putting them into a Front-end Style Guide means you can share your PE modules with your team. Very importantly, this include future you (and your team): one you've written a PE solution to a pattern, re-use it. Huge bonus points if you share your patterns with the rest of the world, via GitHub or your site.

When looking for inspiration or ideas, it helps to look to the experts. I am a complete and unashamed Filament Group fanboy. Their South Street set of tools is amazing and worth working through in detail. Their book Designing With Progressive Enhancement should be required reading for anyone writing Front-end code. Quite a few of the code samples in the book are available on the book's page.