When launching a new website it is essential to test it in across multiple browsers.  Unfortunately this also includes testing it on older versions Internet Explorer.

Is it really necessary?  Yes.  While the majority of internet users are using modern browsers, there are still a number of users with older computers, normally sitting at home, who are still using old browsers. These consumers may not been technically savvy, but they still have money to spend, and may well be the target market for the client you’re building the website for.

Some example screenshots are below, showing just how different websites can look in older versions of Internet Explorer.

The Easiest Way To Test Your Website In Internet Explorer 5, 7, 8 and 9

Internet Explorer 10 and 11 have an emulation function built in, to emulate Internet Explorer 5, 7, 8 and 9.  It’s very simple to use.

  1. View the website you want to test in Internet Explorer.
  2. Push F12 to bring up Developer Tools.
  3. Scroll to the bottom of the menu.  The last menu item is Emulation.
  4. In the Document Mode drop down choose the version of Internet Explorer you want to test for.  The default is “Edge” (the latest version).  You can choose from IE 5, 7, 8, 9 or 10.
    Internet Explorer Emulation mode
  5. When you select a Document Mode, the website will refresh and show that version

Example Results

Here are a quick few examples of how different the site can look.  These screenshots were taken during the testing phase on a client’s new website recently.

Comparing How the Website Header Looks

How it looks in modern browsers:

IE11 - correct view

Here is how it looked in IE7 (before we fixed it):

IE7 Website Not Looking Correct

The differences are:

  • The background colour has disappeared from the header
  • The text on the right side of the header has changed location and colour.
  • The three sections across the page have changed layout … I’ll show this clearly next.

Comparing How the Three Sections Look

How it looks in modern browsers:

3 sections - IE11 and modern browsers view

How it looks in Internet Explorer 7:

IE7 - the broken view

Differences:

  • The layout is completely broken!
  • The background colour of the section is gone.

As these screenshots demonstrate, it is still very important to check website designs in older versions of Internet Explorer, as there are many things that dramatically change, and sometimes make content unreadable.

Thanks to the emulation feature built into the latest versions of Internet Explorer, it is now super easy to test your website with older versions of IE.

Josh Moore

Josh Moore

I love marketing and technology. I run Duoplus Online Marketing and enjoy helping companies grow their income especially through using online marketing effectively.
Previous post Strange Bug with the Facebook Likebox Plugin
Next post Custom Cropping of Thumbnails with the Canvas WordPress Theme from Woothemes