Creating Web
Pages and Sites

Main Report

Simple
Test Page

Complex
Test Page

Database
Maintenance

Design
Guidelines

Code for
Test Pages

Web Page Design

HTML version

At the moment we accept many of the facilities of HTML 3.2 and test them with Netscape 3 and Internet Explorer 3 - and larger. The tests are mainly made on Macintoshes, but some checks with Windows 95 are also made.

Make it simple

We are not typographers, so we should not try to exploit all the facilities available for design of web pages and web sites. Use only a couple of fonts, a few colours, a few levels of headers, simple lists, and use no blinkers!

Document headers and footers

Headers and footers should be standardised at each web site. Since we do not allow frames, we have used so-called include files to secure a consistent revision. To be more specific, include files have been created for the different types of header and footer. In headers we use META tags that are directly related to our special software for web-site indexing (ht//dig). For instance, the notification date means that an email is automatically sent to the DocMaster suggesting that an updating (or deletion) takes place.

Document width and length

HTML is based on the idea of a logical specification of documents. One issue it the widely varying screen widths applied by different monitors and different users. We suggest to define width in terms of percentages of the display rather than as a fixed number of pixels. If you need a precise printout or display, you should rather save the document as PDF or PS files. Web documents should, of course, not be too long and with too heavy illustrations. A page of 100K (including images) is large.

The heading bar within documents

All documents have a logo (a completed random graph created by Maple's graph theory package) and a rather heavy title. The title is bold and set with the fonts Arial, Helvetica. There is a grey background for both the logo and the title. The width of the grey bar is determined by the width of the browser window.

Using tables as substitutes for frames...

Frames represents an important possibilities, but the well-known problems are - in my opinion - still outweighing the advantages. Instead all documents are defined as a single large table with two main rows and two main colums. The first row is the heading bar. The second row is the contents. The first column (20% of window width) is for the logo and the menus. The second column (80% of window width) is for the contents. Embedded tables are used within the South-East cell to control the flow of text, colours, etc.

Headings within documents

We mainly use the fonts Arial/Helvetica for headings. The sizes of the different levels are still not fully standardised. The standard hierarchy of headings is not fully adequate, both because H1 is generally too large and because the sans serif font (like Arial) changes the sizes.

Fonts within documents

As mentioned, we mainly use the Arial/Helvetica for headings. Courier, Courier New is used for menu bars, etc. The normal font has not been specified, but it is assumed that a version of Times or a similar font is being used.

Links within documents

Relative rather than absolute intra-site links are preferred to make the system of files portable between different computers - and inspectable in downloaded form. No attempts have been made to make short MS DOS-style file names. So the directory system is best for Unix and Macintosh systems.

Web Site Design

Web sites from the viewpoint of the "docmaster"

A web site is a collection of highly interrelated web pages and other files (e.g. PDF files). What makes the elements of the site "highly interrelated" and complex is a question of design rather than physical location. Not only the "webmaster" but also the" docmaster" should apply the principles of software engineering (modilarity, data abstraction, inheritance of context, etc.) to avoid that both the producers and the users of the web site runs into a "complexity crisis". Many of the above principles of web page design are heavily influenced by the overall principles for using and managing of complex web sites. But a series of new questions also emerges.

Redundancy from the user's viewpoint

First of all, the user should feel at home at the web site. This can to some extent be accomplished by keeping a standardised layout of all the pages, standardised navigation tools, standardised points of clickin, etc. This means a high degree of redundancy - which is further increased by the need of a standardised vocabulary, etc. To the extent that particular parts of the web site needs their own navigation tools and concepts, they should be added to the basic set of tools and concepts. But lower-level pages should inherit the enhancements.

Redundancy from the producer's viewpoint

According to the principles of data base design, any given information should only be recorded at one place - because otherwise inconsistency will ultimately emerge. This principle clearly contradicts the user-oriented need for redundancy. The solution is that any given web page is a concatenation of different files, so that different web pages can apply the same file. There are different ways of accomplishing this design. Frames are an obvious possibility, but they are still problematic for other reasons (aestetic, user-functionality, etc.). Dynamic use of data bases by the web server is another possibility, but it presuppose much knowledge from the docmaster and much interaction between the contents-oriented docmaster and the compter-systems-oriented webmaster. The use of "include files" that are merged into the static web page each time it is saved is supported by several programs. It is the method used at present at Andersen's web sites.

Hierarchy vs. multiple access

Hierarchical linking of pages is a basic way to avoid user-oriented complexity crises at the web site: you start with the topmost menu, you select an obtion, and you move down to the next-highest menu, and so on until you find the information you need. A major problem is, of course, to define menu items that suggest to the user how to proceed to the wanted information. Another problem is that experienced users get tired of following the links while they might not be willing to store a bookmark for the bottom-end page. A partial solution to both problems is to add search facilities to the web site. The search tool should be simple and be similar to other search tools that the user has previously encountered.

Differentiation of users: novices

Web sites should be convenient both to new users and to experienced users. The new users should immediately be informed about the main characteristics of the web site. Just by the basic layout they should be aware that they e.g. are at an academic web site and not at Disney's web site. There should also be a few words which indicates the information type and the comparative advantages of the web site. Finally, new users should be informed how to use the site. New users may thus want help pages as well as a FAQ (list of frequently asked questions). However, they might also like to test the site through its search facilities as well as being informed about news at the web site.

Differentiation of users: experts

Web sites should be convenient to experienced users. But we should not overestimate "experts". They also like to be reminded about the main characteristics of the web site (basic layout, comparative advantages, faq, usage, etc.). But basically, experienced users should have easy access to their preferred pages, and they should be informed about news at the web site. We should be aware where experts look for the news. If they immediately go to the download page, we do not need to record new PDF files at the "What's New" page.

Tradition and change in the evolution of web sites

Producers and users alike rapidly get accustomed to the given structure of a web site. When you change the structure, you should make automatic redirects so that old links can still be used (at least for a while). This method allows you to change the structure so that e.g. all files related to a particulat topic is placed in a folder and its subfolders and subsubfolders. When the contents changes, then some files will have to be moved. But the suggested gradualistic evolution of the web site presupposes that it from the very beginning has a fairly good and hierarchically ordered directory structure.