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.
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.
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)
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.
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:
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.
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.
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