Tuesday, March 19, 2024

Browser Emulators – Testing Your Design

Introduction

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:




  1. Create an empty HTML page with just the basic
    <html>, <head> and <body> tags.

  2. Add an <hr> element that specifies 80% width –
    <hr width=”80%”>

  3. Now right align the horizontal rule by adding a style
    definition – style=”text-align: right”

  4. 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).

  5. 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 pretty much exactly as their names suggest,
they emulate how a browser would render a web page. The
obvious benefit is the ability to test out your web pages
under multiple browsers without having multiple
installations of browser applications and versions installed
on your computer.


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.


Alternatives?


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.


Conclusion


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!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured