Validation – How to Validate a Website

Once your site is implemented, designed and optimized, it is time for validation and usability testing. This provides a means of correcting any problems before revealing your site to the general public. There are several ways to validate your website. Most importantly, you should validate your HTML, CSS and SEO, as well as ensure that you have no broken links or images.

Code Validation

The following validation tests can be used to make sure your website code does not contain any errors.

  • HTML validation – The W3C Markup Validation Service will list any markup errors found on a submitted page. Another similar tool is the WDG HTML Validator, which can check every page on your site.
  • CSS validation – The W3C CSS Validation Service can validate your CSS to ensure the style information behind your pages is clean and valid.
  • Link validation – The W3C Link Checker makes sure that you do not have any broken links.

SEO Validation

A SEO validator is a service that lets you test your website against search engine ranking factors. There are a number of online tools available for this purpose. Below are two of the better ones.

Accessibility Validation

Web accessibility means making your website usable by people with disabilities. To help evaluate if your site is accessible, you can use Wave, which is a free web accessibility evaluation tool.

Browser Compatibility Testing

Make sure your website looks the same on all of the major browsers – namely Firefox, Internet Explorer, Chrome, Safari and Opera. These web browsers together make up about 99% of the market share, as seen below.

Browser market share comparison
Browser market share. Source: NetMarketShare.com.

A useful tool for checking browser compatibility is BrowserShots. It will show you how your site will look on different versions of the browsers you select. Web pages may render slightly differently on older versions of the same browser, even if your markup is correct. For this reason, it is important to test previous versions since many web users are still using them.

To make your website render correctly for around 99% of the Internet population, you should test compatibility for browser versions down to IE6, Firefox 3.0, Chrome 5.0, Safari 4.0 and Opera 10.0. Additionally, you may want to test out your site on mobile web browsers, for example using mobiReady. Making your site easily accessible through mobile devices is becoming more and more important. You may want to consider using a separate lightweight template specifically for your mobile visitors.

WP Mobile Detector – This plug-in detects mobile devices and displays a compatible WordPress mobile theme.

You also want to make sure that your site looks good at lower monitor resolutions, down to 1024 x 768. What this means is that you should try to keep your layout width to no more than 950 pixels in order to avoid displaying the horizontal scroll bar. The diagram below shows that fewer than 1% of web users have a resolution lower than 1024 x 768.

Screen resolution statistics
Screen resolution statistics. Source: w3schools.com.

Usability Testing

It is hard to be objective about something that you have created. Therefore, it is important to have people other than yourself test your website. This can reveal problems that are not obvious to the designer. Be sure to have the users explore the site fully, and have them give feedback. Ask them to give opinions on, for example, the design, color scheme, content, navigation, organization, forms and performance of the site.

Recommended additional reading:
Steve Krug - Don't Make Me Think