Cross-Browser Compatibility: It pays to check.

Even though the purpose of this site is to help you become a great webmaster, not necessarily a great web designer, there are still a few things you really should check on when putting up a new site.  Among these items is cross-browser compatibility.  How does your website appear when viewed by various web browsers?  Now, you may be thinking, “Don’t all browsers display websites the same way?”  Unfortunately, the answer to that question is a thundering NO!  It gets even more confusing because you can have websites appear differently when viewed by different versions of the SAME browser.

Over the years that I have been building and running websites, this has happened to me quite often.  I build a website that looks absolutely stunning to me.  I mean, I just love it and I think the whole world should see it so I tell some friends and family members about it. 

They, in turn, look up the site and go “ugh” and in “ugly.”  What happened?  Was my design really that ugly?  Thankfully, my design work usually isn’t the culprit.  More often than not, it is the result of cross-browser incompaitbility.  What looks fine to me in my browser, looks strange or disjointed in theirs.  The fancy code and scripts that I think make the site “pop,” don’t show up right to them and the resulting “holes” make my site look as though it was made of swiss cheese.

You may be inclined to believe that this only happens to Internet “newbies.”  Let me assure you that it can happen to anyone.  As a matter of fact, I’m dealing with this very issue right now.

You see, I have several browsers on my primary PC that I use to check my websites.  I use IE (of course), FireFox, Google Chrome, Safari and Opera.  When I was configuring this site, I checked it on the various browsers and the site looked about the same on all of them.  I was pleased.  That pleasure was short-lived however when I tried to show the site to some of my friends.  When I pulled the site up for them, the ad boxes on the right hand side would not stay properly aligned.  That’s when I discovered the fatal flaw in my thinking.  I had checked the site against several different browsers, but all of the versions I used were the latest stable releases.  I hadn’t checked it on any legacy releases.  When I look at this site using IE 7 (which is what I use in my office), the site looks great.  The ad problem appears when you view it in IE 6.

If I had checked it on a legacy browser, I could have saved myself a lot of embarrasment.  Just how do you go about checking your site on multiple browsers and multiple versions of the same browser?  Well, you could install a lot of software on your PC, but I really don’t recommend that.  There’s a much easier way. 

There is a free service called BrowserShots.orgthat will allow you to see what your website  looks like on over 60 different browsers.  All you do is go to their website and enter your domain name.  They send out the request to their farm of computers, each running a different OS and browser combination.  Each computer will pull up the site and take a snapshot of it.  These snapshots get posted to the BrowserShots.org site and you get a pretty good idea of what your site will look like to your visitor.  It’s a good deal.

When I ran this site through BrowserShots, I discovered that it looks fine in the modern browsers, but starts to look strange in some of the older ones.  In IE 5 and 6, there is the ad box issue.  In IE 4, some of the navigation coding and CSS go unrecognized resulting in a site that appears incomplete.

Once you know what the issues are, you can decide how to procede.  As for me, I will take a shot at tweaking the code to make the ad boxes appear correctly in IE 6, but I’m not going to worry about the display issues with IE 4 and 5.  In looking at the visitor logs for my sites, I see that so few visitors are using those browsers that it wouldn’t be worth the time and energy that it would take to correct.  After all, it’s 2009.  If someone is still running IE 4, they should seriously consider an upgrade.  After all, IE is free.

Well, folks, there you have another item to add to your pre-launch checklist.

No related posts.