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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Rik Girbes July 29th
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
( )Nilks July 29th
Nice, but there is not anything really.
( )Simon North July 29th
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.
( )LeGaS July 29th
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.
Andrew July 29th
Great article; thanks for mentioning Internet Explorer Collection; that will definitely be useful!
( )Edmund July 29th
Too bad Adobe BrowserLab is not available for new users right now… Anyway, great article.
( )Stephen Ainsworth July 29th
You cannot do too much testing…
the web developer firefox plugin is my favorite.
( )Martyn Web July 29th
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!
( )Adam Webster July 29th
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
( )Michael July 29th
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?
( )Shaun July 29th
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!
( )Andy Gongea July 29th
Every web development/design site has its flaws. In the end it really goes down to what the user sees and the user experience.
( )Karinne July 29th
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…
( )Weebee July 29th
The web developer firefox plugin is my favorite too.. I didn t know Adobe BrowserLab, it seems well!
( )Rohan July 29th
Its in beta. I find subscribing to their Twitter account is a good way to know when signups are open.
( )Weebee July 29th
Thanks for precisions
jmvdigital July 29th
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/
( )Vel August 2nd
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.
Michael August 4th
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.
Dailypush July 29th
Dont forget http://www.xenocode.com/browsers/
Virtualized browsers!
( )Greg July 29th
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…
( )Rohan July 29th
Good to see you mentioning BroswerLab. Hope they upgrade soon – only 3/4 configurations so far
( )Benjamin Reid July 29th
Don’t forget to check your whole sites spelling to. Human validation. I use this site http://spellr.us/
( )kevinsturf July 29th
Great article Jarel, found some useful stuff in here and most I knew about already
( )Raspo July 29th
I really like this, bookmarked!
Anyway, Adobe BrowserLab is always unavailable for me… it says that “is currently full”
( )Kiran July 29th
Great suggestions I like http://uitest.com all in one location after the site is put on a test server.
( )8207h32 July 29th
wow.. big list.. interesting..
( )mylongnamebreaksyoursiteithink July 29th
Nice list
( )imtryingtoovercomethisssueonmysitenolucksofarjusthopenoonehasareallylongname! July 29th
total validator is nice as well.
( )Myfacefriends July 29th
thanks for mentioning IE Collection.
( )The web developer firefox plugin is my favorite too.
Zach Krasner July 29th
Good list! Featured at the Zach Krasner Times
( )Jermaine Hercules July 29th
I been looking for someting just like IE Collection and now I found thanks great post
( )Joao Joaquim July 29th
nice one! I liked this article very much.
( )Eric Leung July 29th
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.
( )IgnacioRV July 29th
Thanks, I didn’t know about Adobe BrowserLab (will check it).
Anybody knows a development editor for windows with useful validation tools?
( )Steve Grunwell July 29th
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.
( )Yoosuf July 29th
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
( )Soner Gönül July 29th
Thansk!
Really good
( )Soner Gönül July 29th
For more tutorials follow me;
twitter.com/sonergonul
( )friendfeed.com/sonergonul
chad July 29th
Stop Spamming!
( )yamaniac July 29th
oh yes sure soner… we will!!
( )yadoopa July 30th
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
( )Andy Gongea July 29th
Ahh, I was just creating a similar post. Great job.
( )Brett July 29th
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.
( )Shane July 29th
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!
( )Cody July 29th
Awesome very nice tools and great post.
( )Helen July 29th
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
( )Márcio A. Toledo July 31st
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.
( )sven July 29th
textmate has also got some validation tools built in the html bundle btw.
( )Diego SA July 29th
Excellent roundup! Useful resources and some ones are well famous.
( )david July 29th
HTML Validator Firefox extension: http://users.skynet.be/mgueury/mozilla/
Better than web developer by far.
( )Cory July 29th
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.
( )Simon July 30th
Is it still useful to check earlier versions of firefox, since this browser automatically updates?
( )Sam July 30th
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
( )Yatrik July 30th
Great list.
( )Boussacsou July 30th
Great article.
( )DemoGeek July 30th
BTW, IETester can be downloaded from this page at http://www.my-debugbar.com/wiki/IETester/HomePage
( )Mark Dijkstra July 30th
Nice and useful post James
( )Jasmin Halkić July 30th
Nice, Thank you!
( )r_jake July 30th
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.
( )Dan July 30th
Ok, let’s test some of these… validating current page… ooops! 42 errors and nobody cares.
( )Jarel July 30th
Thanks for the comments everyone!
@r_jake – Oh, me too. Maybe someday. We can hope at least.
( )Sam July 31st
I love the web developer plugin for firefox, I would strongly recommend it to anyone.
( )Alexei July 31st
You forgot to mention Opera’s Dragonfly – a web developer toolbar!
( )cancel bubble August 2nd
As a FREE alternative to VMWare/Parallels, check out Sun’s VirtualBox. There’s a fantastic post/screencast at http://www.10voltmedia.com/blog/2008/12/screencast-install-internet-explorer-on-osx-using-virtualbox/ that walks you through getting this setup on your Mac.
“Cross-platform browser testing shouldn’t be a pain in the ass. If, like me, you’re one of the growing number of designers and developers using an OS other than Windows, you need an IE testing environment. In this screencast I’ll show you how to set up a virtual machine for Internet Explorer 7 on OSX in about 15 minutes without spending a penny.”
Once you have this setup on your Mac, you can download/install IETester for IE6 and IE8.
( )Amal August 2nd
it’s really a nice post. i usually use IEtester and MultipleIEs. i was looking for standalone version of FF. i really know something knew from this article.
Thanks.
( )Phil Smith August 3rd
Cloud Testing (http://www.cloudtesting.com) offer a Cloud based functional testing service, which can also be used to check your site and user journeys in multiple browsers. You can capture your user journeys using the Selenium IDE plugin for Firefox then upload the scripts to run on our servers.
You can check your user journeys in the following browsers:
Firefox 2, 3, & 3.5
Internet Explorer 6, 7 & 8
Chrome 2 and 3
Safari 3.2 & 4
Opera 9.6 and 10.0
The service captures and stores screenshots, the HTML and also component information, including HTTP headers, which can all be viewed from the results portal at http://portal.cloudtesting.com/
A 7 day free trial is available.
( )Zayelion August 11th
First time seeing Multifox, but is it really necessary? Firefox tries to most of the time update it’s self so users are likely running the latest version within a few weeks, if not a month of its release.
( )Tessa August 19th
I’ve just downlaoded ies4osx, which is free and allows you to run IE6 on mac osx. It’s a bit slow, but everything works. Seems like one of the better options for mac. You do need an intel mac and have to install X11. http://www.kronenberg.org/ies4osx/
( )Vasya October 31st
For you are not prepared to wait a few minutes for each screenshot – take a look at http://www.browserseal.com
( )