IT IS HERE! Get Smashing Node.JS on Amazon Kindle today!
Show Posts
← Back to homepage

No matter how much we all hate IE6, we never seem to agree on what’s the best way to finally get rid of it. Web designers and developers alike have realized that investing too much time and effort in fixing its quirks is not viable from a business perspective, but they still want to reach that audience.

This ambivalence is what still drives people, like myself, to keep writing about the infamous browser.

The tradeoff

The first premise we have to take into account is best summarized by this little website. There’s only two scenarios in which you can go to great lengths to make your website look (almost) exactly the same on IE6 and the rest:

  • You have a very big budget, and a potentially huge IE6 audience. This is the case of websites like Facebook. If you read the Javascript and CSS of their widgets, you’ll know what I mean. The tradeoff here: money invested, poor markup and hacks all around
  • Your website is just too simple. Why would you not try to fix a few CSS issues if your website is just too simple? If there’s no complex Javascript going on, and you have a nice little fixed-width website, there’s no reason why your site should look extremely different.

Mistake 1: make your site look like crap on IE6

The Universal Internet Explorer 6 CSS is the first big mistake I want to talk about. The idea here is that instead of wasting time on IE6 hacks, you just use a premade stylesheet, instead of disabling styling altogether. This is what A List Apart would look like if it was implemented.

This approach is flawed for a wide range of reasons:

  • The idea behind this universal stylesheet is that disabling style would make your website look broken. However, your sites will look broken.
    • If you use a logo with a dark background, it’ll definitely not fit the white background the stylesheet imposes. The same goes for menus and any other graphical item that might not be ready for a white contrast.
    • If a prior version of your website or brand did work on IE6, and after a redesign you implement this, again, people will think something is really off.
    • There’s no “Universal JavaScript” solution. And as we all know, many of our scripts interact with the CSS present in the page. Disabling styling will also mean either disabling JavaScript or having to fix it for IE6 too, with the sort of hacks the universal stylesheet wanted to avoid in the first place (for example, conditional styling).
  • It shouldn’t be black and white, there’s gray. At this time, most IE6 quirks have been perfectly documented. Most have very easy solutions: it’s almost a second-nature for me to add zoom: 1 to clear floats. Of course, making border-radius work on IE6 can be painful, but that’s exactly what you should be doing. Don’t go for all the small details: shadows, rounded corners, transparency. Or do it if the budget and time allows it. The key here is that you can still deliver your brand identity to IE6 without major efforts.

Developers strive to deliver an identity to all possible mediums. If they design custom iPhone versions, why can’t they streamline their stylesheet to make it look fairly good on IE? As an example, my website worked almost perfectly on IE6 with little work. However, when I triggered the rain in my clouds, it just crashed. As a result, I just disabled that particular effect.

Mistake 2: not explaining the user why IE6 is bad

As I was reading the comments on Jeffrey Zeldman’s post, I couldn’t help but be reminded of how condescending developers can be towards their users. The key here is that people will switch if they understand why.

Let’s look at some of the proposed solutions to make users switch.

  • IE 6 Blocker overlay. Blocks content, doesn’t explain why the switch is encouraged
  • Push up the web. Doesn’t block content, but doesn’t explain why the switch is encouraged and to top it off, it presents itself as sort of a deceiving “operating system important notice”.
  • IE6Update takes the cake. Not only does it completely imitate a Microsoft warning in a deceptive way, but chances a very high that the user itself closed a similar message box a long time ago! Remember that Microsoft itself pushed the upgrade to IE7, even through the system automated updates. To top it off, this message doesn’t remotely explain how your website is better in a modern browser, so it’s an “easy close” for your average IE6 visitor.

The correct approach

  1. Deliver the content
  2. Make your website look OK on IE6, and somewhat similar.
  3. Encourage the switch. If you’re looking for a universal solution for this, I would suggest placing a prominent link to PPK upgrade page. He presents the information in a very concise and reasonable way, that everyone can understand. The best idea, however, is to customize the message for your visitors. Explain why your website would be better in another browser. What they’re missing. How easier some tasks would become with better JavaScript widgets or how nicer the navigation could be.

23 Comments

Truth said

IE6 is the LaserDisc of the modern world. You should be ashamed for even trying to encourage a SINGLE person to keep styling for it…

    Guillermo Rauch said

    Obviously you didn’t understand the article. You don’t have to style for it, nor invest too much time on it :)

    Instead of fixing PNG32, use PNG8. Instead of using border-radius hacks, keep them square. But keep your design identity.

    It’s easy to say the laserdisc has been made obsolete by the DVD. It’s much harder to do anything when laserdiscs account for 20% of your sales. There is also a huge overlap in how IE6 and IE7 interpret the DOM – and that’s not going to change. The important differences are things like PNGs – in which case the PNG8 is a great compromise. I would say, if you just didn’t care about IE6, a better solution than a “universal” baseline stylesheet would be, perhaps, Dean Edward’s IE7.js which supposedly fixes DOM-issues with IE6. Seems like a better tradeoff since there are many more IE6 users than there are users with JS disabled.

Great summary of the issues involved and the flaws of various approaches. I’m not sure I agree that the ‘universal’ approach is /quite/ as bad as you suggest, though. In many ways, the points you make highlight that web designs should work well for a multitude of contexts; problems with image colours, etc. would affect users with CSS disabled anyway.

