David Goss

IE6 users are people too

Posted in Uncategorized by dvdgoss on March 21, 2010

Ever since my (very late) entry to this industry, I’ve always had a bit of a problem with Internet Explorer 6. That is, I have a problem with other people’s problem with the problems that IE6 can cause.

IE6 is just one of those things. It’s a ballache, for sure, but it’s happened and you just have to deal with it, until one day you don’t. Thanks to efforts over the last few years from lots of people, including Microsoft, that day is drawing near. Yet so many people are still angry about it, and more importantly angry at IE6 users. These people are not morons, or stubborn, or obtuse, or backward. As Marcus correctly points out every time the topic is raised on Boagworld, they either don’t know or they don’t care.

The not knowing has always been a big part of the problem, and something which has recently been addressed (in Europe at least) by Microsoft being forced to deliver a “browser choice” screen to Windows users who only have IE installed. How successful this will be remains to be seen, but it should get at least some users upgrading from IE6 to IE8/9, which is great. The other bit is the not caring, and that’s what seems to get designers’ backs up:

“What do you mean you don’t care? Don’t you want a richer experience online?”

No, they do not. People simply are not bothered. After all, they get on fine with what they use now, so why change? The sensible practise of not fixing things that ain’t broke comes in, and if you take a step back from your role as a web professional then you’ll see that it’s a logical decision to make. Wrong, as we know, but still logical. The IE6 user, then, is neither enthusiast nor expert in the field of web browsers, which means that no matter how hard you try you’re unlikely to convince them they need to upgrade their IE or switch to a different browser. In fact, you probably fail as soon as you try, because there’s nothing worse than having someone’s opinion about a topic you have zero interest in forced on you.

So this leaves us with IE6 users who are going to be difficult to tempt from their old browser, which leaves you scratching your head because IE6 isn’t playing ball with your CSS. You might want to just say “screw it” and let IE6 users have the broken layout. If you’re a bit more extreme, you might want to serve them a very basic stylesheet or just unstyled semantic ¬†markup. Alternatively, if you’re completely mental, you might want to block them from accessing the content altogether.

The third option is obviously never appropriate (unless you are running an app or site which is just too complex for IE6, in which case you should gracefully explain to the user why they can’t access the page and what they can do about it) and in my opinion neither is the second. It seems just a little spiteful, and that’s not really fair on IE6 users – they’re people too, and their money is as good as anyone else’s. The first option is acceptable if your stats tell you that IE6 users make up a low percentage of your visitors – too low, in other words, to recoup the cost of fixing the layout. Of course, you’re unlikely to literally do nothing, unless the problems are very minimal. More likely, you’ll link to the amazing IE7.js script by Dean Edwards which will patch IE6 with support for things like fixed positioning and alpha transparent PNGs. This is absolutely fine.

If your concentration of IE6 users is still around 10% or higher, then you ought to think a bit more carefully. If the IE7.js script fixes everything, great – but chances are it won’t. So instead, try going through the site in IE6 and writing down all of the problems. Personally, being a tiny bit out with some margins doesn’t count as a problem for me as long as the layout itself is intact – you might feel differently. So once you have your list, you can scrutinize each one to see if it really needs to be fixed, keeping in mind the characteristics of an IE6 user compared to other users.

A good example is my recent redesign of thackerays.co.uk, where the ¬†IE6 stage was very brief. The first problem was inevitable, what with the layout making use of so many floats: IE6 was doubling the left and right margin values on floated block elements. This was fixed quickly by specifying these elements as display: inline in the IE6 stylesheet. Straight away, the layout looked familiar again. Next up were some areas where IE6 had not collapsed the top and bottom margins properly. I think this may have something to do with using the “clearfix” method for self-clearing floats on contaners for floated elements, but I’m not sure. Anyway, this was fixed by just overriding a handful of margin values in the IE6 stylesheet.

I then turned my attention to the navigation. The site uses a couple of “mega menu” elements to give users quick access to categories within the men’s and women’s departments. These menus consist of divs which are absolutely positioned within their parent list items and pushed off screen by negative margins. The :hover pseudo-class on the list item then pulls the margin back in so the menu is shown insantly on hover and with no JavaScript. Great, but IE6 only supports the :hover pseudo-class on anchor elements, and will ignore them for anything else, including list items. So, when IE6 users hover on one of the relevant list items, they get no mega menu. They can, however, click on the list item’s regular link, which takes them to a page containing all options that are in the mega menu, and more. Therefore, IE6 users wouldn’t know they were missing the mega menu and would still be able to navigate the site just as easily – albeit not as quickly. So that issue was simply left alone.

One thing I did do, though, was reconsider the CSS used for the content within the mega menus. Because it has different levels of divs and different levels of anchors, there were quite a few lines of CSS used to override inherited styles. Child selectors eliminate (or reduce) the need for this, but aren’t supported by IE6. This would be a problem anywhere else on the site, but since IE6 users are never going to see this mega menu, it doesn’t matter, so by switching the method to child selectors I was able to remove several lines of CSS and a couple of class attributes in the markup. So, analysing my IE6 problems was helping to improve my site for other browsers.

The only area left to look at was form inputs. To avoid adding lots of classes to the markup, I used attribute selectors in the CSS to style various types of input elements. Of course, IE first supported attribute selectors in version 7, so my poor IE6 users were being left with bog standard text fields, checkboxes and buttons. One solution I considered was to have a jQuery function slipped into the conditional comments which would add corresponding classes to input elements (e.g. input.button for buttons, input.text for text fields) and then apply my desired styles in the IE6 stylesheet. This would have worked fine, but I thought about the IE6 user first. They aren’t an expert or an enthusiast (or if they are, then they must be using IE6 against their will in which case they’ll be used to differences) and they’re running Windows XP or lower, so are they going to be scared off by seeing generic form elements? I don’t think so, especially when the site’s visual style is conservative and monochrome anyway.

And then…that’s it. All this was done in under an hour, which when we’re talking about (at time of writing) 10% of users is not bad at all. Those users are still getting a site that’s pleasing to look at and use, without compromising on load speed by downloading extra scripts. What’s more, because the IE6 styles are cordoned off in their own stylesheet, the work is done. I can leave it there forever, not having to worry about trawling through the main stylesheet and taking out the hacks once IE6 share is low enough.

Of course, I’m not saying this will work for every project – far from it – but in some cases this considered and minimal approach could be the most efficient and rewarding, and might cause you to be a bit less angry with people who use IE6. At least sometimes.

Other, possibly better articles elsewhere:

Advertisements

Buying time

Posted in Uncategorized by dvdgoss on March 11, 2010

People talk about “you can’t buy time”. I disagree with that – you can completely buy time. You can buy time with money…

Jason Fried asserts the direct relationship between time and money whilst talking to Dan Benjamin on The Pipeline.