Dominic J. Thoreau

Web Design

This was originally written in several components, dating 1995 - 1999. Portions of this was when I was working for Landcare Research. Presumably some ownership, strictly speaking, belongs to them. It would be very hard to sort out which bits.Mind you, computing technique isn't really their focus

Web Design strategies.

The initial explosion of the world wide web has spread a tool originally intended for scientific collaboration in turned it into something that tries to be all things to all people. HTML and the Web need to have many uses: Brochures for companies, internal document sharing within companies. This has put an ever increasing amount of stress on a tool that is ill-designed for the purpose it is being used. New developers have a tendency to develop for the platform they are currently using. Also shown is a "coolness" factor, and new language features get added simply because they're available.

This document represents my current state of mind on the design of web pages. I view the internet as a communication medium. The web has (I believe) been stretched to breaking point by those wanting to duplicate brochures in it. Adobe Acrobat is more suited to this than the HTML considered vanilla on the web.

Note: I've just seen many of these points made in great clarity, and better than I had organised them, in Lincoln D. Stein's book: How to set up and maintain a Web Site. URL to follow at 11.


The lowest common denominator.

In the period since Tim Berners-Lee invented both Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP) as part of a new system for first CERN and later the National Center for Supercomputing Applications (NCSA), the standard that defines has been "defined" by many differing sources. While originally the standards were owned (as many open Internet standards are) by the Internet Engineering Task Force (IETF) and has officially been given to the World Wide Web Consortium (W3C), many pseudo versions have been released. Both Netscape and Microsoft have added proprietary extensions to their browsers in a misguided attempt to steal a larger market share over the other, and the W3C have released several standards in a desperate effort to provide a formal document of current practice.

Unfortunately, these developers have attracted their share of developers. Many sites have "Best viewed in Browser X" tags. A growing and increasingly vocal group have since sprouted "Best viewed in Any Browser" tags as a direct backlash against this.

Writing your pages to a given standard ensures all browsers who meet that standard will view your content adequately. Using earlier version of the stand ensures

Adherence to existing standards (mostly) guarantees readability

Netscape aren't the people who make the standard. This belongs to another group, the Internet Engineering Task Force (IETF), a group of volunteers who have been responsible for all the major Internet standards. The HTML standard has changed several times. The way to ensure that your code meets the required stands the test of time, by making sure it adheres to a real standard, and doesn't just look good in a particular product. Validation services exist that will point you toward the inconsistencies in your code. There are good technical reasons for this.

The spirit of HTML.

HTML is a language for text layout which implies functions for text marked up in certain ways. Just because you want a differing text size between the 1st and 3nd headers doesn't mean you should use H1 and H3 to do it. Some browsers may summarize Heading fields for use as glossaries.

While this is not ideal, it is definitely true that different browsers will display the same page differently. Writing code that is correct in both syntax and spirit will help ensure that viewers, regardless of environment, will get the meaning of your pages.

For example, if you forget to close a <TABLE> tag, Netscape will not attempt to display anything from that <table> tag onwards. This may leave large portions of your text invisible. MSIE will assume a </TABLE> on the end of your document, but this may not have been your intent.

Pagination Issues

Create multi-page documents when relevant.

Don't be afraid to split up your message between several pages (especially index pages). Some people pay for the volumes they download from their provider, and don't really want to pay for information they're no interested in.

Avoid unnecessary page breaks.

On the other hand, if you have a reasonable amount of material, it is all related, and all parts will age equally, put them all on one page. WWW pages can scroll, so feel free to write a fair amount on one web page.

Attract users

Web sites are (or should be) designed to be viewed. But to get viewers, they need to be told about you! There are several avenues for this.

Search engines. While search engines may or may not eventually stumble across your site, some have URL's where you can go to submit your details to them.

Directory services, of which Yahoo!(tm) is the one most people know of, are good mechanisms for getting referrals from surfers who are interested in your specific topic.

Keep your content fresh to keep visitors returning.

A good way of keeping viewers coming back is to change your content (while remaining within the topic) often. Give people a reason not only to visit once, but to return on a regular basis.

Also, if your writing is for a skilled audience, bear in mind that these users want access to information they understand. Don't make them fight your design for it.

Consistent look and feel.

Many users have invested considerable time and effort into learning how to use their computers. Forcing them to learn new navigation techniques to work through your site is unlikely to make


Images, when used well can add greatly to both the visual aesthetics of a page and it's ability to convey information. However, when images are switched off, the design impact can be greatly reduced.

ALT: adding ALT attributes to your IMG tags as a descriptor to help users decide whether they should load your image. Comments like "A Picture of Sales Rep" and "An Important navigational tool" encourage the user to load the image, where "Click here" or nothing do the opposite. Adding more meaning to a click like "Click here to visit our Sponsor" is better, as it helps the user make judgement on the potential content of the image.

