13 Ways to Browser Test and Validate Your Work

Every day, when reviewing templates on ThemeForest, I test the submissions for validation and browser compatibility – not to mention my own work as well. Over time, I’ve scrounged the web for the best validation and browser compatibility testing tools around. Here’s my favorites.

HTML and CSS Validation

First let’s take a look at some methods to check HTML and CSS validation. I should mention that I work on a Mac so these are going to be more Mac biased. Not to worry though, there are many platform independent solutions.

Along with validating your files, you should format your markup nicely as well. “Examples and Tips for Great HTML/CSS Formatting” is a article to read more on that subject.

1. W3C Validation – HTML

Probably most commonly known is the online W3C Validation Service. You can validate by URI, file upload or directly inputting the markup. There are several validation options available although most of the time you won’t really need to mess with them.

2. W3C Validation – CSS

W3C also has a CSS validation service that you’re most likely familiar with. Just as with the HTML validation service, the CSS version has additional options if necessary and allows validation via URI, file upload and direct markup input.

3. [Firefox] Web Developer Toolbar

The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation. You can quickly check validation of the site you’re currently viewing or a local file you’re viewing. It will sent the URI or the file to be checked to W3C and display the results in a new tab.

You can also turn on “Display Page Validation” to show some quick validation information for HTML and CSS without needing to open a new tab. Very useful if you’re working on a project. You can also validate much more than just HTML and CSS.

4. [Browser Independent] W3C Validator Favelets

I use Safari as my primary web browser but Firefox has spoiled me before I switched with the huge selection of extensions like the Web Developer toolbar and Firebug. Safari has the Web Inspector, a similar tool to Firebug but it doesn’t let you check file validation.

A quick and easy way to give just about any major browser a way to validate HTML and CSS is by using favelets. Favelets are bookmarked snippets of JavaScript to add extra functionality. W3C provides several validation favelets I use frequently with Safari.

5. Your Development Editor

Most development editors offer some sort of validation tool. Coda and CSSEdit are currently my editors of choice and both provide validation tools.

6. Validator S.A.C.

If you need to check for validation on a large number of documents quickly, it can be a pain to open them all up in your favorite editor or via browser. This app makes it quick and easy.

Validator S.A.C. is an OS X stand-alone application that can validate HTML documents (with W3C) using a favelet, drag and drop, with URL’s or just the application’s File > Open. I use the drag and drop method particularly often. ;-)

Final Thoughts on Validation

While validation is very important, it is just a tool to help ensure you’re code is up to standards and all that good stuff. If you’re using some new web technologies, it may not validate but that doesn’t mean you shouldn’t use it. Innovation is often born by breaking the rules.

With that being said, if you’re submitting a template for sale at Theme Forest, make sure ALL your files validate before submitting. If there are validation errors due to things like CSS3, just be sure to mention that in the notes to the reviewer. ;-)

Browser Compatibility Testing

If everyone just used up to date versions either Firefox or Safari, browser testing would be a breeze. Let’s face it though, that’s not going to happen and we’ll be dealing with Internet Explorer problems for years to come (not just IE6).

Here are some of the tools I use and some I don’t, to test for compatibility on Internet Explorer, Safari, Firefox and other browsers.

Current IE, Firefox and Safari

We’ll obviously have the current browsers installed on our systems such as Firefox 3.5, Safari 4, Opera and Internet Explorer if you’re on Windows.

7. Older Versions of Firefox

If you need to test older versions of Firefox there several ways to do this that I’ve found but these are the easiest I’ve found.

• Windows: Standalone Firefox (older versions) via Portableapps.com
• Mac: MultiFirefox 2.0

Portableapps on Windows runs Firefox as a standalone application so installation isn’t necessary and it won’t mess with your current Firefox install.

MultiFirefox 2.0 on Mac lets you run multiple versions of Firefox side by side by managing the Firefox profiles.

To download other versions of Firefox you can visit http://releases.mozilla.org/pub/mozilla.org/firefox/releases/

8. Older Versions of Safari

Unfortunately for you Windows based web developers out there, I don’t have an easy solution to test multiple versions of Safari. For us Mac users there is a nice collection of standalone versions of Safari provided by Michel Fortin.

9 & 10. Older Versions of Internet Explorer

There’s no easy way to interactively test IE on Mac so I use Parallels to run a Virtual Machine of Windows XP with IETester installed. This application lets you test versions of IE as far back as 5.5 on Windows XP, Vista and 7.

Every once in awhile I’ll notice an oddity in IETester that I’m not sure occurs in a native version of IE6 or 7 so I’ve also installed standalone versions of IE6, 7 and 8 using Internet Explorer Collection.

Snapshot Services

If you don’t need to actually interact with your site in these browsers, you can also use several browser snapshot services which will just show an image of how the site will look for a wide array of browsers.

11. Adobe BrowserLab

Adobe recently came out with a new service called BrowserLab which lets you view a snap shot of a website via URL in different browsers. It’s fast, free and gives you a couple different viewing options to compare different browser versions.

12. Browsershots.org

Browsershots.org is the same idea has Adobe BrowserLab but with several differences. You can test way more browsers on more platforms with more options like screensize, color depth, javascript, flash, etc. The downside is that the service is a little slower (sometimes too slow) and isn’t nearly as nice of a UI.

13. Browsercam

If you haven’t read “25 Essential Web Services for Designers“, you should. It has some great services which is how I found out about Browsercam.

Browsercam is basically the same thing as Browsershots but is a paid service but offers some more in depth features and I assume faster results, although I haven’t used it yet.

Final Thoughts

So there you have it. Several ways to validate and test your work on both Windows and Mac. If you’re submitting a template to Theme Forest you now have no excuse for validation errors or browser incompatibilities. The large majority of templates I review are rejected due to validation errors and browser issues that should have been fixed before being submitted.

If you use or know of a tool (or tools) for validation or browser testing, let us know in the comments.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.