General
Recommendations
- Designing for the screen is a brand new ball game
- VGA screen
size: 640 (w) by 480 (h) pixels
- Still, the most common display configuration
- Effective max
browser window: 600 wide by 315 high i.e. 7"w by 3.66"h
on most people's 14" monitors
- Some Web sites give visual cues about page width
- Most
displays are still set to 256 (8-bit) colors
Consistent
640 x 480 screen layout - Use grids as guidance to help with page balance and consistency
- Try to
eliminate unnecessary scrolling
- People dislike scrolling, particularly horizontally
- Take advantage of hypertext
- Keep information concise and organized
- Also,
keep bandwidth considerations in mind
- Most homes still at 14.4Kbps (Spr'98)
- Can you assume 28.8 or 56Kbps modems?
- Is ADN-ii (2Mbps+) campus connectivity required?
- ADSL, cable and multi-56K modems in the horizon...
- The one-pixel
GIF trick
- with height, width and align attributes
- Provide a site map for large/complex Web sites
Readership
Recommendations
- Reading
on the Web is 25% slower
- Majority of people scan Web pages
- Reduce paragraph sizes
- Use colored background for lots of text
- Use color to set information hierarchy
- Stick with default or larger font sizes
- Create a table of contents
- Highlight
keywords
- Use hypertext links effectively
- Use typeface variations and color that works well together
- Use meaningful sub-headings
- Use bulleted lists to organize content
- One idea
per paragraph - readers may skip additional idea
A
good article on Web readership
Using HTML Tables
- Powerful
tool for positioning text
- Don't overuse them
- Complex tables take time to load
- Text boxes: 400-500 pixels maximum
- Use columns for horizontal layouts
- Useful technique for arranging images
- Can serve instead of frames or imagemaps
- Avoid the expanding table problem
Using Frames
- Frames can be simple, consistent and functional
- Frame borders vs. no-frame borders
- Excellent for holding
navigation bars
- Table of content links
- Navigational
tools
- How many frames is too many? (more than 3)
- Could use JavaScript for intra-frame navigation
- Frames requires
newer (1996+) browsers
- Netscape Navigator 2.0 or better
- Microsoft Internet Explorer (MSIE) 3.0 or better
|
|
Color-coordinated schemes
- Again, be consistent
- Strive for a good foreground/background combination
- Match background colors, colored headlines, text, images, tables, cells, and so on.
- Watch out for lining up of repeating backgrounds patterns
- Use custom mastheads, titles and bullets
|
|