For some unlucky designers, there are still occasional business requirements for supporting IE6. As it happens, building mobile first, responsive sites gives you a new option.
I don’t really want to go into the why and wherefore of the client needs, just that for some, it needs to be done. This is more about giving you another option for making it a little easier.
Simple. IE6 = Mobile
Quite simply, from now on as I typically build using Andy Clarke’s 320 & Up, I’m going to treat IE6 the same as I do “mobile” screens.
This means a block layout for the most part but it also means I’m able to provide a decent, accessible experience for those users rather than brutally stripping out styles or like in the case of Twitter.com sending IE6 users to their mobile (mobile.twitter.com) site which has a couple of obvious drawbacks:
- You need a mobile site
- It’s splitting off traffic to a different domain/site (eg. mobile.twitter.com)
When it comes to IE6 support, I do believe it’s now at the point where working to support it is pretty much at loggerheads with moving the web forward and using all the great techniques available these days to build for the future rather than support the past.
I rarely even check in IE6 any more but this is more a “here’s an option if you have to” type post (so please read it as such!)
Options for dealing with IE6
You do have a couple of means available to encourage users to update:
- Install ChromeFrame
- Use the IE6 Universal Stylesheet
- Divert to a mobile site like Twitter.com does
- Add in a simple notification bar of some sort and forget IE6 exists any longer. In our experience, it didn’t impact on conversions
All reasonable options, they make content accessible to users although with varying levels of experience but I think it’s fair if you’re leaving IE6 behind, you can by all means consider either as good solutions. I don’t have access to any research about what users make of Chrome Frame when presented with a big fairly ugly looking Google banner/box (I’d be interested in hearing from you if you have links/research/tests etc).
An example of IE6 as mobile
As part of our day at Offroadcode, we also have our little ecommerce business, Cutting Edge Knives. This utilises a very simple “mobile” stylesheet triggered when screen resolution is less than 767px for convenience. It’s a bit rough and ready but we simply have a “screen.css” and an additional “mobile.css”.
Previously as we’d not even looked at Cutting Edge Knives in IE6, we didn’t even notice that it was completely inaccessible, content was all over the shop [no pun intended]. We know that because we’re targeting a wide audience and that a sale is a sale, we needed to fix that. The quickest way was to take inspiration from Twitter.com but without the extra domain hassle.
By using a conditional stylesheet for IE6 and re-adding the mobile stylesheet as one that was just loaded by default, rather than trigged by a media query/screensize (see Fig 2 above) IE6 suddenly becomes usable, we don’t need to mess around checking it because we know it works, it’s wider sure but users can buy our products.
Because we now take the “mobile first” approach, (see the stylesheet for this site using 320 & Up), specific widths are only triggered at bigger screensizes through the media queries, the only thing really delivered to “mobile” is general styling and block layouts. Float, and widths come in at bigger sizes.
It took less than an half an hour and has resulted in a couple of sales to IE6 users. Scale this up on bigger sites, it’s a small tweak that’s probably worth considering.
The downsides
At the moment, sadly we do repeat ourselves a little in “re-triggering” the mobile stylesheet with a simple conditional for IE6. Not sure how to get around that without doing anything too inception like so we currently just load all our stylesheets (through our compressor) using:
<link rel="stylesheet" href="/assets/Compressed/Css.aspx?f=~/assets/css/screen.css;~/assets/scripts/dragdealer.css&v=61" media="screen"> <link rel="stylesheet" href="/assets/Compressed/Css.aspx?f=~/assets/css/mobile.css&v=61" media="handheld, only screen and (max-width: 767px)"> <!--[if IE 6]><link rel="stylesheet" href="/assets/css/mobile.css" media="screen" /><![endif]-->
It’s repeating ourselves but I think there are worse crimes taking place on most websites (again, feel free to jump off and tweak the suggestions). Ideally, for the purpose of this it would be nice to allow media queries to add on sizes + browsers although obviously it would open the floodgates for cluster****ery but something like
@media only screen and (min-width: 480px) and (IE6) {}
would be perfect, however we’re trying to get away from this sort of specific coding practice so we’ll put that one on the table and walk slowly away for now.
Just a thought anyway if you’re stuck having to keep IE6 alive, I’m sure it’s not rocket science and others already do this but it might cut out the pain for someone… I also don’t need to hear this.
Addendum:
Question: If you’re developing mobile first why do you need a mobile specific style sheet for IE6?
Answer: The example given here is based on one of our earlier responsive efforts where we kept things simple with a “desktop” stylesheet and a single “mobile” stylesheet so in this case, the site wasn’t designed mobile first, that functionality was bolted on after.
However, I mentioned building with 320&Up/Mobile first and this comes into play particularly because your large screen styles will load no matter how you build because your media queries work that way. There’s no way (I think) of specifically targeting a browser size & a browser as with the code example above. If you did want to use this option, I’d suggest using the split stylesheet version of 320&Up purely so you can “re-trigger” your initial stylehsheet within an IE6 conditional.
As I mentioned, it’s only a possible option, by no means a “you should do this” type post but I welcome thoughts/suggestions either way!