A new answer to the IE6 question?

In “Universal Internet Explorer 6 CSS,” Andy Clarke proposes a novel approach to the problem that has vexed standards-based designers since time immemorial (or at least since we could quit worrying about Netscape 4).

The problem is IE6. Outdated but still widely used, especially in the developing world, its inaccurate and incomplete CSS support forces web designers and developers to spend expensive hours on workarounds ranging from hacks, to IE6-only styles served via conditional comments, to JavaScript. Some refuse to serve CSS to IE6 at all; others stop IE6 users at the gate. In some situations (personal site, web app used by first-world hipsters), ignoring IE6 may work; but mostly it doesn’t.

After a brief but thorough tour of current IE6 solutions and their limitations, Andy unveils his zinger. He proposes to serve IE6 users a set of universal styles completely unrelated to the design of the site in question. Not unlike Arc90’s awesome Readability plug-in, the styles Andy has designed concern themselves with typographic hierarchy and whitespace. Here’s the theory: make the page easy to read, make it obvious that somebody designed it, and the IE6 user will have a good experience.

(By contrast, block styles from IE6, as some developers suggest, and that user will have a bad experience. Most likely, in the absence of styles, the user will think the page is broken.)

No hammer fits all nails, and no solution, however elegant, will work for every situation. But if we’re open minded, Andy’s proposal may work in more situations than we at first suspect. Where it works, it’s what business folk call a “win, win:” the visitor has a good reading experience, and client and developer are spared tedium and expense.

Check it out.

[tags]IE6, workarounds, design, development, webdesign, hacks, legibility, styles, CSS, andyclarke[/tags]

