12 Cross-Browser Compatibility Tools For Designers

By Web Hosting Help Guy

Unless the entire world magically starts using Firefox overnight, cross-browser compatibility issues are going to be a concern for the foreseeable future. And, since fully half of the people out there are still using some version of the dreaded Internet Explorer, most of your compatibility issues are going to start there. That’s why I’ve spoken with some of the sharpest design minds within earshot of my desk to look to examine 12 of the most useful ways to address those pesky browser issues.

The CSS Reset

This is one of the most comprehensive (and effective) ways to make sure your website looks good on browsers of all stripes. This small group of CSS rules gets rid of each browser’s built-in defaults and resets them to a consistent baseline. This way, many of the sizing and layout issues you would have had to deal with simply never arise.

MeyerWeb Reset

Validate your HTML and CSS

A common source of browser bugs are a browser’s attempt to interpret code that isn’t written properly – unfortunately, they sometimes get it wrong. By making sure your HTML and CSS are valid (that is, that they use the correct syntax/rules etc), you’re giving yourself a much better chance of not having those quirks pop up in the first place.

W3 HTML Validator

W3 CSS Validator

Conditional Style Sheets for IE

As a designer, you already know this – the bulk of cross-compatibility issues come from the inconsistencies between IE6/7/8 in comparison to other standard browsers like Firefox, Safari, Chrome and Opera. However, you don’t want to start messing with your style sheets to fix IE problems, since by doing so you’ll be creating new problems in browsers that are already rendering correctly. Solution? Use conditionals to load IE-specific style sheets that’ll be loaded (and consequently modify styles) solely for the version of IE you need to target.

IE Style Sheet From CSS Tricks

Getting Down and Dirty With IE Bugs

Some IE bugs, even when you identify them, can be hard to fix. But you’re welcome to try – just promise me that you won’t go it alone. Check out this great article for tips on how to fix the most common bugs you’ll run across:

List of IE Bugs from Smashing Magazine

Viewing Your Website in Multiple Browsers/OS

How can you tell what your website looks like in different browsers without owning 10 computers? You can start by installing the most common browsers on your computer. At least running the latest versions of Firefox, Opera, Safari and IE on your own computer will give you an idea of how your design is performing. To check out more browsers and multiple operating systems, check out these tools:

BrowserShots (great for browsers you might not typically have installed on your machine or alternate operating systems)

Adobe Browser Labs (since it’s now integrating into CS5, this may become a tool of choice for the Adobe core)

BrowsrCamp (see your website how a Mac would see it)

NetRenderer (for quick checks of IE)

Browser Sandbox (you can actually use the browsers – more useful that screen caps at times)

PHP Browser Detection

If you’re a developer and need to do browser detection within your scripts, this tool will do the job:

Browser Detection by TechPatterns

Encouraging Users of IE6 to Switch

IE6 is the bane of many web designer’s existences – again, as a designer, you already know this. But how can we get the rest of the world to know this if we don’t tell them? Here’s a cool add-on from Google that’ll encourage users of the outdated browser to upgrade before viewing your site, and in so doing help the world be a better place.

IE6 Warning by Google

What’s your favorite way to check if your site is working on every browser?