Does Your Website Look Good To Everyone? – Cross Browser Testing



One of the biggest headaches a web designer faces is making sure that a website’s layout and code works properly on multiple browsers and platforms. When I first started out, I was a strict Mac user since I had been trained in the graphic design field which strongly supports Apple computers. However, just because I love to use this platform does not mean that the rest of the world has followed suit.

My first wake-up call to what the majority of web users saw when browsing one of my sites happened during an interview for a job at a prestigious local college. When it was time to show off my work, the interviewer whipped out a Windows based laptop and handed it to me as an invitation to bring up my best work. When the first page loaded, my heart sank at what appeared in the browser. The layout was messed up, the navigation buttons were overlapping and the color scheme looked terrible. Basically, it was a train wreck.  Needless to say, I did not get the job and rightfully so. I would not have hired myself either.

The next week, I promptly went out and bought a used Toshiba laptop. If I could get my sites to look good on this dinosaur, then they would look great no matter what. Right? Fastforward a few years and the compatibility issues still exist, but my methods for dealing with them have improved greatly. Although I now primarily develop sites on a Windows platform (I still love the Mac), my biggest battle now is maintaining a consistent layout between browsers and the different versions. For example, my current laptop runs on Vista which doesn’t support Internet Explorer 6. This version, which many people still use, doesn’t handle CSS as well as IE7 or Firefox. So occassionally, my layouts will break on this browser. I’ve also recently upgraded to Firefox 3 which has effected changed some of my layouts from the previous version.

Fortunately, there are several tools available for web developers to perform cross browser/platform checks on their sites. The first one I used was IETester, a free desktop application that simulates site layout and functionality with different versions of Internet Explorer. This was helpful, but limited to how IE versions perform on Vista.

The another tool that I have used is Browser Shots. This free online service will let you select multiple variations of browsers on Windows, Linux, Mac and BSD. You can also specify screen size, color depth, and whether or not Javascript, Java and Flash are enabled. Once you submit your url, the system will generate a series of screenshots of your web page from the various browsers that you have selected. Depending on how many you choose, this process can take awhile. But having a visual of site layout is a huge help to uncovering bad CSS or other layout issues.

The best tool I have found so far is Cross Browser Testing. This service will let you choose platform and operating system versions. Then it will open up a Java Applet where you can select any of the browsers available and navigate your site as if you were in the actual browser. There is both a free and paid version of this service. If you opt for the free version, you are limited to 5 minutes of testing at a time. You can test multiple times but will need to get back into the queue. Paid members are given priority in the queue. So if you are testing frequently, the monthly subscription may be worth considering.

If you enjoyed this post, make sure you subscribe to my RSS feed!