Principle of degradation and its Application to Tractis

Few people will have heard the phrase: principle of degradation. It’s a term that has only recently come into use in web application development circles. When applied to web design, this principle means that a web site will ‘degrade’ in the most ecological form when viewed in old browsers. The basic idea is that all the material that is produced for a site is viewable when you use a non-standards-compliant browser. As we lower the browser version number, we will monitor the amount of technical support.

The truth is that a well degraded site allows a user with an old browser to continue using the features of a site in a vertical form without styles, effects or customisations for the specific version of the browser. A user on a mobile device that doesn’t support CSS can make the best use of the information if it’s well degraded. The images – related to the content – will continue to be visible while the ‘decorative’ images will move to the second or third level.

The Challenge

From the outset we have tried to implement this principle in Tractis. We designed to a group of standards and not for a specific browser vendor. Although we tried to support obsolete browsers, we realised that it was a massive amount of work and that we couldn’t provide the quality we would have liked to. Designing something for a specific browser only means that the site will look horrible in others. It’s best to tie yourself to principles such as this one in order to support a wide range of usage scenarios.

The Solution

The code required to implement this principle is not the simplest. First you program in various logical layers: XHTML for structured data, CSS for the display of each structure, JS to control the events. You should be able to see the page without any CSS support – that’s the goal. A user should at least be able to read what they have in front of them. If this rule is not kept, the degradation isn’t satisfactory and implies that a user is limited. As the user understands this, using more recent versions of the browsers, they will start to receive prizes: the site will start to appear as intended full of details which we call presents. For example, upon entering a site with browsers that support hte standard text-shadow property, they can enjoy the details and shadows that the application permits.

The Effect

If you want to see the principle of degradation in action, view Tractis using Firefox, Safari and Internet Explorer 7. At a glance, the main menu of the application appears the same in all three, but users with more standards-compliant browsers can enjoy additional details. Safari users see the menu as it was intended while those of Firefox, which still doesn’t have support for shadows, will see another view that is correctly degraded. The menu remains the same it’s just that it responds to the properties that the browser supports.

Some screen shots of the menu in various grades of degradation:untitled-1_03.png

Another excellent example of the principle of degradation is the shape of the action buttons. Depending on the version and brand of browser you use, you’ll see significant differences. Again: the full detail is available in browsers that support the standard border-radius and text-shadow properties while the rest will show it as they can, degrading lower and lower. En Safari, the buttons have rounded corners and shadows in the text, giving a button shape whereas in IE7 and Firefox, they change according to the capabilities of the browser: in IE7 the rounded borders don’t exist, giving the buttons a square shape and in Firefox, depending on the version, the borders are not as round as they should be.

untitled-1_07.png

Advantages for Tractis and our users

This principle benefits both us (as developers) and our users. We don’t work to Microsoft or Mozilla guidelines but to a set of standards and we consider it more important to have a high level of standards support than to support obsolete browsers. Our code is concise and fast. It is highly scalable compared to other projects and we can deal with many of the browsers that users might throw at us. Our users receive the benefit of code that follows the standards: high download speed, support, degradation, making the correct use of resources, and more.

The next time you navigate to a site and can’t use it because it’s not properly degraded, you’ll remember the standards and this post in which we talked about the principle of degradation.

By Diego Lafuente
Saved in: Design, Tractis | No comments » | 23 January 2008

More posts in Negonation Blog