Writing by Peter Hilton

Web Page Design Principles

All of the pages on Hilton Harbour are generated from a single page template. The design and HTML implementation of both this template and the content of each page follow certain principles, which are explained on this page. These principles, and the reasons behind them, are generally not original; I include them here so that Hilton Harbour is an example, rather than as a style guide.

Minimal use of graphics

My view on graphics, which is reflected in this site, is that it can be worth including

  • a smallish logo for the web site in the top-left corner of every page, because this helps usability
  • photographs, which should appear as small thumbnail images that link to full-size versions, because they can add value to a site  WHY? 
  • icons, sparingly, to make it easier to use familiar navigation links without reading the text (so far I only have small icons on the home page, which does not have photos)
  • good illustrations that are directly related to a page's content, which are very rare;

but all other graphics are a waste of time and space. I share Jakob Nielson's reasons for excluding most graphics.

Legible text

Maastricht: the flag in the main square If your browser supports style sheets, and I haven't completely bodged the style sheet for these pages this text should be fairly legible. To this aim I am using the Verdana font ( WHY? ) in the default font size.

No stolen images

I wonder what proportion of images on web pages were just lifted from other web pages. The two reasons for not copying graphics from other web pages should both be obvious:

  1. there is no excuse for using someone else's images, especially photographs, without even asking for permission to do so
  2. other people's graphics are unlikely to add any value to, or be at all relevant to your web pages - they will only increase download times.

No frames

I don't use frames because I don't like them. I don't like them because of some fundamental problems with frames and the way that frames sacrifice user-interface stability.

No 'under construction' notices

There are surprising number of web pages with 'under construction' notices. Saying that a page page is 'under construction' merely means that the author intends to change it in the future. Presumably, then, none of the other pages will ever be updated. That's like a salesman saying 'I'll be honest with you', which makes you doubt everything that he said previously. This was already old in 1995: on Suck.com.

Validated HTML 4.0

Valid HTML 4.01!

Invalid HTML guarantees unpredictable results in different browsers and environments because there is no standard way of rendering invalid HTML - the browser just makes a best guess. What looks okay on your browser may well be a mess on someone else's. The results of using Cascading Style Sheets with invalid HTML are even more unpredictable.

Valid CSS!

Style sheets should be checked for the same reason, using a tool like the W3C CSS Validation Service or CSSCheck.

The WDG HTML Validator is useful because you can upload files for validation, from browsers that support file upload.