1.1 Keeping “How” separate from “What” in Web designIndex

The original design for the WWW was to use HTML to mark up documents with tags describing “what it is” for each content item inside a document, rather than “how it looks” - how the thing should be presented to the user. It was up to the web browser to decide “how” to display the page. The “content” of the page was separate from the “presentation” of the page.

Companies took the basic HTML tags added their own proprietary tags that only their browsers could understand. Instead of being a common file format understood by every browser, the Web started to become proprietary. This was not what Tim Berners-Lee intended for the web, and you can go here to read more about returning to his original design.

Many of the new tags dealt with “how” the web page should be rendered, mixing up presentation and content.

Recent web design is returning to the original intention to keep the web and HTML based on standards and to keep presentation and content separate. Many proprietary tags and tags that were added to affect “how it looks” have been deprecated and should not be used. (You will still find many web pages using deprecated tags!)

The presentation, or “how it looks”, aspect of a document is now called “Style” and good web design keeps the style information separate from the document content mark-up tags. Most HTML tags now accept a separate “style=” attribute, and styles can also be specified at the top of the web page or in a separate Cascading Style Sheet file.

The primary function of HTML tags in modern web design is to identify the different types of content in a document. With the content identified, the presentation and appearance of the document is set using separate style attributes.

1.2 Accessible Web Design - Web Content Accessibility Guidelines [WCAG]Index

Many people navigate the WWW with some form of physical or cognitive restrictions. To ensure that your web design is accessible to people with different levels of ability, review published standards for “Accessible Web Design”, also known as “Web Content Accessibility Guidelines [WCAG]”, e.g.:

• http://en.wikipedia.org/wiki/Web_accessibility
• http://www.w3.org/WAI/intro/wcag.php

The Canadian federal government requires all federal government pages to adhere to an early version of the WCAG in the “Common Look and Feel” standards:

• http://www.tbs-sct.gc.ca/clf2-nsi2/

The W3C validator at http://validator.w3.org/ enforces some of the early WCAG, e.g. that <img> tags must include an “alt=” attribute. They also have a new validator at http://validator.w3.org/unicorn/ that can validate style (CSS) as well as usability on mobile devices.

Many people have criticized the latest “WCAG 2” guidelines as too difficult to implement:

• http://www.alistapart.com/articles/tohellwithwcag2
• http://wcagsamurai.org/

1.3 How to know what is good styleIndex

Much writing on style and usability has been based on opinion rather than data and actual research. A notable exception is the research work here: http://www.useit.com/

See also: Best and Worst Practices for Web Design

Author: 
| Ian! D. Allen  -  idallen@idallen.ca  -  Ottawa, Ontario, Canada
| Home Page: http://idallen.com/   Contact Improv: http://contactimprov.ca/
| College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/
| Defend digital freedom:  http://eff.org/  and have fun:  http://fools.ca/