• The web industry evolves quickly and over time, concepts and methodologies change, or more often, get refined and improved upon.
• The underrated concept of progressive enhancement isn’t actually that new but it’s becoming increasingly important to conversion optimisation.

So why is progressive enhancement so important?

With such rapid evolution, technologies and techniques come and go; today’s cutting edge browser can quickly become tomorrow’s Internet Explorer 6.

With no way to force browser upgrades and companies and individuals often unwilling to change their working environments to satisfy developer requirements, we can only rely on extolling the virtues and benefits of newer browsers in a hope that the user chooses to change.

However, with users not always being in control of such choices due to corporate system permissions, a lack of technical ability to upgrade, or if they are using special assistive technologies, this is not as easy as it would first appear.

So if attempting to force users to upgrade isn’t an option, how do we work around the more restricted users our website may have to ensure they receive a suitable experience?

That’s where progressive enhancement comes in. It makes it possible to set a base-level of user experience for most browsers and then add more advanced functionality when or if a browser supports it.

With the web originally being designed to be used by any device at any location, this approach allows us to cater for all of your website’s users, not just those using common or modern devices.

So what exactly is progressive enhancement?

Progressive enhancement is a methodology used by web developers that enables them to build great website experiences while compensating for issues that arise from content being accessed across multiple user agents and browsers.

It allows everyone to access the content even at a basic visual and functional level and only providing enhanced versions to those with more advanced devices or browsers or even greater bandwidth.

How does it work?

For progressive enhancement to be successful, a number of key principles need adhering to:

1. Use clean, semantic HTML
2. Use CSS correctly
3. Make JavaScript available to user agents (a line of text that identifies the browser and operating system to the web server) capable of using it to enhance the user experience
4. Establish a solid baseline of functionality and appearance of a website and then increase the richness of the user experience dependant on the device and browser used by the user.

Don’t be confused…

Progressive enhancement is frequently mentioned alongside graceful degradation, another development methodology which at first glance appears to be similar but it is actually quite different.

‍

Graceful degradation allows you to build your website with a certain level of user experience in more modern browsers and devices, but it will also degrade gracefully to a lower level of user experience in older browsers using fallback solutions.

This is often not an ideal experience for your visitors but does still provide them with basic functionality to use your website. That is why progressive enhancement is preferable.

Let’s look at an example

How often have you visited a website on your laptop or desktop computer and seen a similar box to the one below asking you to share your location?

‍

While this technology can work on websites, it can’t work on all devices or at least not reliably. Laptops and desktops typically don’t have the hardware available for this to work, hardware items like GPS, accelerometers, gyroscopes, and compasses are largely the mainstay of mobile devices.

For it to work on desktop, the website would be relying on your IP addresses location, which is likely to be in the general vicinity of where you are located, the same town perhaps. Whereas on a mobile device, it can be accurate to within a few feet.

Depending on the need for your location on the website, it may still be accurate enough to work as a store locater for example, but it wouldn’t be able to accurately tell you which store is the closest. This would be best catered for by listing nearby locations for all devices, but, for mobile devices, or those devices equipped with the necessary hardware, show which is the closest and even how far away it is.

This is just one example of using modern techniques but catering for those with different devices and capabilities to ensure they all receive a good experience and are able to get the information they require, in our case, where the nearest store is situated.

So why does this matter to me?

When looking at analytics data and researching how we can improve the websites we work on, we’re seeing an increasing trend of older browsers not giving the same experience as newer ones and in some cases, simply not working at all.

This is tantamount to closing the door in the face of a potential customer on e-commerce sites so it is clearly not good practice—especially if you’re doing this to a significant audience.

Essentially, progressive enhancement is about developing your website to cater for “all” of your users not just those using the most common devices. Knowing your user is vitally important.

If you build a website that only works in the latest browsers or devices and a large portion of your visitors are using older versions or obscure browsers where the experience is less than ideal or worse, doesn’t work, then you are likely losing potential customers almost immediately.

Building your website with progressive enhancement in mind is the safest way to make good use of new technologies. By defining, developing, and building upon a core experience, the approach can ensure users will receive the best functionality possible for their preferred platform, from older right up to cutting-edge devices.

Read on to… How to use the anchoring effect to win more business