STYLE Guide

 

You can create your style guide simply by keeping lists of the important decisions you made as you built the site.  Word documents stored in a folder are easy to manage.  As the project progresses, you can convert the Word documents into HTML, then link among various topics in the sections of the newly created HTML style guide, and make the style guide a living document your whole team can use.  This checklist will get you going; you can modify it to suit your site:

 

Format and Structure

·         A clear diagram of the directory structure, showing what types of files will be stored where.

·         A site map or index showing major areas of the site and major navigational paths.

·         Notes about the site structure’s overall logic.

·         Guidelines describing what is stored in databases (your database software might include a feature for mapping and documenting the database).

·         A flowchart showing how transaction systems are organized.

·         Notes about how to place content into the site’s structure.

 

Visual Style

·         Notes about how style choices were made and by whom.

·         Records of which artist or designer created specific elements of the site (so you can go back to that person for more work on that style when needed).

·         Where and how to place page banners, navigational bars, buttons, company logos, navigational bars, special elements, and so on.

·         Which fonts or font families to use for page banners, navigational bars, body text, informational tables, forms, and so on; where those fonts are located and in what size they can be used.

·         Where art is located.

·         How basic page layouts and special effects are accomplished.

 

HTML and Page Layout

·         Fonts to be used (and alternate fonts, if you are using <FONT FACE>).

·         Colors (including their codes) for backgrounds and special elements.

·         Headings—the font, color, size, weight, and so on for headings for various levels.

·         Whether to use <B> and <I> or <STRONG> and <EM>.

·         How to code special characters such as TM, ©, and ®.

·         META tags to be used to optimize standing in search engines.

·         In page layout tables, the preferred table and cell widths, as well as cell padding, cell spacing, and information about where exceptions are allowable.

·         In frames, naming conventions, targeting and default targets, and directory structure for frame sets.

·         Any disallowed characters, such as em and en dashes, which are not part of the standard HTML character set.

 

Graphics and Multimedia

·         The maximum size in bytes for a page.

·         What file types are allowable in what circumstances (in general, it’s best to stick to Graphic Interchange Format (GIFs) for simple graphics and Joint Photographic Experts Group (JPEGs) for photographic images) and what is the maximum suggested size.

·         How and when to indicate the size of downloadable multimedia and graphics files (this is a convenience for users, who can then decide whether or not their systems can manage the files).

·         Suggestions for how to avoid dithering, which reduces image quality, and how to use interlaced files that load in several passes.

·         Limitations on use of logos, company colors, and other company-identifying elements (for this, you might want to link to the visual style, editorial style, and legalese sections of your style guide).

·         Information on placement of banner ads.

·         Notes regarding who designed and who approved various graphic elements, so that in the future you can contact those involved to make adjustments or have additional material created or approved.

 

Editorial Style and Usage

·         Which reference guides your sites uses as a basis for editorial style—Chicago Manual of Style or Associated Press Stylebook and Libel Manual?  Which directory?  Which edition of each?

·         The mission or philosophy of the site—the goal that making it public is meant to achieve.

·         How to handle punctuation—for headings, will you use heading style (with the first letter of all important words uppercased), or sentence style (with only the first letter of the first word capitalized)?  How will you handle all-cap names like CNET?  What about names that include punctuation, like Yahoo!?  And what about terms like Web site?  Will it be that or website?

·         Are there acronyms that can stand unspecified, such as AMA (for the American Medical Association, which is familiar enough to users of a medical site) or HTML?  These can appear in an alphabetical list with those less well known acronyms that need to be spelled out, such as CSS for cascading style sheets.

·         What to do with various compound words, for example, whether you will go with e-mail or email.

·         How to handle such special elements such as captions (how will they be formatted, and how long can they be?); the use of color or black and white in images; the format of informational tables and the headings and text within them; the length and tone of headings; and so on.

·         Policies regarding the use of logos, linking, and legalese on your site.

·         Online references that will be of use, for example The Slot (www.theslot.com), which provides insight into making editorial choices.

 

Linking and Cross-Linking

·         How many links should appear in a paragraph or story.

·         Your policy on what sorts of words to link on.  Again, avoid the generic “click here” and link on the most pertinent phrase instead; for example, the destination of the link (which is more enticing to users).

·         How to phrase links to downloadable files, graphics, and media.

·         When to use buttons for links rather than text and vice versa.

·         How to handle jump links (those that link to text within the same page).

·         Whether and in what circumstances it is acceptable to link outside of the site.

 

Legal Matters

·         How copyright notices should be worded and where they should be placed on your pages.

·         How trademarks should be indicated.

·         Policies regarding gaining permission for use of copyrighted material from elsewhere.

·         Policies regarding use of your own material; for example, when it is permissible and what procedures must be followed by others to gain permission to use your material.

·         Notes regarding who among your staff is authorized to grant permission to use your material.

·         Any forms or permission agreements necessary for others to fill out in order to use your material.

 

Review and Approval Procedures

·         Who’s who on the review team as well as what they are authorized to review.

·         How the review and approval process occurs.

·         How approvals are recorded.

·         Who signals that the material has been fully approved and can be posted.