===========================================================================
Presentation vs. Content - Keeping "How" separate from "What" in Web design 
===========================================================================
-Ian! D. Allen - idallen@idallen.ca - www.idallen.com

Keep the "How" Separate from "What"
-----------------------------------

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:

    http://www.anybrowser.org/campaign/ 

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 (www.w3c.org) 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.

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.

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

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.

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

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

WCAG and Page Layout
--------------------

WCAG has reformed the way modern web design uses some widely-used features
of HTML.  Here are a few examples:

1.  HTML tables are to be avoided for document layout.  Tables have been
    widely abused to lay out the format of a web page, creating headers,
    columns and side-bars.  HTML tables were intended to represent tabular
    data, not do document layout.  Use CSS to lay out your document and
    reserve the <table> tag for actual tabular data:

    http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free
    http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
    http://stopdesign.com/archive/2004/07/27/throwing-tables.html

    Of course CSS can make tables look good, too:

    http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/

2.  Avoid the use of HTML "frames".  "many people using assistive technology
    have trouble with frames . An advisory technique about using noframes
    is available in Success Criterion 4.2.1."

3.  Don't use "spacer images" to lay out the document.  Use CSS to position
    the content elements.

    http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/C18

-- 
| 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/