MyTech

I am reminded in comments of Steve Champeon's progressive enhancement, which I actually did cover in my book, "Adding Ajax". My apologies to Steve for seeming to subvert his subversion of all browsers look the same. I tend to think of Steve's progressive enhancement in light of the use of JavaScript, but it is also focused at design, too. And, I am embarrassed to admit, I forgot about the concept when I started to write up what I've done with my site designs. Blame it on enthusiasm, or advancing age—take your pick.

However, if the concept is so popular with web designers, I have to wonder why every time I mention the use of SVG in web design, I'm met with "Oh, but not every browser supports SVG"? Perhaps IE has become, over time, a handy excuse for not trying something new.

Regardless, the idea of starting plain, and upgrading gracefully did originate with Steve.

The concept of gracefully degrading has been around for some time, and had its beginnings, I believe, in systems design. Wherever it began, it's based on ensuring that no matter how you tweak a site, design, application, or whatever, it degrades gracefully whenever accessed by an individual or tool that may not have all the necessary capability.

For instance, when using JavaScript to implement an accordion layout, where fields are collapsed under headings and only displayed when the headings are clicked, the web page where the accordion is integrated gracefully degrades by displaying all of the fields, by default, when the page loads. If JavaScript is enabled, script is then used to collapse the fields. This approach ensures that the non-JavaScript enabled individual has access to all of the fields, while the JS-enabled individual gets the accordion effect.

The concept is a good one, but I think the approach is backwards. Gracefully degrading is focused on creating a complex work, and then ensuring elegant failure, which seems to put too much focus on failure. A better approach would be to focus on creating a simple, but elegant work, and then gracefully upgrading the work for more capable environments.

Web site design lends itself particularly well to graceful upgrading. Minimalist web site design has achieved both popularity and respect, so one can start with a very simple and clean design, and it would be sufficient, in and of itself. Rather than chase away people with its lack of embellishments, you'll probably generate relief in all of the people visiting your site. The opposite of simple and clean is a web site too cluttered to easily see the content, and too slow loading with all the video, images, ad networks, and so on crammed into the page. You end up clicking away from the site before it's fully loaded.

A perfect example of an over-engineered site is the one at St. Louis Today and one visit should demonstrate why. On a good day, the site is difficult to load. On a bad day, some slow banner ad is actually plastered over the content, so you can't see anything until the ad finishes. There are so many animations, images, and other graphics demanding attention, in a complex, multi-grid layout that you have to really want to view the site, badly, to wait for the page to finish loading.

The St. Louis Today site is not the only one whose site design I notice primarily because it is too slow, and too busy. In fact, I rarely notice "good" design nowadays, because I have seen so many good designs that they they don't stand out as they once did. I don't think I'm alone in this, either: we're more likely to notice a site design when it doesn't work, then one where it is working. This isn't a bad thing, though, because this lack of observation means that we can approach design using graceful upgrading, rather than degrading. One can start simple and clean, and then carefully, gradually, add delicate and unique touches—like one garnishes a perfectly cooked dish.

I do not claim to be a "good" designer, but I am a capable designer, and know the tricks one can use to make sure less capable browsers "see" a web page the exact same as the more capable. However, doing so can add an enormous amount of complexity to a site—complexity that not only adds to the overall cost of the site, it adds to loading times, introduces potential areas of failure and, perhaps, even the potential for security problems. It's also irritating to have to take a wonderful site and then tortuously apply the strangest, twisted tricks, just to get it to show in less capable browsers. There's no joy in the act; it becomes an exercise in tedious necessity.

Rather than letting the myth of "all things to all browsers" suck the joy out of my work, I've embraced the concept of a minimalist design at all of my sites, for all of my target browsers, and then I've added a few touches, just a few, for more capable browsers. If you access RealTech using IE 7.x or 8.x, you'll see a perfectly good, working site. In fact one that, hopefully, loads quickly, and is easily navigated. It may look a little plain, but not extraordinarily so. The navigation bar at the top has some color, as does the footer, and the sidebar and content align nicely, side by side. I also use a little color in the text, with links and in the headers.

• In a browser that supports SVG, though, you see that there's a rounded corner background in different colors for both the sidebar and the content. Not only that, but there's a black and white silhouette of an old fashioned compass rose behind the sidebar that re-sizes with the page.
• In a browser that supports the CSS3 text-shadow property, the h1-h3 headers have a faint shadow of light gray, just enough to add some depth to the text, without being too obvious.
• In a browser that supports the CSS3 border-radius property, the navigation elements have a half circle finish to the bottoms.
• If the browser supports box-shadow, then you'll see an aqua shadow behind each navigation item.
• A browser with RGBA support will have a semi-transparent footer band, overlaying the bottom of the two columns.

These are the things you'll see if you have a capable browser, but even if you don't, there's nothing in the site that drives one away, or even stands out as odd or incomplete. If the page looks rather plain, it is no more plain than most major web sites nowadays, and definitely not too different from the sites of most of the techs I know.

The same concept holds true of all my sites: Secret of Signals, MissouriGreen, Just Shelley, and The Frugal Algorithm. All of the sites have an SVG silhouette embedded in the page, somewhere, which is my want of adding an element of continuity between them. However, if a person doesn't see the SVG graphics, no loss. It is nothing more than an embellishment, that garnish I mentioned earlier.

I also play with the navigation menu at the top, especially at Just Shelley and Secret of Signals, where I have a little fun with box-shadows. I make use of border-radius heavily at both sites, but in the case of Just Shelley, I also make use of an overlay element to "hide" the tops of two 100% vertically sized columns, so that the columns fit the length of the page regardless of column content, but still allow room for my hand graphic in the sidebar.

But this is all play, for me. What's more important is working towards the pages being easily accessible, across all dimensions, including all my target browsers. I also work to ensure the pages load as quickly as possible, and do not cause harm. At one point I had a more complex SVG background for this page that triggered Chrome to spike the CPU on Windows XP. Now, the simple use of black and white SVG elements, sized to the open page, rather than the entire content, works quickly and efficiently in all browsers supporting SVG. Even Chrome, which has somewhat challenged graphics rendering capability.

I've written on this concept before, but I do not expect to see it taken up in the design circles. After all, isn't a web designers bread and butter their ability to make a page look identical in all browsers? To polish and poke, and feather and splat, and rough edge, to a fair thee well? I hope, though, the concept does spread to others less dependent on the tricks of the design trade, if for no other reason to see cleaner web sites making use of CSS3 and SVG as part of their design. The more sites use both, the broader the support for both technologies, and ultimately this is a win-win for everyone, including the designers.