1.1 Worst PracticesIndex

• Ten Mistakes in Web Design: http://www.useit.com/alertbox/9605.html from 2007 and earlier
  • Splash screens: http://www.useit.com/alertbox/hated-design.html
• DEMORONIZER http://www.fourmilab.ch/webtools/demoroniser/ - Correct Moronic Microsoft HTML
  • A little detective work revealed that, as is usually the case when you encounter something shoddy in the vicinity of a computer, Microsoft incompetence and gratuitous incompatibility were to blame. Western language HTML documents are written in the ISO 8859-1 Latin-1 character set, with a specified set of escapes for special characters. Blithely ignoring this prescription, as usual, Microsoft use their own “extension” to Latin-1, in which a variety of characters which do not appear in Latin-1 are inserted in the range 0x82 through 0x95–this having the merit of being incompatible with both Latin-1 and Unicode, which reserve this region for additional control characters.
  • Warning: May not produce W3C valid HTML!

1.2 Best PracticesIndex

• Usability 101: http://www.useit.com/alertbox/20030825.html

• Don’t listen to what users say; watch what they do: http://www.useit.com/alertbox/20010805.html

• Good Deeds in Web Design http://www.useit.com/alertbox/991003.html

• Writing for the Web: http://www.useit.com/papers/webwriting/

  • How Users Read on the Web http://www.useit.com/alertbox/9710a.html
  • How Little do Users Read? http://www.useit.com/papers/webwriting/

1.3 Web Content Accessibility Guidelines [WCAG]Index

WCAG has reformed the way modern web design uses some widely-used features of HTML. Here are a few examples:

1. Avoid HTML tables for document layout. Tables have been widely abused to lay out the format of a web page, creating headers, columns and side-bars. HTML tables were intended to represent tabular data, not do document layout. Use CSS to lay out your document and reserve the <table> tag for actual tabular data:

   • http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free
   • http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
   • http://stopdesign.com/archive/2004/07/27/throwing-tables.html

   Of course CSS can make tables look good, too:

   • http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/

2. Avoid the use of HTML “frames”. “Many people using assistive technology have trouble with frames . An advisory technique about using noframes is available in Success Criterion 4.2.1.”

   • Why Frames Suck: http://www.useit.com/alertbox/9612.html

3. Let users control font sizes: http://www.useit.com/alertbox/20020819.html

4. Don’t use “spacer images” to lay out the document. Use CSS to position the content elements.

   • http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/C18

5. Don’t use PDF files for online presentation. See Jakob Nielsen’s article on “PDF: Unfit for Human Consumption”: http://www.useit.com/alertbox/20030714.html

6. Mobile devices have their own set of design guidelines that you can read here: Mobile Web Best Practices 1.0 Jakob Nielsen says “Mobile Content Is Twice as Difficult”: http://www.useit.com/alertbox/mobile-content-comprehension.html

   • “When reading from an iPhone-sized screen, comprehension scores for complex Web content were 48% of desktop monitor scores.”
   • “This new research provides striking support for the main conclusion in our usability studies of mobile websites: websites (and intranets) must design a separate mobile version for optimal usability. Specifically, complicated content should be rewritten to be shorter, with secondary information deferred to subsidiary pages.”
   • The W3C Unicorn web validator can check a page for suitability for mobile devices and provide alternatives.

Author: 
| Ian! D. Allen  -  idallen@idallen.ca  -  Ottawa, Ontario, Canada
| Home Page: http://idallen.com/   Contact Improv: http://contactimprov.ca/
| College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/
| Defend digital freedom:  http://eff.org/  and have fun:  http://fools.ca/