Maybe you’ve heard it before, or maybe you’ve been face-to-face with this enemy yourself. Internet Explorer (IE) is often a web designer’s worst nightmare, as it is always a little behind the curve, a little quirky, and way too popular to be ignored. The Windows operating systems all come with IE pre-installed, which means that a very large portion of the populace regularly use this browser instead of switching over to a better browser. Maybe it’s too much of a hassle, maybe they’re not computer-savvy enough to know how to switch or even why they should. Now it may seem ironic, but I am currently writing this post using IE, but actually, the very reason why I am doing so is because I am a web developer. I know that if I can get a site to work properly in Internet Explorer, it’s going to work even better in Firefox.
Some web designers choose to ignore IE completely, letting their visitors know that they had best download Firefox or Chrome if they would like to experience the site to its fullest. But with almost a fifth of internet users using IE, this solution may not be the wisest course to take. Others may choose to make their websites compliant to IE9 but not older versions (since IE9 is almost as good as as Firefox, Chrome, and other standards-compliant browsers); but again, we have almost 9% of users using IE8, which is more than the 6.4% using IE9.
So what’s to be done? As a web designer, all is not lost. There are several things that one can do to ensure that a design works well in all browsers, and degrades nicely if it uses elements not supported in IE, especially those older than IE9. I must admit that I refuse to try to make a site compatible for IE6 or older; to try to do that would be to complicate the code with all kinds of hacks, and it’s pretty safe to ignore IE6 at this point. In April of 2012, the percentage of users using IE6 was 0.7%, and considering that these users should probably be accustomed to broken sites by now, I choose to ignore that fringe population.
So here’s a short list of things to think about when designing a site to be truly cross-browser compatible:
- Write valid, W3C standards-compliant code, and validate it with the W3C validator. You can write in HTML 4.01 or XHTML 1.0, and as long as it validates and uses good coding practices (such as using (X)HTML for structure and CSS for design), it should appear pretty consistently in all browsers, including IE7/8. I make no comment on using HTML5 as I do not currently work with it, but from sites I have seen and a little research I have done, HTML5 is not exactly compatible with older browsers, and particularly IE. You can also validate your CSS and scripts, so be sure to go ahead and do that.
- Test in multiple browsers, including older versions of IE. Here is where I must mention the Internet Explorer developer tools for those who have not discovered this handy little system that IE, as well as other browsers like Firefox, have. In IE9 you can find these in the Tools Button in the toolbar, and then click F12 Developer Tools, or just simply hit F12 on your keyboard. There are a lot of handy tools here, from disabling scripts or CSS (try disabling CSS and Javascript sometime to see how your site would look without them; this gives an idea of how screenreaders will read your site), to validating your code. There is also a browser mode that allows you to select IE9 compatibility mode, IE8, or IE7 (unless you have IE8 installed on your machine, in which case it will allow you to select IE7 and IE6). So with this tool you can test your site on the older versions of Internet Explorer without dragging out your old computer with the old browser still installed.
- If you are on a Mac or for some other reason can’t get Internet Explorer, you could use a renderer like netrenderer. It only gives a screenshot of your site, and does not allow you to test interaction (even something as simple as scrolling down the page), but it will give a rough idea of how well you’re doing. For more realistic ways of testing, you might try a Google search of “Internet Explorer emulator.” There are other options, but as I don’t own a Mac, I have not bothered to test any of them out.
- Consider alternate ways of coding your site. Maybe instead of using CSS to make rounded corners and shadows and gradients, you can go old-school and use images. Often images can be made small enough that it doesn’t take that much longer to load, and the result is a beautiful site that looks exactly the same in all browsers.
It’s a really nice feeling, after having coded the thing, to open it up in IE7 and see that, amazingly, it looks just the same as it does in Firefox. Now that’s an accomplishment. And even more importantly, your site can impress all of your users, and not just those with better browsers. Unless that’s your target audience of course.
