Testing Web sites with multiple browser versions

July 14th, 2008 | Category: Accessibility,How-to,Testing,Tips and Tricks,Usability,Web Browsers,Web Standards
written by: Heidi Cool

portableapps.com
Firefox 3 from PortableApps.com (Windows)

Until recently I was one of the only nerds who had yet to upgrade to Firefox 3. I'd been waiting until I could find an easy way to install it alongside (rather than in place of) Firefox 2. When I'd tried doing this a few months ago—with the beta version of Firefox 3—it hadn't worked properly, so I'd put the idea on hold.

I mentioned this in a meeting, when a colleague piped up with a simple solution. He suggested using the PortableApps version, a standalone version of the program that can be installed on a Flash drive—for portability—or simply in a directory you designate on your computer. This was so obvious I immediately wondered why it hadn't occurred to me before, but then, practical ideas are like that.

PortableApps.com offers a plethora of portable software solutions—including Firefox—for Windows

Once I got back to my office I hopped over to http://portableapps.com/, looked for Firefox 3, then proceeded to download it. Within minutes it was installed, separately and independently of Firefox 2. When I tried to start it up I discovered that you can't run them both at the same time—I had to close out of 2 to open 3, then close out of 3 to reopen 2—but you can run them on the same computer. This will be tremendously useful if I discover some quirk in Firefox 3—such as an add-on that no longer works and has yet to be updated—or if I need to see how a Web page renders in each version.

That solved the problem for the Windows P. C., but what about the Macintosh?

FreeSMUG: Portable Applications for OSX

freesmug.jpg
Firefox 3 from FreeSMUG (Mac)

A quick Google search turned up FreeSMUG's portable applications section. FreeSMUG offers a portable version of Firefox 3—in several languages—as well as other popular open source programs such as Open Office and Audacity. Those new to many of the Open Source programs available through FreeSMUG can learn more about them through a variety of helpful tutorials available on the site.

FreeSMUG says of its portable applications, "OS X FOSS portable applications are packaged so you can carry around on any portable device, USB thumb drive, iPod, portable hard drive, memory card, other portable device (or also on your internal hard disk), taking your preferences with you." This of course could be handy for any number of reasons, but the ability to run multiple versions of browsers to use for testing Web sites, is particularly useful to me.

Why test in multiple versions of the same Web browser? Why not just upgrade?

As a Web developer, you probably upgrade your browsers fairly often. That's not true of the average user. In many cases the people who visit your site are using the same browser that came with their computer.

The most popular browsers used by visitors to the Web Development Blog this month are:

  • Internet Explorer 7.0 - 24.6%
  • Internet Explorer 6.0 - 24.3%
  • Firefox 3.0 - 12.7%
  • Firefox 2.x - 17.8%
  • Safari - 5.4%

Interestingly .5% were still using Netscape 4.0, which is over 10 years old!

To ensure that you, my site visitors, can view and use this site with ease, I need to make sure that it works properly in the browsers that most of you are using. This requires testing in multiple browsers and versions.

When a browser releases a minor upgrade, this isn't a big issue. But when a Web browser makes a significant upgrade it can make a big difference. A site that looked fine in version X, may look horrible in version Y.

When Internet Explorer 7 came out, users and developers quickly noticed that many pages didn't render properly in the new version. I.E. 7 was actually more standards compliant than I.E. 6, but developers who had used I.E. hacks to make pages look right in I.E. 6 found they didn't work with I.E. 7. This led to a lot of sturm und drang about I.E. 7 "breaking the Web," as those developers needed to modify those hacks to make their sites work in both I.E. 6 and 7.

Here at Case our templated sites don't rely on many I.E. hacks so they transitioned smoothly from I.E. 6 to I.E. 7. But when I'm building new sites, I may sometimes incorporate new styles or features that I've not used before. This is when I make a point of testing in multiple browsers. Tredosoft's Multiple I.E. Installer provides a convenient way to run different versions of Internet Explorer on Windows XP. They also provide information for running I.E. 6 natively on Vista.

Must your site work in every browser available?

No, the Web has evolved enough since 1993 that making a site backwards compatible with every browser version is pretty much impossible. But if you adhere to Web standards, build sites that degrade cleanly in older browsers, and test in the browsers used by most of your readers you should be able to provide a good user experience for all of your visitors.

Web Browse Testing Resources
Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

