23.10.08
Matt
Progressive Degradation
I love a good buzzword. Two of the more recent ones in web design are these multi-syllabic beauties. Graceful Degradation and Progressive Enhancement. They both address the issue of the unknown quantity of the end-user’s browsing technology. Are they using the latest, greatest shiny browsers or are they keeping it retro (whether out of choice or not)? Are they on their mobile phone or on their Xbox 360 attached to a 50″ HD screen? How your site appears and functions on these various technologies depends, in part, on these two techniques.
Firstly, what do these two things actually mean? Well, they are Ying and Yang of one and the same thing really. Imagine your web site is a Darwinian Evolution diagram… The one that shows the journey through time from Ape to Man, (like the one at the top of this article). At either end is a perfectly functional version of one and the same thing (albiet the modern man being more refined and the Ape being more primal). If you stuck a pin in the centre of the diagram, halfway along the evolutionary journey, took this as a starting point and travelled left (essentially devolving) this would be Graceful Degradation, losing features and abilities but still functioning. However, if you went right from the pin moving forward through time, this would be the equivalent of Progressive Enhancement, each evolutionary step gaining features and optimising.
The difference between these two techniques is wholly dependent on where you stick your pin. Push it into modern Man and there is no Progressive Enhancement to do. This is the equivalent of designing a site for Safari 3. Stick it in the Ape and there is no Graceful Degradation to do (unless you go back as far as pond-life… but that would be the equivalent of going back before the Internet). For the purposes of this article I need to ascertain where I’m sticking my pin. I’m going to say my pin has been shoved squarely into Internet Explorer 7. Therefore, minimal CSS 2 implementation, but mostly decent HTML and javascript support.
Using these techniques isn’t as simple as it first may seem though. There are many facets of a site that can have PE and GD applied to them. And even once you have employed these techniques, how do you demonstrate this to the site owner at concept stage? Let’s cover the different applications of PE and GD first.
PE and GD in design
As browsers evolve and incorporate more and more visual effects, how can designers utilise these extra tools at their disposal without alienating older browsers? When it comes to the visual elements of web sites PE is the most common technique. A simple example is rounded corners on boxes. Currently only Firefox 3 and Safari 3 can do these via CSS. If you place the correct code in your stylesheet for these, the aforementioned browsers will show nicely rounded corners on your boxes. All other browser will see standard square corners.
Herein lies the problem with PE (and GD). Something like curved corners is usually a conscious design decision taken very early on at concept stage. It’s integral to the design of the site in the same way that the background colour and the navigation are. So if you had curved corners in your visual, but you only showed them to the minority of your users once built, surely you’ve taken a key design element out of the site? Not to mention potentially baffling the site’s owner if they aren’t up to scratch with their browsing technology. There are ways around this, such as the option of going straight to HTML to demonstrate a site rather than using flat Photoshop visuals, but even this doesn’t take away the issue of a site looking potentially very different to different people. There could well be branding issues and in the case of something so integral to the style of the site I personally would choose to incorporate something like curved corners without using PE even if it does mean using graphic elements to achieve the same result.
I do think there are exceptions to my exception. Subtle enhancements that do not change the design to a large degree I feel are acceptable and of course the all time daddy of GD, alternate content for rich (Flash/Video) elements. Other than these, probably the most acceptable use of PE and GD in design is when it is used to add/remove little visual effects such as rollovers and animation.
When it comes to GD in design, there is very little need for it (again based on where I shoved my pin earlier). If I had stuck it in at Safari 3 then it would all be about GD, but all the most common browsers in use today have CSS 1 support, so unless you’re employing bleeding edge styling techniques, your site wont need too much GD.
PE and GD in functionality
This is really where PE and GD come into their own. Firstly, unlike design, PE and GD in functionality tend to be a less visible. They are certainly very rarely shown at concept stage so are easier (or even unnecessary) to sell in at that early stage. Again taking a simple example like the curved corners mentioned above, a tabbed interface is something that can be enhanced using AJAX to dynamically load content without refreshing the whole page. With our pin in IE 7 this would be the default behaviour (assuming Javascript is turned on, but this would then rely on GD in the same way an older browser would). So GD would be employed here. You need to ensure that for the less evolved browsers the content is accessible. This is simple enough as the tabs would (if coded correctly) revert back to standard links that would refresh the whole page with the new content in place. Not as slick, but still perfectly acceptable. This is exactly how the tabs on our very own home page work.
It’s pretty apparent that you need to use these techniques now and even more so in the future as the web matures along with the browsing technology involved in viewing it. For a lazy designer/developer it is too easy to ignore these techniques and in the process creating one of two things.
- A web site that is stuck in the past, visually unappealing and functionally stagnant or;
- a site that has all the bells & whistles that just disintegrates on anything other than their favourite browser.
A smart designer/developer uses these techniques to create something that is accessible, solid and beautiful and can rest easy in the knowledge that no matter who looks at the site in whatever situation they’re going to see something that quite simply works on every level.
