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)

Starting Monday Red Hat will have an SA-based country manager who will be responsible for the Southern Africa market on behalf of the company.

Red Hat previously had no offices in Africa, preferring to work through local partners. Paul Holt, Red Hat regional director, says South Africa and Southern Africa is a market with growing opportunities for Red Hat.

And again via Tectonic, South Africans don’t understand OSS - Microsoft:

“Deep dev of the core OS” was not likely to happen in South Africa where students were “still grappling with coding skills”, says Matusow. They are “not going to dive into the inner workings of Linux”, says Matusow.

“Any innovation on Linux that is broadly applicable will immediately be picked up by Red Hat or Novell and commercialized globally with little economic benefit coming back to SA.”

One response to Matusow points out that a number of key open source projects have South African roots. Ubuntu, the most popular Linux distribution, was founded by South African Mark Shuttleworth while OpenBSD and OpenSSH are the brainchild of ex-South African Theo de Raadt.

What a gem. Dugg here.

Latest case in point: the City of Cape Town's (partly) redesigned official site.

I say partly because most of the site is still in the old design, and some in a new design incorporating an XHTML Doctype, but using tables for layout. Needless to say, Firefox doesn't like it much either. And of course, the Feedback form doesn't work in any web browser so there's no way I can inform them of this.

"This City Works For You" is their strapline. Pity their web site doesn't.

Using icons is a tricky business because you hope (or assume, depending on who you are) that the user will make the association between the icon and it's meaning or purpose. Although 'home' is common enough to be used safely, after creating the button, I stopped to think why it's even used in the first place. It's logical in web browsers: when you hit the home button you return to the home page you've set. On a particular website, clicking through to a different page will take you to a new room, but you're still in the same house, and it's here that I feel the concept fails. I ditched the icon in favour of type. In fact, I very rarely use icons in navigation.

The same thinking applies to other traditionally used icons. Take 'download' for example - typically some kind of storage medium (hard drive, CD/DVD, stiffy disk), an arrow, or a combination of the two. Firefox represents 'download' as an arrow pointing into a box, Opera as a stiffy disk, etc. Within this virtual medium, we need to have that association between virtual and real for anything to have meaning. An envelope for e-mail, a shopping basket for a purchase, a lock for security, etc. But when was the last time you downloaded an application small enough to fit on a stiffy disk, let alone saw one?

Maybe we don't take enough time to stop and think about these design conventions and their purpose. Changing convention is difficult. Once users become familiar with the association between an icon and it's meaning, there's a fine line to becoming counterproductive when introducing something new and expecting to achieve the same results. Even if that association is as stupid as using a magnifying glass to represent searching - in the context of the web, of course. It could just as easily have been a spider.

Have you ever wondered why Microsoft named it a "Start" menu instead of "Home"?

I'm not about to start challenging conventions, introduce button standards, or give tradition the finger and represent 'download' as a porcelain bowl. But if not to change anything, then let's question what we do and why, only to reassure ourselves that it's the right way.

UPDATE [16/09]: Nintendo's next-generation console system Revolution Controller finally revealed: a cordless remote-control-like device designed to be used with only one hand. With a 'home' button.

First impression goes something like this: wow!

What caught my eye, apart from the fresh greens, was the layout: fixed width for a 1000+ pixel viewport. That makes it the first dotcom top 10 (or high-profile) site that I'm aware of, to disregard users with 800px or smaller viewports. All of the others are 100% fluid or designed exclusively for 800. I think they've taken a gamble and pushed the limits, since I really doubt that a considerable percentage of their target market (pretty much everyone, really) have a 1000+ viewport. Ideally they'd cater for all their users, but it's reassuring to see nonetheless - pushing that limit is one of the major factors that advance and evolve this medium.

As a side-note, major surfing brand Quiksilver.com was last week redesigned for 1000+ by 65media. If you can think of other big names, give me a shout.

It's also worth noting that CNET.com is also designed with this layout, although it generates a horizontal scrollbar. Silly.

The design is my kind of style to a T: well communicated, easy to follow and navigate, clean and sharp, consistent, flexible, relevant... every page element is where it should be. The homepage isn't entirely balanced, but clicking through to other pages, it fills out very well.

