I have as much dispute with IE6 as the next guy - there's no denying that it's holding us back and we'd be better off without it - and I fully support non-disruptive evangelism efforts that encourage IE6 users to upgrade to a modern and more secure browser. It's in their best interest after all.

But the notion that IE6 support should be discontinued, or that its users should be blocked, is dangerously misguided and missing the point. IE6 isn't your problem, and you shouldn't even maintain a list of supported browsers in the first place. If you think I'm talking to you, continue reading.

Via Inclusive Web Design For the Future (by Steven Champeon & Nick Finck):

The goal of Web design is not merely to dazzle, but to deliver information to the widest audience possible. Compromise is possible and desirable, but such compromise should not come at the expense of the user, but rather in terms of the native capabilities of the user's choice of device.

As someone that designs and develops online, one of my primary responsibilities is to deliver an accessible user experience. To my users, and not their choice of access. Their media device, operating system, browser, screen resolution or viewport - there's no denying that these factors should be considered when planning a new project, but they shouldn't ever be treated as constraints that place limitations on the interface or experience. They are merely variables that come together in any number of ways for any number of users. And although you can trend and analyse them today, they will undoubtedly change tomorrow, and next week, and month, and year... you get the picture.

If you think IE6 is today's problem, how will you deal with IE7, Firefox 2, Safari 3 or similar browser generations a year from now when they fail at rendering your standards-compliant CSS3? Cry foul like a stuck record from a bygone era and demand that your users upgrade once again to meet your standards? No, I didn't think so.

Then what's the alternative?

So glad you asked - progressive enhancement of course!

Before you point fingers, I'll be the first to admit that I'm not exactly a PE poster boy candidate. Using this site as a quick example - I built it with best intentions just under a year ago, and despite saying then that I'd adopted a PE strategy, there are so many things that I'd do differently today. But in my defence, that's the very nature of designing for the web: a continuous cycle of learning, adapting and growing.

So PE isn't new to me, but adopting it's methodologies into my workflow has taken longer than I'd like, only because it demands changing a system that I've spent a long time refining, and these changes demand free time that I generally don't have. But with every new project, I take another step closer towards PE utopia. I'd say I'm currently bordering on a solid progressive enhancement strategy, while some thinking around the defunct graceful degradation approach still remains.

See Understanding Progressive Enhancement by Aaron Gustafson for an overview of the subtle differences between the two concepts.

Both graceful degradation and progressive enhancement consider how well a site works in a variety of browsers on a variety of devices. The key is where they place their focus and how this affects workflow.

Although I don't appreciate the sweetness offered by the M&M anology, the article does a good job of introducing the two important follow-ups: Progressive Enhancement with CSS and Progressive Enhancement with JavaScript. Definitive reading!

