Web Design Rules of Thumb

By Matthew Stanton, Metromemetics LLC
(first posted 01/14/2001)

Editor's note: This checklist was originally written in mid-1999 and, in many cases, now bears outdated suggestions. A better, broader set of guidelines can be found in the article Targeting Audiences, Targeting Priorities. This version has been left online for archiving reference.

Some of these suggestions are just good design ideas, some are temporary warnings about bugs in popular browsers, and others are guidelines which can be ignored in some cases.

1. Users must see some sort of confirmation their page requests are working or they will assume the site is too slow or down and click away.
2. The minimum screen size is 550 x 350 pixels - but 600x450 is practical for most monitors. (Even 760x580 is safe for 3 out of 4 users.)
3. It take 2k about 1 second to download through a typical 28.8 modem user.
4. An image's file size should not exceed in kilobytes half its area. (In other words, width X height / 2 = max. size in k.)
5. For 2- to 5-color line art, create a GIF in which the color pallette does not exceed the number of visible colors squared. (In other words, a red, yellow and green logo should only need about 9 colors.)
6. A user's choice at any one point of decision should have no more than 5 to 9 options. (Thus site navigation should be limited to 5 to 9 sections with 5 to 9 subsections each.)
7. All content should be three steps/clicks away from the main page. (Example: User comes to main page and uses search box [1], user review search results list and clicks on a link [2], user gets the content sought [3].)
8. A site search box should be available at the top of every page.
9. Never use the <BLINK> tag. Ever.
10. Use a path near the site navigation showing users where they are in a site at all times. (Example: Home >> Press Releases >> July Updates.)
11. Putting sitewide navigation across the top of the browser window allows for more efficient and flexible use of main page content than using vertical (left- or right-rail) navigation.
12. Third-party advertising should be obvious and separate from the site's main content.
13. Never wrap an entire layout in one table; instead stack tables which draw in as they are completed down the length of the page.
14. Be redundant for anything important. Have multiple points of entry and cross-links into major content.
15. A hypertext link should be from 10 to 30 text characters long. (Any less becomes difficult to hit, any longer gets distracting to the flow of non-linked text.)
16. Never use a browser-specific HTML tag. (Examples: spacer from Netscape, iframe from Microsoft Internet Explorer.) EXCEPTION: If a tag adds meaningful content without hurting other browers, use it. (Example: IE's TITLE attribute for A&nsbp;HREF link tags.)
17. Never use the <BLINK> tag. Ever.
18. Be forgiving to lost or new users; have help, search, and related links available at all times.

19. Support for cascading style sheets still stinks. CSS was adopted as a "standard" in version 4 of Netscape and Internet Explorer, but how the browsers stuck to that standard was - and still is - inconsistent. And don't use CSS alone just yet, since whatever markup you create will go unseen by users of WebTV, old AOL browsers, and text-only readers.
20. Microsoft is evil, and it likes to cheat with standards. Early support for a standard (say, the use of Javascript) will be supported in a Microsoft product for a while, then gradually shift into a Microsoft-flavored version (hence J-Script), and finally some Microsoft-only alternative will be put out as a "new standard" (like active server page scripting). This trend isn't always a bad thing - Microsoft's final solution tends to work great with other Microsoft products - but it's annoying to those of us who agreed to learn the original standard.
21. Microsoft is evil, but at least Bill Gates sticks closer to Web standards than Netscape does when it comes to CSS, HTML tags, and other presentation rules.
22. Line breaks (carriage returns) are not suppose to matter in normal HTML-formatted text; however, when using tables for layout, breaks can show in Netscape as extra spacing.
23. Take care using HEIGHT="100%" tags for a table meant to fill a page from top to bottom; Netscape will over-compensate height and push the bottom of the table below the scroll line in the viewable window.
24. Remove any breaks or spacing around Javascript document.write tags in the body of a document; Netscape 3 for PC will show parts of the script code where the tag was used, even if the <SCRIPT> part was commented out correctly.
25. Never use the <BLINK> tag. Ever.
26. Netscape 3 also bombs when trying to call dates before Jan. 1, 1970, using Javascript unless you call a later date first and then subtract using an expression.
27. Don't follow an <HR> tag in Netscape with a <P> tag or you'll end up with extra line spacing (a.k.a. leading).
28. CSS-P, positioning with cascading style sheets, is a great idea but it almost never works (see CSS problems above). Instead use tables to position content, but avoid nesting tables-within-tables so that browsers draw page layout faster.
29. The smallest unit possible for defining width in a table is 1%. This means, on a 800-pixel-wide window, that space will default to 8 pixels - a span which might be too wide for your alignment needs. This margin will only get worse as monitors continue to display bigger areas. Avoid placing images in columns which require a narrow space to align properly.
30. If you use a HEIGHT=100% table for page layout, don't trust row height definitions such as <TD HEIGHT=30%>. It's too easy for content placed in table cells to blow out those proportions and throw a layout out of whack.
31. Text is "fluid" - blocks will break horizontally (width-wise), but wrap down indefinitely. Also, consider how text will fill a cell if a user has default font size set to some huge number. By default, PC browsers display text a full step larger than Macintosh browsers (what is 12-point on a Mac looks like 14-point type on a PC).
32. Don't try to match alignment across HTML frames. Almost all browsers offset content up, down, left or right a little bit, even when you set margins to zero in the <BODY> tag. This same problem also prevents you from aligning objects on the page perfectly with images set as backgrounds.
33. Server-side includes are great for designing sites which can be globally modified fast, but resolving these includes slows a server down dramatically.
34. And finally, never use the <BLINK> tag. Never, never, never.