These are notes on website design for use in organisations. It is available free for non-commercial use.

Web authors need to concentrate on the content and structure of web pages, not how they will appear. As with any writing, the work should have some coherent structure of paragraphs, sections and chapters. HTML provides "markup" for the structure. CSS provides a way to separate the look of the web page from the content and structure. Later versions of HTML, particularly XHTML provide better ways to separate content from structure. XHTML Basic was designed for mobile phones, providing a stripped down HTML with all the formatting removed to CSS.

After the web author has the wording and structure in place, they should add graphics to enhance the information content. A web designer can then apply a CSS style sheet to select fonts, colors and layout for the web page.

The web is built on the Internet, which was in turn built from existing information technologies. 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.

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

The documents which make up a web site are commonly called "web pages" and are usually expressed in HTML or some form of markup, 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.

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.

In many cases web content is also published in print format. A simple way to create a web site quickly is to convert the book content and retain a book format for the web site.

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

To quickly turn a conventional book or report into a web site the content should have already been approved and typeset. Open the document with a desktop publishing tool (or word processor) and select "save as web". Replace explicit font sizes and colours with standard heading level codes (such as <H3>) and styles. The Tidy program assists with this. Resize or delete excessively large graphics.

The cover page becomes the web "splash page", table of contents to home page, chapters to web pages. Provide 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. 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 using CSS to enhance the look of the site. The examples shown were converted from word processing documents with a few hours work.

It is possible to generate two versions of the content: one for on-screen viewing and one for printing. This can be done by content management software generating two versions of the information (HTML and PDF) or by CSS which detects the output device and adjusts the HTML or XML document accordingly. In theory this should cater for all users: those who what to view will use one version and printing the other. However, the user may not notice the print version is available or their browser may not be compatible with the CSS options. It may therefore be necessary to compromise the design for both purposes.

In contrast the Curtin University of Technology Graduate Certificate in International Health is provided as a PDF document. This has two columns of text which make better use of a printed page. However, the columns are fixed in size and too small to be read on screen:

A related problem with the Curtin document is that the headers and bottoms of the pages use large areas of dark solid colour. This looks good when reproduced on a high quality printer, but less so (and wastes ink) on a laser or ink jet printer.

The web designer should try to cater for the greatest range of screen sizes and shapes possible. Lengel, suggest that most modern monitors have a display size of 800 pixels wide by 600 pixels high (Super VGA or SVGA). But the latest displays are larger than this and many older computers and web appliances have a screen 640 x 480 pixels.

Hand held devices and Internet TVs have smaller screen. Most screen have an aspect ratio of 4:3, but wide-screen TVs are 16:9 and some PDAs have square 1:1 screens. An application designed a specific screen resolution and shape may not be usable on a different size or shape screen. The web page may fill only part of the screen on a higher resolution display, or may require the user to scroll to read each line of text. In an extreme case the screen the web page may become an unintelligible jumble of overlapping text and images.

Web pages are traditionally formatted in a similar way to printed text, in a rectangular grid, with more general information at the top left and detail toward the bottom right of the page (for English language). In general web pages should be laid out following this pattern, but having too rigid a design can result in a dull design and the reader being unable to distinguish one page from another in the web site.

A typical layout for a web page is to divide the page into a header, body and footer area and then divided the body further into a number of columns. An attempt is made to make the layout symmetrical. The header will have a logo, the title of the web page and links to other important pages. The footer will have a copyright notice and links to legal notices. The left column in the body will have a menu, the center column the main content and the right column a subsidiary menu, additional information, such as classified advertisements.

The layout should, as far as is possible, allow for screen of different resolutions. In particular a screen which cannot display as many columns of text should be considered. Cascading Style Sheets (CSS) include commands for positioning elements on a web page. However, there is limited support for some formatting and tables may need to be used.

Text should be sized relative to the default size set by the browser and styled using Cascading Style Sheets (CSS) based on the structural elements of the document: