graceful degradation/and how it tricks you
When Firefox finally bloomed to challenge the reign of IE6, it provided the first spark for the current browser wars. To rise to the challenge of properly displaying our websites in the emerging range of browser, two new concepts were born: progressive enhancement and graceful degradation. The latter became one of the key concepts of modern-day web development, which means it's time to re-evaluate its validity.
what is graceful degradation
Like most standing front-end development best practices, there's a certain level of vagueness surrounding the definition of said best practice. In this case, it's the definition of graceful that is not quantifiable, being a judgment that greatly relies on the ideologies of the person passing it. After all, grace is a very subjective quality, quite impossible to capture in a definite measure. And even if you could come up with a scoring system, other people bearing different priorities and ideologies would dismiss it as invaluable right away.
If you look at the practical bottom line though, graceful degradation adapted the meaning of something that still functions and does not look broken in older or less capable browsers. And as we are developers by nature, it also means that less effort equals more grace. It's why automated degradation (think superficial visual effects like drop shadows or rounded corners) are quite popular these days. Without any extra effort they degrade quite well in browsers not supporting these styles. Whether this degradation is actually graceful is an entirely different question.
The concept of graceful degradation is something I happily support, but the current translation makes things a little too easy for us, developers, while safely ignoring the well-being of our visitors. It has become an excuse for rapid development and sub-par global support of our website in older and less available technologies, something the original concept of graceful degradation was actually supposed to counter.
the slippery slope
The hollowing of graceful degradation started when designers began countering the notion that a design should be rendered pixel-perfect across all browsers. Early discussions were mostly purist affairs, explaining why sub-pixel font rendering and such made it inherently impossible to achieve pixel-perfect designs. While I whole-heartedly agree with that, it's a big stretch going from that to some of the degraded designs we see today.
Another obvious factor is the rise of html5 and css3, which provided us with tools to speed up our development and made it less painful to implement some of the more complex designs in modern browsers. Graceful degradation became a common counter for extended IE development as designs would not look broken in IE, just bare-bones. It gave us a quick way out, bypassing the crap IE usually gives us when working on a site. To make it even better, we were adhering to industry standards by doing so.
providing the best possible experience
These days, graceful degradation is not about providing the best possible experience anymore. It's about delivering something that is passable in older browsers so clients won't bitch about bugs and errors reported by IE6 users. It's about designing the best possible solution for the most advanced browser, and breaking it apart from there. While I do believe some people go through the trouble of investigation the client's user base first, many others don't and simply assume that what they're doing is okay for most people. Would they be forced to look at their own designs and implementations all day, they would probably change their mind quite quickly.
The result is that you're developing an optimized version for not even 50% of the web's users, while not bothering to optimize the degraded version for the rest. Sure we are now spending our time on responsive designs, but in the end it's only about 5% of our audience that will ever experience the benefits of that. What about the 50+% IE users who're looking at a bare-bones design of your site every day, or are missing implementable features that just didn't make it because it was too much trouble for you?
In contrast, a concept like progressive enhancement seems to facilitate the optimized experience for all parties much better. It starts from coming up with a solution (be it interaction design, visual design or technical implementation) for all (major) parties, and improving further on that for those who have the capabilities. It might not reach the excellence of a design exclusively made for the most modern technologies available, but it has a much better chance of providing a more pleasurable experience for people all-round.
conclusion
I'm definitely not against graceful degradation. The concept is sound and it provides us with an worthwhile technique to deliver a website that can match modern standards. But the current translation of the concept is a little too easy-going and conflicts with the initial ideas behind the best practice. As (web) developers we live in a sheltered IT world full of fast computers, Apple gear and the most recent updates of our browser, but in the end it's the site stats of a client that counts.
If your target audience consists of 90% smartphone users, go right ahead and ditch those rounded corners, drop shadows and gradients for IE. But if more than 60% is still using IE8 or lower, think why you bothered to introduce these elements into your design, consider the loss of these additions and try to figure out whether you're not just making a crap version of your design simply because you can't be bothered to provide a better experience for users that are not you.
Graceful degradation is no excuse to provide sub-optimal browsing experiences, and if by now the concept is too far gone, maybe it's time to devaluate its meaning to just degradation and start pushing progressive enhancement once again.
Comments
Roeland
You're absolutely right. Web developers are much like the upper class in society: they ignore the existence of poverty because they don't see it :) (absolutely no pun intended with the similarity between IE and poverty ;) ).
Although, the discussion between graceful degradation and progressive enhancement feels a bit like "the glass is half empty or half full". It depends on how you look at it, I guess. For me, it doesn't matter much if it's degradation or enhancement. I always evaluate if I can be proud with the result, even in IE6/7/8. If you can, you have done a good job.
Niels Matthijs
In many cases it is indeed just a matter of perspective. But at least progressive enhancements seems to start with the lowest common denominator. Your primary focus is making something that works for everybody, rather than making something that works for only a select few. It feels more in sync with the ideology behind the best practice.
The problem with graceful degradation is that currently everyone is using the concept to their own advantage, so it lost much of its initial value over the past few years. Progressive enhancement is still quite pure in contrast :)
Greet
I think a better solution to this problem is not thinking about how designers/developers can accommodate users with a crappy browser, I don't believe that is part of their job. What we should be doing is thinking about how we can get users to switch to better browsers and/or how we can convince Microsoft to make IE less crappy. It probably sounds naive, but it's how I feel. I've just had it with clients placing the blame with designers/developers instead of thinking about the browser they are using, and I've had it with IE, always lagging behind, even on browsers that have only been around for half as long as IE has.
BJ
And 'Greet' comes in to exemplify the subject of your excellent article, Niels!
Designers (I am one) by their nature tend to have the latest version of the browser de-jour (often on a minority platform like Mac), read up on the latest CSS3 Gradients techniques and itch for an excuse to try them out before they have decent market support, or even standardisation! "Graceful degradation" is that excuse.
Graceful degradation was advocated as a means of dealing with minority browsers used by a small % of the particular site's target user base - say <10% total - where effort vs user impact starts to reduce exponentially. It is NOT about flicking two fingers at IE, typically making up 50%+ of the user base, just because the blogsphere says "IE sux".
Designer-developers with this mentality have short memory spans. Rewind a decade or so and we had the same issue with IE vs Netscape - heavily funded IE4/5 was constantly bringing out the latest whizzy features (XmlHttp, effect filters, superior DOM scripting, etc), so we quickly ended up with a split web of "Best viewed in IE" sites. Arguably there was at least justification for it back then - IE held 80-90% of the market.
The fact that the same "screw stupid users" mentality has reared its ugly head over the past few years, yet this time the scorned browser is used by the majority of the population worldwide, is indicative that some designers need a serious reality check.
Niels - you hit the nail on the head by saying that optimising for browsers used by a fraction of your users is foolish. I apply that equally to old IE versions - if you have stats that show only ~7% of your users use IE6 (as we see), by all means limit the effort you spend on it. But anyone that thinks treating all IE users (half or more of your visitors) as second class citizens is a sensible business decision needs their head examined!
Niels Matthijs
The main thing for me is that it's not even about IE users in particular. Last week I read about Amazon releasing a tool for online reading that lacked Firefox support. That simply boggles the mind.
Even modern browsers are lacking (full support) for some functionalities. Apparently sub-optimal support for local storage in FF caused Amazon to forgo the Firefox users with their latest tool (which is not all that strange, considering they were mostly targeting mobile Apple devices), but this is a prime example that we're indeed re-entering the era of "this website is optimized for browser X".
And even if it's only 7%, if you get 1000 visits a day it's still worth making sure those 70 people can at least enjoy the things you're offering on your website. The thing with websites is that you don't see these people, nor do you get any idea of how they experience your website, but who in their right mind would deny 70 customers to their shop on a daily basis? The reality is that by not properly accommodating those with less capable browsers, you're missing out on potential success.
BJ
Agreed Niels; if use of a technology causes large swathes of your users to be excluded, it's a dumb choice of tech. RE "properly accommodating those with less capable browsers", I'd make the comment that:
a) not yet having implemented technologies that haven't yet been standardised (as is the case for much of CSS3/HTML5) doesn't IMO constitute a "less capable browser". Does Firefox's lack of ActiveX component support make it "less capable"? I think not; the same for CSS3 Transitions, CSS3 Variables et al, which are at this stage still proprietary extensions under review and subject to significant change.
b) it's the "properly accommodating" bit that Mac-wielding, CSS3-happy designers don't appear to get: no, serving up content with half the styling missing (rounded corners etc) to 50%+ of your visitors is not "properly accommodating", no more than it was when people served up unstyled HTML to Netscape whilst it still had 20%+ marketshare.
For example, rounded cornershave be used within site designs virtually since the web began, and often underpin the design's look and feel. Yet suddenly they're apparently too high tech for IE8 and earlier (max version for XP users and making up around 45% of global users according to Net Applications), despite there being plenty of automatic polyfills to provide "border-radius" support.
It's lazy, impatient and a disservice to non-technical clients, who are the ones that suffer if swathes of their visitors are turned off. OK, rant over! ;)
Aaron Gustafson
Great post Neils. I think one way I like to compare the two practices is that all progressive enhancements are graceful degradation, but not all graceful degradation is progressive enhancement. It's really about focus. Design and build a site that serves the content and your users, no matter what technology they are using to access it. Period.
Niels Matthijs
Awesome quote, I hope you don't mind me using it once in a while :)
James
You comment about being optimized for less than 50% of users misses out of the point of that percentage inherently growing over time. People do eventually upgrade browsers, it's just sometimes a long road to get there. It may take awhile, but for sites that don't expect to be upgraded visually for a long time, like say a small business site, something that might exist for 2, 3, 4 years and still stays current with regards to web standards is pretty much the reason web standards were created.
At the end of the day sacrificing rounded corners in IE doesn't make me lose sleep.
krzychukula
How You understand "optimized" for ie6-8 websites? Creating rounded corners via images + boilerplate html and css?
For me this is "lighter" site without them. I have seen sites that using Your approach, make "everything" work and look the same. Pages are great and usable in newer browsers, but ie6 and even 7 were slow. Many images, selectors etc. As I think about it it would be better to serve them simpler version, and use html5 and css3 for the rest.
I am just learning more about. Lately I've read: http://www.impressivewebs.com/browser-performance-pickle/ I can agree with autor.
On the other side: by making most of the sites horrible for old IE we are forcing them to switch (to another site... or browser).
You are right that we should care about those users somehow.
Addyson
On the other side: by making most of the sites horrible for old IE we are forcing them to switch (to another site... or browser).