Web Essentials:
The Top Ten Countdown

Jim Royal

http://jimroyal.com/

Number 10: Test. Test. Test.

Virtualization Software

Browsers to Test

• Internet Explorer 6 and 7
• Firefox 1.5 and 2.0
• Safari 1.3 and 2.0
• Mozilla 1.7
• Opera 9 (if you're really a stickler)

Browsers to Ignore

• Internet Explorer 5.5 and below
  (unless you're sure your visitors use it)
• Internet Explorer 5.2 for Mac
• Netscape — all versions
• Mozilla 1.6 and below

Number 9:
Directory & File Names for Humans

• http://www.microsoft.com/athome/security/
  spyware/software/default.mspx
• http://www.microsoft.com/downloads/
  details.aspx?FamilyID=435bfce7-da2b-4a6a-afa4-f7f14e605a0d&DisplayLang=en
• http://www.apple.com/itunes/
• http://www.apple.com/itunes/download/

URLs are U.I.

URL Redirection

• Redirect permanent /old-directory
  http://www.your-domain.com/new-directory

Safe File Names

• Windows doesn’t like \ / : * ? " < > |
• Mac OS doesn’t like / :
  File names that start with a dot are invisible
• Unix/Linux doesn’t like spaces and /
  File names that start with a dot are invisible
  "myfile.txt" and "MyFile.txt" are different
• Rule of thumb: Lowercase, no punctuation, underscores instead of spaces

Number 8: No Godzilla Graphics

Handheld Devices

Digital Wind: 67 KB

Gwava: 1321 KB

Gwava Exposed

http://WebSiteOptimization.com/

Web Weight-Loss Program:
CSS-based Layout

• Learn to use ImageReady or FireWorks
• Avoid tables to define column layouts
• CSS-based layout can help enormously
• CSS positioning is not well-supported in older browsers
• Feed only unstyled pages to older browsers

"Project Chance" with Styles

"Project Chance" without Styles

Number 7: Flashturbation

flashturbation | noun | The practice of using Adobe Flash on Web sites for nothing more than demonstrating its cool "whiz-bang" features.

Mystery Meat

Motion and Evolution

There's Always an Exception

There's Always an Exception

There's Always an Exception

There's Always an Exception

Number 6: Plan Your Use of Colour

The Colour Wheel

Colour Scheme Generator

http://wellstyled.com/tools/colorscheme2/

Kuler

http://kuler.adobe.com/

Consider Colour-Blindness

• One out of twelve people
• Don’t use red and green alone for informational purposes
• Colour Scheme Generator provides tools for checking colour schemes
• Tip: Desaturate a screen shot. If the image is still readable, you're okay

Number 5:
Web Design is 95% Typography

Text is the user interface for most web pages

• Readability
• Accessibility
• Usability
• Overall graphic balance

Cross-Platform Typography

• Arial / Helvetica
• Comic Sans MS
• Courier New / Courier
• Georgia
• Lucida Sans Unicode / Lucida Grande
• Times New Roman / Times
• Trebuchet MS
• Verdana

CSS Provides Some Control

• Size
• Weight
• Italics
• Smallcaps
• Line-height (i.e., leading)
• Margins and padding
• Letter-spacing (i.e., kerning)

Text-Only Web Design

Text-Only Web Design (zoomed)

Rules of Thumb for Web Typography

• Line length
• Whitespace
• Line height and letter spacing
• Two fonts per page
• Three font sizes per page
• Contrast
• Break up text blocks
• Identify links clearly

Line Length

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Whitespace

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line Height and Letter Spacing

Two Fonts per Page

Lorem Ipsum Dolor Sit Amet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed Do Eiusmod Tempor Incididunt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Three Font Sizes per Page

Contrast

Lorem Ipsum Dolor Sit Amet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed Do Eiusmod Tempor Incididunt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Break up Text Blocks

Identify Links Clearly

Number 4:
Future-Proof Your Pages

• Use structured code and CSS layout
• Accessibility for visually-impaired
• Improves access for handheld devices

Layout-o-matic

http://www.inknoise.com/experimental/layoutomatic.php

List-o-matic

http://accessify.com/tools-and-wizards/
developer-tools/list-o-matic/

Number 3:
Identify Content Authors in Advance

A menagerie of bizarre and flighty creatures who claim to be able to write (but can't):

• The Ostrich
• Thinks-He's-a-Writer
• The PowerPoint Marketer
• The Reluctant Developer
• The Mission Statement Generator
• Drive-by-Managers

Number 2: Identify Who Your Visitors
Will Be Before They Show Up

User Personas

• Help you understand different audience groups
• Evaluate designs by how well they meet the needs of individual user personas
• Provide a human face to designers/authors

Example: Project Chance Foundation

Goal: Create a web site for low-income housing charity

• Immediate Donor
• Information Seeker
• Press
• Volunteers
• Tenants

Project Chance Main Page

Number 1:
Successful Web Sites Require People

http://jimroyal.com/seminars/topten/