Ultimately, you will need to take the basic principles and adapt them as best you can into your workflow, all within context of course (if you exclusively develop intranets for IE6 then don't bother). For example, the biggest changes that I've made include:

• Adopting a JavaScript library - together with behavioural separation, jQuery provides me with powerful, unobtrusive and accessible methods for manipulating style and content. I swear by it, but I'm careful to not rely on it.
• Resetting my CSS: see Eric Meyer's Reset Reloaded (and Again) as a starting point, or A Killer Collection of Global CSS Reset Styles if you have the time.
• Sizing my layouts and typography using ems - How to Size Text in CSS (by Richard Rutter) is invaluable.
• Using conditional comments to target IE6 and IE7-specific CSS for style compatibility. Familiarise yourself with IE's hasLayout too - adding one simple rule to your conditional CSS will save you a lot of trouble and time.
• DD_belatedPNG - Medicine for your IE6/PNG headache! - the holy grail of PNG support in IE6
• Being comfortable with the idea that despite the above points, my interface designs are secondary to the content that they deliver. They will never render consistently for all users - but then, they won't know the difference anyway.

And there you have it! No more reason to blame IE6 for your laziness or reluctance to adapt. If you're not convinced, have your say in a comment. I'd also love to hear if and how you're using PE in your own work, or any experiences worth sharing.

More reading:

• Pragmatic progressive enhancement  - why you should bother with it (by Christian Heilmann)
• Creating gracefully degrading javascript and enabling progressive enhancement (via Mark Story)
• Progressive enhancement in action (via Nvision)

The Independent Electoral Commission will spend R3 million to fix its broken website as complaints mount.

Wow!

Allow me to first provide an overview of the events leading up to this latest development of absurdity in the IEC website saga, before I add my own thoughts.

In late August, Alistair Otter published an article on Tectonic (a popular open source-related technology site) about how the South African Independent Electoral Commission (IEC)'s website was denying access to visitors not using the Internet Explorer web browser on a Microsoft Windows platform. That in itself was nothing new: in January 2006 I blogged about their site, listed among others, pointing out that exact shortcoming - see State of South African political websites. Ian Gilfillan commented, bringing to my attention that South Africa's political web wasn't any better in 2004 either. However, the focus of that post shifted to the DA in particular, because I successfully compromised the security of their CMS. ;)

To date, over two months later, the IEC have made no discernible effort to correct this flaw. Visitors to http://www.iec.org.za ("www" subdomain required - WHY!?) using any browser other than Internet Explorer will receive this message:

Our server detected that you are using a browser or operating system (e.g. Netscape, Mozilla Firefox, Google Chrome etc.) which is currently incompatible with our website. The current website is only compatible with Microsoft Internet Explorer V4 (and upward) on the Windows operating system.

In the days that followed Alistair's Tectonic post, Aslam Raffee (chairman of the South African Government OSS working group), Daniel Mashao (the CTO of SITA) and Helen King (Principal Advisor of The Shuttleworth Foundation) laid a complaint with the Human Rights Commission (HRC) against the IEC for excluding non-Internet Explorer users from its website. Aslam has made the full complaint available on this blog.

The latest developments that made headlines today, in response to the HRC complaint, is that the IEC will be spending R3 million to fix their broken website. And when they say broken, they're referring to the fact that it was designed and developed (way back in 1998) using Microsoft's proprietary technologies - so in effect they will be redesigning and redeveloping it to support all their visitors. My response to this news echos what everyone else has said.

On top of that, Karl Fischer - a well-known open source advocate - launched the No Firefox! No Vote! campaign today:

...urging Internet users to email or fax IEC chief information officer Libisi Maphanga, to demand that the organisation make its website available to all users.

LYW Karl. Visit Stop Digital Apartheid to get in on the act.

Raoul Snyman, a fellow web developer, has published An Open Letter to Mr Maphanga, CIO of the IEC.

So where am I going with all of this?

Well, regular readers of this blog will know that in the past, I had a tendency to name and shame the big brand national websites that failed acceptable support for web standards (to the point that I even maintained an "Evangelism list" for a while), in an effort to get them to realise and admit their shortcomings, and as a result make the appropriate changes for the benefit of their users. I doubt it made any difference, but if anything I hope it provided some insight for those who stumbled upon it.

Six years on, with a wide variety of modern web browsers and technologies fighting a new browser war, there sadly still exists an ignorant mindset that internet user's best interests should be disregarded in favour of designing and developing for a specific browser, platform or device. This has got to change.

The IEC have become the new posterchild for the return of the evangelism list.

My resolution is this: a public wiki or blog that shames (in a constructive manner) the local websites that fail an acceptable level of support for W3C web standards (ie. they're browser/platform/device incompatible), accessibility guidelines, and potentially also best practices in web design and development.

Alongside this list, links to local designers and developers who are accredited with providing the relevant services that meet this demand - and are willing to do it for a budget well within R3 million.

And for good measure, a list of sites that showcase the multitude of benefits associated with a standards-compliant, accessible and usable approach to modern web design.

If you like this idea and think it has the potential for good, lets hear your thoughts in the comments below, or you can contact me directly. Thanks.

• No page titles in favour of the browser window's title bar
• Feed Autodiscovery in favour of RSS/Atom feed buttons and links
• Navigation aids in favour of previous/next links
• OpenSearch in favour of a search form

Another classic example of redundant functionality is the "print this page" link that you'll still easily find littering the web. Bonus annoyance points for launching a popup window. The intention behind this madness is to provide the user with a print-friendly version of the page content. But with today's modern web browsers, the best practice is of course to support CSS media types for multiple devices. A print style sheet is very easy to create, test and implement. And if you don't like multiple style sheets, you can include your print rules in your global file to reduce server requests.

Some more quick examples of redundant functionality:

• controls to adjust text sizes
• "make this your home page" links
• "launch external links in a new window" option
• displaying the current date and time

Duplicating browser functionality in-page dumbs down the experience into a cross-browser compliancy mess. The practice of shifting user control from the page to the browser is very tempting for a number of reasons:

1. The consistency of the user experience is improved across the web. This is huge. Users don't need to waste time hunting for a search form, pagination, feed links or print controls if they know where to find these in one standard place within their browser. Both Firefox 2+ and IE7+ support OpenSearch - imagine how much more improved the implementations could be in the context of this post.
2. Users become instinctively more familiar with the powerful possibilities provided by their web browser, and potentially their PC's applications in general.
3. By reducing the amount of JavaScript on the page (which is responsible for reproducing most of the functionality), you're reducing the potential for scripting-related issues to occur.
4. It frees up valuable screen space for more appropriate and useful content.

Although still a work in progress, Mark's approach is drastic and for most practical purposes, unrealistic. I love that it's progressive and places focus on the content (a topic I've been meaning to blog about for quite a while) - it's almost a glimpse into the web of the future. But it suffers with no backward compatibility. He also mentions that some of his decisions aren't user-centered but rather personal-related, as bizarre and self-defeating as that sounds. On his new archives page:

If you like it too, that’s nice, but I don’t care about your opinion nearly as much as you might think.

His commenting system currently only supports OpenID users, so as an Anonymous user, I left the following thought (I can't remember where I first read this, and I can't find it elsewhere either, so no credit unfortunately):

Less is more. Until more is less.

I've integrated this one liner into my creative thought process, which I hope is obvious on this site. There's a fine line between overdesigning, or providing so much to the point that the experience becomes overwhelming, and underdesigning, or simplifying to the point that the most basic design concepts (heirarchy, navigation, accessibility) are compromised. Finding a balance isn't a complicated or challenging task, it just requires insight and carefully considered planning.

Second-guessing every detail is a good place to start if you have an existing site. Question what value it serves to your users, if at all, and if that value justifies its position on the page. I think the biggest mistake we make is to add stuff to our designs that we see elsewhere, without considering it in our own unique context. Just because John has a feed icon the size of a house in his sidebar, doesn't necessarily translate to more subscribers. In my eyes it screams of desperation.

My blog sidebar is a perfect example of where I've applied this thinking: I have plenty of vertical white space to litter and decorate it with all kinds of non-essential content, banners and buttons, but I know that will detract from the overall experience so I choose not to. I only show what I think it relevant to the content on that particular page and useful to the reader.

My footer is also designed to be as simple as possible. Many site footers brag about the W3C web standards-compliancy of their HTML markup or style sheets. Tech-related footers brag about the time it took for the page to render on their server. I used to think this was all useful or fun myself, but that was when it still mattered. If that information is really worth sharing, include it on a separate "about" page.

I'd even be willing to argue the usefulness of the popular "back to top" link, but I suspect it has a newfound place on mobile devices or is required by assistive technologies, in which case it should only be visible in those instances.

The web, however you prefer to tag or version it, is forever evolving and maturing. But the adoption of new ideas will unfortunately always rely on usage patterns evolving with it.

It's unfair to argue that it's the sole responsibility of any user to familiarise themselves with the necessary skills and tools required to become a comfortably proficient web user in the first place. And as the current online trends reveal, some unfortunate and regretful decisions by those of us building the web over the years have already suppressed the perfect user experience. For now, at least.

(Side-note: I have a particular site in mind that partly prompted this post, but I'll leave that for a follow-up.)

Here is today's quote, for example:

Content makes the sale, delivers the service and builds the brand. The architecture is the container of the website, but content—well, it’s the content in the container. We don’t buy from iTunes because of its architecture; we buy because of its music. Great information architecture is invisible so that the content can shine through. - Gerry McGovern

Each quote is also published in a useful quote card format for download and print. Feed URL: http://feeds.feedburner.com/Inspireux

And while I'm here, don't forget to get involved in Firefox Download Day 2008 which is officially happening this coming Tuesday, 17 June.

Pledge to get Firefox 3 during Download Day to set the Guinness World Record for Most Software Downloaded in 24 Hours. It's a fun cause, and you'll be doing yourself a favour at the same time. With more than 15,000 improvements, Firefox 3 is faster, safer and smarter than before.

At the time of writing this, there are 1,154,980 total pledges worldwide, 3,720 of which belong to South Africa.

Ch-ch-check it out!

The US-based IAB has issued guidelines for rich media ads that are designed to simplify the online ad planning and buying process. Over 30 of the leading online publishers, representing 65% of total advertising inventory are or plan to be in compliance with these guidelines.

The article goes on to mention the list of 40+ companies that are or plan to be compliant. So if you didn't already, you now know which domains and media dimensions to block using your favourite ad-blocking Firefox extension(s). Ha! Suckers.

Following up on their wonderful (look for my sarcasm) "approach life differently" television ad campaign, Nedbank now have the perfect website to match. I'd like to pull it apart when I find the time, but right now all I can say is that they have a tremendous amount to learn about providing their users with a website that is both usable and accessible. Placing a 360kb flash file (which reloads on every visit due to it's random nature) at the top of the site containing hybrid television/radio advertising is in my mind one of the most useless applications of flash technology I've ever encountered. Sitting on a broadbank connection, they still haven't loaded by the time I've clicked on a link to navigate to a new page - rendering them completely useless despite that the content they contain was useless to begin with.

It makes me cringe at how their Access to Information footer link
a) Launches in an inaccessibly-linked Javascript popup window,
b) The popup window isn't resizeable,
c) The content is an Acrobat PDF document, for which a plug-in is required, though no mention of this is made beforehand.

