Website Design

Items

See Also

Extreme
web design

For Networked Information Systems

These are notes on website design for ANU course "Networked Information
Systems" (COMP2410 / COMP6340) in
2006. 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.

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,

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.

Social Implications: Australian Regulation of Biscuit Recipes

Web developers need to keep in mind that there are numerous laws covering what information can be published. As an example, in Australia the word 'Anzac' is protected under federal legislation. This even applies to biscuits, where the term "Anzac cookies" is not permitted:

Since the word 'Anzac' was coined to describe the joint Australian and New Zealand Army Corps during World War One it has come to represent the values of courage, determination and mateship epitomised by those who serve in the defence of our nation. The Protection of Word 'Anzac' Regulations were created in recognition of the importance of the word to Australians and the deep and enduring interest of the ex-service and wider community in ensuring that it is not used inappropriately. ...

Approvals for the word 'Anzac' to be used on biscuit products have been given on the proviso that the product generally conforms to the traditional recipe and shape, is not advertised in any way that would play on Australia's military heritage, and is not used in association with the word 'cookies', which is considered to have non-Australian overtones. ...

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).

Fires on Stradbroke Island Detected by Sentinel 2

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:

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".

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.

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. ...

Palm Reader Version

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.

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.

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.

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)123456789012345678901234567890123456712345678901234567890123456789012345671234567890123456789012345678901234567123456789012345678901234567890123456712345678901234567890123456789012345671234567890123456789012345678901234567123456789012345678901234567890123456712345678901234567890123456789012345671234567890123456789012345678901234567123456789012345678901234567890123456712345678901234567890123456789012345671234567890123456789012345678901234567
Last line of screen (then two line margin).