Professional and Affordable Web Design
0800 080 5401
Using multiple browsers for website compatibility testing
If you are building websites that go beyond personal pages, you will want to ensure that they can be viewed by as many internet users as possible. Sites that dont display correctly in a users browser will probably be closed, never to be visited again.
All web browsers, more or less, will display HTML code according to guidelines set by the W3c.
Some browsers do a better job then others. Its up to web developers to make sure their new, shiny website will display correctly, and can be used by as many internet users as possible.
Some browsers have introduced their own proprietary elements to HTML / CSS, some of which have been w3c approved, others which have not.
Its probably a good idea to avoid using proprietary elements (such as IE's blendtrans) that have not been w3c approved, unless you take into account how they will display on browsers not supporting such elements.
Many developers think that testing a site in the latest version of a browser (like IE8, or Firefox 3, at the time of writing) will automatically ensure the site works perfectly in older versions of the browser.
This is sadly not the case, particularly across Internet Explorer versions.
To a much lesser extent, testing sites in the most common versions of Firefox is also a good idea.
While its often perfectly acceptable for there to be some minor display differences across browsers, some websites may looks fine on one browser yet be completely broken on another. This is unacceptable for any professional company as they will potentially lose sales.
Any developer, even one who doesn't care about cross browser compatibility, would be very unlikely to write an entire website without testing it in a browser.
The only difference between the normal "test in one browser as you build" strategy is that instead of just testing in IE, or Firefox, or Safari, the developer tests the page in several browsers at once.
This may take slightly longer to do, but it does get around the nasty problem of writing an entire site that works in one browser, only for it to be completely broken in another. Fixing problems like that can be very frustrating - fixing one problem leads to another, and so on.
Far easier just to fix tiny faults as they arise.
So, which web browsers do we test in, and how do we install more then one version of the same browser?
Firstly, lets take a look at what web browsers are out there. We'll get a rough idea by looking at our own websites statistics.
Which web browsers are visiting our website?
To get a rough idea of the browsers people are using, we used Google Analytics to examine our own site - Mutiny Webdesign.
The report gives us an idea of browsers used to visit our site. As our site is viewed by a lot of web developers and programmers, the percentage of Firefox users may be higher then other commerce sites.
- Firefox 49.92%
- Internet Explorer 39.50%
- Safari 5.01%
- Chrome 3.52%
- Opera 1.53%
- Mozilla 0.29%
- Camino 0.14%
- Konqueror 0.03%
- SeaMonkey 0.03%
- Mozilla Compatible Agent 0.02%
Unfortunately, Google Analytics doesn't show us the browser versions. We can find this (or at least find out what the browsers say they are) through server logs.
As we have stated, the easiest (in the long run) methodology is to test the site as its being build, in multiple browsers.
Testing this way in every web browser in existence would take unfeasibly long.
We need to make a short list of browsers to install for our "test in several browsers as you build" process.
Choosing the web browsers to install
Happily, several browsers in our list all use the same render engine.
Safari, Chrome, and Konqueror all use the "webkit" renderer to display pages - in 99% of cases, sites will display identically across all of these browsers. This is good enough for our quick test process.
We have decided to install the following browsers:
- 1. Internet Explorer 6, Internet Explorer 7
- Firefox 2, Firefox 3
- Google Chrome (single version)
- Opera (single version)
Without wishing to offend users of any other browsers, we feel that testing during our build process in the above browsers will be sufficient.
Before the site goes live, we would test in the full list of browsers.
Now we have a plan, we need to find methods to install multiple versions of Internet Explorer and firefox.
Installing multiple versions of Internet Explorer
At the very least, its worth installing Internet Explorer 6 and 7, and by the time you read this tutorial, possibly explorer 8 as well.
There are many ways to install more then one version of Explorer on Windows XP.
Vista does, as far as I can see, require a virtual machine to get full IE6 features. You can get pretty much all features using IEtester however (see section on this before installing a virtual machine).
If you go the virtual machine route, the virtual machine allows a new instance of Windows XP (with IE6 installed) to be ran from within Vista. All files are provided by Microsoft.
Multiple IE Installer includes an installation package for IE versions 3 to 6, configured to allow more then one version to be installed (and ran) at the same time.
Download and install the Multiple IE application
IE6 for Vista
There are two solutions that we use. The first is much quicker.
1st solution - IETester
Use the IETester utility, which is absolutely awesome.
This utility makes it very simple to test multiple versions of Internet Explorer from one browser interface. A couple of notes from the developer:
- The Previous/Next buttons are not working properly
- Focus is not working properly
- Java applets are not working
- Flash is not working on IE6 instance in user mode : A solution is to launch IETester as admin user and Flash will work.
- CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
2nd solution - virtual machine
1) Download and install Microsofts virtual machine
2) Download and install Microsofts "Hard Disk Image for testing websites with different IE versions"
3) Run the Virtual machine, and create a new virtual machine. Load the "hard disk image" VHD file relating to Windows XP with IE6 installed.
We have a few very brief tips to help code IE6 friendly websites, if you decide to. Thanks, Bill!
- don't use li in places where you need 0 margin
- use padding rather than margin where possible
- take care with floating elements
- ie6 handles things oddly and can make them wider than other browsers will, so setting an exact pixel width of two left floated elements may not work
Installing Firefox 2 and Firefox 3 so we can use both at the same time
We already have Firefox 3 installed. Do not install Firefox 2 just yet!
Your profile stores bookmarks, passwords and settings. It also determines which add ons are currently running in Firefox. Not all add ons are compatible between Firefox versions, so we are going to create a new, blank profile just for Firefox 2 to use.
To create a new Firefox profile:
a) close down any Firefox windows that are open.
b) Go to the start bar, and select "run"
c) Enter the path to Firefox into the run box. Use the format below:
"C:\Program Files\Mozilla Firefox\Firefox.exe" -profilemanager -no-remote
(Note the speechmarks. The path to Firefox on your machine may be different.)
d) With the profile manager running, create a new profile for Firefox 2. We called ours "Firefox2".
When created, select "exit".
e) Download Firefox 2. It can be found here
f) Install Firefox 2. Select custom installation option. Install it into a directory called Firefox2.
g) Create a shortcut to Firefox 2. The shortcut will tell Firefox 2 to use the profile we created.
The target of the shortcut we created is: "C:\Program Files\Mozilla Firefox2\firefox.exe" -P firefox2 -no-remote
The "start in" area of the shortcut is: "C:\Program Files\Mozilla Firefox2".
This may differ depending on where it is installed on your machine.
This method also works if you have Firefox 2 installed, and want to add 3. Just be careful not to overwrite your default profile.
Using your multiple browsers effectively
Now you have IE6, IE7, Firefox 2, and Firefox 3 installed, you can quickly check your webpages for cross browser compatibility.
Minor changes between browsers are to be expected - use your own judgement as to what is acceptable.
All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.
Make a Comment
See Full Portfolio Some Of Our Work
Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...
County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...
Customer News & Resources
At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.Introduction to sitemap.xml
Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »Center a web page in CSS
One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »