Website Design

A few technical details about how this site is written.

It won't escape your notice that this site is pretty low tech in design with almost everything in basic HTML. From reading useit.com I've learned that good usability pretty much precludes the use of pop up boxes, frames, adverts and tinny background musak.

Here's my quick checklist of web design issues...

1 - The absoulute basics - make it available

• Compatibility with any web browser
  There are two validation tests available at W3.org - passing these ensures that *any* version of *any* browser, will give at least a reasonable approximation of the site (maybe with different font's) but won't produce a load of errors or a blank screen.
  HTML validation at w3.org
  CSS validation at w3.org
  
  
• Access for the disabled
  Making a website work for disabled web surfers is really quite simple - fixing this site to pass the tests at Cast.org required only a few minor changes - as a bonus this free tool turns out to be an easy way of discovering bits of invalid markup.
  
  
• Navigation
  Navigating around a website should be simple - really simple - there are few things more off-putting than arriving at a new site and having to figure how the navigation system works. I like to follow the browser convention with RIGHT moving FORWARD into more content and LEFT / BACK returning to a higher level.
  
  
• The status bar
  The status bar at the bottom of the browser window displays the destination of links as you move the cursor. It also displays the status of the current page as it loads. Don't overwrite this useful information with Javascript messages.

2 - Appearance

• Fonts
  The choice of font is not just a personal preference - it affects how quickly people can read text on screen. Don't make assumptions about the fonts people will have installed (cater for several.)
  
  In usability tests Arial (for all it's faults) has the advantage over either Times or Verdana
  - read the studies: here, here and here
  
  
• Colour
  It's important that foreground and background have sufficient contrast to be readable - maximum contrast is achieved with black text on a white background, making this ideal for navigation elements.
  Link colours - active and followed hyperlink colours should be left at (or at least close to) the standard settings.
  
  Finally remember some people are colour blind - so never use colour as the only means of indentifying things.
  
  
• Graphics
  The number one cause of page bloat - avoid adding graphics just to "to jazz things up" and remember some people (particularly the disabled) will browse with images turned off.
  
  Interlaced GIFs give the effect of the image being continuously redrawn at a higher and higher resolution. The files for these images are actually larger than for the equivalent GIF, and take longer to load.
  
  
• Writing
  Writing for the web is not the same as writing for print - in a nutshell it needs to be brief and to the point. Short paragraphs of text are much easier to read on a computer screen.

3 - Performance Issues

• Speed
  There is never going to be 'enough' bandwidth on the web; as capacity increases it tends to get used by more people, more pages and larger downloads such as internet radio and streaming video.
  Not everyone will have a fast connection - so the best strategy if you want to reach a large audience - is to avoid bandwidth hungry design. This applies equally to pure HTML and any 'plug-ins' you might use.
  
  
• Tables
  If a whole page is put inside a table then nothing will appear on screen until the whole table has been rendered. Making the page appear very slow to load. You can avoid this effect by splitting the page into several tables, or putting at least the first paragraph outside of any tables.
  

• Connections
  Every separate file generally means a separate connection for the web browser to fetch the data. One html page with a CSS style sheet, a couple of .js or .vbs scripts and say 6 graphics adds up to 10 trips to the server - this is 10 opportunities for something to go wrong and the page to display incorrectly. I don't think 10 is likely to be a problem but some sites have ~100 items on a single page which I think is pushing things.
  87% of internet connections are at a speed of 56Kb or less (February 2001 stats)

4 - Bugs - The stupid stuff you shouldnt really have to think about (but do)

• Relative Font Sizes
  Different PC's have different sized monitors, different display drivers, different resolutions and in the case of MS Windows can be set up with small or large fonts. Those with poor eyesight need to be able to see text at a size they can read.

  If cascading style sheets are written using fixed POINTS or PIXELS the text will appear at different sizes in different browsers/platforms. Fixed sizes also prevent the viewer from increasing font size with the browser. Furthermore, as screen resolution increases it becomes harder to read small fonts set with a fixed size.
  
  Perhaps the simplest fix for this is to set all body text with a relative value e.g. font-size: -1;
  (update - Aug 02 - Jakob has writen an alert box on this issue)
  

• URL's
  The URL of a page should be short and simple (no spaces or punctuation.)
  It should be possible to copy a URL into an email message without it wrapping into multiple lines of %20complete%20gibber%20ish.
  
  
• Dead Links
  If you change a URL you should ensure links and bookmarks don't break by setting up a redirect.
  

• Window size
  Not everyone will be reading in a maximised window - is your browser window maximised right now? Test a variety of window sizes; along with large fonts and make sure all the navigation features are still visible.

Related Books:
The Design of Everyday Things - by Donald A. Norman
Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Related Links:
Ways to make your web service a flop
Other Usability sites.
Decode URL characters

"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network." - Tim Berners-Lee in Technology Review, July 1996