I’m also slightly pessimistic about being able to explain to people why they should upgrade a) because it’s nigh-on impossible to explain to most people why they should do anything with a computer and b) as well all recognise, they might not be able to do anything about it.

Thought-provoking stuff, all round, though.

Hello Guillermo Rauch,

Investing time and efforts to work around the bugs, layout problems, flaws, incorrect implementation of IE 6 defeats (contradicts) by itself the purpose of a browser upgrade or browser switch campain.

> The first premise we have to take into account is best summarized by this little website.

Sorry, I don’t agree. But such site does not explain, does not reach out, does not address the visitors’ intelligence, will to cooperate, etc. With IE 8 supporting browser default CSS rules as suggested by CSS 2.1 (Appendix D), then it is normal and more expectable to see more [recent releases] browsers and browser versions [recent releases] to render webpages the same (layout, functionalities, positioning, etc). The nr 1 reason to comply with web standards is that different browsers render webpages more consistently and webpage layout is more predictable, controllable.

> Your website is just too simple.

There are many sites right now which have insane amount of CSS stylesheets, CSS rules, external script files, CSS rules. Over-declaring. Over-defining. Senselessly over-excessively coding anything, everything. The DOM tree gets very large and very deep. The parsing on top of downloading requires a lot of CPU and RAM to render the webpage. Just insane. It’s a dangerous trend.

> not explaining the user why IE6 is bad

Exactly. They talk about the hate quite a lot. They say IE 6 is old. They say IE 6 is outdated. But none of these characteristics are by themselves or individually relevant or useful for any user when considering an upgrade to IE 6. The top 2 reasons why we now hate IE 6 is because of web standards compliance, web standards support+correctness and security. There are definitely better browsers than IE 6. Age and hate are wrong arguments, inappropriate arguments.

> Make your website look OK on IE6

My approach: only test/verify your webpages/website in the browsers or browser versions that you recommend as a replacement for IE 6. So, obviously, do not verify how your webpages/website work/render in IE 6. Be consequent; be coherent. If your webpages must crash in IE 6, then absolutely do not hide this, do not try to work around this. The matter is: you should not even be even aware of this!

> I would suggest placing a prominent link to PPK upgrade page.

I disagree with any webpage/website promoting IE 7 as a replacement to IE 6. Again, remember the reasons for inviting diplomatically IE 6 visitors by addressing their intelligence: bugs and security. I have lots of reasons to claim that IE 7 is not a respectable, reasonable, rational alternative-upgrade for IE 6,… exactly because of those 2 reasons.

regards, Gérard Talbot

    Guillermo Rauch said

    I would normally agree on ‘make IE6 crash’ approach. However, when you count the visitors to whom you’re just looking like a garbage site, it becomes obvious that it’s not a good idea. Even this site, totally web developer oriented, has a 6% of users coming from IE6. I don’t want to imagine a website geared towards a broader audience.

Sanbor said

The real problem is that IE7 is a crap too…

I agree with the “correct approach” advocated in this blog post as it acknowledges the “real” world . We have to remember that people looking at our websites with IE6 will look at the whole web through IE6 “eyes” – and the majority of the sites they are visiting are ok. So it will be our site that gets the bad rap if we let it crash. Only developers will look at a website through multiple browsers and will compare what the site looks like in various browsers. For most end users, the web looks like what is shown in their browsers. I have come to this conclusion after talking to too many people that do use old browsers and I just can’t dismiss the argument: “…but all these other sites do work…”.

How about this for rude, off-putting, and blunt! We took extreme joy in breaking the news in this way that our site will be completely unaccessible to them:

http://citycrawler.com/no-ie6-allowed.html

Lets kill IE6 !
Nice article, congratulations.

XyKRLA Great post, well written!,

WebDev said

Nice description of the problem. You’ve shown me some new perspectives :)

IE6 is still alive. My Solution is to have a short look if page is usable in IE6. For Firefox and IE7/IE8 have I a closer look and do all the optimizations.

Nick said

I’m all for the blunt force approach. You want to visit this site? Well here is a message that says sorry, not until you quit putting yourself in harms away, and with outdated software that even Microsoft doesn’t fully support.

Simbioziz said

Очень интересная статья! А главное очень обычные и привычные ошибки каждого дизайнера-программиста! Спасибо за статью!

Bill O Matix said

My question is with regards to WP O Matic 1.5 release. I noticed that it’s going to be released May 11. Is that before the next ice age or before the coming of the anti Christ?

ezt said

nice post, however my opinion is different. In my experience in the Netherlands, IE6 users are NOT regular people. It’s big companies that still use IE6. For us, that’s the only reason we still support IE6. The other arguments are mostly irrelevant!

Ben Senior said

Death to IE6! I’ve started using this on my websites when I dont have the budget to ensure they work correctly in IE6:

http://www.ie6nomore.com/code-samples.html

Love the clouds btw

Pyncpsync said

A chto dlya vas vash blog? Vi proffesional’niy blogger ili eto prosto dlya dushi?

Your thoughts?

About Guillermo Rauch:

CTO and co-founder of LearnBoost / Cloudup (acquired by Automattic in 2013). Argentine living in SF.