Web Design: Progressive Enhancement & The Power of Constraint

Facebook Twitter Google + LinkedIn

In his first post for ClickThrough Marketing, UX Designer-Developer Matt Hitches sends out a rallying cry for web developers, looking at progressive enhancement and French experimental literature along the way.

Fun fact time. The latest collated stats from Mobithinking say 22 per cent of UK mobile users infrequently or never use desktop computers to access the web – and our fair isles are ranked fifth in the world for smartphone sales, after the much more populous countries China, USA, India and Brazil.

Source: Flickr Source: Flickr

It’s worth pointing out, too, that these statistics are from 2010 and 2012 respectively. You only need to look around you to know that the country has become even more mobile-heavy in the years since.

So I wasn’t particularly surprised when, just last month, Twitter said it was rolling out a new design to reflect the look and feel of its Android and iOS apps. They are, in other words, making the mobile user experience the foundation of all their online channels.

Oh, and Google’s doing the same thing – and has been since 2010.

This philosophy is known as ‘Mobile First’, and it’s nothing new. It’s a philosophy of design expounded by Luke Wroblewski in his book, also called Mobile First, in 2011. This book built on the ideas of Steve Champeon, who came up with the concept of ‘progressive enhancement’, or PE, way back in 2003.

The opposite approach to progressive enhancement is ‘graceful degradation’, or GD, which used to be the big buzz-word in web design. Not anymore.

GD and PE: A Summary

Graceful Degradation Progressive Enhancement
Approach the design with the most technologically-capable platform in mind. In the early days of GD, this meant the latest web browsers – now, we tend to take it to mean the full-featured desktop browsing experience. Approach the design with the least technologically-capable platform in mind. For our purposes, this means low-spec smartphones.
Focus on the bells and whistles. Create an all-singing, all-dancing website for desktop users. Worry about mobile users later. Focus on the bare necessities. Use only the most essential ingredients to provide a great user experience all-round – even for those with out-of-date smartphones or tablets.
Gradually remove content and features as you develop the experience for users with smaller screens and/or less capable technologies. Gradually add content and features as you develop the experience for users with bigger screens and better technologies.


What’s the Point?

First off, let’s make my stance on the subject clear. I think progressive enhancement is great.

Source: Flickr Source: Flickr

It’s great for two reasons – it has useful practical benefits, and encourages new creative approaches.

From the practical point of view, designing for mobile first tends to result in pages which load quicker, and tends to mean that the most important factors of user experience are considered throughout the development process. The upshot? Better websites for everyone. Hurrah!

But note the use of the words ‘tends to’. All these practical benefits depend on lots of theoretical creative stuff going right.

And therein lies the rub. It’s all too easy to say the progressive enhancement approach should result in better, more UX-focussed websites. But it’s also easy to fall back into old habits and develop something that’s not too different from the website you’d produce by taking the graceful degradation approach. Or worse, get completely roadblocked by the unfamiliar approach and end up sitting on your office floor at 3.00 AM drowning in code and tears.

Indeed, you’ll have trouble finding a blog about progressive enhancement which doesn’t mention the fact that it’s really, really hard to do.

To join in the trend: yes, it’s really hard.

But does it have to be?

What French Literature Can Teach Us About Progressive Enhancement

I’m going to be controversial now.

I’m not sure how many of the murmurs about difficulties in Mobile First web design are driven by genuine problems adapting to the new approach. It might be down to something else entirely – a fear of constraint.

There’s no doubt – constraints can be scary. After all, how can reining in your scope, limiting your options and taking away your tools possibly be a good thing? Surely it leaves your creative lobes starved for inspiration?

But it’s not the design process that’s the problem here, it’s our constraintophobia.

We need to adjust our thinking when it comes to constraint. We need to see constraint as a means of fostering creativity, not preventing it.

And constraint can make us more creative. Just look at Georges Perec.


Perec was a French writer who wrote his most famous works in the 1960s and 70s. He was a member of the Oulipo group, which is still active today.

Oulipo pretty much came up with the idea of creativity through constraint, and has spent most of its existence coming up with increasingly bizarre (and deliberate) constraints for writers to use.

Perec was the most successful exponent of this philosophy, and he took on what was arguably its biggest challenge.

He wrote a great novel, with well-formed characters, an engaging plot, and incredible turns of phrase. Oh, and he wrote the whole thing without using the letter ‘E’.

The constraint forced Perec to come up with genuinely unique ways of getting round a very, very big problem – namely, not having access to the most common letter in his native French (and English, for that matter).

As web designers, progressive enhancement can present us with some pretty big problems, but nothing like Perec had to face. They’re nothing compared to the problem Perec deliberately set himself.

So let’s stop thinking of the constraints of progressive enhancement as a creativity killer. We too can use the constraints to come up with genuinely creative ways to get round problems and become better designers.

Let’s make our industry a constraint-friendly place to work.

Subscribe to our blog and get the latest industry-updates direct to your inbox