How To Avoid Mistakes in Web Design

Freelance Technical Writer

In the world of web development, making mistakes in code and links is a frequent occurrence. There is nothing wrong with making errors but they must be found and corrected. They should also not interfere with the functionality of a website or cause inconvenience to your visitors. It is advisable to use a few tools that will ensure you have not overlooked any of these problems. Manually searching and checking them all is very time consuming and completely ineffective. A book should never be published without thorough grammar, spelling and language editing. Likewise, a website must never be published without being properly validated.

Technical Writing

The following tools are free and very effective. They will scan your page and give a detailed summary of any errors found:

    • CSS Validator

The same organization that created the CSS language and set the global CSS standard has also developed the W3C CSS Validator. This is the most favoured and reliable CSS Validator used. Any lexical or syntactic errors will be found and explained after scanning your CSS source. What really makes this tool so popular is that it is a free open-sourced, web-based tool that works exceptionally well.

By default, the W3C CSS Validator will check compliance with the CSS 2 standard. Most browsers target the CSS 2.1 specifications. There are some features of CSS 2.1 that are very well supported, which do not exist in CSS 2. Therefore, the W3C CSS Validator might show errors on those.

Even though there may be no errors, the validator will often give you several warnings on the results page. These are simply tips of things you need to be aware of and do not mean that your page is either invalid or badly written. Most of these alerts are due to the fact that users customize their default style sheets. For example: if only a light background colour is specified by your page and the user opts instead to have a default black background with white text, then the page may not be readable for those users. The validator might advise you to specify background and text colours in order to prevent potential problems such as these.

    • Link Checker

Developed by the same company that standardized the international HTML and HTTP languages, the W3C Link Checker is also a great tool to have in your arsenal. It will report any broken links it finds after scanning your website, as well as any other relevant information. It is also a free open-sourced, web-based tool with the added benefit of being able to specify any number of pages to be checked.

    • HTML Validator

Officially the most widely used and reliable, the W3C HTML Validator was created by the same company that popularized the HTML language. It is designed to scan HTML and XHTML sources and give advice on any structural, syntactic or lexical errors it finds. An additional bonus is that it is another free open-sourced, web-based tool.

A ‘broken’ website is the fastest way to damage reputability, deter visitors and lose revenue.

Determining the SGML profile (HTML versus XML) based on the doc-type of the page makes the W3C HTML Validator somewhat unusual. This is because all popular browsers use the content-type HTTP address to find the profile, and the doc-type is only used for doc-type switching and element/entity sets. In other words, if you have an XHTML doc-type but are using a typical Content-type: text/html HTTP address, then the W3C HTML Validator will see it as XML while the majority of browsers will consider it normal HTML. This is why the page may be seen as invalid to browsers while the W3C HTML Validator insists it is valid. In general, there are numerous factors that you should be aware of when using XHTML.

Developed in 1999 to implement HTML into a XML format, many people using XHTML assume it is the latest version of HTML, which is not the case. Although there are many benefits with XHTML, there is much more to it than is often realized. Even if it validates on your website, it is probable that you are still using it incorrectly. Most people do not notice that the state of XHTML on the modern web is far more unreliable than HTML. This is because all the major browsers are using standard HTML parsers that hide the problems. Authors of the few sites that do trigger the XML parsers tend to overlook other very important issues.

Bearing in mind that these tools are specific to CSS, HTML and link errors, it is always a good idea to validate other structures within your website with the relevant tools required for them. Leave no stone unturned when checking your entire website for validation and test it among a handful of people before going live. There is nothing more frustrating to yourself, or a visitor, than a page that does not work properly.