Day 14: Checking Cross-Browser Compatability – Making Sure It All Works

21 May 2009

Day 14: Checking Cross-Browser Compatability – Making Sure It All Works

Author: Jim | Filed under: 30-Day Blogging

We’ve completely revamped our websites, and have now customized the logo, header, sidebar and footer… that should do it! If there happens to be anything fishy about your blog’s post section, make sure to tweak the “page.php” file in your WordPress admin section.

BUT WAIT…
NOT SO FAST!

One of the biggest peeves of any web designer/coder is the way that different web browsers work. Naturally, the fact that there are many different browsers to chose from will lead us to believe that each is different from the other. The first thing that I recommend that you do before releasing your website is to make sure that your blog not only looks good to you, but that all your viewers have the same experience. We want to ensure that if a user is loading up your blog on Mozilla Firefox, it looks just as stellar to a reader using Internet Explorer or Safari.

Browsers to test compatibility:
While there are actually hundreds of browsers available (and yes, different versions of browsers produce different results), we should really only test those that come up the most. After all, we can’t have it perfect for everyone (sad, isn’t it?)… so we need to focus on our biggest streams of foot traffic. I recommend that you test on the following:

Mozilla Firefox 2.x and 3.x
Internet Explorer 6.x, 7.x and 8.x
Safari 3.x and 4.x

Sure I am leaving out a few names… but they are really not as important as these top three names and their most often used versions. The problem here? We cannot test multiple versions of these browsers on our computers because once you install a new version, it usually overwrites the old!

How to Test Your Blog on Different Browsers

1. The number one way to see how your website will appear on multiple screens is by using a website called BrowserShots.org. This is really my “swiss army knife” of compatability testing, and I use it on any website that I create to ensure that things look good across the board.

2. Download the Microsoft Internet Explorer compatibility tester (for looking at old versions of IE) that is called “SuperPreview“

3. Install multiple versions of multiple browsers. This is a bit messy, but can actually be done if you have the time and the elbow-grease to figure it out. For me, I’d rather stick with the first two options.

4. Use a paid service called “Browser Cam” can help you to test what your website displays on a variety of browsers, but it comes at a hefty price. Think you can stomach it? Then by all means check it out.

Make sure that your coding works, and look up solutions if anything looks a bit fuzzy (more than likely a problem in the coding). I’m not by any means an expert… so you may have to do some fiddling if it doesn’t look right. Once that is done, congratulations… your new theme is complete!

-Jimvesting