Advertisement
Web Roundups

13 Ways to Browser Test and Validate Your Work

by

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.

W3C HTML Validation

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.

W3C CSS Validation

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.

Web Developer Toolbar

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.

Safari W3C Validation Favelets

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.

Coda's Validator

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. ;-)

Validator S.A.C.

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.

browsers

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.

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.

MultiFirefox 2.0

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.

Muli-Safari

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.

IETester

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.

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.

Adobe BrowserLab

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.

Browsershots.org

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.

Browsercam.com

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.


Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Web Design
    HTML/CSS
    Unicode: A Beginner's PrimerUnicode retina 400x400
    Believe it or not, there's an image format which is built right into your browser. It allows images to be downloaded even before you need them, renders them perfectly on Retina screens, and allows them to have CSS colours and effects applied to them. Ok, I'm not being entirely truthful there. It's not an image format as such – but the rest still applies. Using Unicode you can create icons that are resolution independent, have virtually no download time and can also be styled with CSS.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give CrossBrowserTesting.com a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Computer Skills
    App Training
    Firefox for BeginnersFirefoxicon400
    Whether you are a new Mac user or simply wish to try a web browser other than Safari, Firefox will serve you well and is an excellent option for those wanting more flexibility and control. In this tutorial, I will show you how to configure Firefox, browse, bookmark and synchronise your favourite websites, manage your history and install a number of features that will enhance your browsing experience.Read More…
  • Code
    Tools & Tips
    Using BrowserStack for Cross-Browser TestingBrowserstack retina preview
    Browser testing is the bane of our existence. Well, that's a bit of an exaggeration, but not by much. Multiple browser versions and browser fragmentation can make it difficult to get good test coverage for your sites especially when you factor in the different operating systems developers use to build with. Over the years, we've relied on a variety of tools to help us with this challenge including virtual machines, tools that simulate browsers and even having multiple devices on hand to work with. It'd be great if there were a way to have one viewport that allowed us to easily test across any major browser and their individual versions without jumping through hoops. BrowserStack.com aims to offer this via it's browser-based virtualization service and in this article we'll cover the service and how it helps tackle the cross-browser testing problem.Read More…