My previous article was to cover the elements of web standards and usability. This one lists free and open source tools available for helping in compliance with these standards.
Wev Developer Extension
Web Developer Extension is an extension for open source Mozilla Firefox and Flock browsers. It provides two categories of utilities - one which will dissect the HTML page that has been visited - analyse each and every component, and a set of tools to test compliance to standards. Because of this combination, it provides critical value in the convenient form of a toolbar.
Disable
It allows to disable individual components like Java, JavaScript, page colors, cache. This can used to test behavior of your web site when Java, Javascript are not supported by the browser or the environment. It also lets you disable, add or view cookies.
CSS
Once a web site is visited, it lets you view and modify the CSS locally. This can enable you to view details of a style sheet (sometimes to identify tricks used) or build up on an existing style sheet.
The biggest advantage of this feature is that you can immediately see the effect of your changes in the CSS.
Information
The Information tab displays details like CSS class IDs and classes, size of blocks, response headers, tab index, link paths and JavaScript. This is typically useful to analyze an existing web site.
Images
You can display image size, paths, file size, hide background images, hide all images and find broken images. It also lets you mark images without alt or title attributes. Images should always have alt attribute - one for accessibility and secondly for better Search Engine Optimisation (SEO)
Outline
This is an impressive feature that explicitly outlines block level elements (div, p, ul, …), deprecated elements, frames, table and table cells. Just like with imgages it can also mark links without alt attributes. This can be used in investigating problems with nested block level elements or making sure that your web page does not contain any deprecated elements. It goes a step ahead to let you define a custom elemen.
More
In addition to this it lets you experiment with forms, display tab index, resize the viewport to a resolution using Resize tab and one of the most useful features - tools for testing compliance with standards. It provides you:
In addition, it lets you assess the accessibility of your web site for Section 508 and Web Accessibility Initiative (WAI)
Optimising your web page is always a challenge. The number of images, the load time, the total number of HTTP requests, size and even recommendations. You can see this in the View Speed Report.
Web Colors
Selecting colors for a web site involves not only aesthetics but also that it must be displayed by all browsers, and the color combinations should be readable by users.
Color Contrast Analyzer
Color Contrast Analyzer is a tool for checking foreground and background color combinations to determine if they provide good color visibility. Determining “color visibility” is based on algorithms suggested by World Wide Web Consortium(W3C)
It uses color difference and color brightness to analyze combination of colours. For example, pure white (#FFFFFF) on pure black (#000000) is not advisable even for normal visibility. You can download and install this application on your desktop and use it offline. It assessment for color combinations are for four different stages of color blindness - Normal, Protanopia, Deuteranopia and Tritanopia. Depending on the profile of visitors of your website, you can consider the mimimal compliance.
Color Converter
Color Converter converts colors between different color systems (RGB, CMYK and HSV) and also provides a web safe equivalent for the color.
Somre more resources are available:
- HTML Tidy
- Accessibility and Web Developer Tools
- Developer Tools for Mozilla Firefox
- Microsoft Internet Explorer Developer Toolbar
- Yahoo! UI Design Patterns and UI Library
There might be many more such tools available that aid web design and development. I will try to keep this list updated whenever I come across them.
Copyright Abhijit Nadgouda
February 20th, 2006 at 12:00 am
Tools For Compliance With Web Standards
Good post on web standards compliance….
February 21st, 2006 at 12:15 am
http://www.vischeck.com/vischeck/vischeckURL.php
A tool (under development as yet) to see how the website looks to people having color blindness
February 23rd, 2006 at 6:02 pm
[...] This not only ensures reduced total size of the final image files, but this is also independent of third party plugins or client side scripting. The only restriction is that the the DOCTYPE must be one of the Valid DOCTYPE list from W3C. Stu Nicholls has provided code in the article as well as you can view at the CSS and XHTML code here. You can use the Web Development Extension for Firefox to view CSS and experiment with it locally. is another site where flick animation has been demonstrated. I have tested it in Mozilla Firefox and Microsoft Internet Explorer. [...]
October 23rd, 2007 at 8:08 pm
[...] There are other tools out there which offer optimization like CSS Optimiser. However CSS Tweak stands out because of the finer control it offers to the users. As noted in the article, the CSS is only optimized, not validated. For CSS validation you can use W3C tool online or through Web Developer extension for Mozilla firefox. [...]
October 23rd, 2007 at 9:45 pm
[...] validation was done using the Web Developer Extension for Mozilla Firefox. Optionally you can directly use the W3C Markup Validation Service to validate your web [...]