The 3 Click Rule



Unless you are new to web design, you will likely have heard of the Three Click Rule. This rule is recommended based on the way people use web sites, and it helps web designers create sites with intuitive, logical hierarchical structures. It addresses the important fact that important information on your web site should never be more than 3 clicks away from the index/entrance page. If we consider this web design challenge as one of maintaining the visitors interest, the three click web design rule makes sense. If users can't find what they're looking for within three clicks, they are likely to get frustrated and leave the site. More recent studies by useability experts have taken this further in stating that often when the three click rule is exceeded, the visitor will not manage to complete the task successfully. By sticking to this rule, the web designer can ensure that he/she is always thinking of the website navigation when deciding where is best to place content.

Use consistant web site navigation & layout

A key element of your accessible website is a clean, consistant navigation system coupled with a recognised, usable layout. Don't try and re-invent the wheel here. A clean, consistant navigation system allows users to instantly find important information and allows them to quickly find comfort in their surrondings. A traditional layout (2 or 3 columns, with a header and a footer) is excellent for accessible website design, especially for information sites. Remember to use CSS for all elements of style, including layout and navigation.

Keep download times to a minimum

The average web user will wait no longer than 8 seconds for a page to download before moving on. Bandwidth or the capacity to send and receive data is an important consideration when designing a web site or electronic document for distribution over the Internet. It is important that the link to the Internet (from the computer serving the pages to customers) has sufficient capacity to be able to handle the expected load. Otherwise, the response to users will be unsatisfactorily slow.

Most people today connect to the Internet using a broadband connection, however, many still connect over a phone line, typically using a modem with a speed of 28.8 to 56 kilobits per second (kbit/s). Hence it's usually best to work to the lowest common denominator, and presume that your user is connected through a 28.8 kbit/s modem.

Optimise those images!! - the most important thing you can do to decrease download times. Optimse just means save for web' in Photoshop, for example. Keep JPGs for photographs and Gifs for images with large blocks of flat colour.

Call up background images through CSS. It's possible to present images as part of the background, called up through CSS. - Browsers download background images after everything else. By using this technique, your text will load instantaneously and your site users can freely roam about the page while your 50kb fancy image downloads.

Minimise white space, line returns and comment tags. Every single letter or space in your HTML code takes up one byte. It doesn't sound like much but it all adds up. By working through your page source and eliminating unnecessary white space and comments, you can shave off up to, or even over (if your HTML is really inefficient) 10% of its file size.

Remove unnecessary META tags and META content - The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse they've lost a lot of importance in recent times. When using these META tags try to keep the content for each under 200 characters - anything more increases the size of your pages. Lengthy META tags are not good for search engines anyway because they dilute your keywords.

Use W3C technologies and guidelines

Web sites should be constructed using W3C technologies and guidelines. When this is not possible, or doing so results in material that does not transform gracefully, an alternative accessible version of the content should be provided. Many non-W3C formats (e.g., PDF, Shockwave, etc.) require viewing with either plug-ins or stand-alone applications. Often, these formats cannot be viewed or navigated with standard Web access or screen reading tools.

Non-W3C formats should be converted to HTML/XHTML although this does not always create an accessible document. Each page should be validated for accessibility and usability after the conversion process. Avoiding non-W3C and non-standard features (proprietary elements, attributes, properties, and extensions) will tend to make pages more accessible to more people using a wider variety of hardware and software. When proprietary or inaccessible technologies must be used, equivalent accessible pages must be provided.

Even when W3C technologies are used, they must be used in accordance with accessibility guidelines. If a page does not easily convert, developers should either revise the page until its original content converts properly or provide an HTML or plain text version

Design for Platform Independence

Don't assume everyone has got the same software has you While most web browsers can easily read HTML and display it to the user, several private companies have developed proprietary file formats for transmitting and displaying special content, such as multimedia or very precisely defined documents. Because these file formats are proprietary, they cannot ordinarily be displayed by web browsers.

To make it possible for these files to be viewed by web browsers, add-on programs or 'plug-ins' can be downloaded and installed on the user's computer that will make it possible for their web browsers to display or play the content of the files. Hence, it is a responsibility on the web page author to know that a compliant application exists, before requiring a plug-in. As assistive technologies move forward, it is anticipated that the occasions when the use of scripts and plug-ins are not supported will diminish significantly. The best way to support this is to create a link for the user to obtain the appropriate plug-in for the platform you are using.

Excercise caution when using Macromedia Flash

Flash is a propriety plug in created by Macromedia to infuse (albeit) fantastically rich media for your websites. The W3C advises you avoid the use of such proprietary technology to construct an entire site. Instead, build your site with CSS and HTML ensuring everyone, including search engine robots, can sample your website content. Then, if required, you can embed media files such as Flash in the HTML of your website.

Avoid using frames to design your website

If possible, avoid using frames. Some people have difficulty navigating within frames, either because the frames are confusing or because the software they are using simply cannot read frames.

When using frames, always offer meaningful NOFRAMES content for those people who cannot read framed information. If you must use Frames, ensure that each frame has a sensible TITLE (in addition to the NAME) which gives a clear indication of the content to be found in that frame.

Validate your HTML/XHTML

HTML is the 'language' that designers use to build websites. Valid HTML is code that validates to W3C guidelines, the organisation that develops good practices and standards for HTML.

Testing how your page looks in Internet Explorer is not sufficient. You can test for validity using the W3C Validator.

Use CSS to separate content from design

CSS, or Cascading Style Sheets, is a 'language' that website designers use to develop the style, look and feel of layout, text and colours on a website page. Used properly, CSS can be used to Separate design from content, making websites easier to use and ultimately, maintain. It can also help with download times as the CSS is downloaded only once and held in browser cache.

HTML tags were originally designed to define the content of a document. They were supposed to say, this is a header, this is a less important header, this is a paragraph and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Netscape and Internet Explorer continued to add new HTML tags and attributes to the original HTML specification. It soon became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. All major browsers support Cascading Style Sheets, although some, handle them slightly differently, which an be a pain to the website designer! CSS allows website developers to control the style and layout of multiple web pages all at once.

As a Web developer you can define a style for each HTML element and apply it to as many website pages as you want. To make a site-wide change, simply change the style, and all elements in the website are updated automatically. Multiple styles will cascade into one style. Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.