Once your site is implemented, designed, and optimized, it is time for user experience design 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.
User Experience Design Validation through Code
The following user experience design 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.
A SEO validator is a service that lets you test your user experience design against search engine ranking factors. There are a number of online tools available for this purpose. Below are two of the better ones.
IBeam’s SEO Site Validator – This tool will go through a couple of pages on your site and give you a SEO score and title.
SEO Workers Analysis Tool – An advanced and somewhat verbose tool that tries to analyze a page from a search crawler’s perspective.
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.
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.
It is hard to be objective about something that you have created. Therefore, it is important to have people other than yourself run user experience design testing on 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.