And they're probably not aware that their "invisible" clickStream graphic (for measuring site traffic) at the bottom of their site contains their dev.nedbank.co.za (broken link) URL.

I won't even get started on their cross-browser compliancy.

I've linked to Nedbank before on my very outdated evangelism page and simply couldn't resist the opportunity to pull it apart - again. Full review will appear here soon.

As for Old Mutual, who missed making it onto my hall of shame list, even though their website is developed exclusively for an Internet Explorer 5.5 and 800x600 screen resolution setup - who cares that the homepage "took 0.000 seconds to download" ?

The Mozilla Foundation announced yesterday the immediate availability of a new preview release of its next generation web browser: Mozilla Firefox - previously Firebird, previously Phoenix. You can also read more on the rebranding process (which I think is looking excellent) by the artists involved: Steve Garrity, Jon Hicks and Daniel Burka.

Mozilla Firefox 0.8 represents the bleeding edge of Internet technology and raises the bar for ease of use, performance, robustness and standards compliance. Less than 3 minutes to download over a broadband connection, Firefox can be yours in no time at all. Firefox starts up and runs much faster than Mozilla because of its significantly optimized code...

I'm going to love the new AutoDownload feature - Automatically download files to your Desktop or another location without windows popping up asking you where to save, etc. It also includes a new installer for Windows users - previously you had to manually extract the zip to a system folder.

