Web Standards

Best Practice in the WorkplaceFoundation DegreePresentation created by Phil JamesLast Updated: 24/01/05

Web Standards - Introduction

Groups and standards bodies have established technologies for creating and interpreting web-based content. These technologies, which we call web standards are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web.

Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market.

Source: www.webstandards.org/about/

Aspects To Be Covered Here

Document StandardsBrowser ComplianceUser Interface DesignAccessibility

Aspect

Document Standards

Document Standards – W3C

Internet “invented” in 1989 by Tim Berners-Lee. World Wide Web Consortium (W3C) – created in

1994. “The World Wide Web Consortium (W3C) develops

interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.” – Source: www.w3.org (W3C homepage)

Document Standards - Examples

Specifications developed by the W3C include: Structure:

HTML (Hypertext Mark-up Language) XML (Extensible Mark-up Language) XHTML (Extensible Hypertext Mark-up Language)

Presentation: CSS (Cascading Style Sheets)

Behaviour: ECMA Script standard – e.g JScript and JavaScript DOM (Document Object Model)

Document Standards - HTML

HTML is the lingua franca for publishing hypertext on the World Wide Web. It…can be created and processed by a wide range of tools, from simple plain text editors…to sophisticated WYSIWYG authoring tools. HTML uses tags such as <h1> and </h1> to structure text into headings, paragraphs, lists, hypertext links etc.

Source: W3C Homepage: www.w3.org/MarkUp/ www.philjameseducation.com/html/htmlmain.htm

Document Standards – XML (1) Originally designed to meet the challenges of large-

scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web.

Source: W3C Homepage: www.w3.org/XML/

Document Standards – XML (2)

Some benefits: Saves businesses money by enabling the use of

inexpensive off-the-shelf tools to process data. Encourages industries to define platform-

independent protocols for the exchange of data, including electronic commerce.

Allows people to display information the way they want it, under style sheet control.

Enables long-term reuse of data, with no lock-in to proprietary tools or undocumented formats.

Source: W3C

Document Standards - XHTML Designed to create standards that provide richer Web

pages on an ever increasing range of browser platforms including cell phones, televisions, cars, wallet sized wireless communicators, kiosks, desktops.

XHTML 1.0 reformulates HTML as an XML application. This makes it easier to process and easier to maintain. XHTML 1.0 borrows elements and attributes from HTML 4, and can be interpreted by existing browsers.

You can port HTML documents into XHTML using an Open Source HTML Tidy utility or current HTML editors such as DreamWeaver or FrontPage.

Source: W3C Homepage: www.w3.org/MarkUp/

Document Standards - CSS CSS is a presentation language. It provides a simple

mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

Source: W3C Homepage:www.w3.org/Style/CSS/

Why use CSS with HTML ?– It standardises the look and to some extent the behaviour of your website.

Document Standards – ECMA ECMAScript is the only standard scripting language on

the Web; it is based on the ECMA-262 specification, which outlines an object-oriented programming language for performing computations and manipulating objects within a browser.

Both JavaScript (Netscape) and JScript (Microsoft IE) implement the ECMAScript standard and then extend it.

Source: http://c2.com/cgi/wiki?EcmaScript Homepage:

www.ecma-international.org/publications/standards/Ecma-262.htm

Document Standards - DOM

“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.”

"Dynamic HTML" is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated via the object model.

Source: W3C Homepage: www.w3.org/DOM/

Aspect

Browser Compliance

Browser Compliance

Standard Compliant browsers that understand and support:HTMLXHTMLCSSECMA ScriptDOM

On various platforms including PC, Palm, PDA, phone, etc.

Browser Compliance - Browsers

Internet Explorer (Windows)Konqueror (Linux)Mozilla Firefox (Multi OS)Netscape (Multi OS)Opera (Multi OS)Safari (Apple OS)

Browser Compliance – Issues

Code forking – the practice of creating multiple versions of incompatible code to cope with the needs of browsers that do not support standard ECMA Script and the DOM.

Backwards compatibility refers to the practice of using non-standard, deprecated markup and code to ensure that every visitor has the same experience regardless of browser version. Not realistic – and old browsers are not capable of the same

visual experience as the more modern ones.

Source: Designing With Web Standards

Browser Compliance – Prioritising

Dedicating development to support only one browser at the expense of other popular ones (e.g. Supporting Internet Explorer but ignoring Safari and Firefox).

