footy-score-phone2 I’m sitting here writing this blog post on a laptop. In between edits, I’m checking the football results on my mobile phone. I could use the browser on my laptop, but what will inevitably happen if I do that is that I’ll read the results, then the match report, then probably see a link to an interesting article and read that. From there, I’ll probably look something up for more information and before I know it, I’m knee deep in Wikipedia, reading about bridges in Norway, and this blog post has been consigned to the dusty corner of my hard drive where the twenty or so other “in progress” articles I’ve started in the past now reside.

Sound familiar? Thought so. But my point is, it’s more and more common these days for someone to quickly pull out their phone to look up some information, rather than get out their laptop, or turn on their computer, because people want quick, easy access to information. Like your website.

And it’s not just mobile phones that people are using to get at information online. In 2011, 20 people tried to signup to New Zealand-based bank, Kiwibank using a PS3. A pretty bizarre choice of device to attempt that, but, still, it happens.

sad-dog2

As web developers, it’s our job to ensure your website works on as many devices as possible. So how do we do that? We could sit down and test on every device and web browser we can think of, but we’re not going to. Primarily because it would take forever, probably doubling the time it takes to deliver a project. And also, if I stay at work doing that, my dog will get lonely.

No, the answer is this; progressive enhancement.

Progressive enhancement allows us to build your site around a “lowest common denominator” and work upwards to add features. Something that is extremely useful and, in some cases, quite necessary when building mobile-first. This enables us to focus on two core aspects – content and key functionality. As we step up into more modern devices and browsers, we can begin adding features and taking advantage of device capabilities to improve the user experience.

So, initially, forget fancy carousels (though you probably should anyway), tabs and accordions; forget fancy animations, HTML5 canvas charts and complex AJAX applications. Focus on serving up your content to your users – that’s why they’re here after all. Only after this, should you start adding the bells and whistles. Then we can start getting clever.

A key part of progressive enhancement is feature detection. Using Modernizr, we can test for virtually any feature and trigger classes based on this support. We can also conditionally load CSS and Javascript based on any of those tests too, enabling us to improve interactions and aesthetics as those features are supported. The added bonus here is that this allows us to offer better conditional support than we traditionally could for those Dickensian browsers that just refuse to go away, such as IE7.

It’s not just desktop browsers (read “IE”) that cause these headaches. Moving back to the mobile, some early Android devices come loaded with an absolutely terrible default web browser. As do some Blackberry devices. Even older iOS versions sport browsers lacking in support for features that are commonplace everywhere else. But why should we avoid using new technologies just because only a few browsers / platforms support it? If everyone did that, nothing would ever progress. Instead, we use progressive enhancement to ensure the important stuff, your content, is always accessible to the user.

I’ve only scratched the surface here, but progressive enhancement can have a drastically positive effect on your website. From improving usability and user experience, through to improved accessibility, performance and much more.

So, when the time comes to redesign your website, consider pushing the boundaries a little. Don’t be held back by trying to support aging technology. Use progressive enhancement to optimise the experience for your users, regardless of how they’re accessing your website. It’ll save you time and money, and I get to go home and feed my dog, for which she thanks you.

Subscribe to our stories 

Antony Doyle

About the Author

Ant is a senior front-end developer for Zengenti’s Coach House team. He builds, and customises websites for clients, and creates new features for large websites. His background includes two bachelor degrees (network computing and English), and extensive front-end development.

More stories from Zengenti