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