Web Design - Best and Worst Practices

Ian! D. Allen - idallen@idallen.ca - www.idallen.com

Winter 2011 - January to April 2011 - Updated 2011-03-28 02:04 EDT

1 Best and Worst Practices for Web DesignIndexup to index

Some taken from Jakob Nielsen’s http://www.useit.com/alertbox/

1.1 Worst PracticesIndexup to index

1.2 Best PracticesIndexup to index

1.3 Web Content Accessibility Guidelines [WCAG]Indexup to 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:

    Of course CSS can make tables look good, too:

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

  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.

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

Plain Text - plain text version of this page in Pandoc Markdown format

Campaign for non-browser-specific HTML   Valid XHTML 1.0 Transitional   Valid CSS!   Creative Commons by nc sa 3.0   Hacker Ideals Emblem   Author Ian! D. Allen