Results in potential isolation of a large customer base leading to a huge loss of revenue.

Source: Designing With Web Standards

Aspect

User Interface Design

UI Design - Introduction

Most web sites are designed to encourage browsing, searching, and exploration. Most importantly, they are designed to attract visitors and keep them interested.

Source: http://digital-web.com/articles/user_interface_ design_for_web_applications/

UI Design - Elements

Some important elements to consider when designing a web UI: Colour Fonts Help Language Layout Navigation Response Time Size

UI Design - Useful Websites

www.asktog.com/basics/firstPrinciples.html - First principles of UI design.

www.isii.com/ui_design.html#User%20Interface%20Design%20Style%20Guides – User Interface Design links page.

www.uie.com/articles/ – UI engineering website (articles archive).

www.sylvantech.com/~talin/projects/ui_design.html - A summary of UI design.

www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572 – IBM’s web design guidelines.

Aspect

Accessibility

Accessibility – Types of Web Disability

Hearing – deaf, hard of hearing, hearing impaired. For deaf people our native tongue will be at least their second language. Audio cannot be heard or is indistinct.

Sight – blind, visually impaired, low vision. Browser cannot be seen, is indistinct or is not seen correctly (e.g. colour blindness).

Movement – mobility impaired (chiefly hands or arms). Affects the use of a computer or device.

Cognitive – learning disabled. Dyslexia (confusion in reading). Also issues of awareness, perception, reasoning and judgement.

Source: Building Accessible Websites

Accessibility – Scenarios

Examples of scenarios and accessibility solutions:

Online shopper with color blindness. Reporter with repetitive stress injury. Online student who is deaf. Accountant with blindness. Classroom student with dyslexia. Retiree with aging-related conditions, managing

personal finances. Supermarket assistant with cognitive disability. Teenager with deaf-blindness.Source: www.w3.org/WAI/EO/Drafts/PWD-Use-Web/

Accessibility – WAI

The Web Accessibility Initiative (WAI) develops guidelines for accessibility of Web sites, browsers, and authoring tools, in order to make it easier for people with disabilities to use the Web. Given the Web's increasingly important role in society, access to the Web is vital for people with disabilities. Many of the accessibility solutions described in WAI materials also benefit Web users who do not have disabilities.

Source: www.w3.org/WAI/EO/Drafts/PWD-Use-Web/

Accessibility – Guidelines

Web Content Accessibility Guidelines 1.0 Source:www.w3.org/TR/WCAG10/ Authoring Tool Accessibility Guidelines 1.0 Source: www.w3.org/TR/ATAG10/ User Agent Accessibility Guidelines 1.0 Source: www.w3.org/TR/UAAG10/

Accessibility – Legislation

The Disability Discrimination Act 1995 (Part III Access to Goods and Services).

Source: www.legislation.hmso.gov.uk/acts/acts1995/1995050.htm

Special Educational Needs and Disability Act 2001.

Source:www.hmso.gov.uk/acts/acts2001/20010010.htm

The Disability Discrimination Act 1995 (Part IV Education).

Source:www.legislation.hmso.gov.uk/acts/acts1995/1995050.htm

Accessibility – Useful Websites

www.abilitynet.co.uk/ www.drc-gb.org/ - Disability Rights Commission. www.euroaccessibility.org - EuroAccessibility

Consortium.

Accessibility – Business Benefits

Important: In some populations the proportion of people with disabilities can be up to 20 percent.

Improve usability for non-disabled and disabled visitors.

Reduce site maintenance. Site search engine improvements. Demonstrate social responsibility. Reduce legal liability.

Source: www.w3.org/WAI/bcase/benefits.html

Further Reading - Books

Clark, J. (2002), ‘Building Accessible Websites’, New Riders Publishing.

Zeldman, J. (2003), ‘Designing with Web Standards’, New Riders Publishing.

Further Reading – Web Sites

http://cap.umn.edu/ait/Web/Comparison.html - Web accessibility standards comparison.

www.philjameseducation.com – my website. www.useit.com/ - Usability website. www.w3.org – reference web site for document

standards. www.w3.org/WAI/gettingstarted/ - making a website

accessible. www.w3.org/WAI/Policy/#UK – UK policies relating to

web accessibility (introduction and links). www.webstandards.org/about/ - Web standards

project group.