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:
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:
- 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.
- Properly coded HTML will render better, render on more browsers, and render faster than HTML with errors.
- Browsers are becoming more standards compliant, and it is becoming increasingly necessary and important to write valid and standards compliant HTML.
- 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.
- Write it right the first time and write it once. Write it wrong, and you may be writing it again later.
- And If you like more.
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.
Below are the tools I use to write and Validate XML pages.
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 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.
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.
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
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.
- Grayscale Accessibility Tool
- Accessibility Checker
- Accessibility Checker2
- Accessibility Evaluation Tool
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.
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.
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.
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.
- Adobe Device Central: It uses skins for dozens of mobile devices to display the content in various ways.
- Opera Mini Simulator
- Google Mobilizer
I use Minification process on as needed basis.