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.
- 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
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
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.
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.
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.
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.
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.
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.
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.
- 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)
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.
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 - 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
Copyright © 1999-2023 SS64.com
Some rights reserved