Aug
28
2008

Web Design Testing In Multiple Browsers & Operating Systems

Share
Email

As a web developer, I’m constantly at odds with all the different browsers out there. They all render CSS, Java and other styling in different ways. This is particularly troublesome if you’ve made the move over to designing in full CSS. There are some online tools available however, that will allow you to check your work without having to spend hours maintaining multiple browser installs across different versions. Which in some cases you cant do. Well, you can if you are so inclined. In some cases, that might be the only option for instant interactivity but you will always be limited by operating system testing and limited to certain browsers to an extent. So here’s an option to have at least a quickshot of them all!

BrowserShots.Org
This is a great online tool that tells you which browsers you may want to install and troubleshoot with more. At a glance, I was able to download 52 screen shots of the browsers that I chose all at once. You can see some of the thumbnailed results for robmalon.com in the left screenshot. It showed me that I had some serious issue in IE 5.5 as you can see in the picture below

Beware, when you use this tool, you may only be able to use it once per day and for one site per day. Obviously a service like this can be abused. If you want to use it more than that, you could try a clever trick like changing your routers MAC address manually which in turn should change the last set of octets on your IP address from a typical DLS or Cable provider.

Also note, when you use this tool, that some of the shots might have to be redone because I think their servers timeout sometimes.

If you do any research into BrowserShots you’ll find they have Downloads area which links to a sourceforge project which they’ve started so you can run your own. This is the only way to date, to be able to manage and emulate all browsers at once.

What To Develop For – The Browsers Visitors Use
To be honest, at some point, its time to cut your losses and develop for the majority. I’ve reviewed stats from some of the larger sites I run and you can see the results of users typical browser usage these days for yourself. Note: These stats are from the month of August 2008.

Reviewing The Statistics

  • The main stats (first 3 graphs) are from the same site. Its a site in a gaming niche (I run several sites in this niche) so remember that the audience is a bit younger and maybe a bit more technical.
  • The bottom left graph shows a quick percentage of the traffic on this site (robmalon.com) in which firefox usage sky rockets! I’m sure my audience here is a little more cutting edge, developers ;) .
  • On the bottom right you’ll see stats for a forum that I operate with similar stats to the game site.
  • I’ve looked at stats across clients which I’ve done work for in the past. Even in non technical areas the trends are about the same. Firefox is always 45% – 70% and IE is usually between 30% and 45% of traffic.

That said, when I develop CSS sites, I specifically develop for IE6, 7 and Firefox 2, 3.

Typically anything you do for Firefox 3 will work in Firefox 2. IE is a different story because you cant have two instances installed on the same machine. (But wait, keep reading – There is a way).

More Than Just An Image
If you need more interactivity with it you might be able to find a way to do a combination of these which will allow you to cover a fairly wide spectrum while still using a single computer:

  • Dual boot multiple operating systems – Maybe a bit tedious because you need to restart the machine every time you want to try a new set of browsers installed on a different operating system.
  • Virtual Boot by using something such as VMware. There’s a rather large amount of options for free virtual PC emulators available. This might be a better option as you wont have to reboot as often.

Internet Explorer
IE alone, is usually one of the most difficult issues in setting some of these things up. If dual booting isn’t an option for you (or even if it is). You might what to shorten your work load on setup by finding handy utilities like this one: MultipleIE’s. There is also a standalone IE7 version available on the same site.

FireFox
With FireFox 2 and 3 you can use managed profiled to allow the two installs to co-exist together on the same machine.

Safari
A Multi-Safari project was started for a multiple Safari install. It appears that this only works on a Mac however. You can find more info on the process at  michelf.com’s blog. You might also find the trick on lifehacker.com useful back when Safari 3 was in beta.

Opera
Opera plays nice and does not need a multi-installer to be able to run different versions on a machine. Simply install to separate directories as you go.

Conclusions
At the end of the day its hard to please everyone. I shoot to design for the two most popular browsers and have compatibility with at least the current version and previous version before it. That’s hard enough as it is. If I ever have a client that asks me to do design work with an advanced design, and they want more support than that, it can definitely increases rates.

Respond: Leave A Comment | Trackback URL

Entrupeners, Subscribe for the lastest tools, tips, and tutorials.


Leave a Reply

Custom Theme by Rob Malon | Content & Design © 2010 - RobMalon.Com - Chicago, Illinois