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...

The basics

• 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 fonts) 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.
  
  
• 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.
  
  
• 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.

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.
  
  For use on the web it has often argued that sans serif fonts are more readable than serif fonts. However recent research indicates that a greater difference in legibility can easily be found within members of the same type family than between a serif and a sans serif typeface. Most mainstream typefaces will be equally legible when set at the same size.
  
  
• 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.
  


• Contrast
  A contrast ratio of at least 4.5:1 is recommended for normal text.
  The WebAim contrast checker can be used to calculate this for any two HTML colours.
  
  
  
• 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.

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.
  High Speed Internet availability is lower than you might think, worldwide only 8% of connections (2010 figure).

Technical issues

• Relative Font Sizes
  Different PC's have different sized monitors, different display drivers, different resolutions and DPI settings. 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
Dotcom-tools - Web page speed test/waterfall chart.
Web Content Accessibility Guidelines (WCAG) 2.0 - W3C
websiteAdvantage - View HTTP Request and Response Headers
Five Second Test

“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