Web Standards :: Eight Great Helping Resources for Web Developers

In my last post, i shared that why web standards are important for a website. Here i would like to share some of the Free online resources available for Web developers to make their job easier to follow Web Standards while designing or re-designing websites.

1. Clean CSS

Great tool to clean, optimize and compress your CSS code. Just paste your CSS code into the box or type web address to get CSS from URL, and in a moment you will be presented with a clean and optimized version of your CSS. New CSS is optimized and well-formed.

But this is just first step. This tool is not a validator, which can point out errors. So next step is to validate your CSS.


2. Wc3 Validators

WC3 offers a number of most important Website Validators. If you pass these Validations, you can be 100% sure that your website is 100% standard based.

1. Markup Validator: This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc
2. CSS Validator: After you check your HTML using WC3 Markup Validator, use this tool to check embeded CSS.
3. Mobile OK Test: More and more people are converting to use mobile phones and PDAs to use internet. So it is preety important to be Mobile OK. This checker performs various tests on a Web Page to determine its level of mobile-friendliness. Another great site for the same purpose is Ready.Mobi.
4. Broken Links Checker: As name suggests, it browse through your website and give you a list of broken links. Less or no broken links means more happy visitors.
5. Feed Validation Service: If your website offers Atom or RSS feeds, this is great to check syntax validaty.

3. Log Validator:

A free, simple and step-by-step tool to improve dramatically the quality of your website. Find the most popular invalid documents, broken links, etc., and prioritize the work to get them fixed. You can make all WC3 Validations like Markup, CSS, Broken Link Validation with the ease of your desktop.

4. Site Valet:

Pretty simple and graphically rich HTML Validation Rule. Specially useful for armatures.

5. Web Accessibility Test: More comprehensive than Site Valet, it also show accessibility errors visually. Also available for download.

6. FireFox:

You don’t believe that? Firefox is really great for Web Developers. There are some awesome extensions that make Firefox a must-have for Web Developers. There are many others which you can explore on Firefox Addon site.

1. Firebug: integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
2. YSlow: analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you:
   1. Performance report card
   2. HTTP/HTML summary
   3. List of components in the page
   4. Tools including JSLint (Java Script Verifier)
3. Wave: simple and nice visual tool that quickly analyse your page and show some type of errors. Its is free accessibility evaluation tool to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility information within your page.
4. Web Developer: another great add-on for Firefox essential for web developers and has a huge array of tools for making web development easier. We use it the most for on-the-fly validation of CSS and HTML as well as inspecting HTML and CSS. There’s many more features though; tools for working with cookies, forms and images, validating links, outlining elements, a quick browser resizer for testing different resolutions without actually changing your screen resolution and much more!
5. Edit CSS: Pretty simply and handy tool. Simply open the CSS of any loaded page in the side Bar and you can easily modify.
6. HTML Validator: It adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

7. Cross Browser Compatibility Check:

Great Tool. All of us face Cross Browser Compatibility Problems with our websites. Browser shots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screen shots and upload them to the central server. Is not great?

8. Test Everything

Test Everything as name suggests. There are more than hundred tests you can do at one place. It actually aggregates many many resources at one site. It includes different type of validators, SEO Tools, Social services, Web Proxies, Network Tools, Text Tools, Image Tools and many many others.