HEIGHT and WIDTH: Images, when scaled are done by the client. Use the HEIGHT= field in the IMG tag to set this, and the width will be scaled proportionally. If the image is considerably larger, set it up as a link direct to the full image.

Consider adding navigation tools to supplement image maps.

Image maps are fine if you can guarantee that both you and your viewer have bandwidth coming out of your ears. Unfortunately, in Cyberspace, no you can tell your terminal is a dog. While I was a tertiary student, I used to surf the Internet. My tertiary institution was connected to the net via a 28.8 modem. During peak (8am - 7pm) bandwidth was scarce. Sites with huge image maps on their initial page (Check out the White House for a prime example of this) annoy me. If you're going to use image maps, use them for things like Toolbars, and keep the same on every page, so I only have to load them from the disk cache. Make your text-only front page the default (index.html) instead of a choice.

Wallpaper is optional, your page should be okay without it.

One of the options in one of the newer versions of HTML is background wallpaper. Ideally, this should be relevant, and not stand out. Using a graphic tool to grayscale or emboss your image is a good idea. The content is important, not the background. Choosing pastel shades to match graphics on your page looks good.

You should also bear in mind that the user can configure their browser to override your settings. If you choose to write in white text on a black background, you should consider the repercussions if the user prefers to view all pages on a white background, while leaving the text color to default.


Even if you choose to ignore every single word I've said otherwise here's one you shouldn't miss: Test your pages. Test every single page. Load every single image. Follow as many of the links as possible. View your pages using as many different browsers as possible (at least Netscape and Internet Explorer). Find the earliest browser you can, and test with that. Spell check your pages. Get someone else to proofread them. Ensure every single external link works (do this periodically). View your site on an alternative platform (Mac, or maybe WebTV).

Allow for end-user feedback to help ensure quality/usability.

The Internet is an interactive medium. Invite your users to Leave the author a note.

Embed "default pages" within long URLs.

If you intend to hand out your URL in non digital media (i.e., print), you should include indexes in every sub-directory to ensure that people who only remember part of it can get to what they want.

Dynamic content makes for more interesting pages.

If your focus is providing data to the world, as opposed to just being cool, you should try to bring together the people who create the data, and the data itself. Why should the working data and the presentation data have to be moved to the web site to be presented ? Just get the web software to read it as it is used. Simply program pages in languages like C, Tcl, and Perl. CGI is great, as it keeps the data you present to the world up to the minute, by generating your pages as the need arises.

Avoid "Click Here" link text.

Putting Click here as the text for your hyper links is not a good idea. You can't guarantee that the remote user is using a mouse. Some browsers (like Microsoft Internet Explorer ) will (an option) print out all the links in a document in a table at the end. Using meaningful labels makes this much more useful. If, however, you're sure that the target

Beware the bleeding edge!

Frames as a navigation tool, not as a feature.

If you use frames, makes sure that links leaving your site restore the window to its original state. Telecom NZ doesn't, and the result is really shocking. At least, when I looked, they didn't.

Experience much and distill quality.

Darwin's concept of "survival of the fittest" (a.k.a. "Natural Selection") is a useful technique to apply to web development. Simply put, if you see a page on the web that you believe has good design you can try to apply similar techniques to your site.

Also, reading source code of other sites is a good method of learning more advanced coding techniques. I suspect a substantial of web developers learnt by this method (I know I did).

For the interested, there are numerous sites devoted to the creation of web sites (like this one). I recommend Jakob Nielsen's , and .

But then again...

However, these only hold true if you're writing for users with unknown technology. If you're writing for an intranet you can guarantee certain features, and design in an effort to leverage these features. Developers on an intranet (especially if it's within a single location) can pretty much be assured their users will be running a specific version of specific browser, have it configured in a certain fashion, and have a certain amount of bandwidth (Netscape 4.0 with images, style sheets and Java on a 100Mb/s LAN, for example)

Comments on usability still hold true though.

URLs mentioned:

Link Site title Site Comment Jakob Nielsen's Site Dr Nielsen, a former Sun Distinguished engineer, writes about many topics involving end-user interactions with computers in general, and the web specifically. A lot of his opinions are reflected here Web Pages that Suck The school of good web design by avoiding obvious mistakes ESPN Sportszone Concise, well designed, friendly sports news. Up to the minute. Yahoo ! The original Portal site The Whitehouse The U.S. center of government, originally had an un-navigable image map Adobe, Inc. Adobe make Acrobat, a very nice product which renders documents consistently, using an "as printed" metaphor, where the web deals more in "layout intent"

Points that I haven't written about yet

  • Banner Advertising
  • META-keywords
  • Reciprocal links
  • Log Analysis

Dominic J. Thoreau
I welcome feedback on this document. Anything that I agree with will be folded in a later version. This is version 2.0

© 2004 Dominic J. Thoreau - this is
Updated and uploaded Fri Dec 29 11:45:07 2006