Current Students

The Straight Web Style Guide

Created: 8 Dec 1997, Stephen Peter, S.Peter@unsw.edu.au

This Guide will give you a range of suggestions about how to go about creating a quality web page. It doesn't attempt to explain how to mark up text to create HTML pages, instead it concentrates on high level do's and don'ts relating to page layout and design.

Many of the examples of good and bad practices have been taken from web pages done by the students doing my elective subject "Multimedia on the Web" (aka "WWW in Pres & Comm") in Session 2 1997.

If this guide seems too boring, I've also written The Bent Web Style Guide.

Content
Have a look at Simone Koertge's homepage and I think you'll see that despite the chaotic layout the content is interesting.

When creating web pages always endeavour to make them interesting!! I know this sounds dopey, but try _really_ hard!


This point is debatable, but many people do suggest that web pages be less than 3 screens in length.

Don't put too much information on each page: it's very easy to break information down onto separate pages, that way people can easily skip through to the information that interests them. There's really two points here: don't make pages too long and put "detailed" information on separate pages.




Include links to definitions of terms used: someone who knows the meaning of the terms doesn't want to wade through the explanation, but someone unfamiliar with the information can follow the link...

Melanie Leow's references page (from her guide to Tado Ando's "Church on the Water") gives info on where the data she is presenting came from. The page also has links to other web-pages on the topic.

When you use material from other people, acknowledge that fact! The material could be cute images from some web page, or it could be text from a book - either way, acknowledge where the material came from. Either provide a link to the source document (if it's on the web) or provide a "refernces" section with a list of sources (and links to those that are web pages).

The title is displayed at the top of the browser application's window. A good example of a poor title is Tim Johnston's homepage.




Try to make the contents of the page's <title> as meaningful as possible. This is particularly important if you want your page listed with search engines because they use the title in their listings.

Never mention that your pages are under construction. All web pages should change over time, so in a sense all web pages are under construction. If the page is "public" it should have enough information on it so that it should be under development not under construction.

Michael Hay & Brian Hollis give an example of this in their page about the transport options in Kirribilli (a suburb in Sydney). To make matters worse, the "click here" text aren't even links!

Avoid using things like "click here" - they look particularly silly if the page is printed. Hyperlinks should occur within the text of the page. If you're creating a list of links, don't simply list the link, if possible give some information about the page that you're linking to. If you provide something like a summary the reader will be able to determine whether they want or need to load the page.

Layout
Michael Hay & Brian Hollis give a good example of a strong layout (using a black background) in their guide to Kirribilli.

Before you get too far into developing your web page(s) it's very important to decide on a style and then consistently follow that style.



The guide to Bondi by Connie Argyrou, Tim Johnston, Amelia Kelly & Danielle Lowy shows what not to do! The links on their title page are almost invisible becuase of the background colour chosen, and on some of the other pages the background image overpowers the text.

Decide on a background colour or image and (if you aren't using the standard horizontal line <hr>) a horizontal line image, these may change in different parts of your web pages, but they should change in some way that is consistent and clear to the reader.





The guide to Bondi's "Page 11" includes requests for Optima, Tahoma, Wide Latin & Impact - none of these fonts would be on most computers.

Use the default font for the "body" text unless it's really important that you use a different font. Be aware that many people may not have the same set of fonts as you, so list alternate fonts, and don't rely of the reader seeing the page in a particular font. If you do specify fonts, list an alternate font incase the first font is unavailable, and only use two or at most three fonts across a series of pages.





Design your web pages so they work on (comparatively) narrow screens (600 pixels wide): many people will be viewing your page on computers with 640x480 resolution screens!

Connie Argyrou's brief page shows a strong layout with the text in a block that is easy to read. Most of the other pages from her guide to her studio design project have similarly consistent but differing layouts.

Create a layout such that lines of text don't go across the whole of the browser's window, and keep your paragraphs short!





My (Javascript) Naughts & Crosses game is an example of a page that doesn't work with Microsoft's Internet Explorer version 3 (but does work with version 4).

Don't create pages that require a specific web browser. If at all possible try to make sure that your pages will load and look reasonable on any and every browser.

Usually a white background (or one that's light) works better that a black background. It's much easier to read black text on a white background than it is to read white text on a black background.











Make each individual page (text and graphics) less than 50k. This is to ensure that people won't be waiting hours to have your page download. If you aren't sure how many Kbytes your page is then have a look at tucows (www.tucows.com) or a similar site that lists Internet oriented software. Alternatively, I've written a (win95) program called "HtmlSize", which check through all your web pages and display the total sizes of each of the pages (it'll even write a report if you wish).




Don't use frames unless there's a good reason! They're confusing and most browsers won't correctly bookmark or print frames-based pages.



Don't use proprietary formats such as Adobe Acrobat PDF files, use HTML.




Don't require people to have a particular 'plug-in' before they can view your pages.





Try to make people aware of "where they are" within the web of your pages. Include a "footer" that lists all the sections of a site with the present section highlighted in some way.





Include (in a footer) the name and email address of the author on the page, as well as the "last updated" date. It can also be useful to include a non-net means of contact: address, fax and/or phone.





It's sometimes useful to have a 'revisions' section: explaining the who, why and when of changes to the document. The text could be inside a comment or could be visible to readers, depending on the situation.





Don't have really long tables, many browsers wait until they can display the whole of table before displaying any of the table. If possible break the table up into a series of smaller tables.



Try to make sure that the page looks OK when it's printed.





Don't use spaces and/or underscores in filenames. Spaces are illegal in filenames on the web and underscores are very confusing - browsers underline links so the underscore character is "invisible".

Images




Don't use images unnecessarily: many people on the Internet have slow connections particularly where they and the web page are on different continents!





Always use the ALT attribute with images. The alt text will be displayed if the image can't be found, or if the browser that can't display the image (or the reader has "turned" images off).






Don't use large images (keep images under 750x500 pixels), and where possible, use small "thumbnails" to link to images. If you use thumbnails, display the size of the image being linked to (in Kbytes and pixels) beside the thumbnail.



Try to make your images as 'efficient' as possible:









If the image is something like a "real scene" use the JPG format. Many graphics applications allow the JPG quality setting to be set to a particular value. Try saving the image at Q=85 (high), then Q=70 (medium), Q=50 (low) and finally Q=30 (poor). Each image will be worse than the previous, but depending on how large the image is and the required quality, it might be possible to use a setting below 70.














If the image is like a diagram (has few colours) use the GIF format. Many graphics applications allow the image's palette size to be manipulated. Images with only two colours will be much smaller than images with (the maximum) 256 colours. Try reducing the number of colours to 64 (then save the image using a new name), then 32, then 16. Reload each of these images and compare the colour rendition. If you can see that the image has (for example) 5 different colours, try reducing the palette to 8 (then save) and then to 4 (and save). When reducing the palette size use base-2 numbers (2,4,8…128) because that's most efficient for the GIF format..

Ken Ding's posthetic foot design includes a page with an animation of the device moving - the animation inparts information...

Don't use animations for no purpose. Using an animation to explain something is fine, but putting a useless animation that spins or twirls or something is a waste of bandwidth that will really annoy some readers.


The Guide to Surry Hills includes good imagemaps on the shopping and drinking pages. The imagemaps are often the most efficient way to present information that has a geographical component.


Some people recommend against using imagemaps because it's often hard to find which parts link where and because they don't allow the reader to see where they've been. If properly done, imagemaps can be successful, just be careful to make sure that graphics is simple (and clear) and that the icons used will be understood by the readers (remembering that people from all over the planet could read the page...). If you do use an imagemap, provide a text based list of the links for the graphically-challenged.






Include the width and height attributes whenever using images! These attributes allow the browser to calculate how much space an image will take up and therefore the following sections can be rendered before the image has been downloaded.






If you use an image as a separator, consider creating a 1x1 pixel GIF image of the appropriate colour, and then use the image tag's width and height attributes to "re-size" the image. An alternative could be an image 10 pixels high and 1 pixel wide to create a vertical variation of some kind.

A good exception to this is the title-page Simone Koertge's Waterloo Housing design project which has a strong background that works. Though I do think a quieter alternative would have been as good.

If you use a background image, try to make sure that it does not interfere with the pages content. There's nothing worse than being unable to read the text on a page because the text colour is close to the page's background colour. If the background image has a pattern, make the pattern low-contrast compared to the rest of the background image.


Validation



Check you web pages using more than one web browser, also use an older version browser as well as (or instead of) the latest version.



Get you web pages checked by one of the web based validation services.