Website Design

For Information Technology Professionals

Tom Worthington FACS HML

Visiting Fellow, Department of Computer Science, the Australian National University, and Director of Publications for the Australian Computer Society and Director Tomw Communications Pty Ltd.

For Internet, Intranet, and Document Systems (COMP3400), May 2003

Note: New Version now available

Introduction

The World Wide Web (Web) is a computer application which has become very popular. It provides a network of information resources, a uniform naming scheme for locating the resources, protocols for accessing them and hypertext navigation among the resources. Information technology professionals have decades of experience with computers and telecommunications. As web sites become larger and more complex, IT professionals can contribute their experience into how to build such systems.

The Discipline of Web Site Design

The information architect of a large, complex web site should be two things: someone who can think as an outsider and be sensitive to the needs of the site's users, and at the same time is enough of an insider to understand the site's sponsoring organization, its mission, goals, content, audiences, and inner workings. In terms of disciplinary background, the information architect should combine the generalist's ability to understand the perspectives of other disciplines with specialized skills in visualizing, organizing, and labeling information.Rosenfeld & Morville (1998)

Rosenfeld & Morville (1998) argue that information architecture is a new field, not clearly part of an existing discipline. However, people have been designing information systems for electronic digital computers for about 50 years. The Australian Computer Society defines Information Technology as:

"the development and application of computers and communications-based technologies for processing, presenting and managing data and information" (ACS 1997).

After being involved in pioneering many early web sites, IT professionals have tended to be relegated to a technical support role in web site development. This can cause problems as the scale of web sites and their increasing functionality exceed the design skills of graphic designers, librarians, journalists and marketers. To be able to design web software and assist in the design of large scale web projects, IT professionals need to adapt their skills and learn some new web design skills.

What is the World Wide Web?

There is no formal definition of what the World Wide Web (Web) is. However, the World Wide Web Consortium (W3C), which develops web specifications, describes it as:

... a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:

A uniform naming scheme for locating resources on the Web (e.g., URIs).
Protocols, for access to named resources over the Web (e.g., HTTP).
Hypertext, for easy navigation among resources (e.g., HTML).
W3C (1999)

The web can be summarized as:

Locating	uniform naming scheme	URI
Accessing	Protocols	HTTP
Navigating	Hypertext	HTML

Table 1 Web Mechanisms

The web was built on the foundation of the existing Internet, which was built on existing information technologies. Many of the challenges which look new to web site developers were faced by IT developers decades before the Internet or the web existed. IT professionals can use the experience learn from the past to add new features, such as support for mobile devices and interactive television (iTV), to the web.

The ACS Core Body of Knowledge

The Australian Computer Society divides the aspects of IT into:

Areas of Knowledge

Computer Organisation and Architecture
Conceptual Modelling
Database Management
Data Communications and Networks
Data Structures and Algorithms
Discrete Mathematics
Ethics/Social Implications/Professional Practice
Interpersonal Communications
Program Design and Implementation
Project Management and Quality assurance
Information Security
Software Engineering and Methodologies
Systems Analysis and Design
Systems Software

From Core Body of Knowledge for Information Technology Professionals (ACS 1997)

The major challenge in IT is to discover what the client wants, what might achieve that need, to reliably build a system to meet the need and then ensure the system operates into the future. As web sites become larger and more complex the Body of Knowledge built up for IT can be applied to the web. Some examples:

Computer Organisation and Architecture: High volume web sites test the limits of available hardware. A study of the principles of operation of the components of a computer system allow a design to be optimized to meet performance requirements. Mobile and iTV web devices and embedded systems in set-top boxes have limited capacity, requiring an appreciation of how the hardware will affect the development of web systems. How to design web pages for mobile and iTV devices will be discussed in detail later.
Conceptual Modelling: A major problem with the development of ever larger web sites is the lack of tools to deal with the complexity of design. Conceptual modelling provides tools for abstraction to find patterns in the problem and simplify design. One example is entity relationship models, originally developed for database design. How these models can be used for the design of the web site structure will be discussed in detail later.
Data Communications and Networks: Large web sites impose significant loads on a network. A large site may need to be spread geographically to balance load and the different characteristics of internal LAN and wide area networks must be considered. The security requirements of the web site need to mesh with those of the underlying network. How to design web pages to adapt to available bandwidth will be discussed.
Ethics/Social Implications/Professional Practice: The design of web sites involves legal, social and ethical issues of a magnitude not seen before in IT. The newness of the Internet and the public visibility of web sites create major problems for web site design. Whereas these issues might have come up a few times in the career of an IT professional, with the web they will occur in almost every project. The requirements for the design of web sites for the disabled will be discussed in detail.

Web Design

Some technologies used with the web are:

