Internet Explorer: A web designer’s worst nightmare and how to deal with it

Perhaps you have heard it before, or perhaps you have come face to face with this enemy yourself. Internet Explorer (IE) is often a web designer’s worst nightmare, as it’s always a bit behind the times, a bit quirky, and too popular to ignore. All Windows operating systems come with IE pre-installed, which means that a large part of the population regularly uses this browser 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 make a site 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 its fullest. But with nearly 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 backwards (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 the 6.4% using IE9.

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

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

1. Write valid code that complies with W3C standards, and 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 (such as using (X)HTML for structure and CSS for layout), it should appear fairly consistently across browsers, including IE7/ 8. . I don’t comment on using HTML5 as I don’t currently work with it, but based on sites I’ve seen and a little research I’ve done, HTML5 isn’t exactly supported by older browsers, and particularly IE. You can also validate your CSS and scripts, so be sure to go ahead and do it.
2. Cross-browser testing, including older versions of IE. This is where I should mention Internet Explorer Developer Tools for those who haven’t figured out this handy little system that IE has, as well as other browsers like Firefox. In IE9, you can find them under the Tools button on the toolbar and then click Developer Tools F12, or just press F12 on your keyboard. There are plenty of 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 compatibility mode with IE9, 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 your old computer with the old browser still installed.
3. If you’re on a Mac or for some other reason you can’t get to Internet Explorer, you can use a renderer like netrenderer. It only provides a screenshot of your site and doesn’t let you test the interaction (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 of testing, 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, after you’ve coded the thing, to open it in IE7 and see that, amazingly, it looks the same as it does in Firefox. now That’s it an achievement. And what is more important, your site can impress everyone of its users, and not just those with better browsers. Unless that is your target audience, of course.