Writing for the Web

A Standards Based Approach to Preparing Accessible Web Content

27 April 2007

These are notes on website design for use in organisations. This material was prepared by by Tom Worthington FACS HLM and is available free for non-commercial use.

Introduction

  1. Use web technology to produce useful web sites
  2. Use appropriate text and graphics
  3. Use simple layout
  4. Use standards
  5. Allow for disabled, mobile, and web search users

The most important point with web site design is to consider the needs of the user of the web site. Use words they are expecting to find, so they can find the web site. Use terms they understand. Use a layout to help find information. Use web standards so the site will work on a large range of equipment. Allow for readers who have a disability, who might be using something other than a desktop computer hardware and consider non-human readers, such as web search engines.

The Web Iceberg

Most web content is never seen. Put important information "above the fold"

Like newspaper articles, web pages should be written with the most important information first. A typical computer screen holds about half as much text as an A4 page. The most important information should therefore be put at the top of the page, visible on the screen ("above the fold" in newspaper terms). The first paragraph of the page should provide a summary.

The read will be directed to a web page typically by a web search engine or an index. The Metadata (data about data) in the head of the web page is not normally visible to the human reader, but will be read by search engines and other indexing tools. Therefore this data is important to having a web page found. Some specialist standards might be used for additional metadata, such as the Australian Government Locator Service (AGLS) and Dublin Core. But most web search engines will just use Title, Description and Keywords.

The URL (web address) of the web page forms part of the metadata and will be used by some search engines. If possible, the web address should be made out of words (not random letters or digits), arranged in a logical hierarchy. Web addresses should be short enough (less than 76 characters) so they can be sent by email easily and quoted in documents. See: The importance of a semantic URL, Robert Nyman, March 16th, 2007

Addressing different readers at once

  1. Provide a package of information for different readers: clients, staff, experts, the media, the public,
  2. Allow for different reading methods: On screen, printed, slide presentations, audio, video,
  3. Address the international audience: mention the country, consider the spelling, allow for translation,
  4. Address the future: Use a permanent web address and include the date.

Example: Federal Budget Web Site.

For important events, such as the release of a budget or opening of a building, the web author has to prepare a coordinated package of information for different readers. These may have a set format and style, such as a media release for the media, technical report for professional readers, pamphlet for the public, and copy of the speech from the opening. Each will use a different style of writing to suit the audience. Each can be made as a facsimile of the traditional printed document. Slide shows, audio and video can accompany the text documents.

Unlike paper documents handed out at a local event, anyone with web access around the world can read any public web page. The full international contact details (with country code) should be included. Consideration of the use of different spelling and terminology should be used, if an international audience is intended.

Web pages are formal written documents and can be admitted in court as evidence. Therefore they need to identify the publishing organisations, be referenced with a date and (if applicable) time, as well as any reference codes used by the organization. Any laws or rules applying to publications need to be considered.

An example of coordinated web design for different readers is the Federal Budget Web Site. This was first placed online in 1995. The budget web site provides overviews for the general public, media releases and detailed technical documents. The budget documents are retained, with a new section added each year for each new budget.

Addressing different display devices

  1. Conventional PC: Full content and a two dimensional layout on a conventional PC screen,
  2. Projected Presentation: Trimmed content with larger text on a video projector for class room display,
  3. Handheld: Smaller screen of a games console, or the linear text of a mobile telephone, and
  4. Print: Interactive menus and decorative graphics removed for a printed document.

The web has been designed with inbuilt flexibility to operate on different software and hardware to suit the needs of different people. A web page can be made flexible to display differently on different devices.

The author needs to consider what device their readers are likely to use and write for that. Web standards (discussed below) and web management systems can be used to adapt the content to different devices, to a limited extent.

Why use Web Standards?

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

From: W3C, 2007

Technical standards provide a common way to define the structure and content of web pages, so that different tools can be used to create them and different web browsers used to display them. There is a tradeoff between using new web standards, with extra features and maintaining compatibility with older software the user may have on their computer.

Web Standards

HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-proprietary format ... HTML uses tags such as <h1> and </h1> to structure text into headings, paragraphs, lists, hypertext links etc. ...

From: XHTML2 Working Group Home Page, W3C, 2007

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. ...

From: Cascading Style Sheets home page, W3C, 2007

Hyper Text Markup Language (HTML) is a W3C standard for structuring web pages. The "tags" used provide similar structures as used in word processing documents, for levels of headings, paragraphs, emphasis of words and the like.

Cascading Style Sheets (CSS) provides a way to add more formatting any layout to HTML web pages. Despite the W3C's description, CSS is not simple, particularly when used for laying out the content of a web page in columns and boxes.

What is Semantic Markup?

The semantic web is an evolving extension of the World Wide Web in which web content can be expressed not only in natural language, but also in a form that can be understood, interpreted and used by software agents, thus permitting them to find, share and integrate information more easily.[1] It derives from W3C director Tim Berners-Lee's vision of the Web as a universal medium for data, information, and knowledge exchange. ...

From: Semantic Web, Wikipedia, 2007

Microformats and XHTML 2 may be more practical

The semantic web attempts to create web pages which both people and machines can read. This is not yet widely used.

Microformats provide a simple way to add some semantics to existing web pages. XHTML 2 offers better ways to structure web pages. These may prove more popular as they build on existing standards.

More Information

Slides for these notes are also available.

These notes were originally developed for ANU course "Networked Information Systems" (COMP2410 / COMP6340) in 2002 and updated to 2007. The material has been revised to make it less theoretical and more practical for an industry audience. This material was prepared and presented by Tom Worthington FACS HLM, a Visiting Fellow in the Department of Computer Science at the Australian National University (and Director Tomw Communications Pty Ltd.



Copyright © 2007 Tom Worthington

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.