Saturday, March 06, 2010
Progressive Enhancement & Graceful Degradation
Progressive enhancement and graceful degradation are not two forces opposed to each other, but are both ways of preparing your sites so that no matter what user agent (desktop, mobile device, etc) or browser version, your site visitors will have access to the content while keeping your code on the bleeding edge of technology. There are always new enhancements in modern browsers that are exciting, and fresh ways to display content, but using them would sometimes be like setting up a radio station in Antarctica. The penguins don’t listen. The trick is to enhance your sites slowly and gracefully, allowing users with older browsers access to your content and giving folks with newer browsers some added benefits.
This begs the question: How far back do you support? This all depends on your audience. If 20% of your traffic is coming from IE5.5, then it would be wise to go back that far (yikes, that would be a nightmare). It ultimately depends on your target audience and your known traffic stats. Sites targeting Mac users have life a smidgeon easier since IE6 is not as much of a threat to their equilibrium (unless they are web devs). Even in this instance however, one must be sensitive to the many people who are still stuck using IE6 at their day jobs and pining away reading about Mac stuff.
A recent example...
In one of our recent builds, H. D. Smith, we decided to make use of a couple of different “new” tricks of the trade: HTML5 and CSS3. There is a bit of geekiness in just wanting to get our hands dirty in the latest trends and familiarize ourselves with them, but even more importantly, we wanted our code to be lean and easy to maintain.
Note: We’re not going to cover HTML5 or CSS3 in depth in this post. Check out the footnotes for some great resources.
Lighter & Simpler
Although rounded corners and other fancy stuff that is demanded by clients gives designers some added job security, it would behoove all of us to discover how much easier CSS3 makes maintaining/editing two of the biggest drags on our time: Creating content boxes that have both rounded corners and drop shadows. With CSS, you no longer have to use nested divs (as much); crazy hacked together CSS, and other hair-raising tactics. Now with the magic of CSS3 much of that goes away... *poof*. If your clients don’t care that IE6,7 & 8 are a little more square, you’re golden. So after you’ve put together some nicely rounded tabs across the top of the page in your
Old skule way:
First, XHTML:
<div class=“container1”>
<div class=“container2”>
<div class=“container3”>
<div class=“container4”>
<!-- Your content sitting in a rounded container with a sweet dropshadow -->
</div>
</div>
</div>
</div>
There are obvious downfalls to this method, particularly when you have to use it repeatedly throughout the layout. It’s better than using tables because it’s more semantic (“div” is short for the more generic “division,” “tables” are for data) and easier to style, but still not ideal. Not to mention that Google & co. have to sift through all that garbage to find your content... There is a better way, my friends. Keep reading
Next... Photoshop (or your image editor of choice):
[Chop up imagery, export, ftp… weee!]
Lastly... CSS:
[Huge amount of CSS trickery goes here along with images and IE6 hacks.]
The upside of using old school CSS is that everybody basically gets the same experience. The downside is that it’s a pain in the rear to maintain and manipulate since it’s image-based. So every edit to a corner radius or shadow requires another trip to your image editor and FTP client of choice.
The CSS3 / HTML5 (better) way:
Nice, Google-friendly, semantic HTML5 (simple!):
<section id=”main”>
<!-- Your content sitting in a rounded container with a sweet dropshadow -->
</section>
In H. D. Smith we used an HTML5 <section> tag for the main content, which defines the type of content better than the more generic “DIV” does (better for SEO). I didn’t really need an ID here, but I threw one in just to show that you can, and so that if we need to use JS, there’s a hook for it.
CSS3
Though CSS3 requires a little bit of hoop jumping to get it to display properly in a wider array of browsers, dev time pales in comparison to the old method(s).
section#main {
-webkit-border-radius: 12px; /* for webkit browsers like Safari */
-moz-border-radius: 12px; /* for Mozilla browsers */
border-radius: 12px; /* for a day when all things merge into one and a river runs through it */
-webkit-box-shadow: 0 4px 7px rgba(0,0,0,0.4);
-moz-box-shadow: 0 4px 7px rgba(0,0,0,0.4);
box-shadow: 0 4px 7px rgba(0,0,0,0.4);
}
You can plainly see that there’s extra markup here (the hoop jumping), but even with all that, it’s still way easier to maintain than the old way.
See the resources at the bottom for a couple of tutorials on Box Shadows and Border Radii where you can see what the CSS markup does.
Plays nicely with others (degrades gracefully)
By “degrades gracefully” we don’t mean that your site will degrade like an old pair of shoes. We mean that when your site is viewed on older browsers AND future browsers, they will still be able to view the content they need to. It’s “accessible”. Nothing is going to break in IE5-8 by using CSS3 to create rounded edges and drop shadows. Why? Because IE treats those styles like the unpopular girl at the prom. So you can use CSS3 to do a lot of nice touch up effects for modern browsers and leave IE to preen around like he owns the place. The joke is on him. (psst... word has it that IE9 will support CSS3.) What would be a BAD idea though is to overdo the CSS3 to the point that the site is a completely different experience or that the branding is too negatively impacted by the lack of CSS3 effects. If you limit it to cosmetics (for now anyway), you shouldn’t have any major catastrophes and your sites will load faster, be easier to maintain and look super duper to all the cool people.
For H. D. Smith, for backwards (IE) compatibility, we included some more essential cosmetic elements as images (old skule way) while using CSS3 for the rest. That balance is not too difficult to strike. Just look around your site and think “what is essential to the brand and what isn’t?” That will be your determining factor. Note: We also included forward compatibility by adding the fancy styles without “-webkit” and “-moz” for the future when these styles are standard for all browsers (*cough* IE *cough*) and don’t need the browser-specific declaration.
There are some CSS3 features that might not degrade so gracefully (depending on your layout). One example is CSS3 columns — using those would definitely throw a wrench into the experience for a lot of users by making it look like your client’s site was built by a team of monkeys (no offense to monkeys).
Caveat (IE Support)
If you’re supporting IE6, you’ll have to use a bit of Javascript to make sure your content shows up properly because it doesn’t understand HTML5 tags. We’re not trying to be snooty, but the fact is that IE6 came out in 2001, so it predates HTML5 (2004) by a long shot. The script defines the tags for IE6 and tells it how to display them. With a little conditional comment you can assure that it won’t slow down the experience in other browsers. Since H. D. Smith launched we’ve noticed that Google has a hosted js file you can hotlink to.
Resources:
A Preview of HTML5 by Lachlan Hunt:
http://www.alistapart.com/articles/previewofhtml5
HTML5 IE enabling script:
http://remysharp.com/2009/01/07/html5-enabling-script/
Progressive Enancement & Graceful Degradation:
http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
Progressive Enhancement with CSS3: A better experience for modern browsers:
http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/
Box Shadows: http://www.css3.info/preview/box-shadow/
Border Radius: http://www.css3.info/preview/rounded-border/
Super awesome buttons using transparent shadows & gradients (woo!): http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba