Guidelines for Site Design
Web site designers must balance the needs of the intended users of the web site, the demands of the client and the capabilities of the network and computer equipment.
Unlike computer applications for use in an organisation, the web designer has little control over the computer network and equipment used to display their work. The web site should be first designed to function on the most limited device used (a small monochrome one column text screen for example). The design can then be be enhanced with fonts, color, images and multiple columns, if available and required. The overall structure of the site should be designed using a site map.
Consider the audience and purpose
In designing a web site consider who will use it and how they will use it. As an example some information will be read on screen and other information printed out. Web formats (such as HTML) were originally designed for reading on screen, whereas PDF was derived from the Postscript print format. It is therefore not surprising that HTML is better for on screen reading and PDF for printing. As an example the "Graduate Diploma in International Health" web page from Monash University is provided for on-screen viewing in HTML. The main text of the page is in a central column which takes up one third of the width of the page. There are navigation menus on the left and right of the page. This is a good arrangement for on screen viewing, but results in a printed page with one narrow column of text and large white spaces:
From: "Graduate Diploma in International Health", Monash University, 27 October 2003, URL: http://www.med.monash.edu.au/epidemiology/pgrad/ih/index.html
Print V screen
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:
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
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.
Two versions of the content: screen and print
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.
W3C have CSS 3 in development:
CSS level 3 is under development. It includes all of level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more.
From: Cascading Style Sheets home page, W3C, 2004/04/20, URL: http://www.w3.org/Style/CSS/#specs
This might one day provide a suitable replacement for PDF, for on-line information intended to be printed but also available for viewing on-screen. However, there is not yet sufficient support by browsers in use.
Aspect Ratio and Display Size
The web designer should try to cater for the greatest range of screen sizes and shapes possible
Size
- Desktops: SVGA (800 x 600 pixels) or higher,
- Web appliances: VGA (640 x 480 pixels) for older computers and appliances, and
- Hand held: QVGA (320 x 240 pixels), or smaller for PDAs, phones and TVs.
Aspect Ratio
- 4:3: Desktop PCs and TVs,
- 16:9: Wide-screen TVs and laptops, and
- 3:4: PDAs, phones.
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
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.
| Header: logo, page title and top level menu | |||
|
|||
| Footer: copyright and legal notices. |
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 for some formatting and tables may need to be used.
Text styled with 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:
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
Referencing the CSS
The CSS is referenced in the web page:
...
<HEAD>
...
<LINK href="/templates/anustyle.css" rel="stylesheet" type="text/css">
From: Discover The Australian National, 22 May 2001, URL: http://www.anu.edu.au/discover.html
A style defined in the web page
Later in the HEAD an additional style of tinylink is defined for use anywhere on the web page:
<STYLE> .tinylink { font-family: Arial, Helvetica, sans-serif; font-size: 8pt} </STYLE>
</HEAD>
Font commands in the web page
In the body of the document some font commands are used:
<BODY ...
<FONT SIZE="-2" face="arial, verdana, helvetica, sans-serif"> <center> Please direct ...
As well as the additional style:
<A HREF="/comments.php" class="tinylink">...
The effect of the styles cascade, that is the local style overrides the definition in the header and that overrides the external definition. In this case the font size will be changed, while the font color will be unchanged.
Fixing text at, 12 points, for example as suggested by Lengel, will cause difficulties if the user's screen is significantly smaller or larger than that the page was designed on. Web browsers have a default font size which should have been set to be readable on the particular screen. Most text on the web page should be set at the default size and other text, such as headings, should be set relative to default size. Serif fonts (such as Times Roman) are generally considered easier to read for main text, but sans serif (such as Helvetica) are better for low resolution screens and headings. As with text size specific fonts should be avoided and style commands used to suggest fonts for specific elements of the text. As an example a heading should be marked as a heading <h1> and then styles added for text size and font.
In this way if the browser does not have the specific font (or the user can't see it), another can be substituted in a systematic way. Utility programs, such as Tidy, can be used to extract collect text definitions from a web page into a CSS style sheet. An example of a web page using individual definitions is "Links on the World Wide Web". An example of a web page using an internal CSS style sheet is "The Federal Government 30% Rebate". An example of a complex style sheet is that for the W3C's documents: <http://www.w3.org/Style/main.css>. This includes comments indicating some style commands cause difficulties with some web browsers.
Images
GIF and PNG provide lossless formats for perfectly rendering images, such as logos and diagrams. JPEG provides a lossy format, which will render a not completely accurate version of the image, which is useful for photographs.
Images should be sufficiently large to display on the largest anticipated screen, but not so large that they waste bandwidth and storage.
Images require alternative text
Each image which conveys information should be accompanied by a text caption which describes the image for readers who can't see the images. Decorative images do not require captions (and should have a null ALT tag). Including the size of the image in the IMG statement will aid the web browser to lay out a web page quickly. Similar considerations apply to animations, sound and video.
Color
A color is either a keyword or a numerical RGB specification.
The list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are defined in HTML 4.0 ([HTML40]). ...
Cascading Style Sheets, level 2, CSS2 Specification, W3C Recommendation 12-May-1998, URL: http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color
The web site should have a consistent color scheme, using a small number of colors. This can be best achieved by using styles to apply colors to all elements. Color should not be relied on to convey information as some people can't see some colors, or may have a monochrome screen.
Links
Longer text links may work better than cryptic ones and image links when combined with text may be better (more on this later):
Users sometimes made their decision and clicked on the text (which wasn't a link) before the GIF links even appeared, so clearly the additional information helped them decide...
A weak positive correlation exists between image links (such as graphics that look like buttons) and user success. However, we saw one minor problem with image links: because they don't change color after the user clicks them, there is no visual cue that they have already been traversed. Users did use visual cues to initially identify the image links by moving the mouse across the page and watching for the cursor to change to Netscape Navigator's pointing finger.
Excerpt from Web Site Usability: A Designer's Guide, User Interface Engineering, 1999, URL: http://www.uie.com/bookexpt.htm
Layout with CSS
Early web pages (around 1994) used a simple single column of text, with HTML headings (H1, H2...), to structure the text. Browser developers introduced a number of formatting elements to allow for better layout on the pages (such as being able to center headings). However, this did not allow multiple columns of text to be easily laid out and the practice developed of using the <table> for formatting the page. This was seen as unsound design as the content (images and text) and become intermingled with the formatting (fonts, colours, positioning) of the document, but there was no workable alternative.
CSS was intended to provide a separation of the content and style and allow column layout. However, due to limited support (and incorrect implementations) CSS has mostly been used for styling text but not layout. Newer web browsers now provide enough support for CSS that web designers are introducing table free designs. Developers are trading off compatibility with older browser, for more efficient and flexible design. One example was introduced in early 2004 by the online subsidiary of John Fairfax Holdings for their on-line newspapers:
An important announcement from the f2 network
(including smh.com.au, theage.com.au, mycareer.com.au, domain.com.au, drive.com.au)
You appear to be using an older browser. From early 2004, f2 network sites will no longer offer support for browsers earlier than Microsoft Internet Explorer 5, or Netscape Navigator 6. ... A text-only version of both smh.com.au and theage.com.au is always available.
If you wish to upgrade your browser, a new version can be obtained for free from the following sources:
Microsoft Internet Explorer Netscape Navigator Mozilla Opera Apple Safari ...
An important announcement from the f2 network, f2 Limited, 2004, URL: http://www.f2.com.au/browserstandards/
Sydney Morning Herald Technology site
One web site using CSS for layout is The Sydney Morning Herald Technology site. This has a default CSS file and one specifically for print:
... <head>
<title>smh.com.au - The Sydney Morning Herald Technology</title>
... <meta name="author" content="Andrew Coffey" />
<style type="text/css" media="screen" title="default">@import url("/technology/css/smh_tech.css");</style>
<link href="/technology/css/smh_tech_print.css" rel="stylesheet" rev="alternate" type="text/css" media="print" />
</head>
The Sydney Morning Herald Technology, Head section XHTML code (emphasis added), f2 Limited, 2004, URL: http://www.smh.com.au/technology/index.html
Default style sheet, f2 Limited
The default CSS positions the masthead, columns and footer on the page:
/* ::::::::::::: PAGE LAYOUT ::::::::::::: */
.standardsNote {display:none} ...
#masthead {position:relative;height:70px; ...
#trail {position:relative;height:23px; ...
#nav {position:absolute;top:122px; left:0;width:112px; ...
#content {position:relative;margin:0 170px 0 113px;padding:15px}
#columns {position:relative;margin:1em 0 0 0}
#col1 {position:relative;float:left; width:220px;margin:0;z-index:1}
#col2 {position:relative;float:right; ...
#rhc {position:relative;float:right; ...
#footer {clear:both;text-align:center; ... ...
From: Default style sheet, f2 Limited, 2004, URL: http://www.smh.com.au/technology/css/smh_tech.css
Print style sheet, f2 Limited
The print CSS removes some of the graphics and turns off some of the formatting to suit a non-interactive, printed page:
body {background: white ...
/* ::::::::::::: TURNED OFF ::::::::::::: */
.standardsNote, #nav, #subnav, #rhc, #trail, #title, #masthead .banner, #masthead .textad,.articletools-top, .articletools-bot, .rhclinks, .rhbox, .newsstore, .sort1, .sort2{display: none!important}
iframe, #footerads, .islandad, .islandad small, .megaiwos, .domcol, .ad1, .ad2,.adwof, .rhad{display:none !important}
...
From: Print style sheet, f2 Limited, 2004, URL: http://www.smh.com.au/technology/css/smh_tech_print.css
In the next few years we can expect to see more web sites adopt this method.