Website Design

Extreme web design

For Networked Information Systems

These are notes on website design for ANU course "Networked Information Systems" (COMP2410 / COMP6340) in 2008. This section of the course is prepared and presented by Tom Worthington FACS HLM.

How to use technologies to produce useful web sites

Earlier the course looked at the technical details of specific web technologies. By now it is assumed the student is familiar with HTML and XML. We now look at web site design in the extreme: for high volume web sites, rapid development, mobile displays and web sites used in emergencies. It is based on practical experience of designing web sites and on advising on the enhancement and fixing of failed web sites.

Web site design for information professionals.

It is not enough to use a specific web creation tool. The information professional needs a deeper understanding. The standards underlying the web and tools to use those standards are development rapidly, while the underlying principles of information presentation remain much the same. The information professional needs to understand those principles.

Which web technology?

In the time since this course was first presented (2001) several web fads have come and gone. What of the current web technology will be of lasting value? What new technologies will come into common use? Web sites with an emphasis on text, minimal graphics, and which avoid the use of "multimedia" where this does not provide useful information have proved of long term value.

A useful way to learn how to design web sites well is to design them for use in extreme situations. Challenging applications for web technology include: for blind users, for sites with millions of users, for public information during a disaster, for mobile telephones. The emphasis is on flexible designs which will function on a minimum of resources. This is possible with careful web design, but new tools are needed to make it easy to do. The graduates of this course can go on to design those tools.

Formatted for screens, slides and phones

These notes have been reformatted to show some of what is possible with simple web techniques. Formatting has been separated from the text, into separate CSS shared style files, leaving a compact efficient text. The document is designed to automatically detect the display device and adust the layout and content to suit:

1. Conventional PC: Full content and a two dimensional layout on a conventional PC,
2. Projected Presentation: Trimmed content with larger text on a video projector for class room display,
3. Handheld: Smaller more linear text for a mobile telephone, and
4. Print: Interactive menus removed for a printed document.

This is done without using a content management system or a programming language, just HTML and CSS. The web page has been designed to use the minimum of storage, so it will download quickly on a slow link and can be served to a large number of users.

Applying Information Knowledge to Web Site Design

Web sites were originally created by IT staff of organizations. The web has become mainstream, so design is now usually a publishing task for journalists, graphic designers and marketers. But as web sites become larger and more complex the formal techniques for IT applications development can be applied to them and IT professionals can usefully contribute to the process. The Australian Computer Society Core Body of Knowledge for Information Technology Professionals, divides IT into fourteen areas. Some areas applicable to web site design are:

1. Computer Organisation and Architecture: High volume web sites test the limits of available server hardware. A study of the principles of operation of the components of a computer system allow a design to be optimized to meet performance requirements. Mobile and web appliances have limited capacity, requiring an appreciation of how the hardware will affect the development of web systems. How to design web pages for mobile devices will be discussed.

2. Data Communications and Networks: Large web sites impose significant loads on a network.A large site may need to be spread geographically to balance load and the different characteristics of internal LAN and wide area networks must be considered. The security requirements of the web site need to mesh with those of the underlying network. How to design web pages to adapt to available bandwidth in an emergency will be discussed.

3. Ethics/Social Implications/Professional Practice: The design of web sites involves legal, social and ethical issues of a magnitude not seen before in IT.The newness of the Internet and the public visibility of web sites create major problems for web site design. Whereas these issues might have come up a few times in the career of an IT professional, with the web they will occur in almost every project. The requirements for the design of web sites for the disabled will be discussed.

Emergency Web Site Design

Geoscience Australia have installed an updated second version of Sentinel, with a low bandwidth "DIAL-UP" option, as well as a "BROADBAND" connection. The screen-shot shows fires near Point Lookout, Stradbroke Island, Queensland, 30 April 2006.

The web an electronic book?

The first books printed with movable type were designed by Johann Gutenberg and others in Germany in the 1400s to look like hand written manuscripts (1). As an example look at a page from British Library's Gutenberg Bible (c1455).

The format of the book has changed little over several hundred years. To make the web easier to understand, the metaphor of an electronic book is used here. Web sites could be considered the illuminated manuscripts of the 21st century and, if well designed, should be readable for centuries to come.

Many web sites use a process analogous to laying out the sections of a printed book. This can be used for ordinary everyday documents, such as laws, business reports, scientific papers, and manuals for domestic appliances. But the metaphor of an electronic book can be taken too far, producing documents which are not easy to ready on screen and are only useful when printed on paper. The web designer need to balance the need for a familiar structure for the document with the benefits of dynamic content and multimedia.

Book Format for Quick Web Site Design

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:

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

To quickly turn a conventional book or report into a web site:

1. Obtain an electronic copy of the document. This should have already been approved and typeset.
2. Save the document in web format. Open the document with a desktop publishing tool (or word processor) and select "save as web".
3. Replace presentational mark-up.For example replace explicit font sizes and colours with standard heading level codes (such as <H3>) and styles.TheTidyprogram assists with this. Resize or delete excessively large graphics.
4. Separate content into web pages.The cover page becomes the web "splash page", table of contents to home page, chapters to web pages.
5. Add extra navigation.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.
6. Check the document.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.

