13 Ways to Browser Test and Validate Your Work

How many of you are in the habit of validating your web pages as you work on them and before publishing? Do you also check your work in more than just your default browser? Perhaps you assume if it looks good on your monitor, it will render the same way on everyone who visits your sites monitor. Not necessarily so! Jarel Remick lists his favorites in his article 13 Ways to Browser Test and Validate Your Work.

HTML and CSS Validation Tools

  • W3C Validation – HTML – The most commonly known tool  is the online W3C Validation Service. You can validate by URI, file upload or directly inputting the markup.
  • W3C Validation – CSS – W3C also has a CSS validation service that  allows validation via URI, file upload and direct markup input.
  • [Firefox] Web Developer Toolbar –  The Web Developer toolbar extension for Firefox has tools to check HTML and CSS validation. I use this one on a daily basis.
  • [Browser Independent] W3C Validator Favelets – 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.
  • Your Development Editor – Most development editors offer some sort of validation tool. Expression Web is my editor of choice and it provides validation tools.
  • Validator S.A.C. –  Validator S.A.C. (Stand Alone Complex) is a stand-alone, easy to install, version of the W3C’s HTML / XHTML Markup Validator for Mac OS X. Validator S.A.C. is a normal Mac OS X application. No installation is required, just put Validator S.A.C. where you need it (hard drive, flash drive, CD-R, etc).

Validation is a tool to help you make sure your code is standards compliant.

Browser Compatibility Testing

If everyone was using the same browser and the most up-to-date version of that browser, then browser testing would be much easier. BUT, this is the real world. My default browser is Firefox, but I know from viewing my site statistics, that Internet Explorer is used by a large number of my site visitors. And there are many still using IE6 as well as IE7 and IE8. I want all of them to have a good experience when viewing. So I do testing in three browsers – Firefox, Internet Explorer, and Opera. My web editor, Expression Web, also allows me to check in multiple browsers from within the editing window by using SuperPreview. I have the current versions of Firefox, Internet Explorer, and Opera installed on my system. Some of you may also have Safari installed.

  • Older Versions of Firefox – If you need to check in older versions of Firfox, there are ways to do this. For Windows Users: Standalone Firefox (older versions) via Portableapps.com and for Mac Users: MultiFirefox 2.0
  • Older Versions of Safari – for  Windows based web developers there is no easy solution to test multiple versions of Safari. For Mac users there is a nice collection of standalone versions of Safari provided by Michel Fortin.
  • Older Versions of Internet Explorer – There’s no easy way to interactively test older versions of IE.

Snapshot Services

You can use several browser snapshot services which will just show an image of how the site will look for a wide array of browsers. This will not allow you to interact with your site in the various browsers but will give you an idea of how it renders.

  • 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.
  • Browsershots.orgBrowsershots.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).
  • Browsercam – Browsercam is basically the same thing as Browsershots but is a paid service but offers some more in depth features. I have not yet used this service.

Read  13 Ways to Browser Test and Validate Your Work in its entirety.

Find Broken Links

How many times have you visited a site and clicked on a link only to find it goes nowhere? How often do you check the links on your website to make sure they are still working? One of my favorite tools in the LinkChecker Addon available for the Firefox browser.

Susan Emerson is one of the instructors in the Web Development Training Class which is part of the free SEO Training offered by GNC Web Creations. She has a post on her blog Web Page Mistakes with solutions, titled about Find Broken Link.

There various tools available to find broken links on your own website. Some are free, some are browser plugins and some are part of a paid software package.

Take a Screenshot and Send By Email

Quite often when I am helping someone with their website, I will ask them to send me a screenshot of what they see on their computer screen. If they happen to have SnagIt or another screen capture utility, they will usually know how. Others have no idea. This came through on a mailing list I am on so though I would share it. The article comes complete with screenshots.

Built into both Microsoft Windows and Macintosh operating systems is an easy way to capture the contents of your computer screen into an image file, often referred to as a “screenshot.”

A screenshot can be helpful when you are trying to obtain assistance as it allows your support person to see exactly what your computer screen was showing (a long error message, for example) at the time the screenshot was taken.

Read How to take a screenshot and send it via e-mail.

Troubleshooting Tip – Reveal Tags

QUESTION: I have hit a combo of keys that put my coding on the Design page? I would like to put it back to normal but cannot seem to find the answer? This is FrontPage 2003 btw.

WHAT YOU SEE:

Screenshot reveal code flags.

reveal-codes-fix-lg

WHAT HAPPENED: Reveal Codes was accidentally turned on.

SOLUTION: View | Reveal Tags | Make sure it is NOT checked or Ctrl + /

Thanks to Tina Clarke for the solution.