14 Comments »
  1. Heidi, Another cool tool I've found that you might want to check out is Browsershots.org. You can pretty much render a page in any web browser you can think of using this tool. It's not the fastest thing in the world, but when you have the ability to see a screenshot of your new template in 50+ browsers it is definitely worth the wait.

    Comment by Kyle James — July 14, 2008 @9:03 am

  2. And then I look at your Resources at the bottom and you totally have Browsershots listed... LOL

    Comment by Kyle James — July 14, 2008 @9:09 am

  3. Better yet, why not just use VMs to test? Microsoft's Virtual PC is free, and they even offer VM images of IE6, IE7 and IE8 for testing. The images contain a working XP, so there's no reason you cant install different firefox versions as well (or any browser for that matter).

    For instance, I've got a clean version of Firefox v2 alongside my IE6 VM, and then Firefox v3 alongside my IE7 VM (with opera 9.5 as well). This way I can have all the different version of all the different browsers up and visible at the same time.

    For IE, you can also use IETester which will let you load a page in 4 different version of IE (5.5, 6.0, 7.0 and 8.0 beta1) and view them side-by-side.

    Comment by Gilzow — July 14, 2008 @12:40 pm

  4. Kyle, I guess great minds think alike. You are right about Browsershots seeming slow, but when compared to opening up a page in so many different browsers, if one even had the tools to install so many, it can be a big timesaver. Gilzow, Virtual PC is another good option. I've not been using it primarily because my Dell and my Mac are both laptops and I'm trying to conserve on harddrive space, but if one has the room, it's certainly quite viable. Thanks for the suggestion of IETester as well!

    Comment by Heidi Cool — July 14, 2008 @7:11 pm

  5. Yes, That is exactly what i wanted to share. I'd come across such problems and I came to know that testing must be done on different versions of any browser.

    Comment by shoping carts — July 15, 2008 @12:51 am

  6. When you are a web programmer. You confront some complication when test your web page on different browsers especially some conflicts between IE and Mozilla firefox. So I recommend you to check on both servers from the very first day otherweise if you will check after completing many changes you will find alot complications after creaing alot pages.

    Comment by shopping cart — July 16, 2008 @1:48 am

  7. I too have held out on upgrading to Firefox v3 for the same reason. Thanks for the insight. As for cross-browser compatibility, I do often take advantage of Browsers shots, and I even have about 5 versions of IE installed on my own computer. PS. Browsershots is way faster than it used to be. I remember waiting 2 hours for some screenshots, only to realize that my requests had expired because I had forgotten to go back and renew...

    Comment by Shirley — July 16, 2008 @10:27 pm

  8. An absolutely great article! I always test across multiple browsers when making any changes to our blog.

    Comment by Frank J — July 19, 2008 @2:50 pm

  9. Have you found any other bugs while you were working with Firefox 3.0? I have faced with some hardships in cross-browser compatibility testing.

    Comment by Tim — July 24, 2008 @6:36 am

  10. Great article! I wish everyone thought like you.

    Comment by Melissa - SEOAware.com — July 26, 2008 @12:29 pm

  11. Thanks for the resource list. Using virtual PC, browsershots and PortableApps are great ideas. Often we end up having to test the functionality of the page (e.g. dynamic navigation trees etc.) and this is where browsershots will not help.

    Comment by Neil — July 28, 2008 @12:51 pm

  12. We just re-designed this Hawaii real estate site. It is amazing how many people still use IE6. That browser causes so many problems. It was a total night mare. Are we going to have make adjustments for Google Chrome?

    Comment by Jeff in Hawaii — September 22, 2008 @1:35 am

  13. I have done a lot of browser testing and wrote my notes down at http://blog.humaneq.com/2008/10/9/an-ultimate-guide-to-browser-testing . I did not think of testing with portable apps, but that's certainly a great idea. It's surely quick to set-up and might work better than "hacked" standalone versions. Using a virtual machine might be the most flexible option, but not everyone needs such flexibility.

    Comment by Harri — October 15, 2008 @11:24 am

  14. Excellent post! I wish more and more web developers thought of how to code their sites to degrade gracefully in old browsers (if possible). I code most of my sites without hacks (except a few), but I did find some still had problems in IE7. Mostly with CSS drop down menus I built and mostly with the width of the dropdown when opened. It still worked just didn't look exactly like I planned. Not a huge deal. This will help me test different versions of Firefox, as I noticed in FF3 the way floats and width combine, sometimes has caused one of my sites to go quirky. Still displays, just not perfect. I suppose this is also like those U3 Applications on the USB sticks? I had thunderbird, gimp, and some others on there. I'll definately get Firefox and Notepad++ Portable onto my USB or Desktop. As for new Google Chrome, I found my main site Domains at Retail has faired pretty well with it. Even the homepages Sliding Carousel feature works in Google Chrome, although it does take off the border on the right hand side. Again, still functional. My new sites will definately be tested in Google Chrome.

    Comment by Domains at Retail — October 17, 2008 @1:33 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL