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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jarel Remick
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
wow lots of tutorials today!!
Nice its interesting… (i already knew most of it…. but there were some nice tips, like the older versions of safari!)
Great thx
ps. First comment :P
Nice, but there is not anything really.
Nice rundown, its unfortunate that BrowserLab isn’t available to us yet unless you were lucky enough to get an account when they accepted users.
Wow, MultiFirefox looks cool, I didn’t know about it. :)
Another great website for testing is ViewLikeUs (http://viewlike.us/), where you can check your website in different screen resolutions.
Great article; thanks for mentioning Internet Explorer Collection; that will definitely be useful!
Too bad Adobe BrowserLab is not available for new users right now… Anyway, great article.
You cannot do too much testing…
the web developer firefox plugin is my favorite.
Great list for testing, I’m looking for something that would validate a whole site rather than just individual pages at a time. Any Suggestions?
Also Its defiantly worth checking out this tutorial on 10voltmedia about how to run windows ie’s on your mac for free using Virtual Box. I recommend this, it can be a little complicated but if you install 6 and then ie tester on it, it works fine!
To get into Adobe BrowserLab I followed their twitter and when they said the service was open I went and signed up.
http://twitter.com/adobebrowserlab
I’m a big fan of validation as well. I tend to check other people’s sites when I visit them.
Question for everyone… would you think it beneficial or annoying if someone sent you (as a webmaster) an email informing you of a validation problem?
The kind of people that would find it beneficial are probably the kind of people who would validate their site anyway.
The kind of people with completely invalid code are probably the kind of people who will ignore your comments.
But go ahead and do it anyway! :-)
Every web development/design site has its flaws. In the end it really goes down to what the user sees and the user experience.
I’ll have to give that Adobe BrowserLabs a shot! Thanks for that.
I have been using IE NetRenderer (http://ipinfo.info/netrenderer/) for the last little while and seems to work fine except you can test mouse gestures/hovers/etc…
The web developer firefox plugin is my favorite too.. I didn t know Adobe BrowserLab, it seems well!
Its in beta. I find subscribing to their Twitter account is a good way to know when signups are open.
Thanks for precisions :)
You guys left out Litmus! I find Litmus to be a way better user experience than BrowserCam. It has lots of great features. http://litmusapp.com/
Well, I can’t agree with you. I spend $25 for one year subscription at browsercam.com and this give me 30 min remote access + screenshoting in almost 40 browsers … I mean major browsers in different versions/OS :)
Take a look here: http://www.sitepoint.com/forums/showthread.php?p=4325823 for more info.
I can’t agree with your not agreeing:).
I tried browsercam.com a month or two ago and the screen shots were just terrible – all blank screens. I tried it a number of times for different URLs and always the same. Don’t know about the remote access with them, but when I tried remote access with Cross Browser Testing it was EXTREMELY SLOW. Not at all efficient for someone like me who is trying to run a web design business.
Litmus, while not perfect, is by far the best I’ve seen for my needs (namely, to efficiently test compatibility AND demonstrate that to a client). They also test the w3c validity of the html and css of the page and they give a handy public link that you can send to a client.
There’s more to it and I think it should definitely be included in this list. I would, of course, like to try Adobe’s new service, but as mentioned above it is currently closed to new comers. So, for the time being, Litmus it is.
P.S. I have NO affiliation with Litmus, I’m just a recent customer.
Dont forget http://www.xenocode.com/browsers/
Virtualized browsers!
Big huge +1 here. I found it ultimately more useful than any snapshot service, because it is interactive. Can’t verify fully working interactive websites (ie. Javascript, PHP) with just a snapshot! Gotta love virtualization…
Good to see you mentioning BroswerLab. Hope they upgrade soon – only 3/4 configurations so far :-(
Don’t forget to check your whole sites spelling to. Human validation. I use this site http://spellr.us/
Great article Jarel, found some useful stuff in here and most I knew about already
I really like this, bookmarked!
Anyway, Adobe BrowserLab is always unavailable for me… it says that “is currently full” :(
Great suggestions I like http://uitest.com all in one location after the site is put on a test server.
wow.. big list.. interesting..
Nice list :)
total validator is nice as well.
thanks for mentioning IE Collection.
The web developer firefox plugin is my favorite too.
Good list! Featured at the Zach Krasner Times
I been looking for someting just like IE Collection and now I found thanks great post
nice one! I liked this article very much.
I run a Mac with VMWare running XP and Vista with different versions of IE. I personally find this as one of the best way do browser testing. Same browser on Mac and Windows can act a little differently, and even IE can act differently on XP and Vista.
Thanks, I didn’t know about Adobe BrowserLab (will check it).
Anybody knows a development editor for windows with useful validation tools?
Test Everything (http://tester.jonasjohn.de/) offers a bunch of validation and checking tools, and let’s you run several of them at once.
I haven’t used the site much, but I’m looking forward to really hit it hard with a project I’m beginning now.
Apparently they don’t use their own tools though, as the menu is cut off in my version of Firefox.
nice stuff, but Expression Web 3.0 having much more fatures such like this
http://eyoosuf.blogspot.com/2009/07/expression-studio-3-at-glance.html
Thansk!
Really good ;)
For more tutorials follow me;
twitter.com/sonergonul
friendfeed.com/sonergonul
Stop Spamming!
oh yes sure soner… we will!! :D
It’s really irritating…wonder why Jeff keeps approving these comments? If it’s just to get the comment count up then I’m getting out of here :(
Ahh, I was just creating a similar post. Great job.
I’ve been using http://validator.nu/ to validate HTML 5 documents. I havn’t done much with it, mainly just trying out HTML 5.
IE tester seems to have had a UI overhaul since I last used it, prior to the release of IE7. It certainly does make testing sites on multiple versions of IE. Prior to this, we had to mess about with the registry and so on, never a nice task.
I wasn’t aware of the multi-versions of Firefox and Safari, so thanks for sharing!
Awesome very nice tools and great post.
The W3C validation service completely sucks: I sent them a xhtml1strict-file and they found a lot of tag-errors, thus for instance: the opening body-tag in simple brackets should not be allowed. Are they kidding? By coincidence the protocoll file is coded in xhtml-strict itself and contains all the tags the content of this page claims to be invalid on my xhtml-strict-file :)
Lol, I think you must be kidding. My code always validate… and 100% of the time I received an error message, it was a real error. One thing that usually happens is when you forget to close one tag and it creates many other errors based on the first one. Of ourse there are some cases (when youre using new technologies for ex) that the validation will not work… but these are exceptions.
Take a better look at your code before say stupid things about any validation tools.
textmate has also got some validation tools built in the html bundle btw.
Excellent roundup! Useful resources and some ones are well famous.
HTML Validator Firefox extension: http://users.skynet.be/mgueury/mozilla/
Better than web developer by far.
IE Tester has been infinitely helpful for me for the past several months. Prior to that I was using Multiple IE. While nice, Multiple IE required you to open multiple browser sessions individually. IE tester on the other hand essentially opens multiple installations in a “parent” browser.
Is it still useful to check earlier versions of firefox, since this browser automatically updates?
great article thanks… as a mac designer, IE is always a real pain in the you know what. parallels is always running in the background
Great list.
Great article.
BTW, IETester can be downloaded from this page at http://www.my-debugbar.com/wiki/IETester/HomePage
Nice and useful post James ;)
Nice, Thank you!
I fantasize about the day that someone does a native port of IETester for Mac OS X. I know its not technically possible but (sigh) virtualisation clogs everything up so.
Ok, let’s test some of these… validating current page… ooops! 42 errors and nobody cares.