Doc Steve
Web Coding Service

Fully Accessible Web Code, Custom Written by Hand
Specializing in html, xml, css, and U.S.§508

Ideas on Good Site Design

[ Design Pages Index ]

General Site Design Notes: Style and Content

Page Index
[ Skip Index ]
[ General Notes ] [ Grammar ] [ Text ] [ Links ] [ Graphics ] [ Design and HTML ] [ Colors ] [ Fonts ] [ DTDs and title, html, & meta Elements ] [ In General ] [ Key Links ]

This page, which started as a simple notepad with personal reminders, explains some basic rules for this site, and that are a good guide for any web site's development. As with any "rules," these are not straight-jackets, there will be times to break them, and when those times arise be sure to do so; however, these are, in general, good standards to follow (see also Working with Color for design hints on colors and color schemes). [In keeping with its list-of-notes origins, the page is presented as a list of notes.]

Design Notes




  • Capitalize the first letter of each word in headings, whether at the top of the page or within the page, unless the heading is a sentence; do not capitalize articles (a, an, the) or conjunctions (e.g., and, but, or) unless they are the first word of a sentence or the first word following a colon.

  • Use an "em dash" ("—") or a double dash ("--"), not a hyphen ("-"), between phrases (e.g., "The sunset -- crimson as blood -- was dire in its portense"); use an "en dash" ("–") to compound a word (e.g., "She put in a first–place effort").
    [An em-dash is — or — (the non-standard — generally works, but should probably not be used); an en-dash is – or – -- see Frequently Used Symbols for a comprehensive list of standard and non-standard symbols.]

  • Web pages generally read best when written more like newspapers than like books or journals; so,
    • Use an active voice.
    • Use direct language: the fewer the words, for the same message, the better!
    • Use short paragraphs (but not so short as to make reading choppy).

  • Don't change headers, footers, or other established design or navigation elements within a page or from page to page within a site (or within a discrete sub-site, which may have its own look and feel to establish a distinct identity).


  • Use bold (<b></b>) for visual effect; use strong (<strong></strong>) for spoken effect.

  • Use italic (<i></i>) for visual effect; use emphasis (<em></em>) for spoken effect.

  • In general, it is probably best to avoid using italic and emphasis: as you can see, they "de-emphasize" visually on Web pages: when style dicates the use of italic font (e.g., book or newspaper titles), it is probably best to add bold as well (so it comes out like this).

  • Never use underscores (<u></u>) as these are reserved for links (although in usage such as the abbreviation for "megaHertz" it conforms to common usage and is very unlikely to be confused with a link: thus
    is essentially innocuous.


  • Periodically check links for functionality and content [manually or try the W3C's link validator (].

  • Text links should be separated by a non-link character or graphic to fascillitate use by screen readers and other non-graphical browsers.

  • Also, as general aspects of good style,
    • Avoid drawing attention to the medium. That is, do not link with words like "click here," "read," "find," "go to," etc., unless some broad directive is required (e.g., "return to referring page" where the link is generated by JavaScript through a reference to the DOM document.referrer) or where reference to the medium is specifically intended (e.g., "go to home page").
    • Use relative links, not absolute links, within an individual Web site.
    • When linking to a page or site, don't use quotation marks around the text or link.
    • Text links are not generally underlined when:
      -- the link is a part of the overall design of the site, such as page footers; or
      -- text is included in an image file where the enitre image is clickable.
    • If you wish to provide the user with the acutal URI, give the page title first (as a link) and then in parentheses the URI (also as a link).
    • And yes, the trailing slash is a part of the URI (omitting it is technically incorrect: thus is the correct URI, while is incorrect).
    • And yes, it's URI (Uniform Resource Indicator), not URL (Uniform Resource Locator, a type of URI): see Naming and Addressing: URIs, URLs, ... .


  • Always provide alt attributes (image description) for images.
    [NOTE: "alt" atributes are supposed to display when the user agent (i.e., the browser) does not display the underlying object (e.g., the browser is set not to display graphics or is a non-graphical browser); it is not supposed to display as a mouse-over: many browsers have implemented this incorrectly. If you want a mouse-over text-box, use the "title" attribute.]

  • If possible, have images originate in-house or from some shared resource. This avoids infringing on copyrights.

Design and HTML

  • Don't use frames: the potential for confusion far outweights the benefits.

  • Use the <p> (paragraph) or <div> elements to delimit paragraphs.

  • Use XML-compatible elements when possible (e.g., <br /> instead of <br>, <hr /> instead of <hr>; however, note that <meta> elements will not validate as html 4 with the internal close.

  • Don't use incorrect markup just for formatting purposes: e.g., do not use <th> to make the contents of a table cell bold and centered when the cell does not contain header information; instead, use <td style="text-align:center;font-weight:bold">, which will not confuse non-graphical browsers and screen readers.

  • For tables,
    • If you want no border, no cell padding, or no cell spacing, put in a "0" (zero) for each one. There are no default values for these attributes listed in the DTDs: the defaults used by browsers are generally cellpadding="1" and cellspacing="2" -- but who knows? -- while the default for border is generally based on the absence of a "border" attribute in the start tag of the table element, thus the absence of the attribute implies border="0" while its presence (e.g., the now deprecated usage <table border>) implies border="1" (or some greater value based on the browser's default).
    • Also, don't forget other table-formatting possibilities, such as rules=none|groups|rows|cols|all and frame=void|above|below|hsides|lhs|rhs|vsides|box|border (border="0" -- either explicit or implicit as the the general default -- implies frame="void" and rules="none", while any other value for border implies frame="border" and rules="all".
    • For examples of these usages, see the Tables Demonstration Page.
    • When in doubt about how the table will justify, specifiy the justification (e.g., (<td align="left">): text inside tables might default to being centered or right justified through CSS inheritance rules, even when not using CSS in the markup (IE6 is especially prone to this, although it is not clear how pervasive this is or if this is a "bug": see the IE6 Cascade Test Page for a description). This problem may also appear with other elements as well.

  • Multiple blank spaces generally mean nothing (leading, trailing, at the beginning of a line, etc.), so don't worry about them: e.g., indent as desired for clarity. The only time white space is meaningful is when the style white-space:nowrap is set, as in <span style="white-space:nowrap">keep this together<span> or when the non-breaking space is used (&nbsp; or &#160;).

  • When entering coded values for html characters and symbols, use only the standard sets of values (see Frequently Used Symbols for a comprehensive list of standard and non-standard symbols).


  • For accessibility,
    • For the visually imparied, Reds are better than blues, as the longer wave-lengths pass more more easilly through cataracts.
    • Don't use colors to convey information (this will be lost to those with color-blindness or without a color monitor).
    • Similarly, if there is a need to use colors, make sure foreground and background colors contrast sufficiently (in color and gray-scale) and wherever possible provide an alternate means of conveying the information.

  • For more on designing with color, see Working with Color
  • For technical notes on color, including a critique of the the standard, browser-safe color palatte, see W3C Standard Colors, "Standard" Palette, and Name/Number Crosswalk.


  • Different fonts may be used to manage a presentation (e.g., mono-space to align columns within pre-formatted text) or to convey moods (e.g., fantasy, to convey a whimsical feeling). Here are some of the most common examples (note: the generic name is in grey-blue):
    • serif, e.g.,
      • Book Antiqua
      • Georgia
      • Palatino Linotype
      • Times
      • Times New Roman
    • sans-serif, e.g.,
      • Arial
      • Arial Black
      • Arial Narrow
      • Century Gothic
      • Helvetica
      • Impact
      • Trebuchet MS
      • Verdana
    • cursive, e.g.,
      • Comic Sans MS
    • fantasy, e.g.,
      • Haettenschweiler
    • monospace, e.g.,
      • Courier
      • Courier New

DTDs and the title, html, & meta elements

  • Always use a standard DTD (document type definition) and correct <html> & <meta> elements (aka "tags")

  • The standard DTDs on this (and related) sites are the following:
    • For XHTML 1.1,
      <!DOCTYPE html
           PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    • For XHTML 1.0,
      <!DOCTYPE html
           PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    • For HTML 4.01,
      <!DOCTYPE html
           PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    • For HTML 3.2,
           PUBLIC "-//IETF//DTD HTML//EN//3.0" "html-3.dtd">

    • For HTML 2.0,
           PUBLIC "-//IETF//DTD HTML Level 2//EN//2.0">

    • For XHTML, an XML declaration should go ahead of the DTD:
      <?xml version="1.0" encoding="iso-8859-1"?>

    (other standard DTDs are at the W3C's Quality Assurance site at List of valid DTDs you can use in your document)

  • The standard <html> elements on this (and related) sites are the following:
    • For XHTML,

    • For HTML,

  • The standard <meta> elements on this (and related) sites are the following:
    • <meta
           content="text/html; charset=ISO-8859-1" />
    • <meta
           content="text/css" />
    • <meta
           content="..." />

    • <meta
           content="..." />
    • <meta
           content="..." />
    • <meta
           content="..." />

      (Note the internal close on the above tags, necessary for an xhtml DTD and validation -- it should be removed if used for an html DTD and validation.)

  • The title element (<title>) should generally be the same as the heading (or title) as shown in the text on the page.

  • The content of the meta element with name "description" may be the same as the title element, may be a standard description for all pages on the stite, or some combination thereof.

  • The content of the meta element with name "keywords" may be general to the site but may also be specific to the page.

  • The content of the meta element with name "date" should be in the internet standard of yyyy-mm-ddThh:mm:ss, where
    • yyyy-mm-dd is the date in year, month, and day format, as delimited
    • T is the capital letter "T"
    • hh:mm:ss is the time in hours, minutes, and seconds format, as delimited
    The time segment (Thh:mm:ss) may be omitted.

In General

  • ALWAYS ALWAYS ALWAYS follow W3C standards (see the Home Page for more on web standards).

  • If may be helpful to save a template or to mentally designate one page to be the template, and have that page include all of the standard headers, footers, and markup.

  • Don't introduce odd colors and fonts simply because content is being updated: be consistent, follow the pattern of what is already there, and only change the style of a page when setting-off specific information requires it (i.e., let the content drive the format).

  • Validate after changes, and use the validator icons: Bobby icons are at "Bobby Approved Icon" Guidelines; W3C icons are with their respective validators.

  • Assume that Internet Explorer 5/6, Internet Explorer 7, Netscape 4/6/7, and Mozilla/Firevox will all display differently: do what can be done, but remember that the object of the page with respect to all possible platforms is total usability of the information, not total consistency of the presentation.

  • Internet Explorer 7 and Mozilla/Firefox should display identically, but there may still may be some differences: always check.

  • With the proliferation of handhelds (e.g., the Palm Treo), consider how these small units will display.

  • It may be fair to assume that with ever heightening concern about security and maintaining up-to-date software and security patches that users will no longer be using non-compliant browsers (i.e., Internet Explorer prior to release seven and pre-Mozilla versions of Netscape): it may be safe to assume that, but maybe not.

  • Going along with the preceeding, with Internet Explorer 7, Microsoft's problems with the display of the box model appear to be resolved, so it is time for everyone to start using style sheets for all their presentation.

  • Where many noteworthy links appear scattered through a page, it may be helpful to consolidate them by providing a separate a "key links" section. This would probably best be situated at the foot of the page, just like where a list of references would be.

Key Links


Document: http://

Made with Cascading Style Sheets  | Valid CSS!  | Valid XHTML 1.0!  | Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0  | Bobby WorldWide Approved AAA

Contact DocSteve

Copyright © 2004
Steve Sconfienza, Ph.D.
All Rights Reserved