Article #2

Successful Web Design Part 2: The Code

By Leta Labuschagne, September 2006.

Once we have planned the website in detail, we can begin the task of coding it all. By now we have all heard of standards, but what are they, and which should we use?

HTML standards
The web browser needs to know according to which standard it must interpret the code on the page. This information is given in the DOCTYPE declaration at the top of the file. If there is no document type declaration, the browser will assume the lowest standard. There is an amazing number of websites out there with no document type declaration!

Here is an example of the syntax of the declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

For the lower standards the browsers will attempt to self-correct errors the webmaster may have made in the coding, for example when the closing tag of a tag pair was omitted. This may lead to very unpredictable results on screen.

The higher the standard, the stricter the rules are for the webmaster about what code is acceptable, but that means it is easier for the browsers to interpret the code. The benefit to the webmaster who uses a strict standard is that the different browsers are likely to interpret the code correctly, and the website will be displayed as intended in the different browsers (without having to resort to clever code or hacks to force different browsers to behave as you would like them to).

The standards are (listed from more relaxed to strict):
- HTML 4.01 Transitional
- HTML 4.01 Frameset - The use of framesets are being discontinued since the behaviour of frames on many browsers can be unpredictable. Search engines will find frames out of context of the frameset.
- HTML 4.01 Strict
- XHTML 1.0 Transitional
- XHTML 1.0 Strict - This Extensible HTML standard is very similar to HTML 4.01 Strict, but a definite improvement. It is currently well-supported by browsers.
CSS standards
One of the main features of the XHTML standard is that the formatting tags are discontinued. This means that all formatting must be coded in the Cascading Style Sheet (most features of the CSS2 standard are currently well supported by browsers).

The use of a CSS for formatting is a requirement for accessibility - page content is more accessible to screen readers if the formatting is separated from the content.

The main layout of the page is controlled by divisions (the <div> tag), the positioning and formatting attributes of which are specified in the CSS. Tables may be used to control layout, but once again, the formatting of such a table is specified in the CSS.

Other benefits of using a CSS are:
- It is easy to make a global change to the format of a recurring element, since all pages read formatting instructions from the same CSS file.
- Removing the formatting from the HTML file means the code is more efficient and the page will load faster.
- One website can have more than one CSS, e.g. one to display elements on screen and another to print information from the pages (perhaps omitting elements like menus, specifying a narrower page width to fit the printed page, etc.).
Accessibility guidelines
Follow the guidelines of the W3C's Web Accessibility Initiative (WAI). Read more about the WAI at www.w3.org/WAI. Here are the most important things we need to do to implement the WAI guidelines:
1. Use a scalable font (relative sizing) so that poor'sighted users can enlarge the type on screen. Read more about font sizes at www.w3.org/QA/Tips/font-size
2. Separate formatting from content - use a Cascading Style Sheet (CSS). The HTML file must not contain any formatting instructions.
3. Create pages that validate to formal standards for the web.
4. Skip to content - Place a small (1 px) image in the top left-hand corner of all pages after the first, with a bookmark link to the main content of the page. This helps disabled users making use of screen readers, to skip to the main content without having to listen to all the menu items again.
5. Provide alternative text descriptions for images (the alt attribute in the <img> tag). The alt text description must end with a full-stop - this helps determine correct voice inflection for screen readers.
6. Add the accesskey attribute to the recurring main elements on each page and define the access keys on the accessibility page. These keys act as short-cut keys for people who have problems with using pointing devices. For example, ALT-h will take the user to the home page if the accesskey="h" attribute is added to the home page link tag, for example:
  <a href="index.html" accesskey="h">Home Page</a>
7. Add the tabindex attribute to key elements on a page to define the direction of movement of the cursor on the page when the Tab key is pressed.
8. Add the lang attribute to the <html> tag to identify the language of the website for screen readers, like this:
  <html lang="en">
9. Organise the page so that it may still be read without the style sheet (it may not look good, but it must still make sense).
10. Use the clearest and simplest language appropriate to the website's content.
11. Avoid using image maps. If an image map is used, provide redundant text links for the active regions on the image map.
12. Use column and row headers for data tables. Add the summary attribute to the <table> tag.
13. Provide equivalent information and an alternative means of access if scripts are turned off or not supported.
14. Avoid using multimedia. If a movie our sound clip is included, provide an alternative text description of the multimedia content.
15. Ensure foreground and background colour combinations provide adequate contrast. If a background colour is specified, also specify the text colour for that element, and vice versa, for example:
  color: #3779b6; background-color: #fff;.
16. Use text rather than images to convey information. Text that is part of an image must be repeated in the text markup.
17. Use header elements to convey page structure and use them consistently.
18. Avoid causing content to blink.
19. Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
20. Clearly identify the target of each link (don't use "click here" as the link text).
21. Provide metadata to add semantic information to pages and sites for example the <title> and <description> tags in the header of the file.
22. Provide information about the general layout of the site (e.g. a site map, table of contents or an index).
23. Use navigation mechanisms in a consistent manner.
24. If a table is used for layout, do not include attributes for visual formatting in the table element tags (put those in the CSS).
25. Specify the expansion of each abbreviation or acronym in a page where it first occurs (use the <acronym> and <abbr> tags).
26. Include non-link, printable characters (surrounded by spaces) between adjacent links.
Create a template for content pages
Keeping all of this in mind, we are now ready to start coding the template page. It is a very handy time-saver to have such a template that can be copied for the creation of each new page during the development of the website.
Validations
HTML and CSS validations can be done via file upload to the validation tool before pages are published to the web server, but accessibility validations can only be done after the pages are published.
1. Every page of the website needs to be validated for conformance to the HTML/XHTML standard declared in the DOCTYPE - validator.w3.org.
2. The CSS file needs to be validated - jigsaw.w3.org/css-validator.
3. Every page of the website needs to be validated for accessibility - read more at www.w3.org/WAI/eval/conformance.html#evaltools.

About the author: Leta Labuschagne studied web design at the University of Otago, New Zealand, and is the Director of Goose Tree Web Design. This article may be freely copied and re-used as long as the author credit and this copyright statement remains intact.