Wednesday, November 3, 2010

Browser, Browser, Browser...

When building a web app, one of the thing you need to decide is what browsers you need to support. It's likely not worth your time trying to build an app that works on all browsers, particularly the ones that are older/outdated - one that has a shrinking market share. Here's my cookie cutter recommended list of browsers to support as of today:
As of this writing, these browsers represents almost 90% of the browsers market share with IE and Firefox leading the pack.

So what about the remaining ~10%, (almost half are IE 6 users)?
FORGET ABOUT THEM! Even Microsoft is already ditching IE 6, urging its users to upgrade. Many big companies have dropped IE 6 support (ie6 must die). The good news is that IE 6 users who refuses or can't upgrade can now install Chrome Frame which basically allows sites to be rendered using the awesome Chrome engine within IE. Plus, the market share of these dinosaur browsers are quickly diminishing & it's really not worth your time and effort supporting it.

So how should you go about testing on all these browsers?
Well, for the ease of iterative development and debugging, you'll probably want to get a Windows box and install all the above browsers (just install the latest versions) on it. I normally do my development in Chrome with the help of the Developer Tools 'cause its super fast! After I'm done implementing a feature (usually after 2-3 days of development), I'll test it in Firefox and debug it with Firebug (a must have) if needed. Next, I'll test it in Safari which should probably do just fine since it uses the same Webkit engine as Chrome.

The biggest challenge is to get it working on IE. I usually just test it using IE 8 with an IE 7 compatibility mode. (note that the compatibility mode isn't exactly IE 7, but it catches most of the issues in IE 7). A popular tool that developers like to use for testing their apps on IE is IETester. If your app works and renders fine on all these browsers, you should be good to go. But if you really want to see how your app actually looks like in all the different supported versions, you could use one of the free websites outlined here :)


Useful links: