11 powerful steps to make website cross browser compatible

First of all, let me tell you, after just few months of blogging and even following some of the basic rules that are meant to be followed by new bloggers, I was completely unaware that this website looks quite ugly on around 40% of the browsers.

We have Firefox 3.x, Opera 9.5x and Internet Explorer 7.0 running on Windows, where we test our websites even for a minute of CSS change that we do. We have no other source of checking. Later in this post, we’ll discuss with you more about it.

Once, while checking Awstats, I noticed that Internet Explorer 6.0 has around 10-15% of browser share, which means quite a lot for us seeing the increasing traffic. And just don’t ask about other browsers, I had absolutely no idea apart from the 3 browser mentioned above.

 
This is 2 days of usage in Dec. (as on 3rd Dec)

1. Markup Validation

This is the essential step before you do any changes to your website. Almost all  websites are written in HTML, which has some rules that you need to follow. Markup validation is checking of this HTML for the set of rules and grammar.

Suppose while writing a <div> tag, you forget to end it by </div>, this will generate an error in markup validation. Or even if you don’t write alt tag in an image, this will also not comply with the validation rules.

Moreover, some browsers may fail to render your website properly if your website is not validated.

So first check your website and validate the markup. It’ll hardly take you any time if you have some basic knowledge of HTML and CSS.

For HTML Validation: http://validator.w3.org
For CSS Validation: http://jigsaw.w3.org/css-validator/

Give the full path to your CSS document in the later.

2. Browser Screenshots

After validation, you need to check it out on almost all the browsers and platforms to see what’s wrong and where ?

Browsershots is a free website that’ll put your request in a queue and will generate all the screenshots you requested using different factories that they have. Make sure that you keep on extending the expiring time if you didn’t get all the screenshots requested by you.

Once it is done, you can download all the screen shots of different browsers and platforms as an archive. Have a look on it and note down the browsers which failed to render your website as it should be.

The major problem is with Internet Explorer 5.5/6.0 as it is one of the oldest browsers and had some of the serious CSS bugs for which you may have to find a workaround. We’ve discussed about IE later in this post.

3. FireBug

As I have mentioned it before too, for web developers and designers, Firebug is the most useful Firefox addon ever written. It not only saves your time but also makes you learn so many things that you are not aware of.

Once you get your screenshots, check that particular area where you feel that rendering is not up to the mark and you can easily see what styles you’ve used there, that made it render that way.

Firebug is essential to analyze the CSS styles for a particular <div> or other HTML entities. You’ll save atleast 40% of your time making your website cross browser compatible if you use Firebug.

On the other hand, Firebug will make sure that rendering is correct at least in Firefox, if you happen to make any changes to your stylesheets.

4. Popular browsers first

Around 70% of your audience will be using popular browsers that you need to take care of first. Among these popular browsers are Internet Explorer 7.0 (Vista comes pre-installed with this and it is a part of Windows XP update), Firefox 2.0+ , and Opera 9.x

It is likely that you are having all of these popular browsers already. But make sure that you verify it for different platforms too. I’ve seen latest Firefox not rendering correctly on FreeBSD but was rendering beautifully on Mac and Windows.

5. Internet Explorer: Root of all evils

Internet explorer is the major pain when it comes to cross browser compatibility. IE versions before 7.0 had so many CSS rendering bugs. Thankfully many of them got resolved in 7.0 but still you can’t just ignore at least IE 6.0.

Check your website stats and see how much browser share does IE 6.0 has. For us it is like 15%. So for instance, if you are getting 20,000 unique visitors a month, around 3000 comes from Internet Explorer 6.0. And just imagine when the visitor counts increases, what effect this is going to put on your monthly revenues.

If your website is not rendering correctly on IE 6.0/5.5 (using Browsershots) then you may have to work a lot to make it IE compatible. This was the case with us. I spent lot of time analyzing and rechecking the site.

For every little change you can’t use Browsershots and wait for long queues to get clear. There are some very good online / offline tools which will make your job much easier.

• IETester is one very good tool that can simulate IE 5.5, 6.0, 7.0 and 8.0 within a single app. Though it crashes a lot on closing the app but you can ignore that as anyway this is going to save lot of your time.
• Netrenderer is another awesome online tool for those who don’t have windows installed. It’ll take around half a minute to show you your website in different versions of Internet Explorer which you can choose from a drop down box.

I recommend IETester if you have windows on your machine. It made us quickly analyze the things that were messed up in IE 5.5/6.0 and in no time we were able to fix them.