Examples of quick sites:

• Architecture For Access To Government Information, Information Management Steering Committee Technical Group, Office of Government Information Technology, 1996: a Government report reformatted for the web,
• Universal Service? - Telecommunications Policy In Australia and People with Disabilities by Michael J Bourk, 2000, ISBN 0 646 39159 3: A book reformatted for PDF and the web.

However, an electronic book is not identical to a paper book and attempting to create a close facsimile can produce a poor result. PDF can provide a good facsimile of a printed document, but this is of limited value for on screen reading.

The Universal Document Format?

This set of notes is designed to demonstrate what may be possible in the future. It was prepared in XHTML Transitional format with a set of cascading style sheets (CSS).

With a suitable browser, the document detects the type device it is being displayed on and adjust it format and content to suit. On a desktop computer it looks like a normal web page. When printed, some of the interactive menus are omitted (as they are no use on a non-interactive document). On a handheld device the margins are reduced and the text put in one column to suit the small screen. For projection as presentation, most of the text is omitted, the margins made larger and a background image added.

This automatic rearrangement is done with a few changes to an ordinary HTML document. First of all formatting is removed from the document and placed in a separate CSS file. Obsolete HTML features which are not supported by new devices and which makes flexible formatting difficult is removed. An easy way to check this is to set the document type to XHTML Basic, which omits formatting and old features.

The W3C Markup Validation Service can be used to override the XHTML 1.0 Strict or XHTML 1.0 Transitional document type declared in a document, setting it to XHTML Basic to see what undesirable language features have been used. Tools such as HTML Tidy can be used to automatically collect formatting commands from throughout a document so they can be cut and pasted into a separate CSS file.

However, some web browsers may not support XHTML Basic, or it may not have all the features the author needs. The document type can be changed back to XHTML 1.0 Strict or XHTML 1.0 Transitional before publication.

CSS 2 and 3

• CSS level 2 (1998) includes all of level 1 and adds absolutely positioned elements, page breaks, automatic numbering, right-to-left text and other things. ...
• CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., ...

From: Cascading Style Sheets home page, W3C, 2004/04/20, URL: http://www.w3.org/Style/CSS/#specs

CSS to customize the document

An extra CSS file can then be added to customize the document for each type of device it is to be displayed on:

In this example the default style sheet is first applied and then one of the other style sheets is selected by the web browser, depending on its "media" setting. Some media settings are fixed, such as "handheld" in a mobile phone browser. Some media settings can be changed by user action, such as "print" when the "print" or "print preview" function is selected on the browser.

The Opera 7, Ms_IE 6 and Mozilla browsers will apply the "print" style sheet when the "print" or "print preview" function is selected. Opera 7 will apply the "projection" style sheet when the "full screen" function is selected. Opera 7 will apply the "handheld" style sheet when the "small screen" function is selected. WAP 2 devices (such as telephones) will apply the "handheld" style sheet.

To enable the effect to be demonstrated easily an alternate stylesheets have been included with the same names as the standard media types and can be directly selected by the user in some web browsers (such as Opera 7 and Mozilla/Firefox)..

It should be noted that very old browsers will not recognise any of the style sheets, but may still be able to render a usable web page. The result will look like very early web pages before styling was introduced.

These notes as a web page (default style)

These notes as a presentation (projection style)

Print style

Handheld style on a mobile telephone

... translated

As the text of all versions is in the one document, it can be easily transformed, as for example by machine translation into other languages. Here is what the slides look like when translated from the English language into Chinese using the AltaVista Babel Fish Translation Service. The translation is only approximate.

Chinese, French, German, Italian, Japanese, Korean, Portuguese or Spanish.

Slides

To display this document as a set of "slides" for group presentation, use a compatible web browser, such as Opera 7 (Ms_IE 6 and Mozilla are not compatible) and select full screen mode. This increases the font size to make the text more readable for a distance, omits most of the text and inserts breaks to divide the remaining content. Use "page up" and "page down" to move from slide to slide.

As the size of screens differ, you need to set the text size in your browser so the presentation fills the screen. To set the font size in Opera, select: File > Preferences > Fonts and enter a number in "minimum font size (Pixels). As an example for a screen of 1024 x 768 Pixels, for the minimum font size enter 24 pixels.

The size of the default text in the slides has been set at 150% of that of normal web pages. This has been designed so that web pages will be reasonably readable when displayed to a group.

Adjust the text size so the following table fills the screen with fourteen lines of text, 37 characters wide, and with a margin around the edge equivalent to the height of two lines of text.

First line of screen (37 characters by 14 lines)
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
1234567890123456789012345678901234567
Last line of screen (then two line margin).

Changes from 2006/7

• Some examples deleted.