Web Technology

The World Wide Web

For Networked Information Systems

These are notes on website design for The Australian National University course "Networked Information Systems" (COMP2410 / COMP6340) in 2009. This section of the course is prepared and presented by Tom Worthington FACS HLM.

Note: In 2009 the ANU introduced the Moodle Learning Management System. This copy of the notes has been extracted to accompany the set started when this course section was entitled "Website Design", in the course "Internet, Intranet, and Document Systems" (COMP3400/COMP6340): 2001, 2002, 2003, 2004, 2005, 2006/2007, 2008.

Web Standards

The World Wide Web Consortium (W3C) issues standards for web technology, including HTML and Cascading Style Sheets, called "Recommendations". The Internet Engineering Task Force (IETF) issues Internet technology standards, including for FTP, TCP/IP, HTTP and email, called Request for Comments (RFC). Ecma International issues the standard ECMAScript for JavaScript.

Other national and international bodies issue standards also used on the web. Generally there is no legal compulsion for software or web designers to use standards and no restriction on other bodies, companies or individuals developing their own standards or non-standard web technology. Some proprietary technologies, such as PDF, Apple QuickTime and Adobe Flash have become de facto standards, or in some cases De jure standards.

Accessibility and Fast Access on Mobile Devices of the Future

Assistive technology, such as screen readers may be used by the visually impaired. Well-structured, logically marked up documents meeting web standards are more likely to work on a range of devices and be accessible to the disabled.

Web content can be viewed on mobile phones, as well as desktop computers. Different browser programs support different ranges of web features from different versions of web standards. Web sites using a subset of current web features are more likely to be usable in the future. Using style sheets for presentation can result in much smaller files that download quickly and adapt for mobile devices.

Web Standards of Today

Web standards can be thought of at three layers. With the designer addressing each, separately in turn:

1. Structural: mark-up using a version of HTML: HTML 4.01 is commonly used, XHTML 1.0 has a stricter syntax and XHTML Basic 1.1 is a subset for mobile devices.
2. Presentation: with Cascading Style Sheets (CSS): CSS Level 1 controls the display of text, margins, borders and is supported by current browsers. CSS Level 2.1 adds more positioning of page elements but only partly supported. CSS 3 adds support for paged media, to provide PDF type formatting, but still in development.
3. Behavioural: scripting with JavaScript and update of document content dynamically using the Document Object Model (DOM), to add interactivity for Web 2.0.

Separating Structure from Presentation

Separate Presentation from Structure:

1. Choose elements based on the structure of the information.
2. Use elements from newer versions of HTML.
3. Use CSS for layout.

HTML documents should begin with a DOCTYPE declaration to tell the browser which version is used. The HTML should be validated using a tool, such as the W3C Validator. Here is a DOCTYPE declaration for XHTML Basic:

Designing for a Variety of Browsers and Audiences

Microsoft Internet Explorer versions 6 and 7 are the most common browsers. They support CSS 1, some CSS 2, some CSS 3, ECMAScript, and DOM. Mozilla Firefox and Opera provide better standards support but are not as widely used. Therefore general use web pages need to be written to work with Internet Explorer's limitations. However, web authors should avoid using IE specific features and instead use well structured mark-up, style sheets and accessibility guidelines so web pages will render in other browsers, but perhaps without full fidelity.

Browser Stats from thecounter.com, February 2008

Browser	Share of Market
MSIE 7.x	42%
MSIE 6.x	34%
FireFox	17%
Safari	4%
Opera	1%
Other	2%

Web pages designed for the general public should allow for older browsers and slower internet connections. Australian law requires web sites providing goods or services to the public.

For a corporate internet newer features and faster links can be assumed (except if smart phone browsers are used). Specialised audiences may be expected to have specific plugins.

Web sites should be tested using different browsers, versions, and platforms. Specialist tools and services are available for usability and accessibility testing.

Use a Familiar Layout

Web sites should be laid out in a format familiar to the user. The design of a paper book provides a familiar hierarchical structure for a web site and is particularly useful where the web content is being adapted from a pre-existing paper document:

Comparison Book and Web Site Features

Book	Web Site
Cover	Splash Page
Front Matter, Foreword, Preface	Home Page, About Page, FAQs, Contacts
Table of Contents	Main Menu
Chapters	Pages
Back Matter, Bibliography, Index	Other Sites, Index Search

To quickly turn a conventional book or report into a web site:

