Common Web Designs

From: Writing for the Web: A Standards Based Approach to Preparing Accessible Web Content

20 May 2007

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

Introduction

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.

What is the World Wide Web?

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

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.

What is a Web Site?

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/

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.

Job of web author

  1. Partition the information for the web page into sections of related information and mark them with tags,
  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. Consider the 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.

From Book to 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

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.

Steps for book to web

  1. Obtain an electronic copy of the document.
  2. Save the document in web format.
  3. Replace presentational mark-up.
  4. Separate content into web pages.
  5. Add extra navigation.
  6. Check the document.

Examples:

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.

Print V screen

Screen shot of Monash University Health web page

From: "Graduate Diploma in International Health", Monash University, 27 October 2003, URL: http://www.med.monash.edu.au/epidemiology/pgrad/ih/index.html

Screen shot of Curtin University of Technology helath PDF document

From: Graduate Certificate in International Health, Curtin University of Technology, 1 October 2004, URL: http://postgrad.curtin.edu.au/pdf/health_science/305793-hs14.pdf

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.

Display Size

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.

Layout

Typical web page layout
Header: logo, page title and top level menu
Menu items
  1. Item
  2. Item
  3. Item
Main content: Text, images and further divided into sections. Advertisements,
additional content,

or menus

Footer: copyright and legal notices.

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 styled with CSS

H1, H2 { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: medium; color: #000000 }

H3 { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: medium; color: #000000 }...

TBODY, BODY, TABLE, TD, BLOCKQUOTE, FORM, LI, OL, UL, DD { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: small; color: #000000 }

P, p { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: small; color: #000000 }...

From: ANU standard style sheet, URL: http://www.anu.edu.au/templates/anustyle.css

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:

More Information

Slides for these notes are also available.

These are notes on website design for use in organisations. It was originally developed for ANU course "Networked Information Systems" (COMP2410 / COMP6340) in 2002 and updated to 2007. The material has been revised to make it less theoretical and more practical for an industry audience. This material was prepared and presented by Tom Worthington FACS HLM, a Visiting Fellow in the Department of Computer Science at the Australian National University (and Director Tomw Communications Pty Ltd. It is available free for non-commercial use.



Copyright © 2007 Tom Worthington

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.