Progressive enhancement: The right path to achieving responsive web design

Categories Web Design

Back in those days, life was simple. If you wanted to access the internet, internet explorer was the only browser available and your PC was the only ride. But things have changed now, and drastically so.

While internet explorer continues to improve itself (it’s latest release is version 11.0), Chrome, Firefox, Opera, Safari, Maxthon, Torch, Epic, Dragon are popular choices. And the choice of platform to launch these browsers are also many – PC, laptop, tablet, phone. Add to this Google Glass and Microsoft’s HoloLens, and your online experience is taken to a completely different level.

So where does that leave websites? With so many options available for visitors, you have to make sure that your website is compatible and functional on all browsers and screens. Statistics show that in 2014, more than 50% of online visitors accessed the internet through their smartphones, and this number will only grow. In other words, making a website responsive has become more of a necessity than an added feature.

When it comes to building responsive websites, you have 2 options – you can either go for graceful degradation or progressive enhancement. In this article, I will be discussing what is progressive enhancement (and why is it better) and how you can implement it in web design.

So let’s get started!

What Is Progressive Enhancement?

In technical terms, progressive enhancement is a layer approach of building websites wherein the HTML forms the core layer, followed by CSS and finally the client-side scripts (Javascript) forms the outermost layer.

From the design perspective, it can be said that progressive enhancement is a layer approach which focuses on the content. So your web design blueprint has three layers – your content at the core followed by style and interactivity. This makes the website accessible on all screens and browsers.

Layers of Progressive Enhancement:

As I discussed earlier, progressive enhancement (let’s call it PE) is a layer approach. Let’s look into the layers in a little more detail:

1

Content:

All things aside, the reason websites are created is to deliver content to the online audience. So it only makes sense that the core layer consists of content. It doesn’t matter if you can’t offer jazzy style or awesome interactivity to your audience. As long as you focus on the main goal (deliver the content), you’re in good hands.

And this is where the role of HTML comes into play. HTML tags are used to structure content and use hyperlinks to link to other (HTML) documents. In PE, you mark up your content semantically and make sure that all content is accessible through normal hyperlinks. That is to say, content that is normally available through Ajax should still be accessible in the absence of CSS and JavaScript.

Visual Design:

Visual design is what makes websites more appealing to the visitor. And this can be achieved through the use of appropriate images and fonts.

Implementing visual design is the work of styling sheets (CSS) that are linked from within the HTML document. With this approach, you can progressively enhance the look-and-feel of a design by adding support for browsers with greater features (WebKit, Firefox and mobile browsers).

Interaction:

A dynamic website is much more attractive than a static one. And JavaScript helps to enrich the website with interactive features which contribute to great user experience. Some of the things that you should keep in mind while building this layer of PE are:

  • Put all scripts in externally linked files
  • Develop unobtrusive JavaScript
  • Avoid browser-specific code and use feature detection
  • Test your web application in “JavaScript off” unit tests to determine what can’t be done without JavaScript and come up with alternative options.

How Is It Different From (and Better than) Graceful Degradation?

To understand this, you need to first understand what graceful degradation is. In this approach, the website is built keeping in mind the most advanced and capable browsers. So the website features “degrade” when the older versions are used. In other words, visitors accessing the website with older browsers will have a poor experience.

On the other hand, since PE focuses on content rather than on the browser, these websites can run on any browser without compromising on user experience. So while the former group of websites (built on graceful degradation) may become obsolete as and when new browsers come along, the latter ones (built on PE) will live on.

How Do You Benefit from Applying the PE Approach?

2

Applying PE into your web design has 4 main benefits:

Accessibility:

This is one of the most important benefits of using the layer approach. No matter what browser/screen the visitor is using, you can be sure that they will be able to access the most important part of your website – the content. This approach ensures that if there is any content that can be called by sending a request to JavaScript, it should be accessible to the readers even when JavaScript is not available. In other words, they do not miss out on anything as far as content is concerned.

Portability:

When you build websites keeping the PE in mind, you don’t build for a particular browser. This results in the website being compatible with all browsers. And such websites also take to support of CSS3, HTML5 and media queries (when available) to give enhanced user experience.

Modularity:

Dividing the website into layers makes it easier for web developers to focus on their jobs. For instance, while a team may be involved in front end development, other teams may be assigned to web design and server side scripting. Also, the website becomes easier to maintain in the sense that if you need to make patches in the web design layer, you can do so without disrupting the other layers.

Improved Performance:

The faster page loading time of websites is one of the key residual effects of PE. And here’s how. When a visitor searches for your website, the content gets loaded first, followed by the styling and then the scripts. So a minimum of 3 HTTP requests are required to load the page for the first time (which, some may argue, is not as fast as having all content, styling and scripts in one HTML document where only 1 HTTP request is required). Once the initial request is made, the subsequent requests only require content and page assets to be downloaded from the server (the rest are cached by the browser). This eventually makes for faster loading pages.

All That’s Awesome, But How Does PE Relate To Web Design?

3

As a designer, you may be well aware of mobile first web design – a growing trend in the industry. But what you may not be aware of is the fact that mobile first design is based on the PE approach.

In a mobile first design, you design for the smaller screen first, then add more features and content for bigger screens. In other words, you progressive enhance your website. Going for a mobile first design is the best way forward, and here’s why. The mobile environment is the most unstable (various browsers, WiFi or EDGE, etc.), and if your website can survive here it can survive anywhere.

Start with structuring the content of your website (make it the best that you’ve got) keeping the mobile in mind and then work your way out (styling and interactivity). For help, you can refer to Aaron Gustafson’s Adaptive Web Design and the Filament Group’s Designing with Progressive Enhancement for PE best practices.

The Future of PE

4

Innovation is exploding. We already have smart phones, smart watches, smart glasses and smart cars. And this is just the beginning. And we don’t yet know what the future holds for us. So the best that we can do is prepare our websites so that they are compatible with whatever new browser/device that innovation may throw our way. Knowledge is free, and no person should be kept away from it merely because he doesn’t have the latest browser. And that’s what PE sets out to achieve – to make knowledge accessible to everyone and anyone.

About Author: Sharon Michaels is a design specialist and her expertise lies in responsive web design. A graduate from the National Institute of Design, Sharon currently works for Art Attackk, Addictive Media’s Digital Design Division. In her spare time, she loves blogging and kayaking.

Guest Author
This is a guest post. Please see above for Author Bio.