Browser Emulators - Testing Your Design
Even the web designer noob quickly learns that not all browsers are created equal. Take the simple horizontal rule <HR> for example. Internet Explorer (IE) and Firefox have very different ways of handling this simple HTML element. Try this little experiment:
- Create an empty HTML page with just the basic <html>, <head> and <body> tags.
- Add an <hr> element that specifies 80% width - <hr width="80%">
- Now right align the horizontal rule by adding a style definition - style="text-align: right"
- Take a look at the page in IE and it should align right just as you would expect. Now take a look in Firefox. Not quite right (pun intended).
- Now change the style to style="margin-right:0" and check both browsers again. Now you have Firefox looking good and IE having an attitude.
This is just one simple example of the multitude of subtle differences between browsers that can give web designers headaches. That is where the emulator comes in by giving the web designer a quick and easy way to test out new designs and changes on multiple browsers.
What is an Emulator
Emulators are also used to simulate rendering for mobile devices. With mobile device usage becoming more and more widespread, web designers have to be more aware of not only what browsers their designs will be viewed in but also on what types of devices.
How Do They Work
The general concept involved in creating an emulator is pretty simple, strip a browser down to only its rendering components so that all it does is read in your web page HTML then render it to a window. All you need to know are the rules that particular browser uses to render a page then apply those rules to your emulator. In short it's the browser window without the toolbars and buttons. Note: While some emulators are very good at rendering, few of them are 100% accurate. To get the best accuracy you will have to install the actual full version of the browser.
Where do you get an emulator?
There are emulators for just about every popular browser. They are available as freeware, licensed software that is installed on your computer and as web-based service solutions. Some emulators also come as add-ons to development software packages such as Visual Studio. You can even find emulators for some mobile devices that are provided by the device manufacturers. What you won't find, however, are emulators that cross between Mac's Safari and the PC or PC browsers and the Mac unless you look to web- based services.
Because of this factor and others, I believe that the web-based services provide the most cost-effective solutions. With most browser emulator services such as BrowserCam you enjoy the ability to select your operating system, screen resolution, browser and version from just about any browser that you would need. However, this all comes at a price that can be a bit steep, especially for the part-time or hobbyist web designer.
Do I Need an Emulator?
No you don't... but you do need some sort of method to test your web designs in multiple browsers. Emulators provide the easiest solution for testing but they will likely cost you either lots of time finding the right browser emulators or money for service and/or software fees.
Before deciding on your emulator requirements first make a list of all browsers and devices that will be required for your design. If you have access to any web viewer statistics for your site that can go a long way in helping you determine your browsers and devices. If you are creating a brand new website then the latest general usage browser statistics from W3C can be helpful.
Next determine if your requirements warrant having any emulators at all. For example, if you just need to test against the latest PC browsers and versions there is no need to do anything but install them on your computer. If you do need to test against multiple versions of browsers or browsers on different operating systems then you will now need to consider your testing time line.
With web-based services you often are purchasing usage of the service for a set amount of time. If you think you can get your testing completed in a day or two then a short term contract with a web-based service may be your most cost- effective alternative. If your testing will be lengthy or ongoing then you may want to consider finding the necessary emulators for your needs.
There are always alternatives. If you have the need to test against multiple browsers and versions on an ongoing basis it may be simplest for you to get a virtual PC software package and install the full browser applications that you need to test against. The virtual PC software simply allows you to run different browser applications that would normally not be compatible with one another (like the many flavors of IE) from a single computer. It does this by basically running multiple instances of the operating system at the same time.
In order to use this solution, though, you will need to have the installers for the multiple browsers that you want to test against. A good source for older versions of many different browsers can be found at http://browsers.evolt.org/ . Of course, the virtual PC solution still may not solve your cross-platform testing problems.
In the ever-changing world of the Internet it can be difficult to find the balance of time, money and desired results. Testing your website design is no exception. In my case I find it easiest to use a web-based browser emulator service for testing my larger projects. I try to time my testing and final design tweaks to take no more than one month so that I can keep the usage fees to a minimum. For my smaller projects I use the browsers that I currently have installed on my computers. I am also fortunate to have Vista, XP and OSX computers running the newest versions of Firefox, Chrome, IE8, IE7 and Safari. I always keep my older computers just so that I can take them out and dust them off for testing from time to time. Happy testing!