1. Obtain an electronic copy of the document: This should have already been approved and typeset.
2. Save the document in web format: Open the document with a desktop publishing tool (or word processor) and select "save as web".
3. Replace presentational mark-up: Replace explicit font sizes and colours with standard heading level codes (such as <H3>) and styles. The HTML Tidy program assists with this. Resize or delete excessively large graphics.
4. Separate content into web pages : The cover page becomes the web "splash page", table of contents to home page, chapters to web pages.
5. Add extra navigation : Provide a replacement for the paper index, some hypertext and sub-menus. Coalesce some pages and edit some content. For example condense part of the introduction onto the home page.
6. Check the document: After approval publish it on-line.

This process can reduce the production of a web site from months or weeks to a few hours. If there is time later, graphics and additional styling can be added using CSS to enhance the look of the site.

Examples of quick sites

• Garnaut Climate Change Review, Final Report, 30 September 2008
• Architecture For Access To Government Information, Information Management Steering Committee Technical Group, Office of Government Information Technology, 1996: a Government report reformatted for the web,
• Universal Service? - Telecommunications Policy In Australia and People with Disabilities by Michael J Bourk, 2000, ISBN 0 646 39159 3: A book reformatted for PDF and the web.

However, an electronic book is not identical to a paper book and attempting to create too close facsimile can produce a poor result. PDF can provide a closer facsimile of a printed document, but may be less useful for easy reading online.

Design for a Range of Screen Sizes

Typical computer screens used for web page display are from 3" (about the size of a business card) for an advanced feature mobile phone "smart-phone", through 10" netbooks to 24" desktops. The monitor resolution typically ranges from 240 x 320 pixels for a smart phone, 800 x 460 for a netbook to 1920 x 1200 pixels for a large desktop screen. More detail can be displayed on a higher resolution screen. But this detail may not be discernible on small screens.

Aim for Fluid Design

Web pages can be designed to resize to the window (called flexible, liquid or fluid design) or fixed for a target screen size. Flexible design allows the content to "flow" to fill the available space. However, the design may look odd at very small or large screen sizes. Also the designer has less control of the layout. CSS can be used to adjust the size of screen elements using the em measurement, in proportion to the text size chosen by the user.

Resolution Stats from thecounter.com, 2008

Pixels	Share of Market
1024 x 768	45%
1280 x 1024	31%
Unknown	11%
800 x 600	7%
1152 x 864	3%
Other	3%

Place Important Information Above the Fold

The most important information of the web page should be visible in the first screen full of the web page without the user having to scroll. This is termed "above the fold". This could include the name of the web site, or the organisation, what the site or what it is promoting is about, navigation elements and advertising.

Allow for Mobile Devices

Low end mobile phones have screens of 128 x 128 pixels, which are too small for conventional web page display. However, new generation smart phones have screens of 320 x 240 or larger and can display web pages. Older mobile phones use a specialised content authoring language Wireless Markup Language (WML). Newer phones use versions of HTML and CSS. W3C have a set of Mobile Web Best Practices and a mobileOK Checker to test the suitability of web pages for mobile devices. These use a subset of XHTML, ECMAScript, CSS and other standards to suit phones, but compatible with other web browsers.

Adapt for small screens

Some mobile devices attempt to modify the layout of web pages to fit the small screen. Graphics are reduced and text enlarged. Some devices allow sideways scrolling of the pages, whereas others reformat the page for a fixed width. However, the web designer can use logical page layout and CSS to provide a readable layout without relying on particular phone features. Media types in CSS can be used to provide a different layout customised for mobile devices. The same techniques can be used for web display on TV screens and for digital signage.

In this example the default style sheet is first applied and then one of the other style sheets is selected by the web browser, depending on its "media" setting. Some media settings are fixed, such as "handheld" in a mobile phone browser. Some media settings can be changed by user action, such as "print" when the "print" or "print preview" function is selected on the browser:

Consider Accessibility for the Disabled

Assistive technology, including virtual keyboards, refreshable Braille displays and text-to-speech systems can be used by people with vision, mobility, auditory and cognitive impairments to access the web. Web pages can be designed to improve accessibility and this is required by law for many web sites in Australia and other countries.

Use the Web Content Accessibility Guidelines

The W3C have issued Web Content Accessibility Guidelines (WCAG), Version 1.0 (1999) of which are widely cited. Web accessibility test tools are available, such as TAW. Version 2 of the guidelines are relatively new (2008) and not yet in widespread use or supported by tools.

The guidelines have a series of checkpoints at three priority levels. Web pages are assessed to three conformance levels, from lowest to highest:

