The technical qualities of a website largely depend on how hard the web development team has worked on it. When qualifying a website on the code level, you need a different set of metrics than you did some years ago. This article is our attempt at specifying what metrics you should use.

First look at the validation. Does the front page validate? Do all sub pages of the site validate? If they don’t, what kind of errors are there? While validation isn’t the most important metric, it’s a very quick way to get a feeling of if the coder is “web standards aware” or not. You may use the Firefox validation plugin that checks all the pages you visit and puts a little green check in the statusbar if the current page validates. For doing sitewide validation use htmlhelp’s validation spider and let it loose on the site . Validation is slowly catching on as a standard tool in the webdev toolbox. Someone who is not using the validator probably doesn’t know much about web standards.

One more note on the subject of validation: do not forget validating the CSS. There’s a lot of basic errors that the validator finds that only leads to errors in some browsers. The W3C CSS validator might help you fix some of those right away. Before you complain: the CSS validator has a few issues. If you use line-height, you need pass it a decimal number; 1 becomes 1.0, 0 becomes 0.0. Secondly, if you use CSS 2.1 or CSS 3 properties you need to inform the validator you do. Add the URL parameter “profile” with the value set to “css21” or “css3”, and revalidate. CSS errors and whether or not the style sheet is well organized clearly propagates what CSS level the web development specialist is on.

Next look at the doctype. That is a single line of information at the first line of the HTML that defines what language the coder is using. Use of Strict or Transitional is what matters most. Most pages that validate as transitional may with very small changes be upgraded to strict. And why not? Strict signals that an effort has been made to ensure that the document separates structure from design. If you know how, there’s no reason not to. At this stage you may also check that the doctype is properly set, there’s an IE bug that makes IE render things badly (quirks mode) if the doctype isn’t the first element of the page. Incorrect use of doctype is also a common way to recognize a beginner.

Sites that pass the above code tests get another batch of checks. Is the code semantic? (ie. does the HTML describe the content?) Look at elements, classes, and ids in use. Do they describe the content they contain? Bad sites use class names tied to design. Mediocre sites use general names like “wrapper” or “column2”. Great sites use “copyright”, “invitation”, and “footnote”. Many CMS:es generate design-oriented ids and classes, and only a few reach mediocre. This is one way to see that a site was robot-made.

Another code issue is the content over HTML quotient. For just a few lines of content you shouldn’t have to need huge amounts of HTML. You shouldn’t need 10 divisions just for one header. A high content over HTML quotient signals that the web developer knows what he’s doing. An “overmarked” site means that the web development specialist has suddenly forgotten that content is more important than the code behind it.

One last angle is the accessibility one. How will a screen reader read this site? Is all the content of the site available as readable text? Does the site require javascript when it isn’t needed? A good place to see if someone knows about accessibility (on the web) or not is checking the forms. Fieldsets, legends, and labels: they all tell their story about the developer and his knowledge about accessibility.

If you have a website with a contact form you’re most likely to be of the problem of spam submissions.

Spam submissions may be defined as automated submissions to a website contact form. These submissions are generated from programs scouring the web and locating contact forms that contain a “comment” field. The spam programs submit the contact form with spurious information and links to the website in the comments field.

Their goal is to locate contact forms that post the submitted information into a message board or forum – thus getting links to the site.

Even if your contact form does not post to a message board it’s common to be bombarded with these types of spam submissions.

There are several methods for blocking these requests and the most common one is a CAPTCHA (“Completely Automated Public Turing test to tell Computers and Humans Apart”).

CAPTCHAs are the form fields that require users to enter a text string or to solve a math problem. Example: “Enter the random phrase at left to submit this form.” CAPTCHAs work on the concept that only a human, not an automated program, could follow the instructions and enter the correct information.

Placing CAPTCHAs in your website is one of the essential steps of web development. Though CAPTCHAs work great, they have some drawbacks as well:

• There is an unending battle with spammers and web development specialists. As CAPTHCAs get more sophisticated, so to do the spammers. Thus, CAPTCHAs need regular revision and updating as spammers find ways around them.

• CAPTCHAs require more effort from your users. You decrease accessibility level for increasing security level.

1. Flash Switcher

It is a must have for Flash Developers; it enables you to choose between different versions of flash so you can be sure your code is compatible with all existing versions of Flash.

2. Firebug

Firebug allows you to edit CSS and HTML and any browser side code from within the browser. It’s a great tool to figure out why your web pages are loading slowly, what JavaScript code is slowing things down, and editing pages within the browser environment.

3. Live HTTP Headers

Live HTTP headers plug-in shows you the dialog that happens between the web server and your browser. It helps to figure out why things aren’t redirecting or why search engines aren’t properly indexing your content.

4. FireShot

Have you ever wanted to send screenshots to clients or take an image off a page and use it in a mockup? FireShot lets you take screenshots of entire pages, selected areas, or the current window and export it to an imaging program. It is great for client meetings, quick mockups and portfolio pages.

5. Tamper Data

This plug-in lets you modify GET and POST parameters on any page. Use it to test form processing code, diagnose bugs and test for security issues. Its only issue is that it won’t work in tandem with Google’s web accelerator.

6.  Load Time Analyzer

Load Time Analyzer enables you to see how long your web page takes to load for different speeds. It is especially useful for web development specialists whose audience may still be using dialup.

7. MeasureIt

Do you need to create a new graphic but don’t know what size or perhaps do you need to know the exact dimensions of a piece of web page? MeasureIt adds a ruler which lets you measure vertically and horizontally.

8. ColorZilla

It lets you get the RGB colors of any element on a pageusing a drop tool similarly to Photoshop. Great when you need to design new graphics on an existing project.

9. Link Checker

Line Checker is used for checking which links aren’t loading properly or go 404 from any given page.

10. Web Developer

Its features include: view the CSS property or parent class of any element on a page with a simple click, find broken images, view any form field and much more. You can clear cookies, run a DOM editor, and use all other functions from one simple menu. Once you start using it in web development, you will never figure out how you lived without it!