55 thoughts on “A new answer to the IE6 question?”

  1. Andy’s approach is clever thinking, but until the everyday person on the street actaully knows what a browser is, any ignoring / death to IE6 argument is redundant… or until Windows makes a magic compulsary update.

    Why should the user concern themselves with the technicalisties? They click the blue E / the internet – they expect to get what everyone else does – the rest is up to us.

  2. @Paul Burgess: I don’t see why Andy’s approach is dependent on the person in the street knowing what a browser is. It’s a method for delivering an ‘IE6-safe’ yet reasonably attractive page design without having to waste time hacking around each and every IE bug on each and every page design within each and every project. It’s not an ‘ie6-update’-style attempt to force users to upgrade, just a method of giving them a decent experience; the superior approach, IMO.

    All we need now is an IE7 version, and we’ll be laughing ;-)

  3. I’m one of those who decided to ditch IE6 but whenever I build a site I still find myself checking the layout in IE6 and doing my best to make it functional rather than making it pixel perfect in IE6. Thank you for sharing this article.

  4. Too bad that there are still many clients running and demanding your product to run on IE6. At least in my case, 80% of the clients are of the aforementioned sort and I am in no position to change that. It’s a sad sad thing really.

    Someone should really write a conditionally included universal CSS file to handle IE6 bugs and just be off with it.

  5. I agree with your point, Jeff, but it almost sounds like the best solution would be to actually create a simple(r) design for IE6… Regardless of how good that sounds, most of the times, simplicity is key/goal and hard to achieve in a successful way. Spending time re-designing or creating a specific design for IE6 sounds like bad investment. If you want to do a simple design, then sure, IE6 is a good case study… But most of the times, the simple yet beautiful designs are heavily vested with advanced CSS techniques which… render IE6 unusable (or is it the other way around: IE6 renders them useless?!)

    What Readability does is, literally, is unbrand a website. Plus, most IE6 users’ profile does quite fit with Readability’s demographic. The key would be to simplify while keeping its uniqueness/brand. At the same time, blocking IE6 or offer them a plain bad design is not an option. As designers/developers, we need to focus on usability and user experience for ALL, even if that means that for, at least a few more years, we’ll have to put up with IE6 (and IE7 for that matter–better but far from perfect).

    I propose that we design for standard-compliant browsers, with graceful degradation (e.g. [rounded] corners not rounded in IE) and an informational/educational message somewhere on the page, recommending and indicating browser upgrade/switch. This approach has been taken by many sites already and I believe it’s the “least bad” one.

  6. I do like the idea of making a readable, boilerplate stylesheet to reuse, but it’s still designing for ie6, which doesn’t just render wrong, but actually crashes if you use certain css properties together.

  7. I like to try to encourage users to update their browsers if they are using IE6 by showing a banner at the top of my site linking to IE8, Firefox, or Portable Firefox if they are in the workplace.

    As of late most of my designs haven’t ran into many difficulties with IE6. After learning most of the bugs in IE6, I’ve learned areas of CSS to avoid which makes life a lot easier.

  8. its a good article my only problem was when i went to view the site in safari 3.2.1 and it was a train wreck

  9. I don’t think making a site look completely different on a platform is a good idea, thins about usability and brand recognition. Someone sees a website at home, it looks great, wants to show it to a friend of his, and he gets a completely different appearance. What if he doesn’t realise it’s the same website? Or are thinking of putting a disclaimer?
    I am not talking about pixel exactitude, but of functionality. You just need to know three or four rules/hacks to mend IE6 fallacies, and for the other problems there are easy degradation methods.
    Davide

  10. @Levi: Creating a simpler (but still brand-appropriate) experience for IE6 is the right solution in many cases, I agree. Or flip it on its head: Create a good experience in all browsers (including IE6), then add details that enrich the experience in more capable browsers like Safari, Opera, Firefox, and IE7+. That’s called progressive enhancement, and it’s the baseline best practice for standards-based design. What Andy is proposing is something different and somewhat radical. It’s not for every site. But where it can be used, it kinda rocks, don’t you think?

  11. Meanwhile, there’s also the question of negotiations to consider. Not everyone can get away with this, but…

    “IE6 is a B-grade browser and has been for 30 months. A-level support will cost a premium.”

    Here’s the thing, as pointed out on my own site:

    By actively supporting legacy browsers, we actually make the problem worse by feeding network effects.

    As people start to grasp that Microsoft’s approach to backwards compatibility has changed — see How Microsoft Lost the API War for an excellent and approachable treatment of the underlying issue — this battle will get easier.

    Until then, don’t feed the bears network effects.

    P.S. Will the new site support comment preview?

  12. Seems a bit OTT in my opinion.

    Time would be better spent trying to finding ways of targeting older versions of Safari or Opera.

  13. I don’t really understand how so many people have problems with ie6, I think its rather easy to support, though it takes some planning and maybe some extra markup, its not impossible. PNG support would be nice, but that can be figured out simply enough. What’s the big fuss? I have yet to see much of anything on sites that can’t be done retroactively with minimal fuss, I actually think most of the problem is with the developer’s strategy in the first place.

    Now when you are trying to retrofit legacy apps and things like that, where you don’t have control of the markup to an extent, then yeah, you have to draw the line somewhere.

    Progressive enhancement really is the key, and should be the goal of any developer.

  14. Much pondering about what to do with IE6 without understanding why its use is still prevalent. Spatial Comprehension is a spectrum. At one end are people who love visual experience. At the other end is a group that values the information returned not the visual experience.

    Why not just design for the Largest Common Denominator and add progressive enhancement?

    I never develop without IE6 open. As much as I would like to see it go away it is up to the person using it. To be honest, some people could care less about visual design. Design does not hold the same value to all people. You can’t shape everything.

  15. I have an easier solution, one that makes my life as developer easier, and one that makes clients want to also get rid of IE6:

    charge extra for IE6 compliance

    If you tell a client it costs $X more for the site to work in IE6, and they still want it, fine, extra money for the extra time. But I find that often this leads to them jumping on board the death to IE6 campaign.

  16. Imagine what will happen when this technique becomes widely spread. You open your IE6, land on one site that has a particularly simple design. You go to the next, same design. The next one too. Each sites will be a near clone of the next. This is not really good user experience I think. And indeed, most people won’t even understand why this is happening to them.

    Also, imagine someone sees a webpage at a friend’s. He opens his ie6 at home and gets a different page. Initial reaction: wrong url.

    I still believe in serving an alternative css fixing the ie6 bugs. If you know what you’re doing, this isn’t too much work. If you don’t know what you’re doing, there are tools out there (the ie6 css fixer) that do a whole lot of the work for you.

  17. Yes, I’ve been working on trying to create something similar to this for awhile now as a base to work from (and to which branding can be added) to make my process a bit more efficient. This is definitely a good tool. Thanks for sharing.

  18. If I produced a site which didn’t convey a company’s brand in what is still a popular web browser, I would lose my job. So no I’m sorry, this solution is not useful to those who need to keep their jobs!

  19. I totally agree with the last comment.

    While I really dislike ie 6 to say the least, I feel that many “web evangelists” (let’s call them like that) have no sense of everyday realities…

    In our day to day job, which is customer driven, we simply can’t choose not to care about ie 6. The customers wants the same browsing experience, be it on ie or firefox or anything, and rightfully so !
    It is none of his business to understand what is going on behind the scenes. This kind of solutions are just a way to say “okay, we can’t deal with ie 6 properly, let’s do it in another way”. No, bad thinking: no matter what, it has to look the same, you can’t blame the customer if he demands it.

    Now, morally speaking, this is similar to torture to us web developpers, but again, the business in our jobs decides for us.

    Anyway, I think that ie 6 will die quite soon, not because of ie8, but because companies that still run win 2000 or even nt might drop theses OSes for Seven. They might have skipped vista, but now, running with a very old os is bad. Since win 2000/nt can’t have ie 7 and ie 8, the new windows, for me, is very much welcomed since it will bring a new browser. I firmly believe that companies won’t upgrade theirs IEs unless they change the whole os. That’s the only way ie 6 is going to die. Until then, let’s face it and do what we are paid, and let’s try not to find excuses for not doing so.

  20. It sounds simple enough. Someone could easily create the same sort of thing for IE7 (which I’ve historically had more problems with than IE6).

    Overall, I don’t find I have to spend too much time fixing things for IE6, so I’ll just continue on my way. But for those who constantly have to clean up after making a highly-designed site, I can imagine this would be a godsend.
    It’s certainly better than stripping out the styles, or including a funny CSS statement that I thought would make a good t-shirt.

  21. Meh. I’m through bending over backwards for an 8 year old browser that’s two versions behind. People need to start feeling the pain of navigating the web with that kludge and go upgrade. If it’s IT departments, then their users need to start complaining. Enough with IE6.

  22. P.S.: A quick look at the ie6 css file reveals some glaring problems when it comes to performance. Using expressions are a big no no as the browser recalculates values at every mousemove event, likewise the fact that no CSS hacks are being used means the file will likely be loaded via conditional comments, yet another HTTP request. It’s nice in theory, but again, way too much bending over backwards for a backwards browser.

  23. If you tell a client it costs $X more for the site to work in IE6, and they still want it, fine, extra money for the extra time. But I find that often this leads to them jumping on board the death to IE6 campaign.

    That’s all very well, but do you explain that by doing that, they are writing off about 15% of potential customers from the word go?

    Anyway, I think that ie 6 will die quite soon, not because of ie8, but because companies that still run win 2000 or even nt might drop theses OSes for Seven.

    I’d like to think so, but I work for a company running 2000 and I don’t see it happening in the next year at least :-(

    Also, imagine someone sees a webpage at a friend’s. He opens his ie6 at home and gets a different page. Initial reaction: wrong url.

    You could easily modify the CSS to include some level of site branding, eg a logo and colour. You could also put a box at the top: “Not the page you were expecting? You’re on the right website, but it’s displayed differently because you’re using an old browser. Find out more…” kind of thing. Not an obtrusive thing, just an info box to help people understand they are in the right place and why they aren’t getting quite the full experience.

  24. It’s a good approach, but I think it cannot resolve our problems with IE6. We can consider it like “graceful degradation” ?

    After working some years with so many clients I know that we can’t ignore IE6, ’cause most of their clients are using IE (at least IE6) and we can’t deliver something that doesn’t fills their expectation about layout, no matter what browser are you using.

    So this is a good choice to use it in a personal site, but when you are working for clients, you can’t ignore so many users that uses IE6 yet… Sadly…

  25. As much as I hate IE6 and as often as I threaten to drop support, I still find myself putting in the fixes. Seriously, how hard is it to serve up a small CSS file wilh the necessary hacks to fix the design enough to make is passable in IE6? I rarely have more than a dozen lines of CSS is that in the IE6 only file.

    All of the IE6 CSS bugs and fixes are well documented. Not implementing them is just lazy.

Comments are closed.