% Author: Ian! D. Allen - idallen@idallen.ca - www.idallen.com % Date: Fall 2011 - September to December 2011 - Updated 2020-11-12 17:36 EST % Title: Presentation vs. Content - keeping “How” separate from “What” - [Course Home Page] - [Course Outline] - [All Weeks] - [Plain Text] Presentation vs. Content ======================== Keeping “How” separate from “What” in Web design ------------------------------------------------ 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. 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.: - - 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: - The W3C validator at enforces some of the early WCAG, e.g. that `` tags must include an “alt=” attribute. They also have a new validator at 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: - - How to know what is good style ------------------------------ 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: See also: [Best and Worst Practices for Web Design] -- | 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/ [Plain Text] - plain text version of this page in [Pandoc Markdown] format [Course Home Page]: .. [Course Outline]: course_outline.pdf [All Weeks]: indexcgi.cgi [Plain Text]: 550_web_what_vs_how.txt [here]: http://www.anybrowser.org/campaign/ [standards]: http://www.w3.org/ [Best and Worst Practices for Web Design]: 555_web_design.html [Pandoc Markdown]: http://johnmacfarlane.net/pandoc/