• A: all Priority 1 checkpoints are satisfied;
• Double-A: all Priority 1 and 2 checkpoints are satisfied;
• Triple-A: all Priority 1, 2, and 3 checkpoints are satisfied;

There are fourteen guidelines in WCAG 1.0. WCAG 2.0 simplifies this, by grouping the guidelines into four categories:

1. Perceivable
   • 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
   • 1.2 Provide alternatives for time-based media.
   • 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
   • 1.4 Make it easier for users to see and hear content including separating foreground from background.
2. Operable
   • 2.1 Make all functionality available from a keyboard.
   • 2.2 Provide users enough time to read and use content.
   • 2.3 Do not design content in a way that is known to cause seizures.
   • 2.4 Provide ways to help users navigate, find content, and determine where they are.
3. Understandable
   • 3.1 Make text content readable and understandable.
   • 3.2 Make Web pages appear and operate in predictable ways.
   • 3.3 Help users avoid and correct mistakes.
4. Robust
   • 4.1 Maximize compatibility with current and future user agents, including assistive technologies.

The same three conformance levels from WCAG 1.0 are retained in version 2. More detail as to describe conformance is provided in WCAG 2:

1. Conformance Requirements
2. Conformance Claims (Optional)
3. Statement of Partial Conformance - Third Party Content
4. Statement of Partial Conformance - Language

Consider Other National Accessibility Standards

Organisations and nations have adopted variations on the W3C WCAG 1.0. Australian Governments have mandated WCAG 1.0 A for their own web sites. The US Government has guidelines for government funded web sites similar to WCAG 1.0, referred to as Section 508. The Australian Human Rights and Equal Opportunity Commission (HREOC) has issued guidance on using WCAG 1.0 and an Interim update for WCAG 2.0 to meet the requirements of the Disability Discrimination Act (DDA) 1992.

The DDA applies to commercial, educational and non profit organisations in Australia, as well as governments. In 2000 the organisation responsible for the Sydney 2000 Olympics web site was found to have engaged in unlawful conduct by providing a web site which was to a significant extent inaccessible to the blind. $20,000 damages were awarded to one complainant.

Test for Accessibility

In addition to automated tools, accessibility specialists can be used to review web sites. Testing can also be carried out with users having specific disabilities. With testing of specific tasks, test subjects are asked to perform a pre-set activities, such as finding some specific information on the web site.

Internationalise Web Pages

Internationalisation attempts to create web pages for a global readership. Issues include:

1. Date and time formats
2. Different Keyboards
3. Cultural interpretations of symbols, icons, and colours
4. Cultural interpretations of text
5. National and International Laws

Alternative character encoding and character references are included in newer web technology. New versions of HTML and CSS have ways to specify the language of the text and allow for different presentations.

Versions of HTML before 4.0 were based on the 8-bit Latin-1 (ISO 8859-1) character set, suited to European languages. HTML 4.0 and XHTML use Unicode (ISO/IEC 10646-1), which allows for most of the world's languages. The recommended implementation of Unicode for the web is UTF-8.

Language Features

Later versions of HTML allow for languages with different rules for hyphenation, spacing, quotation marks, punctuation, directionality and cursive joining behaviour. Web pages can use more than one language, but developers are expected to specify at least one language for the document using lang attribute in HTML and xml:lang attribute in the html root element for XHTML. The language attribute can also be used in a particular element of the document to override the language declaration of the document.

The language tags used for web pages are two, or less commonly three character codes, from ISO 639. A dash may be used for a more specific dialect. As an example, British English is one of the languages of the Olympics and so the code is "en-GB".

Directionality

The dir attribute (ltr for "left to right" or rtl for "right to left) is used for specifying the direction in which the text should be interpreted in later versions of HTML. For example, by default, English is displayed from left to right, whereas Arabic should be right to left. The bdo element ("bidirectional override") allows a span to change the direction within a sentence to insert text of another language.

Style Sheet Language Features

CSS Level 2 has direction and unicode-bidi properties to specify text direction. The quotes property allows for quotation marks appropriate to the current language.

CSS Level 3 has detailed specification of international numbering schemes, vertical text and language-based text justification.

Now read:

Web Design in a Nutshell, Jennifer Niederst Robbins, O'Reilly Media, Inc., 2006: Part 1: The Web Environment

• Chapter 1. Web Standards
• Chapter 2. Designing for a Variety of Browsers
• Chapter 3. Designing for a Variety of Displays
• Chapter 5. Accessibility
• Chapter 6. Internationalization

Making an Accessible and Functional Website for the 2008 Beijing Olympics, Tom Worthington, 2003.