Website design and usability

When creating a website either using basic HTML and CSS or a more complex framework, there are a number of usability and accessibility considerations to think about. Design which takes usability into consideration tends to perform better and rank higher with search engines.

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

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.)
  
  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.
  
  
• 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.
  The Experte checker can scan miltiple pages and check for sufficient contrast and  also other accessibility features.
  
  
• Colour
  It’s important that foreground and background have sufficient contrast to be readable and should avoid colour combinations that the colour blind will struggle to differentiate.
  Link colours - active and followed hyperlink colours should be left at (or at least close to) the standard settings.
  
  
• Graphics
  Avoid adding graphics just to "to jazz things up" they should have a clear purpose, 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.

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

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.

• URLs
  The URL of a page should be short and simple (no spaces, punctuation or mixed case)
  As far as possible the URI should never change.
  
  
• Dead Links
  If you change or delete a URL you should ensure links and bookmarks don’t break by setting up a redirect.
  A page which you deleted 10 years ago can still be a source of incoming traffic.

• 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

Book: The Design of Everyday Things - by Donald A. Norman.
Book: Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug.
useit.com - Archive of the 90’s usability website.
JS overlays - a sample client letter from Alistair Shepherd explaining why these 'quick fixes' are a bad idea.
Google search links can have a udm14 tag for a junk free search listing page.
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