1. Computing & Technology

Discuss in my forum

Designing Web Pages with Internet Explorer

Using Internet Explorer in Web Design

By , About.com Guide

Internet Explorer is one of the most commonly used browsers on the internet. And designers who ignore it do so at their peril. Luckily IE is getting more and more standards compliant and there are ways to design pages that take IE's quirks into account. Learn how to design pages for Internet Explorer that still look good in other, more standards compliant browsers.

Internet Explorer Versions and Usage Statistics

In January 2011, Internet Explorer had about 40% of the browser share on the internet according to W3 Counter. While it's no longer a majority, it is still the lion's share of the browsers. This means that this browser is one that designers still need to look at when building their web pages. 26% (of the total) use IE 8, 10% use IE 7 and 4% use IE 6(!!).

While it is good to know the general stats of the internet at large, when you're building a website, it's better to know the usage patterns of your customers and write towards that. While it's true that a lot of general purpose sites are going to need general information, not all sites are the same. A site focused on Macintosh computers is going to have a much lower percentage of IE users, for example.

And it's also not a good idea to use statistics to prove that you should be writing browser specific designs. Browser statistics can change quickly, and it's better to design so that your pages look good on most browsers.

Tags and CSS Styles Specific to IE

If you are going to write web pages that are specific to Internet Explorer, you should be aware of the tags and properties that are only supported by IE. At this time there are two:

Internet Explorer also supports conditional comments. These are comments that can be used to show and hide different parts of your code depending upon the conditions in the comment.

And while Internet Explorer 8 doesn't support CSS 3 very well, there are some CSS extensions that can help you improve your Internet Explorer web pages. These extensions add scrollbar colors, zoom functions, overflow and more.

Tips for Designing a Page for Internet Explorer

Designing pages for IE, especially less standard compliant versions like IE 7 and below, can be challenging. Especially if you want your page to look good in standards compliant browsers as well. The first thing you should be aware of is how IE 7 and earlier versions handle the CSS box model. In order to get those browsers to work with CSS boxes, you need to know how to force them to play nice.

Then, you should be aware that it is much easier to create a website for IE by designing the site for Firefox first. By designing for Firefox (or Chrome, Safari, or another standards compliant browser), you get the page looking how it should with standard HTML and CSS. Then you just have to add in small tweaks to get it to display correctly in IE.

Internet Explorer 8 has also added in a feature called compatibility view. This allows IE 8 and newer versions to render a page using IE 7 view modes or even IE 5 (quirks mode) view modes. You can force the view mode that IE uses with a meta tag as well.

Tips for Using IE

When you're designing for Internet Explorer you need to be able to test with it. This means that you have to use the browser. But if it's not your standard browser you may not know how to do important things like clear the cache or view the HTML source code.

Another thing you'll notice is that you can only have one version of IE on Windows at any given time. While it would be nice to think that everyone downloads the most current version of the browser as soon as it comes out, this isn't the case. And so unless you have the ability to run 3-5 different Windows machines, you need to be able to test in different versions of IE from the same computer. I have used BrowserCam a lot for testing, but another site that many people like is Browsershots.

HTML 5 and Internet Explorer 8 and Lower

One of the biggest frustrations that many designers have right now is that IE 8 and lower don't support HTML 5. But there are ways to enable HTML 5 in IE 8 and lower. And if you're looking into HTML 5 video, you can convert your video to FLV so that it will play on IE from the HTML 5 video tag.

©2012 About.com. All rights reserved.

A part of The New York Times Company.