Website Design

What is the World Wide Web?

The web is built on the Internet, which was in turn built from existing information technologies. Many of the challenges which web site developers are faced with are common to other IT applications. Techniques for general IT development can be applied to the web, and web technology can be applied to other IT applications. But while many of the challenges of web are not new to IT, the scale of the challenge is new.

IT professionals in the past built a system for an organization which might have thousands of users, whereas the web is an attempt to cooperatively build an application for hundreds of millions of people. Suffering from its success, the web has started to splinter into smaller incompatible sections, divided by technical standards. The challenge is to develop applications which a broad range of people can use.

The World Wide Web Consortium (W3C), which develops web specifications (to keep the web together), describes the web as:

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

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

From: HTML 4.01 Specification, W3C, December 1999, URL: http://www.w3.org/TR/html4/intro/intro.html#h-2.1

So the web can be summarized as:

Web Mechanisms

Locating	uniform naming scheme	URI
Accessing	Protocols	HTTP
Navigating	Hypertext	HTML

What is a Web Site?

In designing web sites the first point to keep in mind is that there is no technical standard defining what a web site is:

web site ...

Originally: a computer system that runs a web server (rare). Now: a document or a set of linked documents, usually associated with a particular person, organization, or topic, that is held on such a computer system and can be accessed as part of the World Wide Web. ...

From: Oxford English Dictionary Online, Oxford University Press, 2004, NEW EDITION: draft entry June 2001, URL: http://dictionary.oed.com/

The documents which make up a web site are commonly called "web pages" and are usually expressed in HTML or some form of XML, but can be in other formats such as PDF. Hypertext links are used to technically bind the web pages together, but what makes a collection of web pages a web site is a common subject, purpose or sponsor.

Web as a directed graph

More technically, a web site can be thought of as a directed graph:

There is a natural mapping of a Web site structure onto a directed graph where the nodes correspond to Web pages and the arcs to URLs. A Web site is viewed as a specific directed graph that consists of an initial node (called homepage) and other nodes connected to it.

From: Semantic Hierarchical Abstraction of Web Site Structures for Web Searchers, L. Wookey & J. Geller, Journal of Research and Practice in Information Technology, Vol. 36, No. 1, February 2004, URL: http://www.jrpit.acs.org.au/JRPITVolumes/JRPIT36/JRPIT36.1.23.pdf

Directed graph of this document

Here is a simplified directed graph of this document. The boxes are web pages and the arrows linking them are hypertext links in the web pages, which users click on:

Trimmed directed graph

For any web site of a practical size the directed graph is an unintelligible jumble of lines and boxes. As Wookey & Geller point out a hierarchical abstraction of the directed graph is easier for readers to understand. The directed graph can be converted to a hierarchy (Tree) by omitting less important links, so that each box (web page) has only one link to it:

Site map

The tree can then be drawn with the "home page" at the top. The home page is a page from which all other pages on the site can be reached. It usually has the shortest web address (URL) on the site and is the address advertised. This diagram is called a site map, by web designers:

The site map can be implemented by having a menu of hypertext links on each web page which links to each web page below it and to the one web page above it. If there is space, additional links are provided to important pages (typically the home page and the first level below it).

Job of the web site designer

If the tree is traverse? (each link followed down the tree, left to right), a linear version of the web site can be produced. It should be noted that the web technology does not require a linear version of the web site (hypertext links can be activated in any order), it is for the convenience of the reader. If the web documents are text, then the result will be a conventional document, like a book, with sections one after another in order. If the web documents are video or animation, the result will be a movie, with scenes in order.

So the job of the web site designer is to:

1. Partition the content for the web site into web pages of related information,
2. Arrange the web pages in a hierarchy which will make sense to the reader when read in a linear order,
3. Add the minimum of additional links needed for non-linear (random) access.

There may be several ways to arrange the information to suit different users. The content of the site may also be dynamically updated and automatically restructured by software. However, the site needs some structure and must be able to be reduced to at least one linear format for use by devices for users who can only read a linear format (such as synthetic speech for the vision impaired or a small hand held screen).

Job of web page designer

Web pages have an internal structure similar to web sites (small web sites can be made of just one web page). HTML and XML define the content of the web page as a tree of tags and content expressed as text. Hypertext links within the document can turn it into a directed graph.

So the job of the web page designer is therefore similar to that of the web site designer:

1. Partition the information for the web page into sections of related information,
2. Arrange the sections in a hierarchy which will make sense to the reader when read in a linear order,
3. Add the minimum of additional links needed for non-linear (random) access,
4. Define transformations from the hierarchy to selected display formats (screen, small screen, printed page, spoken text).

Most web designers only design for one display format, typically a PC screen with a particular screen resolution and range of colours. Designers put considerable effort into arranging sections of the document in a two dimensional layout on a screen of a particular size with fixed navigation features (menus and submenus). This limits the audience for the web site by excluding those who have a different display device, such as a mobile telephone or a talking terminal (for the blind), or a conventional printed page. One approach to dealing with different display devices is to design a different version of the web site for each. However, this is wasteful of resources and newer web technology is starting to make it possible to render the one design to many devices.

Web Technologies

The details of web technology are changing continually. New standards are allowing print-like web documents, with control over formatting similar to that provided by desk top publishing systems. Other standards are providing multimedia formats with sound and video. Another set of standards is providing for e-commerce transactions.

In addition there are many non-standard extensions to the web from companies. Not all formal standards will come into common use and even popular non-standard extensions may fall out of favor. The designer needs to make a judgement as to which technologies to use for a particular web site.

Some fundamental technologies used with the web

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

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 for a Content Management System. 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. The list of "business news" and "running your business" items look like static text of a conventional web page, but are extracted as required from a database and inserted into the HTML:

Programmatic

Advanced web features, such as XML and cascading style sheets, can be used to provide a web site which looks more like a computer application a static printed 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 of a Java based site is the St George Java based Internet banking system. This behaves like an interactive computer application, not a book-like web site:

Designing Navigation Systems - 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. An example is the fixed top and bottom menus on the the Australian Government Entry Point:

From: Australian Government Entry Point, 2001, URL: http://fed.gov.au

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.

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

Conceptual Design

High-Level Architecture Blueprints

No widely accepted modelling or diagramming techniques exist for web site design. IT professionals can adapt Conceptual Modelling

• Software Engineering Methodologies used for requirements analysis functional and technical specifications process, data and object orientation models,
• WebML is an attempt to develop web site modelling is which uses techniques such as entity-relationship modelling to describe web sites.

Site Maps

Site maps describe the relationship between pages on a web site, using a diagram or more usually, just text:

The site map gives an overall picture of the structure of the Parliament of Australia web site. ...

Who's Who

• Senate
  - President of the Senate, Sentor the Hon Paul Calvert
  - Role of the President of the Senate
  - Current Senators
  
• House of Representatives
  - Speaker of the House of Representatives the Hon Neil Andrew...

Site Map, Parliment of Australia, 31 January, 2004, URL: http://www.aph.gov.au/sitemap.htm

The site map does not show all links on the web site, nor all web pages, just those considered most important to the reader.