Web-Site Architecture

Robert D. Cameron
February 5, 2003

The architecture of a web site refers to the set of organizing principles that are systematically applied to create consistency and cohesion across the components of a web site, as well as the technological framework that supports this organization.

Project work for this course will be graded partly on the statement of architectural principles in the project documentation as well as the implementation of those principles.

I. Navigation Architecture

Navigation architecture is the set of techniques and technologies that permit users to browse through a web site, focusing on three fundamental concerns.

Basic Navigation

Two elements form the lowest common denominator of web navigation.

Hand-constructed websites are often limited to basic navigation.

Principle: all other navigation methods must respect the use of these basic navigation methods. Basic navigation is ubiquitous and familiar. Users rely on these basic facilities and become confused by facilities that interact strangely with the basic mechanisms.

Navigation Middleware/Server-Side Programming

Beyond basic navigation, there are many useful additional forms of navigation that may be added to websites under software control. Three types of software system may be used.

Top-Level Navigation Pages

Four common types of navigation pages are often used for top-level navigation.

Navigation Bars

It is common and useful for sites to provide either horizontal or vertical navigation bars, either on the main pages of the site or throughout the site.

HTML Frames can be used for navigation bars, but are difficult to do well. Dynamic or statically generated navigation facilities are generally more flexible.

Next/Previous Navigation

A common form of navigation for on-line documentation or slide presentation is to use next/previous buttons to link individual sections of a document or slides of a presentation.

Given documents following a tree-structured hierarchy, next/previous navigation buttons add leaf-to-leaf links to traverse a document structure sequentially.

External Navigation

Links to external resources should be handled in a systematic way.

Systematic Navigation

There is no predefined right way to architect the navigation facilities of a web site. The most important principle is to use systematic facilities that provide consistency throughout the website and maintainability over time.

II. Presentation Architecture

Presentation architecture refers to the use of fonts, colors and layout for documentation and data presentation.

The use of stylesheet technologies (CSS, XSL) is critical to the separation of content and presentation.

Site-wide style sheets should be used for site-wide consistency of presentation.

III. Data Architecture

An important part of many web information systems are facilities that interact with datasets of various kinds. The way in which this is organized may be referred to as the data architecture of the system.

Three-Tier Architecture

A very common approach to a systematic data architecture is the so-called three-tier architecture.

  1. The web browser provides the user interface to implement the client or front-end tier.
  2. The web server structures the application logic as the middle tier.
  3. A database system stores the data required by the application on a separate database server or back-end tier.

Data Presentation Architecture

Data presentation architecture refers to the ways in which the application may be structured to systematically present data views to the user.

There are many possibilities to consider when designing data presentation architecture.

IV. Interaction Architecture

Interaction architecture refers to the systematic techniques and technologies that are used for applications that must respond to user input.

Basic Interaction

The basic web technology for user interaction is the HTML form element, usually used with the HTTP POST method.

HTML forms provide several types of input controls.