Cross Browser Testing And Why It Is Important

Speaking for myself and other web developers, it is our duty to ensure that the sites we design render correctly across all browsers. A web browser such as Internet Explorer or Firefox uses a rendering engine to display the graphics and content on a web page. Unfortunately not all browsers use the same rendering engine thus showing a different layout from one browser to the next.

The Browser Wars

With Microsoft’s implementation of Internet Explorer into their own operating system, Internet Explorer quickly became the world’s most used web browser. Browsers such as Netscape and those before it crumbled due to the fact that they weren’t installed by default onto the Windows operating system. As Windows quickly grew in popularity so did the market share that Internet Explorer encompassed.

Throughout the years Internet Explorer increased its area of influence and no other browser could compete with it. Fast forward to a few years back and Mozilla comes out with FireFox. Quicker, safer and more standards compliant web developers rejoice and quickly begin to get the word out. To this day FireFox is still growing but Internet Explorer still controls the largest number of browsers being used overall. Other browsers such as Safari and Opera try to grab a piece of the pie but only end up with a very small slice.

Internet Explorer has always been notorious for destroying our beautiful web layouts because of it’s inability to comply to standards. The introduction of Internet Explorer 7 showed some promise as things got a little bit easier while Internet Explorer 8 shows quite a bit of promise in the area of standards. I guess Microsoft has finally started to listen to the web developers and started working towards greater compatibility.

Your Website Determines Your User’s Browser

While it is important that your site render properly in all browsers the content that you produce on your website has a large impact on the browser that your visitors will be using. If your site is geared more towards evolving technology, social media, Web 2.0 and beyond it is safe to say that a large amount of your visitors will be using Firefox with a few using either Safari or Opera. There will always be those using Internet Explorer of course but for the most part FireFox will be the biggest player.

Take a website topic geared more towards the general public such as baby clothing or john deere snowblowers and Internet Explorer will control the share of browsers. Why is this? Because the majority of computer users don’t realize that there are other options for browsers. They only know that the blue E provides them with the Internet and that is all that they care about. They either don’t know how to install a program onto their computer or they are too afraid that they might receive a virus.

A Live Example With Real Stats

I wrote this post because I wanted to get this point across and provide you all with a situation that I recently encountered. Late into September I came across a niche that had very little competition wtih a good number of searches per month. I quickly built up a site for it, set it live and sent it a few backlinks. On October 2nd it hit the first page of Google in 2nd-3rd position for the main phrase without any quotes. I immediately saw a large surge in traffic and realized that I did things right.

I had used a free WordPress theme that I found on the internet and did all my testing and minor layout changes in FireFox like I always do. For some reason, I normally check a site in both Internet Explorer 6 and 7 because I know that the potential for the site to be out of whack is pretty high. However for some odd reason I didn’t do that this time and didn’t even think about it honestly.

After about a week and a half of watching the stats one day it hits me……I never checked the theme in either IE 6 or 7! I load up the site in IE 7 and bad news, it’s out of alignment and things are being displayed where they shouldn’t be. I check in IE 6 but I already know that it is going to be just as bad because IE 6 is even worse than IE 7. Frustrated at myself, I spend the next 25 minutes rearranging the theme to get things to show up correctly. Fortunately for me I could fix it quite quickly but it would have taken a lot longer for somebody with little knowledge of CSS and HTML to fix it.

Due to the site sitting so high on the first page of Google I had received close to 1,000 visitors. After fixing up the site I went into Google Analytics to check out the actual stats of the browsers that visitors were using. Internet Explorer dominated the majority and still to this day accounts for over 76% of browsers visiting the site! Oddly enough pageviews, time on site and bounce rates still remained the same as well as AdSense earnings.

I guess you could say I got lucky on this one but the point of the post is that it is very possible that your site could be displaying incorrectly for a majority of your visitors. Like I mentioned before, if your site is geared towards the general public you are more then likely going to see Internet Explorer as the major player in the browser visits.

Resources For Testing Your Site

Now I can’t just go and tell you that your site is probably messed up in Internet Explorer without showing you how to find out. While you may not want to or have the capability to install multiple browsers on your computer you can use a great service that I highly recommend called BrowserShots.

When you arrive at the main site, all you do is enter the URL of the page you want to check, select which browsers you would like to check the page in and submit your site into the queue. Selecting the default browsers should set you back about 1 hour wait time for all the shots to come up. However, you should really only be worried about FireFox (latest version), Internet Explorer 6 and Internet Explorer 7. You can check your site out in Opera, Safari and others but that is up to you. BrowserShots will make the screenshots available as soon as they are taken so you don’t have to wait for everything to upload. When all the screenshots are done they provide you with .ZIP file of them all.

You can also use the site http://ipinfo.info/netrenderer/ which was suggested to me by SuiteJ who blogs over at SuiteJ.com. I have not personally used this site but Jay is just as much as a geek as I am so I’m sure it will work quite well.

In the end it is imperative that you make sure that your site displays correctly for ALL of your visitors. There could always be that one visitor that visits your site and spend $10,000 on a product and you make a huge commission off of it. Or that same visitor could sign up to your newsletter, leave a comment on your blog telling you about a great resource or even contact you and you end up developing a great friendship.

Do you really want to miss out on such great opportunities all because your site didn’t show up correctly for your visitors? Spend the minute it takes to visit BrowserShots, let it provide you with the screenshots of your site and see if you need to make some changes.