Web Standards Best Practice in the Workplace Foundation

Web Standards Best Practice in the Workplace Foundation Degree Presentation created by Phil James Last 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. l 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/ l

Aspects To Be Covered Here l Document Standards l Browser Compliance l User Interface Design l Accessibility

Aspect Document Standards

Document Standards – W 3 C Internet “invented” in 1989 by Tim Berners-Lee. l World Wide Web Consortium (W 3 C) – created in 1994. l “The World Wide Web Consortium (W 3 C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W 3 C is a forum for information, commerce, communication, and collective understanding. ” – Source: www. w 3. org (W 3 C homepage) l

Document Standards - Examples Specifications developed by the W 3 C include: l Structure: l HTML (Hypertext Mark-up Language) l XML (Extensible Mark-up Language) l XHTML (Extensible Hypertext Mark-up Language) l Presentation: l CSS (Cascading Style Sheets) l Behaviour: l ECMA Script standard – e. g JScript and Java. Script l DOM (Document Object Model) l

Document Standards - 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 <h 1> and </h 1> to structure text into headings, paragraphs, lists, hypertext links etc. Source: W 3 C l Homepage: www. w 3. org/Mark. Up/ l www. philjameseducation. com/htmlmain. htm l

Document Standards – XML (1) Originally designed to meet the challenges of largescale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web. Source: W 3 C l Homepage: www. w 3. org/XML/ l

Document Standards – XML (2) Some benefits: l Saves businesses money by enabling the use of inexpensive off-the-shelf tools to process data. l Encourages industries to define platformindependent protocols for the exchange of data, including electronic commerce. l Allows people to display information the way they want it, under style sheet control. l Enables long-term reuse of data, with no lock-in to proprietary tools or undocumented formats. Source: W 3 C l

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. l 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. l You can port HTML documents into XHTML using an Open Source HTML Tidy utility or current HTML editors such as Dream. Weaver or Front. Page. Source: W 3 C l Homepage: www. w 3. org/Mark. Up/ l

Document Standards - CSS is a presentation language. It provides a simple mechanism for adding style (e. g. fonts, colors, spacing) to Web documents. Source: W 3 C l Homepage: www. w 3. org/Style/CSS/ l l Why use CSS with HTML ? – It standardises the look and to some extent the behaviour of your website.

Document Standards – 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. l Both Java. Script (Netscape) and JScript (Microsoft IE) implement the ECMAScript standard and then extend it. Source: http: //c 2. com/cgi/wiki? Ecma. Script l Homepage: www. ecma-international. org/publications/ standards/Ecma-262. htm l

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. ” l "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: W 3 C l Homepage: www. w 3. org/DOM/ l

Aspect Browser Compliance

Browser Compliance l Standard Compliant browsers that understand support: HTML l XHTML l CSS l ECMA Script l DOM l l On various platforms including PC, Palm, PDA, phone, etc.

Browser Compliance - Browsers l Internet Explorer (Windows) l Konqueror (Linux) l Mozilla Firefox (Multi OS) l Netscape (Multi OS) l Opera (Multi OS) l 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. l 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. l l 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). l Results in potential isolation of a large customer base leading to a huge loss of revenue. Source: Designing With Web Standards l

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

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

UI Design - Useful Websites l l l www. asktog. com/basics/first. Principles. html - First principles of UI design. www. isii. com/ui_design. html#User%20 Interface%20 D esign%20 Style%20 Guides – 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. l Sight – blind, visually impaired, low vision. Browser cannot be seen, is indistinct or is not seen correctly (e. g. colour blindness). l Movement – mobility impaired (chiefly hands or arms). Affects the use of a computer or device. l Cognitive – learning disabled. Dyslexia (confusion in reading). Also issues of awareness, perception, reasoning and judgement. Source: Building Accessible Websites l

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. l Supermarket assistant with cognitive disability. l Teenager with deaf-blindness. Source: www. w 3. org/WAI/EO/Drafts/PWD-Use-Web/ l l l

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. w 3. org/WAI/EO/Drafts/PWD-Use-Web/ l

Accessibility – Guidelines Web Content Accessibility Guidelines 1. 0 Source: www. w 3. org/TR/WCAG 10/ l Authoring Tool Accessibility Guidelines 1. 0 Source: www. w 3. org/TR/ATAG 10/ l User Agent Accessibility Guidelines 1. 0 Source: www. w 3. org/TR/UAAG 10/ l

Accessibility – Legislation The Disability Discrimination Act 1995 (Part III Access to Goods and Services). Source: www. legislation. hmso. gov. uk/acts/ acts 1995/1995050. htm l Special Educational Needs and Disability Act 2001. Source: www. hmso. gov. uk/acts 2001/20010 010. htm l The Disability Discrimination Act 1995 (Part IV Education). Source: www. legislation. hmso. gov. uk/acts 1 995/1995050. htm l

Accessibility – Useful Websites www. abilitynet. co. uk/ l www. drc-gb. org/ - Disability Rights Commission. l www. euroaccessibility. org - Euro. Accessibility Consortium. l

Accessibility – Business Benefits l Important: In some populations the proportion of people with disabilities can be up to 20 percent. Improve usability for non-disabled and disabled visitors. l Reduce site maintenance. l Site search engine improvements. l Demonstrate social responsibility. l Reduce legal liability. Source: www. w 3. org/WAI/bcase/benefits. html l

Further Reading - Books Clark, J. (2002), ‘Building Accessible Websites’, New Riders Publishing. l Zeldman, J. (2003), ‘Designing with Web Standards’, New Riders Publishing. l

Further Reading – Web Sites l l l l http: //cap. umn. edu/ait/Web/Comparison. html - Web accessibility standards comparison. www. philjameseducation. com – my website. www. useit. com/ - Usability website. www. w 3. org – reference web site for document standards. www. w 3. org/WAI/gettingstarted/ - making a website accessible. www. w 3. org/WAI/Policy/#UK – UK policies relating to web accessibility (introduction and links). www. webstandards. org/about/ - Web standards project group.