Browser Testing your website pages - A few tips to make life easier

News Section - Browser Testing your website pages - A few tips to make life easier

Developer Blog from Mike Irving - Browser Testing your website pages - A few tips to make life easier

The recent launch of both Firefox 3 and Google's browser Chrome, will have caused headache's for many website developers.

Different web browsers will render websites slightly differently to one another. All have bugs, and CSS styles that they will draw in peculiar ways. In an ideal world, web designers need to ensure that their site's display in an adeqate way, irrespective of the end user's choice of browser software.

There is an ever-growing list of web browsers available today, Firefox 3 and Google Chrome are the two I have mentioned above, but use of Safari on the Apple iPhone is also on the increase, and games consoles such as the Nintendo Wii and Sony Playstation 3 have their own web browsers too.

Some Tips:

Use "Strict" HTML or XHTML Doctypes. Generally speaking, the output from most modern browsers is very similar using Srict Doctypes, so they'll be less fixing to perform for alternative browsers.

Build for Internet Explorer 7.0, then tweak for the other browsers. It is well documented that Microsoft's current generation of browsers dont strictly obey CSS rules. I find that it is best to initially build around IE's quirks, then apply modifications to your CSS to achieve the correct look in Mozilla, Safari etc, all of which behave very similarly, and more correctly.

Always specify a Font Family. First of all, you should only be using web safe fonts, as use of non-standard fonts will require the end-user to have the font that you have used installed on their machine. Secondly, it is important to specify a "Font Family". This is essentially a selection of similar fonts, which acts as a pecking order when the browser renders a page. Verdana is a Windows System Font whereas Helvetica is a "similar" Mac System Font. By specifying Font-Family: Verdana, Helvetica in our CSS we ensure that we cater for both PC and Mac users.

Always test your Javascript and AJAX functionality. Different browsers use different JavaScript engines, which behave in different ways. Some are more strict, and some have bugs. Your scripts may run perfectly well in IE (which uses Microsoft's JScript to interpret scripts) but may need to be tweaked for Firefox or other browsers.