Delivering a Core User Experience Through Progressive Enhancement

Internet technology has evolved in the last few years. We have powerful computers the size of a mobile phone, wireless Internet spiking at amazing speeds, and browsers capable of many nifty tricks. But when it comes to developing websites, designers and developers often believe they must constrain their work to cater for past, current and future devices, from desktop to smartphone. This includes ageing technology and browsers unable to run the latest advancements; a computer is only as fast as its slowest component.

But, developing websites with ageing technology in mind doesn’t mean we must lower the experience of users on newer devices, to match that of the older ones. Progressive Enhancement is the best way forward.

Assuring the Core Experience

Progressive enhancement is a web development approach that can be tricky to define. Many would say the technique means avoiding making assumptions about the technological capabilities of our users; others believe it reminds us to not leave anything broken behind.

At Cyber-Duck, the approach inspires us to give all users the best experience possible. So, we ensure the core functionality or content of the product is available (and usable) by everyone, no matter the browser, device, or Internet speed. Creating a ‘core experience’ means delivering the basic service to all users, regardless of context – and even if older devices’ experience isn’t quite as polished! Alongside providing this legacy browser support, we make use of new technologies by creating enhancements for users on more modern devices, with higher capabilities.

Different devices have different capabilities. With Progressive Enhancement, we can create a core experience for all users.  

Layering Technologies

How can we achieve this balance? At the start of a project, I’d recommend identifying what the core user experience should be. Taking the page you’re reading as an example, the core experience here is the text of this article. It must load quickly, allow users to navigate easily, and have legible text. Related content, author profile, entries archive and so on are secondary to this.

Once the core has been defined, we can layer development technologies to build the page in a way to make it accessible to all users. Secondary content (and design elements like web fonts) could be loaded separately, or even phased out if the browser is too slow or not capable of displaying them, without affecting users’ ability to review the main content.

Well-written, valid HTML is a very solid language for developers to use as a base. Unsupported HTML tags or attributes won’t break a well-structured document or form on an older device. If an older browser isn’t able to recognise a newer input type like <input type=“email”> on a form, it would just fall back to a regular text input. But newer browsers that can recognise the input type would make use of this functionality, summoning an appropriate keyboard that contains the necessary elements to type emails.

Web fonts provide a second example. If they don’t display on a device, the browser will still show the content using the best possible option it can find. The same happens with CSS styles. If a property or value is not recognised in the code, or is not supported by the browser, it is simply ignored. The rest of the styles would still work as expected.

Adding ‘Bells and Whistles’

So, the basic premise of Progressive Enhancement is to add features and enhancements only for browsers that support them; simultaneously, we must make sure any additions do not break the experience of users on older browsers.

Integrating feature detection libraries like Modernizr can aid implementation. They live-test whether users’ browsers can support certain HTML5 and CSS features, such as touch, video, audio, etc. Developers can add conditional code to cover and enhance for all eventualities.

With CSS for example, the cascade nature of stylesheets is a good way to deliver enhancements. In the example below, if an older browser doesn’t support gradient backgrounds, it will ignore this line of code. Instead, it will use the previous line where the solid red background is defined:

.foo {
    background-color: red;
    background-image: linear-gradient(top, red 0%, darkred 100%);
}

In JavaScript, instead of adding functionalities that depend on newly supported features, we wrap them in a ‘conditional statement’. This technique ensures the feature will only be used on browsers that can understand it. In this example, a website would load a touch-enabled slider library after establishing if the browser can support touch events with a Modernizr test.

// First, we use Moderniser to check for touch events
if(Modernizr.touch) {
    // If touch evens are available, we load a library
    // that makes use of touch events (12kb)
    loadScript('responsive.slides.js');

    // And then run the library
    $('.slider').slidesjs();
} else {
    // If no touch events are available, we use a
    // smaller script for the slides (3kb)
    loadScript('cycle.lite.js');

    // And run the library
    $('.slider').cycle();
};

function loadScript(file) {
    // Define loading scripts function here
};

This is just a small example of what can be achieved using the right technologies in the right context. It can be extended to test any feature or screen size to further improve the effect.

Here's an example of a simple test, with JavaScript. 

Polyfills are a final caveat to consider. These libraries can bring new technologies into old browsers. There’s a key difference between this and Progressive Enhancement: polyfills try to force old browsers to support new technologies, while PE only applies advancements to those that can support them. We prefer not to use polyfills, because many of the libraries are heavy, unreliable and can have a significant impact on web performance.

Summary

Overall, Progressive Enhancement 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. At Cyber-Duck, we believe this will deliver the best user experience for all, with the least impact.