Their page <title>'s are how I've recently decided to start structuring mine - with the title for the page first, followed by the title of the site. It's a habit that's been hard to break, particularly on this site with my blog posts and words which currently aren't very insightful or SEO friendly. It's a tough call actually, in some instances it works better reversed. So context is relative, as with most things.

Testing in IE6x, Opera 7x and Firefox 1x (under WinXP), it's skillfully cross-browser compliant. Looking briefly in IE5x standalone, it could be tweaked to work well in that browser too, but who cares really!

Their doctype is XHTML 1.0 Transitional, which doesn't validate. Does that matter - to their users? No. To you? Maybe. That's your preference.
It lacks a character encoding. Does that matter? Definately. An easy fix.

If you find the text size too big or small, adjusting it's size doesn't break the layout. Score one for accessibility. Oops, the A-word - making a lot of noise again these days (and where it matters). I'm curious to see what develops with that, since we've been preaching about accessibility for ages but with little or no real-world backing. I know I've used the word very loosely in the past. Worth checking out: GAWDS (Guild of Accessible Web Designers) - designed to both promote and protect accessible design standards.

I'm sure I have more to add to this review, but I'll leave it there as I'm short on time. I'm sure they'd love to hear if you like it too.

UPDATE [21/07]: I just found this: We remodeled, and here's why by CNET Editor in Chief and VP, Patrick Houston - which details their rationale behind their CNET.com redesign, which apparently happened as long ago as September '04! The article and interactive tour is accompanied by some 342 user comments - many unhappy with the wider layout. A worthwhile read.

I've used the word 'viewport' in the context of the browser size and not screen resolution.

If you can't figure out the rendering differences between the techniques, you may want to try each at different viewport sizes (increase your screen resolution and/or browser width) and at different browser text sizes. Use this bookmarklet (drag it onto your Bookmarks Toolbar or into your Favourites) to easily resize your browser width.

I'd like to keep this list fresh, factual and unbiased - please comment or drop me an e-mail if you have something to contribute. And no debates over personal preference, please.

1. Fixed: layout is determined by absolute dimensions, typically to fit a viewport with a width of around 800 pixels. With 1024x768 resolutions gaining popularity, there is a growing trend to design exclusively for this size.
   
   Pros: Easy to implement.
   Cons: Supports single scenario only. Typically breaks when browser text size is adjusted.
   Examples: news.com (800), download.com (1024), theonion.com (1024), macromedia.com (800), 24sata.hr (1024), bmw.com (1024)
2. Liquid (aka. Fluid): layout is determined by relative dimensions, typically percentage values to fit 100% of the viewport.
   
   Pros: Accommodates all viewports. Larger volume of content is viewable without scrolling. Scalable and flexible for forward-compatibility.
   Cons: On wide viewports, readibility suffers from long lines of text.
   Examples: wired.com, sercotransarctic.com
3. Resolution dependent (by Cameron Adams): varying layout according to viewport width. When the width is adjusted, the layout is dynamically adjusted accordingly. JavaScript required, but degrades gracefully.
   
   Pros: Full control over how changes in the viewport have an effect on the content. Flexible.
   Cons: Time-consuming, more maintenance required.
   Examples: Author's demo, rammstein.com, smh.com.au, microsoft.com (last two require browser reload).
4. Elastic (by Patrick Griffiths and more recently, Roger Johansson, and again by Douglas Bowman): resizes to browser font size. Similar to Opera's zoom function.
   
   Pros: Takes the user's preference into account. Flexible. Accessible.
   Cons: Time-consuming, more maintenance required. Difficult to make images scale.
   Examples: mozilla.org, yahoo.com, aol.com, Elastic Lawn (CSS Zen Garden)
5. Jello (by Michael Purvis): a combination of Fixed and Liquid.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: Steep learning curve.
   Example: Author's demo.
6. Progressive (by Alessandro Fulciniti): a combination of Fixed and Liquid. A Fixed layout under and over certain pixel widths, while Liquid inbetween. JavaScript required, but degrades gracefully.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: Steep learning curve.
   Example: Author's demo.
7. Constrained (aka. Untitled): Liquid layout up to a maximum pixel width.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: uses IE's proprietary CSS rule to emulate max-width property.
   Example: This site.

First impressions last, and this was mine - a poorly designed page reading:

