What does graceful degradation mean

This is where both graceful degradation and progressive enhancement come into play. So, graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers.

This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them. Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.

In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

Arguably links that allow users to print the current document are useless — hitting the printer icon in their browser does the same thing. User testing however shows that as a last step in a booking process eg on an airline web site they are a good re-affirming call to action. Users feel in control and get the sense of finishing what they started. In JavaScript it is easy — the window object of the browser has a print method that can be called to start a printout.

Probably the most common way of doing that is by using the javascript: pseudo protocol:. This works when JavaScript is available and enabled, and the browser supports the print command.

However, if JavaScript is not available for example on some mobile devices then this link will not work — clicking on it will do nothing at all. This creates an issue because, as the site developer, you promise your visitors this functionality.

In order to make this less of a problem site developers normally go for the graceful degradation approach: tell the user that the link may not be working and what the reason for that is, and maybe even suggest an alternative solution to achieve what they want to do. A common trick is to use the noscript element. Anything inside this element will be shown to the end user when JavaScript is not available. In our case this could be the following:. The main difference between the graceful degradation strategy and progressive enhancement is where you start your design.

If you start with the lowest common denominator and then add features for more modern browsers for your web pages, you're using progressive enhancement. If you start with the most modern, cutting-edge features, and then scale back, you're using graceful degradation. In the end, the resulting website may likely deliver the same experience whether you are using progressive enhancement or graceful degradation.

Realistically, the point of either approach is to create a site that works great for modern browsers while still featuring a usable experience for older web browsers and the customers who continue to use them. One of the reasons many modern designers don't like the graceful degradation approach is because it often turns into a demand that readers download the most modern browser for the page to work.

This is not graceful degradation. If you find yourself wanting to write "download browser X to get this feature to work," you have left the realm of graceful degradation and moved into browser-centric design. Yes, there is undoubtedly value in helping a website visitor upgrade to a better browser, but that is often a lot to ask of them remember, many people do not understand about downloading new browsers, and your demand that they do so may simply scare them away.

If you really want their business, telling them to leave your site to download better software is unlikely to be the way to do it. Unless your site has key functionality that requires a certain browser version or above, forcing a download is often a deal-breaker in the user experience and it should be avoided.

A good rule of thumb is to follow the same rules for graceful degradation as you would for progressive enhancement:. With this process in mind, you can then go out and build the most cutting-edge design you can! Just make sure that it degrades in less functional browsers while still working.

One question that many web developers have is how far back in terms of browser versions should you support? There is no cut-and-dry answer to this question. It depends on the site itself. If you review a website's traffic analytics, you will see which website browsers are being used to visit that site. If you see a notable percentage of people using a certain older browser, then you will likely want to support that browser or risk losing that business. If you look at your analytics and see that no one is using an older browser version, you are probably safe in making the decision not to worry about fully supporting that outdated browser and testing for it.

So the real answer to the question of how far back your site needs to support is: "however far back your analytics tell you your customers are using.

Actively scan device characteristics for identification. The principle of graceful degradation can also be used for mobile optimization. First, the desktop version of a website is developed and then, step by step, the functionality and design are adapted so that the page can also be displayed on mobile.

Graceful degradation should ensure that web pages with new functions can also be used by older browsers and mobile devices. Websites therefore only provide information that can be used by a specific browser or device. This means that regardless of browser or device used, users will at best hardly experience any impairment of user experience. As a result, users are more likely to stay on a site for a long time and less likely to leave it because it is unusable. In this respect, graceful degradation is also important with regard to search engine optimization of a website, since bounce rate and dwell time are important ranking factors for search engines such as Google.

Websites that are designed with graceful degradation provide suitable alternatives to modern website features that are not compatible with all browsers and devices. This ensures that the website can also be used with old browser versions although the functionality may be limited.

Progressive enhancement is the opposite of graceful degradation as it starts with the basic functionality of a website for all browsers and devices. After that, modern features are added which improve user experience for higher browser versions.

Graceful degradation starts with the latest browsers and devices and then progressively checks older versions in order to find out which features should be limited so that the site can still be displayed. Graceful degradation ensures that a website can be displayed in older browsers and on mobile devices and thus improves usability. Jump to: navigation , search. Figure: Progressive Enhancement vs.