Website design and usability

A few technical details about how this site is written.

It won't escape your notice that this site is 'low tech' in design with almost everything in basic HTML and CSS, the reason for this is to maximise usability and performance.

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

1 - The absolute 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 again really just a case of adhering to web standards. The tests at ContentQuality.com are helpful for this - as a bonus this free tool turns out to be an easy way to discover bits of invalid markup.
  
• Navigation
  Moving 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
  This display at the bottom of the browser window shows 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.
  
• 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 identifying 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
  The web is not the same as writing for print - text should 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.

• 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.
  Internet usage worldwide is lower than you might think, even in the US, 20% of connections are at a speed of 56Kb or less (February 2007).

4 - Bugs - The stupid stuff you shouldn't 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. Ensure that your design will accommodate this (Jakob Neilson has an alert box on this issue)

• URLs
  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:

The Design of Everyday Things - by Donald A. Norman
Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug
useit.com - Jakob Nielsen
Five Second Test
Other Usability sites.

"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