% Author: Ian! D. Allen - idallen@idallen.ca - www.idallen.com
% Date: Winter 2011 - January to April 2011 - Updated 2020-11-12 17:36 EST
% Title: Web Design - Best and Worst Practices
- [Course Home Page]
- [Course Outline]
- [All Weeks]
- [Plain Text]
Best and Worst Practices for Web Design
=======================================
Some taken from Jakob Nielsen’s
Worst Practices
---------------
- Ten Mistakes in Web Design:
from 2007 and earlier
- Splash screens:
- *DEMORONIZER* - 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!
Best Practices
--------------
- Usability 101:
- Don’t listen to what users say; watch what they **do**:
- Good Deeds in Web Design
- Writing for the Web:
- How Users Read on the Web
- How Little do Users Read?
Web Content Accessibility Guidelines \[WCAG\]
---------------------------------------------
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
`` 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.”
- Why Frames Suck:
3. Let users control font sizes:
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”:
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”:
- *“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
[Course Home Page]: ..
[Course Outline]: course_outline.pdf
[All Weeks]: indexcgi.cgi
[Plain Text]: 555_web_design.txt
[Mobile Web Best Practices 1.0]: http://www.w3.org/TR/mobile-bp/
[W3C Unicorn]: http://validator.w3.org/unicorn/
[Pandoc Markdown]: http://johnmacfarlane.net/pandoc/