6.Portable browser download

There’s no option of installing old browsers when you have newer already installed. Portable browsers comes very handy in this situation. You can just download these old versions and check your website if it render on them correctly.

Though for very obsolete browsers like IE 4.0, Netscape Navigator etc, it’s very difficult to find portable versions, but you can always ignore these browsers. Read below if you need to consider those browsers.

Portable browsers are easily available for download. I’ve listed out some of the good resources from where you can download them -

• Almost all versions of Internet Explorer before 7.0 can be found HERE.
• Firefox 1.0.6 can be downloaded from here. Search on Google for the later versions but if you pass 1.0.6 then it’s very unlikely that you’ll have any problems with the later versions.
• Portableapps is very good site to download all the latest portable versions of Opera and Firefox.

From our experience, it is kind of mandatory for you to test your website in Internet Explorer 6.0 (5.5 will be too good) and Firefox 1.0.6. Once you’ve verified your website on them then you can check on other browsers using Browsershots but 80% chances are that you will pass the test on them too.

If somehow you are not able to download the portable versions, just comment here or contact us. I’ll give you the links from our repository, if we have them.

7. CSS : What is supported where ?

Did you know that not all browsers render stylesheets the way they should be. For instance if you don’t know that in Internet Explorer 5.5, to place the content wrap at the center, you’ve to use text-align:center and margin:0 auto will have no effect on it.

Not just this, Internet explorer 5.5/6.0 will add a little spacing on the top of the bulleted list even when you’ve set the margins and padding correctly. And if you don’t know about Double margin float bug on IE 6.0 then do check it out here.

As I’ve mentioned it before too, it’s mostly the Internet Explorer that’ll cause you problem rendering your pages correctly, but you never know about other browsers too.

For list of supported properties in popular browsers check out this. Do check the related links given below if you want to dig deeper.

8. PNG images hack

If it is not inflating the size, then you should always avoid using PNG images in your website template. Again, IE 6.0 and earlier do not support PNG image rendering. To know what’s the problem and its solution check this.

But still, you should not rely on this hack. For us it gave us hard time converting images from PNG to JPG/GIF and then positioning the images where they should be, but it’s not that difficult.

GIF images supports transparency and is rendered properly by all of the browsers, so this shouldn’t be a much problem if you know how to work with images.

9. Different CSS for different browsers

If you don’t want to take much trouble making a generic CSS for all the browsers then there’s a trick for that too.  Suppose you know what is causing problem in IE 6.0 and know the fix for it, but that fix is making Firefox not to render the page correctly which is a kind of a vicious circle.

In that case you can have separate stylesheet for IE and Firefox. In your HTML header you can prompt the browser to use the CSS which is compatible with it.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IEcss.css" />
<![endif]-->

10. Should I care about old obsolete browsers ?

Now this is a million dollar question. I’d say it depends. Even CNET doesn’t render exactly the same on IE 5.5 and you can check it yourself using the above mentioned tricks.

It largely depends on the traffic you get on your site. Let say, 1%  of people are still on those obsolete browsers. Now if you get 1 million unique visitors and your revenue is let say 25K $ a month. Calculating proportionally, 10000 of your visitors use those browser and you are losing around 250$ of your revenue, which I think can be ignorable ?

For sites like CNET, Techcrunch etc where traffic is huge, this may make much of a difference. If you own a small blog with not that much great traffic then you can ignore these browsers without any thought.

Once again, I am telling you, that your website should render correctly on IE 5.5/6.0 and above and Firefox 1.0.6 and above as IE and Firefox have major percent of share. Safari and Opera should be next in the list.

11. Always ask for help

It’s very difficult to know about each and every bug that so many browsers have. And also it requires lot of time figuring it out on different browsers an platform if you don’t own them.

Below are some of very good forums that you should use if you have any problem tweaking and fixing your site.

• CODINGFORUMS
• SITEPOINT
• CSSHAT
• WEBDESIGNER FORUM

Not to mention, you can always ping us for any help that you may require related to everything about blogging, wordpress, CSS, HTML , PHP,  internet , web etc.

Related Tech Stuff

• Create Opera and Google Chrome like Thumbnails on any browser
• How to search as you type on Internet Explorer
• Add Microsoft Internet Explorer 7 like new Tab button in Firefox
• Group Firefox Tabs on domain name like Internet Explorer 8
• Find out what ads, stats, widgets and platform tools is website running