Hypertext: The use of a hierarchy of web links is a convention imposed by the designer for the convenience of the reader. Links can be from anywhere in and web page to any other. In practice this freedom can lead to confusion for the reader and is generally used for supplementary links. An example of good use of hypertext is in the Government On-line Strategy. The text of the document contains hypertext links to other government reports. The links are added to what is otherwise a conventional printed document:
The Prime Minister’s December 1997 policy statement Investing for Growth outlined the importance of the information age for national prosperity ... From GovernmentOnline - The Commonwealth Government’s Strategy, NOIE, April 2000, URL (archive copy): http://www.govonline.gov.au/projects/strategy/
GovOnlineStrategy.htm#INTRODUCTION
Database: Rather than use web pages and links which are statically created, much as paper documents, web pages can be generated from a database. Relational databases are generally used to hold the web site content. Templates with the structure of standard page designs are used to give the design for a particular site. Content is then filled into the templates in response to user requests. While in theory each page could look radically different (and different each time read), in practice a structure similar to statics pages is used, to avoid confusing the reader. An example of a database generated web site is the Australian Governments' Business Entry Point.

Programmatic: Advanced web features, such as XML and cascading style sheets, can be used to provide a look more like that of a computer application than a document. Programming languages, such as Java, can be used to provide an interface similar to a computer game. However, a complex interface design can impede use of the web site, rather than improve it. In most cases the programming features are used to supplement a conventional document design. An example is the St George Java based Internet banking system.

Designing Navigation Systems: Examples

Building Context: Commonwealth Government Entry Point and Department of Defence.
Remote Navigation Elements: EdNA site map, search facility.

Browser Navigation Features

Commonly used conventions for web navigation have been established by popular browser programs. Some applications, such as micro-browsers embedded in appliances, may justify not using these navigation conventions. Also it is possible to switch off or override some browser controls for some applications, such as public web kiosks. However, for most web site design it should be assumed that the conventions will be worked with.This also assists where additional hardware or software is used to provide access for the disabled.

Building Context

Readers can get lost as to which web site they are in and where they are. The navigation system can provide clues as to where the user is and was. Examples are a navigation bar across all web pages or a fixed menu frame in a multi-frame site. Examples are the fixed top and bottom menus on the the Commonwealth Government Entry Point and the fixed left frame on the Department of Defence home page.

Remote Navigation Elements

With most web sites based on a paper book model, it is natural to include a title page (or "splash page"), table of contents, a site map (detailed table of contents) and an index. In some designs the site map doubles as a more accessible table of contents. Few sites have an index, but instead have a search facility. A search facility provides less context for the reader than an index, as the search finds what is there, not what else may be near it.

EdNA (The Education Network Australia) has a "splash page" which appears for a few seconds before the contents page loads. The site map uses a simple design with headings from the contents page and then one level of details. A confusingly powerful search facility is provided.

Conceptual Design

High-Level Architecture Blueprints: No widely accepted modeling or diagramming techniques exist for web site design. IT professionals can adapt Conceptual Modeling methods, such as those used for relational data and Software Engineering Methodologies used for requirements analysis functional and technical specifications process, data and object orientation models.

An example of an attempt to develop web site modeling is WebML (Ceri et al 2000), of which the entity-relationship modeling section will be discussed in detail later.

Structure Charts and Site Maps

Lengel (2002) describes the use of Structure Flow Charts in chapter one as an aid to designing a web site. In chapter two they describe the use of site maps to describe the web site for the user and comment "the flow chart you developed for your site in chapter one is a site map". In practice site maps rarely use graphics and are indented text instead. Also the use of the term "flow chart" does not match that of computer science, where a flow chart show the flow of control in a computer program, not the structure of the data or software.

Site Map as a Graphic:

From: Site map for Australian Heritage Commission web site, Australian Heritage Commission, 1999

Site map as text:

About Us

EdNA Online Policies

Content Standards (Schools)
Usage of Collaborative Tools
EdNA Online Principles
Privacy Policy
Publishing Guidelines
News & Views Guidelines for Contributors
Terms and Conditions

Sitemap
Feedback
Suggest a Site
Admin Access
Help...
From: EdNA Online - Sitemap, Education Network, 2001

Worthington Methodology for Quick Web Site Design

The design is based of a paper book provides a familiar hierarchical structure for a web site:

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:

Obtain an electronic copy of the approved, typeset document.
Save the document in web format.
Replace presentational markup with structural markup and style properties. For example replace explicit font sizes and colors with standard heading level codes (such as <H3>) and styles. The Tidy program assists with this.
Resize or delete excessively large graphics.
Separate content into web pages: cover page to "splash page", table of contents to home page, chapters to web pages.
Add extra navigation, such as 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.
Check the document and 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 to enhance the look of the site.

Examples of quick sites:

Special Broadcasting Service web site: prepared from an A4 brochure overnight and launched the next day,
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.

Public web sites need publicity to attract readers. The content of the site can be summarised and converted to announcements and presentations.

Next: WebML: modeling language for designing Web sites