Testing and Validating a Website

When I develop a Website, I use several tools to test the Website and validate the source code. I test often during the development process and upon the final phase, in order to ensure compatibility with the maximum number of browsers. So far I hand-coded all the Websites I developed. I am not a fan of any WYSIWYG editors. Here is the list of tools I use for testing and validating a website, categorized into separate sections:

(X)HTML Validation

Validation is the process of checking the code against formal guidelines published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web pages. There are many reasons to write valid (X)HTML and CSS. Here are few:

  1. If you want your Website to be listed on search engines, then make sure that you have good HTML coding. Many engines cannot properly index a site that has serious HTML errors.
  2. Properly coded HTML will render better, render on more browsers, and render faster than HTML with errors.
  3. Browsers are becoming more standards compliant, and it is becoming increasingly necessary and important to write valid and standards compliant HTML.
  4. Writing error-free HTML is the best way to help ensure that pages render optimally in as many browsers as possible. This includes older browsers and browsers that are yet to be developed.
  5. Write it right the first time and write it once. Write it wrong, and you may be writing it again later.
  6. And If you like more.

CSS Validation

Using CSS drastically reduce the maintenance and modification time on a Website. Also using CSS, dramatically reduces the amount of code the search engines have to go through.

XML Validation

Below are the tools I use to write and Validate XML pages.

Mobile Validation

Below are the tools I use to validate the website for mobile users. This step is required if the customer requests a mobile-friendly website.

SEO Testing

SEO is the process of improving the volume or quality of traffic to a Website from search engines via “natural” search results. Typically, the earlier a site appears in the search results list, the more visitors it will receive from the search engine.

The roles of an SEO specialist are to identify the strategically defined keywords and phrases that will drive the most qualified traffic to your website, to resolve existing technologies in the website that may hinder search engine visibility, and to strategically optimize the website´s content and Meta data to correlate with search engine algorithms.

Screen Resolution Testing

When developing a website, it is important to test the website against multiple resolutions to make sure that the Website renders properly at different screen Resolutions. First I test manually, by adjusting the screen resolution on my computer and also I use the tools below.

Screen Size Testing

I test the Website on different screen sizes, for example (16/17/22 inch monitors – diagonally measured). Also I use the tools below:

Font Size Testing

I test to make sure that the Website renders properly at different font/text sizes (small, medium and large). This is important especially for the large text size for accessibility considerations for people with poor vision.

JavaScript Testing

When JavaScript language is part of the code, I test the Website with the option of JavaScript being disabled. In order to make sure that the appropriate message is displayed. This is important, since you want to make sure that the Website still renders and functions properly when JavaScript is disabled by the user. For example, if you have a JavaScript based, pull-down menu, you need to inform your users about enabling JavaScript. Otherwise the pull-down menu will not work.

Flash Testing

When Flash movie is part of the code, I test the Website with the option of Flash being disabled. In order to make sure that the appropriate message is displayed.

Spell Check

I proofread and spell check the website´s content multiple times, to make sure that the content is meaningful, to the point, and error free.

Text Mode Testing

I check how the Website renders as text only, without images, videos or Flash content. This is how search engine robots (e.g. Googlebot) see the website

Accessibility Testing

Web accessibility means that people with disabilities can use, navigate, and interact with the Web, and that they can contribute to the Web. Accessibility has important, beneficial implications for Search Engine Optimization; many of the same features which make a website truly accessible also increase the visibility of a website to search engine´s robots, improving their search ranking in popular search engines.

Link Testing

Broken links can quickly drive visitors away. How many times have you been annoyed when you found a broken link? I manually test to make sure that all external and internal links of the Website are working. In addition, I use the tool below:

Multiple Browsers Testing

I extensively test the Website to display and function properly on multiple browsers, and multiple versions of the same browser: Internet Explorer versions 6, 7, and 8, Mozilla Firefox 3, Safari 4 and 5, Opera 10, and Google Chrome 4 and 5. Also I use online tools like BrowserShots, and for Internet Explorer I use this IETester tool.

Print Testing

If the Website contains a specific CSS for the print medium, then I manually test the print function for every page of the Website and for all browsers mentioned above, in order to make sure that the Website renders properly for print.

Performance Testing

I use Yahoo YSlow performance analyzer tool. YSlow analyzes Web pages and suggests ways to improve their performance based on a specified set of rules. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the Web page performance, summarizes the Web page components, displays statistics about the page, and provides tools for performance analysis.

Also I make sure that large sized images are optimized for the Web using Photoshop and/or using image optimizer tools.

Mobile Tesing

This testing is only required if the customer requests a mobile-friendly website. It is always best to test the website using some physical mobile devices. Additionally, I use several tools to test the website for the handheld medium.

Minification

Minification is the process of removing unnecessary characters from the code to reduce its size, thus improving load time. When CSS/JavaScript code is minified, all comments are usually removed, as well as unneeded “white space” characters like space, new line, and tab. This improves load time performance because the size of the file downloaded is often significantly reduced. Two popular tools for minifying CSS code are JSMin and YUI Compressor.
I use Minification process on as needed basis.

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

3 Responses to “Testing and Validating a Website”

  1. Joe Willis says:

    Wow this information is great! How did you learn so much about it!
    I will be subscribing to your rss/ Thanks.

  2. Mark says:

    Wow! This is a great reference. You must be very meticulous with
    your work. Thanks for sharing.
    Mark

  3. Nice information, I really appreciate the way you presented it.Thanks for sharing..