It took me three weeks to code Project Afterlight Burnt Edition. In the first week, I made sure that my design displayed properly in Firefox 2. Luckily, it did. However, I wouldn’t want my Web pages to be viewable only in Firefox. What about in different versions of Internet Explorer? What about Opera, Safari and Konqueror? Without support for these browsers, I’ll surely lose 70% of my readership. So in the second week, I began altering my CSS code to accommodate Opera 9.21 Web browsers. A few minor adjustments here and there, then it was fixed. Little did I know that my ordeal has just begun.
My design was rendered so badly in IE7 and I was about to drop the whole project. I even thought of getting back to square one. That means that I’ll be testing my design in Firefox again, which actually took me a week to code. It was a tough decision until a couple of days later, I finally got a hint. It was a combination of browsing through my CSS e-books and hopping through a variety of discussion forums that I realized the role of container DIVs in Internet Explorer. 2 days for 2 lines of code was a hard lesson for me. I had no choice but to charge it to experience.
In the third week, it was all good stuff. It was finally time to test the layout of my Web pages. I tested Project Afterlight Burnt edition in IE5.5, IE6, Konqueror, Safari and previous versions of Opera. It was rendered well in the Web browsers except IE5.5. Now you may ask, How were you able to do that with only one computer? Well, I used browser screenshot services and a nifty program. But there are other methods to test your Web pages. Let’s begin with the rundown.
1. Running Multiple Versions of Internet Explorer
Some of you may have already heard of the method posted at PositionIsEverything, but in case you didn’t know, the updated article mentioned a nifty program available so you can install multiple versions of IE in one click (Windows only).
2. Virtual Machines
If you want to test your Web pages in different Web browsers on Linux, you can use virtual machines. VMware Workstation is a popular virtual machine application in Windows. You can then download a bunch of Linux distros and install them as guest operating systems. On the other hand, Mac users can use Boot Camp so they can emulate Windows. For Linux users, there’s Wine.
3. Multiple Booting
If time isn’t an issue and if you’re inclined enough, then go ahead and install multiple operating systems in your PC. However, Mac OS is an exception.
4. Linux Live CDs
If memory and hard disk space requirements are one of your problems when running virtual machines, use Live CD’s instead. Aside from low memory and hard disk space demands, your Windows operating system will also be safe from unexpected data corruption problems while running Linux temporarily. The LiveCD List has a long list of (what else?) Live CD’s for you to download.
Here are a few Live CD’s to get you started:
5. Browser Screenshots
With browser screenshots, you won’t be able to test the functionalities of your Web pages. The very purpose of this service is to provide you with a screen shot of your Web pages so you can quickly spot layout problems. Here are a few that I’ve used:
Test Shot Your Web Pages in Safari
- BrowserShots.org (long queue)
- iCapture (currently not working)
- lixlpixel Screenshot Generator (currently not working)
Test Shot Your Web Pages in Internet Explorer
Test Shot Your Web Pages in Konqueror, Opera and a few more
- BrowserShots.org (long queue)
Browsershots.org is, in my opinion, the best free screen shot service because of its extensive factories of Web browsers and operating systems. However, a wait time of 4 hours sometimes isn’t enough for 4 browser screen shot requests. For browser specific needs, in this case, IE or Safari, then IE NetRenderer and BrowsrCamp almost always give you instant screenies.
I hope this article can help you test your Web pages in the cheapest and most efficient way. And by the way, good luck on your quest for cross-browser compatibility.
Safari for Windows has already been released.