Progressive Enhancement - CSS3

Progressive enhancement is a method of developing web pages where you first make them work and look decent in base-level browsers and devices, and then layer on non-essential, more advanced CSS and JavaScript enhancements for current and future browsers with better support. For example, you may build a form in plain, semantic HTML that looks fine without CSS available and works without JavaScript enabled, and then enhance its appearance with CSS and its usability with JavaScript client-side validation, adding to serverside validation you already have in place. The goal is to create the richest experience possible for everyone by taking advantage of the capabilities of modern browsers while still making sites that are completely usable for everyone. The book Designing with Progressive Enhancement sums it up nicely:
Progressive enhancement…aims to deliver the best possible experience to the widest possible audience—whether your users are viewing your sites on an iPhone, a high-end desktop system, a Kindle, or hearing them on a screen-reader, their experience should be as fully featured and functional as possible.

While this noble goal of giving as many people as possible the best experience possible sounds great, you might be able to achieve it without using progressive enhancement techniques. You could provide workarounds for older browsers to make them match the appearance and behavior of the site in newer ones as closely as possible.

But this isn’t usually wise. Using progressive enhancement instead, where the site’s visual richness increases in ever more modern browsers, is usually better both for your users and for yourself.

For one thing, it takes a lot of work and time to add hacks, workarounds, emulation scripts, and other techniques to try to get an identical appearance in less capable browsers. Even if you do finally achieve a near identical appearance—at least with the limited set of user settings you test with—what’s the gain for the user? All that time you spent trying to make IE act like a browser that’s 10 years newer could have been spent adding accessibility techniques, performing usability testing, or making other site enhancements that would actually help the users, instead of just making things look a little bit prettier.

Besides, as we mentioned before, it’s impossible to make your site look identical everywhere, so even if you work hard at this goal, you’re still going to come up short. So if the site is going to look somewhat different no matter what, why not use CSS3 to make that difference look stunning in the latest browsers? Some CSS3 techniques are simply not “emulatable” in non-supporting browsers. By using progressive enhancement, you don’t have to leave out these techniques, dumbing the site down for everyone. There’s no reason users of newer browsers should have to miss out on some of the really great techniques CSS3 has to offer, simply because some people can’t or won’t upgrade their browser. Instead, get older browsers as far as you can, and then keep on improving and pushing the boundaries of the site for newer browsers. This way, everyone gets the best possible site. As time goes by and users upgrade and browser support improves, more of your visitors will see more of your enhancements, effectively making your site better over time without your doing a thing. You just build it once, and it gets better and better over time.

Most people will never know that your site looks different in different browsers and devices, as regular people don’t go around scrutinizing the details of a design in multiple browsers like we obsessive web designers do. Even if they do use multiple browsers to view your site, it’s unlikely they’ll give the visual differences much thought if those differences don’t affect how easily they can use the site (which they shouldn’t, if you’re doing your job right). After all, someone who is viewing your web site on IE 8 at work, Chrome on his home laptop, Safari on his iPhone, and Opera on his Wii is probably pretty used to seeing some differences pop up between all these devices.

Let Us Put it This Way...
We are a big fan of metaphors, not only in everyday life, but in my work. We find they’re a good way to explain a technical concept to clients or convince them of the importance of some usability change we want to make. So, even if you’re already on board with progressive enhancement, perhaps you can use one of the following metaphors on a hesitating client or boss.

Let’s say you ask your selfless spouse to make you a cheeseburger for dinner. When he or she brings the cheeseburger to the table, it has all the components it needs to earn its name: a bun, a juicy hamburger patty, gooey melted cheese, maybe even some ketchup and mustard. It tastes good and gets the job done.

You have no reason to suspect that your next-door neighbor serves cheeseburgers that come not only with all the same components as your own, but also with lettuce, tomato, bacon, caramelized onions, and a fried egg. None of these are necessary parts of a cheeseburger, but they’re delicious enhancements.

It can work similarly with web sites. A bare-bones but functional and clean-looking web site in IE 6 is like a basic cheeseburger. The web site does what visitors expect it to and has the content they need. An IE 6 user has no reason to suspect that Firefox users are seeing something more fancy, enhanced with CSS3. Unless something looks truly broken or incomplete in a less-capable browser (like if your burger got served up with no patty)—in which case you should fix it—your users are not likely to ever know that things could look better if they were using a more advanced browser.

If you’re a vegetarian and the cheeseburger metaphor doesn’t do it for you, just think about a cup of high-quality but plain ice cream versus one with whipped cream, hot fudge, and sprinkles added. Or perhaps electronics is more your thing. Whether you watch TV with a small, old tube TV or with a flat-screen, high-definition LCD screen, you’re getting the same programming. It just looks a lot better on the LCD TV. It’s silly to expect it to look the same on a device that is very old— like IE 6, released in 2001.

Another thing that is silly to expect is for a Blu-ray disc to play in a VCR. It was never meant to, as VCRs came out way before Blu-ray discs were developed. It uses newer technology to add better quality and more features than VHS tapes offered. You still get the movie on the VHS, as you wanted, but the movie looks better and you get extra bonuses on the Blu-ray version. Everyone gets the movie they wanted, and owners of newer technology get a little something extra now instead of being forced to wait until all the VCRs die out.

Similarly, when someone presents a CSS3 technique, it doesn’t make sense to ask if it works in IE 6, which came out long before CSS3 was developed. As long as the web developer is providing the same content to IE 6, and the CSS3 technique doesn’t actually make the site worse in IE 6, it’s fine to use a design technique that not everyone can see.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

CSS3 Topics