As I've mentioned in previous posts I've been doing a lot of redesign on my website (mostly because I hate everything I come up with). One of the issues I, as well as probably every other developer on the planet, am dealing with is how to handle 'C-' and 'X-grade' browsers. Since I write mostly about web development, design, and technologies I feel pretty safe in the assumption that most of my readers are using the latest releases of their respective browsers; my analytics support this assumption. Despite that, I don't want to leave anybody out, including the possibility that someone is viewing over mobile device or other minimal/watered down browser.

On the other hand, I'm not going to spend many hours doing the leg-work of ensuring the absolute graceful degradation of every browser available (actually I'd prefer to enhance rather than degrade). I won't argue the importance of compatibility on the web, but this is a personal site — my site! — and I'm probably not going to directly benefit from the labor of ensuring everyone gets the same experience.

IE6 Update

To address this issue I've been researching 'out of the box' solutions for styling older browsers. My first knee-jerk reaction was to use IE6 Update. This created a sort of safety net for my concerns for a short while; I felt better that while IE6 (and similar) users got a somewhat broken experience at least they were informed why things looked that way. In my testing the IE6 Update bar didn't quite meet my standards. While it did indeed look and sort-of feel like Internet Explorer’s notification bar, the experience was lacking. The text on the bar was centered instead of being left-aligned, and the bar jumped around on screen while scrolling, and sometimes disappeared for short times, where it should be completely fixed to the top of the viewport. I resolved that while it is an interesting idea with honorable intentions, the bar is a bit too deceptive for my comfort.

The IE6 Update website, with 'demo' update bar active. The actual bar displays a bit differently than it should, and than it is depicted.

Notes worthy of mention:

• The IE6 Update notification bar is not in use on the IE6 Update website.
• In the 'Buzz on Twitter' section, the IE6 Update website lists (what I assume to be) the last three tweets from the website about the bar. None of the users who tweeted about IE6 Update are employing the bar on the websites listed in their Twitter profiles.

Browser-Update, and ActiveBar2 provide similar experiences.

Other Options

Another consideration was a more subtle upgrade ’suggester' like Pushup. Pushup targets not just Internet Explorer, but all major brands of browser save Google Chrome. If a legacy browser version is detected, Pushup displays a mostly unobtrusive popup in the upper-right corner of the viewport which gently notifies the user that an upgrade is available, and provides a link to the appropriate download page. While not as suggestive (nor preventing itself as deceptively) as IE6 Update, it still presents the same feeling to me. That is, telling the user that their browser is insufficient to surf the web, despite the fact that at some point in the past, it was 'top of the line.'

Similar upgrade suggestion techniques include the IE6 Warning Message, and a highly customizable Notification by Vincent Hasselgård.

These suggestion techniques tend to be more popular, and are in use (in some form or another) by some prominent sites like YouTube, Twitter, and Facebook. These sites tend to suggest an upgrade because of functionality and usability reasons, rather than simply basing the need for an upgrade simply because of a browser’s age.

And then there is the 'in your face,' modal box, or full window replacement methods; IE6 Upgrade Warning (which looks very similar to Pushup, and is possibly related), Chris Coyier’s IE 6 Blocker Script, and sevenup which supports custom styling 'plugins.' It is my opinion that these take the "rid the world of IE6" idea a bit too far.

Finally, worthy of mention is the Browse Happy website by the creators of WordPress. This isn't a script to run on your own website, but instead a full website (with testimonials), which can be linked to, to provide surfers with more information about the benefits of upgrading. Despite this being the most unobtrusive method of encouraging surfers to switch browsers, I still feel it is being unfairly deceptive. It refers to Internet Explorer in general (rather than a specific version), and cites a selection of articles from 2004 (and none more recent) which claim that Internet Explorer has poor security. In all, it feels more like an attempt at a smear campaign against Microsoft’s browser, regardless of version, rather than a valid upgrade campaign.

Universal Internet Explorer 6 CSS

In my searching for a suitable technique for styling legacy browsers — and to appease my laziness — I also came across what seemed like a promising solution. Universal Internet Explorer 6 CSS does not try to notify people that their browser is inferior, nor does it even try to encourage them to upgrade. What creator Andy Clarke has done is to create a base Cascading Style Sheet designed specifically for displaying pages of content in Internet Explorer 6 simply, and attractively.

Andy explains it best:

When I asked myself why people visit my sites, and the ones that I make for other people, the answer was always “for the content”. Content that is almost always written words and that means type.

That is why I'm now advocating to my clients (and to you), that where feasible, not to waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection. Instead, you and I should provide simple but effectively designed HTML elements. This means just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout.

More than that, I intend to serve exactly the same Universal Internet Explorer 6 CSS for all sites (give or take a little branding here, or a touch of customization there). This will pay dividends for me, reduce wastage for my clients and give end-users a well-designed, well-presented view of what they come for — content.

Universal IE6 CSS is by far the best 'prepackaged' solution to dealing with IE6 that I've ever come across. Clearly it can not compete with actually taking the time to tailor each web page into IE6 compatibility, but that usually means hours of labor, and time is money. I decided that this was the solution for me.

So I got myself a copy of the U.IE6 Style Sheet and dove into the code. The Universal IE6 CSS page at For A Beautiful Web has a couple of demos of how the style sheet would look if it were in use on a pair of popular web design sites, namely the A List Apart homepage, and an article from Jason Santa Maria’s blog, the latter of which I've shown some samples of below.

The very top section of one of Jason Santa Maria’s articles, styled with Universal Internet Explorer 6 CSS, as rendered by Google Chrome

The bottom half of the same article, rendered by Google Chrome

A reply, to the same article, rendered by Google Chrome

The Universal IE6 CSS is pretty damned attractive, if you ask me, especially for a style sheet with no layout. This is HTML at it’s most raw (for today’s standards, anyway) — pure content, with just enough styling to make it an attractive alternative to default browser styling. This was exactly what I was looking for for my site, so I slapped the style sheet on my website and fired up IE6 to take a look…

…but it wasn't good.

The style was still there, but all the elements that make Universal an attractive style, rather than just a clean style were gone. There were no hanging lists, no hanging left-borders for <code> blocks and <blockquote>s, and my content did't exactly fit in that clean 60%-of-screen-width-column. Okay, so it wasn't terrible, but it also wasn't attractive any more.

In a troubleshooting attempt, I loaded those beautiful demo pages from the For A Beautiful Web page I listed earlier. The problem was clear: Andy Clarke had seemingly designed a style sheet targeted at IE6 using some browser other than IE6. All those pretty little extras that made the style more than just regular HTML weren't supported in the very browser for which they were intended!

My previous screenshots of Jason Santa Maria’s article were taken in Google Chrome. Now have a look at the very same page rendered by Internet Explorer 6 running in Windows XP.

The very top section of one of Jason Santa Maria’s articles, styled with Universal Internet Explorer 6 CSS, as rendered by Internet Explorer 6

The bottom half of the demo article, rendered by Internet Explorer 6

A reply, to the same article, rendered by Internet Explorer 6

The brilliance that was the Universal Internet Explorer 6 CSS has sort of lost its luster, hasn't it? Okay, I'll admit that this is nitpicking over something rather minor; the content is still there, and still perfectly readable. I think without those little extras, though, that Universal IE6 CSS takes a major step toward degrading itself to unstyled HTML.

I still plan to use the Universal Internet Explorer 6 CSS on my website, and possibly future sites, but definitely not before fixing its shortcomings.