And if that doesn't convince you to give it a try: Reasons to switch to the Mozilla Firefox browser.

Also released: Thunderbird 0.5, the e-mail and newsgroup client for 2004 and beyond.

UPDATE: The button at the top of this post is a PNG with alpha transparency, which does not render correctly in - you guessed it - Internet Explorer. Microsoft have had almost 8 years to fully implement the PNG specification yet haven't. How sad. Then again, it's taken them 6 months to release a patch for the most vulnerable security hole ever discovered in Windows.

UPDATE: 13 Reasons To Use Firefox Over IE

As the Mozilla project moves towards an end-user focus from a developer and platform focus, the branding and visual identity of the organization and its software will need to be revisited. With the recent separation from Netscape and AOL, the need for the Mozilla project to have a brand of its own is all the more necessary.

Read public comments on the proposal here and /. comments here. I found this one particularly amusing:

Secret to Branding

1. Take your basic product name - ie, "Mozilla".
2. Get permission from a celebrity to put their name in front of it.
3. Put next year's number on the end.
4. Add the letter's "X", "XP" or some abbreviation with an "X" in it.

Therefore, Mozilla 2.0 should really be - Madden Mozilla 2004 SSX

the aim of this photographic project is to make us open our eyes and get creative with the things and people around us, to see how we each interpret themes.

Sounds really intriguing, I'll be participating and will be posting my photos here every day for the rest of this month. Ha, easier said than done.

Some other news: Mozilla 1.4 has been released, and so has PHP 5.0.0 Beta 1.

Great stuff - this was my only reason for still needing to use IE for a browser, now I can finally trash the virus bastard. It was on it's way out anyway.

Also, meskanky.com has formulated a new concoction - the "MeSkanky Shooter". Give it a try at your favourite bar and help spread the love. We're still deciding on a suitable logo - let us know which you like most.

Looks like Nat is getting her shit together - rockit.za.net - nice one chick, keep us updated.

Elsewhere, Edgars has finally allowed their website to work in Gecko-based browsers (Mozilla/Netscape/etc), much to my delight. You might remember I reviewed it a while ago. Congratulations guys, it wasn't such a terribly difficult thing to do now was it? Now maybe you can fix the other bugs... baby steps, you know. And in so doing, become a fine example of how it should be done to some of the other sites that act with ignorance.

Ready. Fire. Aim.