Extreme web design
For Networked Information Systems
These are notes on website design for ANU course "Networked Information Systems" (COMP2410 / COMP6340) in 2005. This section of the course is 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.
Thanks to Ian Barnes for helping through the explanation of directed graphs and to Lex Weaver for the details of the lab exercise.
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. Some of the newer, technologies, such as XHTML and CSS will be introduced. In particular we look at web site design in the extreme: very high volume use web sites, very rapid development, very mobile and very small screen 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.
Presenting web site design for IT professionals is difficult.
It is not enough to show how to use a specific web creation tool. The IT professional needs a deeper understanding, as they will not only be designing web sites, but developing software to create web sites and to use the web as an interface to computer systems. 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 IT professional needs to understand those principles of how to lay out information to be displayed by an electronic system well.
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? It is suggested here that there should be, and is, a trend back to basic web sites with an emphasis on text, with minimal graphics, and which avoid the use of "multimedia" where this is only decorative and does not provide useful information. 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 discussed include: for blind users, for sites with millions of users, for public information during a disaster, for mobile telephones. The emphasis here is on flexible designs which will function on a minimum of resources. This is theoretically possible now 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:
- Conventional PC: Full content and a two dimensional layout on a conventional PC,
- Projected Presentation: Trimmed content with larger text on a video projector for class room display,
- Handheld: Smaller more linear text for a mobile telephone, and
- 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 IT 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 though of as a publishing task for journalists, graphic designers and marketing people. 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:
- 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.
- 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.
- 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
Web sites are no longer scientific curiosities and are used for essential public services. Failure of those web sites can result in economic loss and a threat to public safety. Designers have a legal and ethical obligation to use available techniques to design accessible, efficient and reliable web sites.
On 18 January 2003 a state of emergency was declared in Canberra. Fire destroyed more than four hundred houses and claimed four lives. The web was one of the tools used to fight the fires and manage the emergency. However, at the time of the emergency there was no clear link from the ACT Government home page to the emergency information (a link was added shortly after the emergency began).
One of the emergency systems overloaded by the magnitude of the disaster was "Sentinel Hotspots"; a web based application used by to track the fires by satellite. You can read about this application and how it was modified to cope with the load in "Dealing with Disaster: Using new Networking Technology for Emergency Coordination.
From: Dealing with Disaster: Using new Networking Technology for Emergency Coordination, Tom Worthington, 29 October 2003, URL: http://www.tomw.net.au/2003/enet.html
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:
- Obtain an electronic copy of the document. This should have already been approved and typeset.
- Save the document in web format. Open the document with a desktop publishing tool (or word processor) and select "save as web".
- 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.
- Separate content into web pages.The cover page becomes the web "splash page", table of contents to home page, chapters to web pages.
- 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.
- 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.
ANU E Press: e-books
The ANU E Press provides an example of the the book metaphor with titles such as "Out of the Ashes" in print, PDF, HTML and Palm Reader format (for Palm PDAs):
AVAILABLE NOW
New Edition
Edited by James J Fox and Dionisio Babo Soares
304 pp
ISBN 0 9751229 0 8 (Online document)
ISBN 0 9751229 1 6 (Print version) $34.95 (GST inclusive)Out of the Ashes is a collection of essays that examine the historical background to developments in East Timor and provide political analysis on the initial reconstruction stage in the country's transition to independence.The volume is divided into three thematic sections - background, assessment and reconstruction - bringing together the experiences and knowledge of academic researchers and key participants in the extraordinary events of 1999 and 2000. ...
From: Out of the Ashes: Deconstruction and Reconstruction of East Timor, ANU 10 December 2003, URL: http://epress.anu.edu.au/oota_citation.htm
The electronic editions are each available as one file and as separate chapters. All electronic versions retain the format of the printed book, including page numbers.
Chapter 3 East Timor: education and human resource development:
- Print: 13 pages.
- Web: 165Kbytes, made up of Text 23 kbytes, and six images of 142 kbytes. It should be noted that the images are not of graphical information, but are pictures of tables of text.
- PDF: 914 Kbytes. The tables are displayed as text in the PDF version. One table is displayed in landscape mode. The only image is the ANU logo.
- E-book: 138 Kbytes of Palm Reader format. This is primarily intended for for Palm PDAs, but reader software is alsoavailablefor Macintosh and MS-Windows systems.
The PDF version of the document provides a good facsimile of a print document, including very legible tables. However this is of limited value for on screen reading.
Web and Wap 2
The HTML version of the document uses frames and lacks a workable non-frames option. On a non-frames device, such as a WAP 2 mobile telephone, all that is displayed is an error message:
WAP 2 display of "Out of the Ashes: Deconstruction and Reconstruction of East Timor", ANU 10 December 2003, URL: http://epress.anu.edu.au/oota/frames.php?page=3&chapters=h
If the HTML file which contains the text is manually selected, then the text will display. However, the left and right margins of the document waste screen space on a small screen:
From: Chapter 3, East Timor: education and human resource development, Gavin W. Jones URL: http://epress.anu.edu.au/oota/ch3.htm
Opera small screen viewer
The same HTML does display reasonably well on a small screen viewer, such as Opera:
Text from: Chapter 3, East Timor: education and human resource development, Gavin W. Jones URL: http://epress.anu.edu.au/oota/ch3.htm
But having been stored as a GIF image, the text of tables does not display legibly:
Table from: Chapter 3, East Timor: education and human resource development, Gavin W. Jones URL: http://epress.anu.edu.au/oota/ch3.htm
Palm Reader Version
The tables are more legible in the Palm Reader version:
Table from: Chapter 3, East Timor: education and human resource development, Gavin W. Jones URL: http://epress.anu.edu.au/oota/ch3.htm
Rather than providing the reader with useful choices, these versions create a maintenance problem with multiple electronic versions of each book. The one-file PDF version of the book is 20 mb and so too large to be practical for on-line use. The e-book versions provide few benefits over the HTML version. The HTML version does not comply with accessibility guidelines for the disabled.
A better alternative would be to put the effort into improving the HTML version of the book and abandon the PDF and e-book versions. The HTML could format well enough to replace the PDF version as a print facsimile, but be compact enough to operate on a PDA. In addition it could be made to function on a WAP 2 telephone and with a screen reader for the disabled. The cost of producing one good electronic version should be lower than that of six versions.
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 what sort of device it is being displayed on and adjusts 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 simple 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.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">...
XHTML Basic identifier
Web tools, such as W3C's Editor "Amaya" will enforce the restrictions imposed by the XHTML Basic definition, not permitting the web author to include formatting in the document.
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:
<!-- Default stylesheet -->
<link rel="stylesheet" href="../../all.css" type="text/css" />
<!-- For print devices -->
<link rel="stylesheet" href="../../print.css" media="print" type="text/css" />
<link rel="alternate stylesheet" href="../../print.css" title="print" type="text/css" />...
<!-- For handheld devices -->
<link rel="stylesheet" href="../../handheld.css" media="handheld" type="text/css" />
<link rel="alternate stylesheet" href="../../handheld.css" title="handheld" type="text/css" />
XHTML Code, From: Website Design, Tom Worthington, 2004, URL: http://www.tomw.net.au/2005/wd/index.html
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 2004
- Document converted to XHTML 1.0 Transitional, with additional CSS added for alternate stylesheet.
Note: 1
The Gutenberg Revolution: The Story of a Genius and an Invention That Changed the World by John Man, Headline, 2003