Maybe you’ve heard it before, or maybe you’ve come face to face with this enemy yourself. Internet Explorer (IE) is often a web designer’s worst nightmare, as it is always a little backward, a little quirky, and too popular to be ignored. All Windows operating systems come with IE pre-installed, which means that a large part of the population uses this browser regularly instead of switching to a better browser. Maybe it’s too complicated, maybe they’re not computer savvy enough to know how to change or even why they should. Now it may seem ironic, but I am currently writing this post using IE, but actually the reason I am doing it is because I am a web developer. I know that if I can get a site to work properly in Internet Explorer, it will work even better in Firefox.

Some web designers choose to ignore IE entirely, letting their visitors know that they are better off downloading Firefox or Chrome if they want to experience the site to the fullest. But with almost a fifth of Internet users using IE, this solution may not be the smartest way to go. Others may choose to make their websites compatible with IE9 but not earlier versions (since IE9 is almost as good as Firefox, Chrome, and other standards-compliant browsers); but again, we have almost 9% of users using IE8, which is more than 6.4% using IE9.

So what should be done? As a web designer, all is not lost. There are several things that can be done to ensure that a layout works well in all browsers and degrades well if you use elements that are not compatible with IE, especially those older than IE9. I must admit that I refuse to try to make a site compatible with IE6 or earlier versions; trying to do that would be to complicate the code with all sorts of tricks, and it’s pretty safe to ignore IE6 at this point. In April 2012, the percentage of users using IE6 was 0.7%, and considering that these users should probably be used to broken sites by now, I choose to ignore that fringe population.

So here is a short list of things to think about when designing a site to be truly cross-browser compatible:

1. Write a valid code that complies with W3C standardsand validate it with the W3C validator. You can write in HTML 4.01 or XHTML 1.0, and as long as you validate and use good coding practices (like using (X) HTML for structure and CSS for layout), it should appear fairly consistently across all browsers, including IE7 / 8.. I’m not commenting on using HTML5 as I don’t currently work with it, but from the sites I’ve seen and done a bit of research, HTML5 isn’t exactly compatible with older browsers, and IE in particular. You can also validate your CSS and scripts, so be sure to go ahead and do it.
2. Test in multiple browsers, including older versions of IE. This is where I should mention the Internet Explorer development tools for those who have not discovered this handy little system that have IE, as well as other browsers like Firefox. In IE9, you can find them under the Tools button on the toolbar and then click on F12 Developer Tools, or just press F12 on your keyboard. There are many useful tools here, from disabling scripts or CSS (try disabling CSS and Javascript at some point to see what your site would look like without them – this gives an idea of ​​how screen readers will read your site), to validating your code. . There is also a browser mode that allows you to select IE9, IE8, or IE7 compatibility mode (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 older versions of Internet Explorer without dragging your old computer with the old browser still installed.
3. If you are on a Mac or for some other reason you cannot get Internet Explorer, you can use a renderer like netrenderer. It only provides a screenshot of your site and doesn’t allow you to test the engagement (even something as simple as scrolling down the page), but it will give you a rough idea of ​​how well you’re doing. For more realistic ways to test, you can try a Google search for “Internet Explorer emulator.” There are other options, but since I don’t have a Mac, I haven’t bothered to try any of them.
4. Consider alternative ways to code your site. Maybe instead of using CSS to make rounded corners, shadows, and gradients, you can go old school and use images. Images can often be made small enough that they don’t take 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, having coded the thing, opening it in IE7 and seeing that surprisingly it looks the same as it does in Firefox. Now that is an achievement. And most importantly, your site can impress. everybody of its users, and not just those with better browsers. Unless that’s your target audience, of course.