September 3, 2008

Web Design Tools - The Site Test

Filed under: Accessibility, CSS, HTML, Web Design — Douglas T @ 10:14 pm

If you are a site designer, or a site owner, you will at some point need to evaluate a site. Do the bones of the site stand up, or it is a screaming wreck hidden behind a pretty facade?

The first thing I do is look at the source code.  Beautiful code isn’t the final answer on site testing, but it’s a place to start.  Is it table based, or a CSS layout? A table based layout should put up a warning flag. Table based layouts are outdated… you can do better. You want CSS. It’s more adaptable, and more accessible to a wide range of technologies. You can also make significant changes to your entire site by changing just one file.

A quick look at the code should be enough to tell the difference. If the source code is filled with <table>,<td>,<font>, and <tr> then you’re looking at a table layout. If it looks more like <div id=”blah-blah”>,<h2> and <ul> then you’re likely looking at CSS.

Validation is my next step. Just because it validates, doesn’t mean the page works, but it does rule out a lot of common errors. If you just want to validation check one or two pages, for to WDG HTML Validator and type in their URL. You will get an immediate evaluation of the page’s validation status. Quick, clean, and simple. If you’re going to do this often, go get the Web Developer or Html Validator add-on for Firefox. You are using the Firefox web browser aren’t you? If you aren’t, then download that as well as one of the validation add-ons. They’re free, high quality products.The Web Developer add-on is a powerful testing tool. It has all kinds of bells and whistles, so it may be more than you’re looking for. If you only want to check validation, then just go with the HTML Validator. It does that one task very well.

If your site is CSS based, you can validate your CSS file too. I’d suggest CSSCheck or once again Web Developer.

Then we get to links. Any broken links on your site? It’s annoying, but sites come and sites go, and invariably you will end up with broken links. Try out the Online Link Checker, or the LinkChecker add-on for Firefox.

Accessibility is also important, I’d suggest trying the OCAWA accessibility validator. There are other tools and add-ons around, but that will get you started. If you need more testing options, Web Developer has some accessibility functionality, and there is the Firefox Accessibility Extension as well.

Want an overall evaluation of the speed of your site? Try out the Web Page Analyzer. It will let you know how fast your site is running on various bandwidths, and make suggestions for speeding it up.

I would suggest sticking with Firefox for most of your testing purposes, because of the wealth of testing tools available. There is however, an Internet Explorer Developer Toolbar. In my experience, it doesn’t work as intuitively or as well as Firefox’s, but it does work.

This isn’t everything you need to know to evaluate a site, but I hope it helped get you moving in the right direction. Good tools always make a task go smoother.  Good luck.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment