Web Site Best Practices

A short guide to building a site using best practices.

The following is a list of top site issues:

Valid HTML
Sitemap
Broken links
Image with Missing Width or Height
Image with Missing Alt Text
Correct Order of Headings

Valid HTML/XHTML

HTML is a mark-up language used to create websites, and is independent of platforms.

The display of invalid or incorrect documents depends on the software reading them (browser, robot, screenreader, etc; see above). However, the display will vary greatly depending on the software, and this can lead to errors, often without the knowledge of the website manager, since it is impossible to test the website against all updates of all the software.

Non validated HTML source text can cause high costs, especially if it causes the software to look for an error or if the functionality and therefore the user experience is impacted.

Further information:
The validity of the HTML source text can be checked with a ‘validator’.

Examples:
http://validator.w3.org/ (a page of a web site)
Web Site Auditor (all pages of a web site)

Acronyms:
HTML: HyperText Markup Language

Site Map

Sitemaps allow users to have a quick and complete overview of the website. Sitemaps also allow search sites and indexers such as Google to have a better understanding of which pages to search.

Its important to keep links within your site and to other sites up to date. Linking to to old content or to pages that no longer exist can be very frustrating to visitors to your site and can lead to a poor experience.

Image with Missing Width or Height

Missing height and width size of images is a typical error in HTML, which impacts the performance of the website. A precise definition of height and width allows a quicker download of the website, as the browser recognises the space needed for the image and can leave it empty.

Image with Missing Alt Text

Alternative text is displayed if an image cannot be downloaded or if the mouse pointer is moved over the image*. The alternative text is on one hand important for visually impaired visitors, using an audio tool to read the content of the website and the alternative text of images.
On the other hand, alternative text can also be recognised by search engines. Alternative text needs to be phrased in a meaningful manner, though it should not be a detailed description of the image.

Note: Internet Explorer shows alternative text as a tooltip if the mouse pointer is rested on the image. This is not prohibited but it can annoy page authors. It does also indicate that the alt-attribute refers to this tooltip, which is wrong. Should you want to add a descriptive tooltip to your images, make use of the attribute “title”.

Correct Order of Headings

The titles need to be ordered in a systematic and logical way, i.e. there can be no jump going from h1 to h6. In addition, the first title must be h1.