It's Time To Embrace Responsive Enhancement

Responsive enhancement can help developers worry less about the specific nuances of legacy browsers such as IE8, allowing them to put performance and core functionality first.

Having spent the better part of the last decade or so keeping up with the Internet as it continues to evolve at a lighting pace, I know how dangerous it can be to settle into rhythms, especially when it comes to legacy browser support. Whether it’s conditional markup and CSS, or polyfills and libraries; tools and tricks that we become comfortable with and assume are a mandatory part of our workflow.

Why we bother

While a lot of front end developers, particularly freelancers, may elect to exclude specific legacy browsers or devices from their scope of work, many agencies and the like will continue to provide cross-browser compatibility as far back as IE8, or even older. Which isn’t a bad thing. Some corporations to this day are still holding a tight leash on running Windows XP and Internet Explorer 8. According to StatCounter, over the last year 6.51% of the U.S. still use IE8, while Asia has now dropped to 4.95%. For a browser that’s over 6 years old (decades in Internet time), that’s pretty impressive.

Why we shouldn’t

Performance

Providing support for IE8 or lower requires developers to implement additional markup, CSS, and libraries for pretty standard features you’d expect from a modern web site; which may not be huge, but will certainly make your code more bloated than it needs to be, and potentially effect overall load time. And while for the most part it won’t effect modern browsers due to conditional commenting, it still puts the burden on those legacy browsers.

Performance is the key to a great web site, particularly with the common knowledge that mobile has overtaken desktop browsing within the last two years. Based on research, nearly half of users expect a site to load in under 2 seconds, and will abandon a site that isn’t loaded within 3. The ideal and, somewhat ambitious load time today is under a second, and any server response times you can cut down on or bytes you can shave off on images, style sheets and javascript files is going to make a difference.

Time

It also goes without saying that catering for time spent on legacy browser nuances could be time better spent on embracing new features. Often, I’ve seen cases where cross-browser issues that come up during QA require anywhere from a day to several days to resolve, and it seems like the majority of issues occur in IE8.

Support is dwindling fast

Way back in 2012, Google discontinued support for IE8. “After [11/15/2012], users accessing Google Apps services using Internet Explorer 8 will see a message recommending that they upgrade their browser.”

In August 2014, Microsoft also announced dropping support for IE8. Interestingly some of the Microsoft websites, including MSN, break rather badly in IE8!

Solutions

There’s two ways we can approach support. Either we A) Build a site with all the bells and whistles we wish it could have, check for cross browser issues and fix them accordingly to get it consistent. Or B) Let the browser decide what it can handle, and with this in mind create responsive enhancements to frameworks and components along the way that ask the question ‘Can you handle it?’, and provide perfectly acceptable fallbacks if it can’t. The latter solution requires us (including the client) to accept some compromises, and to put functionality and performance first.

What’s responsive enhancement?

While not exactly a new train of thought, it’s slowly becoming an adopted principal among developers. (Quick shout out to Jon Yablonski for introducing me to this concept) There’s a great article on this topic by Jeremy Keith where he makes a case that websites do not need to look the same in every browser.

In a nutshell, the key is to decide what the basic core functionality is going to be for any given component, and use a simple Cutting The Mustard test to see if it can handle certain enhancements. Here’s an example that I’m using on this very site to check for 2 important features:

if (!document.querySelector && !window.addEventListener) {
	return;
} else {
	classie.add( htmlTag, 'cutsthemustard' );
	// Enhanced functions //
}

The point is to provide core functionality across the board, liberating you from the rigors of specific legacy browsers or devices. With that philosophy, you can continue to enjoy the benefits of the latest enhancements that modern browsers will excel at.

With there being so many devices, browsers and other variables out there, the only way to continue to push for better performance and not worry about the specifics of compatibility is to roll with responsive enhancement.

By Christian Miller  |  Follow me on Twitter