The site you have tried to enter requires Internet Explorer 6 (or better) with Windows Media Player 7 (or better) on Windows XP, 2000, Me or 98. Click Here to use our Doctor Download application to help you check your configuration alternatively Email Dr Download.

Right then. So we already know about the dangers of taking this Microsoft-centric approach; I won't go into that again. But what's this "Doctor Download" stuff? Can I trust it? I clicked on the ignorantly-named "Here" link and received a popup window with the following:

We're Sorry! There has been a problem that means you can't continue. The problem code is: 200501050143446657...

Truly helpful. Next, I decided to dig around behind the scenes using IE 6, their single browser of choice. Musica use frames (ack) to disguise the real URL of the site. It turns out that the entire service is provided and hosted by OD2: On Demand Distribution, who manage a diverse set of on-line retailers (I counted over 40). All of which are built with the same Microsoft-only requirements. In fact, they haven't even done a very good job of explaining the relationship between themselves and Musica on the site. If you browse the FAQ, under the "Who are we" section:

We are On Demand Distribution Plc, registered in England, No. 3935034

In other words, "we're not Musica". Isn't there something called client trust? Isn't it most important on this largely insecure, phishing-rife commerce medium we call the Internet? Questions Musica should be asking themselves. No mention is made by OD2 in their FAQ about their affiliation with Musica, so who are you really dealing with?

I should mention, as a side-note, that using frames will prevent their users from bookmarking favouriting a page - their favourite Artist, for example. Unless they're advanced enough (I wouldn't count on it) to know that right-clicking a link to that Artist and selecting "Add to Favourites.." is the only way they'll be able to shortcut to that page in future.

Another interesting observation: one of their PC Requirements is that you don't have any Popup Blockers installed. They claim that their site doesn't work without popups. Now that's rich.

I've e-mailed Musica (or is that OD2?) for an explanation on why their site is targetted at a Microsoft-only audience.

Favourite song of the moment: BT - Circles.

UPDATE [06/01]: allAfrica.com feature a December article on the store: 'Musica Joins Download Revolution', and mention how "This legal downloading of music might boost the already booming MP3 market". MP3, you say? The Musica Store only offers 128kbps WMA downloads.

Further reading:

• 'Loudeye Powers Its First Music Download Store in South Africa', via Yahoo! Financial News - 13 December, 2004
• 'SA gets large-scale music download site', via Mail and Guardian - 13 December, 2004
• 'SA: Download music for R10', via News24.com - 14 December, 2004

"It doesn’t help anyone, we’re all aware of our defficiencies [sic], and could probably point 100 more out on top of the 10 you point out. Not only that, but you have no idea what kind of conditions we’re working in, or what else we’re trying to do (or the fact that we’re building a whole new standards compliant, CSS based site behind the scenes, but Rome wasn’t built in a day…at least it wasn’t built properly in a day)."

- more at The Standards Police will get you! by Brian D. Garside.

And my own two cents. Running a website through validation tools and then complaining that they're not standard-compliant is like failing a student in an exam for using green ink.

All of my sites are standard compliant. They might not meet all the validator requirements (due to a few markup errors) but they still work. They're usable, they're accessible, and they're cross-browser/platform compatible. Furthermore I consider the V&A Waterfront project, designed in 2002, as the first major corporate South African website to adopt a standard-compliant design.

Also another CSS site list launched: CssBeauty, which to my delight featured the Serco TransArctic Expedition as their first showcase piece. Thanks Alex!

I'm making progress on my own redesign, which since starting a few weeks ago has subsequently grown into a complete backend overhaul. My goals are best put by the Daft Punk boys: Harder, Better, Faster, Stronger. I've decided to place less emphasis on my blog and more on my projects, portfolio and photography this time around, while improving user interactivity and general IA.

I've wanted to link the following site into a post for a while now: Jeedoubleu, by Greg Washington, is one of the smartest flash portfolios I've ever seen. If only he could lose the "Think outside the box" cliché.

Malaysian Andy Lim has some sweet underwater photography - check out his Sanctuary Under the Sea.

Lastly, some photos I took this morning after 3am, shortly before sunrise. I first assumed they were strange cloud formations but concluded they're airplane exhaust trails - they stretched from one end right across the sky to the other, in perfect parallels. I could be wrong; you decide. Excuse the poor thumbnail quality, I can't figure out why that's suddenly happening.

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" ?