10 Cross-Browser Compatibility Tools For Designers

Whether you are an experienced Web programmer or just starting out, you know that there are many browsers currently in use and have probably had experience with the cross-compatibility issues.  The frustration of building a beautifully functioning website using Firefox, then discovering it doesn’t render properly in IE6 is a definite learning experience.  Testing your creations in as many browsers as possible is crucial to turning out a professional product.

There are a multitude of tools available to allow cross-browser testing with only one computer and your favorite browser.  Many of them will let you do online testing of multiple versions of the most commonly used browsers and some will include applications you may never have heard about.  A few require downloading and installation on your machine.

1. SuperPreview

One of these is SuperPreview from Microsoft.  The free version is only loaded with IE6, but a 60-day free trial of the full Expression Studio is available from Microsoft’s website.  Unlike most tools that only test live sites, this software allows you to test pages while they are still in development.

2. Cross Browser Testing

CrossBrowserTesting is an online service that not only allows testing across browser platforms, but also includes various operating systems.  It allows live testing of mobile operating systems, such as Android, as well as desktop environments like Mac OSX and Ubuntu.  They offer a 7-day free trial and several levels of monthly or yearly fees.

3. Adobe Browser Lab

Adobe has a free online service call Adobe BrowserLab that allows testing of several versions of the more common browsers from IE6 to Chrome 8.  It also includes testing of Firefox on OSX in addition to Windows.  Choose the view you prefer, the browsers you want to test and simply type in the URL of your website.

4. Browser Shots

If you have a need for a wider than normal range of browser apps, check out Browser Shots.  They are one of the few services that offer testing on Linux and BSD.  If your website is aimed at a narrow band of users with particular needs, they may be able to fulfill your testing requirements.  The free version may be rather slow due to the volume of users, but they offer nearly instantaneous results with an upgrade to a monthly service.

5. W3C testing tools

The traditional code testing sources from the W3C are still completely free. They offer testing for CSS and Markup plus several other checks.  They now include testing for mobile platforms. They will not only list errors for you, they will even give you line numbers and recommend fixes.

6. TechPatterns browser detection scripts

One way to fix browser compatibility problems is to determine what browser the user has and use a script aimed at that particular application.  Tech Patterns offers several browser detection scripts using JavaScript or PHP.  They even include instructions on where to put the code.  The scripts are free; all they ask is a link to your website.

7. Differences in IE 6, 7 and 8

IE is a fact of life, even though it is not the default browser choice for most web developers.  The most frustrating thing is that even when you write code to allow for IE idiosyncrasies, it may not work in all versions of the browser.  Smashing Magazine’s Louis Lazaris lists a number of code snippets and how they work, or not, in various IE versions in his article “CSS Differences in Internet Explorer 6, 7 and 8.”

8. IE-Only style sheet

CSS Tricks is a great resource that offers advice on CSS.  Their blog post, “How to Create an IE-Only Style Sheet,” gives clear step-by-step instructions on a secondary style sheet that is activated whenever a user accesses the website with an IE browser.

9. Eric Meyer’s CSS Toolbox

On Meyerweb.com, under Toolbox: CSS, there are two helpful style sheets.  One for resetting your CSS and the other a diagnostic style sheet for catching problems the evaluators might miss.

10. IE6 upgrade warning script

If IE6 is causing your users major compatibility problems, try using Google’s ie6-upgrade-warning script which will notify those users with a friendly message to upgrade to the latest version of IE, otherwise they cannot access your website.  Hopefully, this gives those users more incentive to upgrade and help out web designers to avoid compatibility issues.

This guest blog post was contributed by InMotion Hosting, one of the top dedicated server providers in the country.  You can find more of their useful design and development tips  on WebHostingHelpGuy or follow them on Twitter @WHHG_InMotion.