Website Development Guidelines

Home | Site Map | Memorial Wall
Assembled by Vernell Turner
Introduction Planning Overall Guidelines Editorial Guidelines
Page Structure Color Coding References

Introduction        Top

More and more of our local churches are developing their own web sites. I thought it timely to include some helpful "hints" for you to consider as you design your local church site. Make sure your pages are accessible to all users including those with visual impairments and/or other disabilities. These guidelines will make finding information on your site easy and quick, ease the maintenance process, and promote a consistent design from the main page.

You may not have time to read the entire document. Please read the Editorial guidelines and the section on Color usage. There are many sites that abuse color and make it difficult to read the information on the pages. If informatin is your primary goal, you can't afford to loose a visitor because it hurts your eyes to look at the page.

Planning        Top

When planning the overall design and structure of your web pages, consider your most likely users. Strive to increase the usability of the information for your entire audience. Clearly identify the goals and purpose of your pages. Understanding these items will aid in determining the style and content of the project. We use a design methodology known as Information Architecture (IA). Web Monkey has an excellent IA tutorial. You will find that the visual design is not the most important element of building a web site. Please take the time to read the tutorial.

Consider the message you are trying to convey with your website and design your pages with that in mind. Our general church is over 100 years old. We want to convey dignity and prestige without being "stuffy", yet we want to be inviting to multiple audience age levels.

You don't want your site to look like 50 different people contributed pages unique to each one of them with little thought to an overall design. Strive for consistency and church branding. You don't want a "thrown together" look. If possible, build and use templates. Templates help to ensure consistency and they save time (web authors don't have to build pages from scratch).

Overall Site Guidelines        Top

Some users may arrive at your site looking for specific information. Others may be interested in simply browsing. Navigation of the site is very important. Strive to balance the needs of an experienced user against enticing packaging and explanatory text for the occasional user. A consistent style of presentation on each page allows users to locate navigation mechanisms easily. Predictability will increase the likelihood that people will find the desired information. Make sure all information is accurate. Test your pages! Obtain feedback on the usability of the project. Develop procedures and processes to keep pages up-to-date and verify that links continue to work.

Editorial Guidelines        Top

Strive for as much consistency and clarity as possible. We recommend the use of the following writing style guides:

The Elements of Style by William Strunk, Jr. E.B. White

Associated Press Style Guide and Libel Manual - available from the Associated Press

Below are a few tips from the Human Factors International web site:

1. Write so people will understand and act quickly. Do not write to show your profound grasp of complex concepts and terminology.

2. Use short sentences. Long sentences decrease reading speed and comprehension.

3. Use words Consistently. If a synonym is used, the user must first ask if the two words are the same and then mentally translate.

4. Use acronyms only where the user already knows them as a word.

Example:   NASA       FBI

5. Use specific and precise wording. Tell the user exactly what to do. This will decrease interpretation time and errors.

Poor Example: Generate transaction input.
Better Example: Enter the Expense Description listed on the voucher.

6. Use short and simple words. Long and unusual words sound impressive, but take a longer time to understand.

Poor Example: acquire
Better Example: get

Poor Example: evident
Better Example: clear

Poor Example: identical
Better Example: same

7. Omit needless words. Every word takes time to read.

Poor Example: Enter the appropriate information below
Better Example: Enter the following:

8. Write in the active voice. Passive voice sounds dignified, but users understand active voice more quickly.

Poor Example: The part numbers should be entered.
Better Example: Enter the part numbers.

Page Structure, Layout, & Size        Top

We recommend that you design your page to target a monitor resolution of 800x600. Use standard and consistent headers and footers.

Present your information in small or moderate size segments with links to subsequent segments. If the segments are too small, users may become frustrated. Provide clues when scrolling is needed and design a mechanism to easily navigate within the page.

Large graphics as well as a large number of graphics slow the loading of a web page and may unnecessarily tax the network. It is advisable to keep the size of the web page, the size of your graphics, and the total number of graphics on a page as low as possible.

Avoid distracting features such as blinking text or rapidly changing images. Blinking text or rapidly changing images draws attention away from all other content on a page. Changing text or moving images can be useful for creating a dramatic initial impression. If you must use animation, it is best to have it run a maximum of 2 complete cycles and then stop to allow users a chance to read and make navigational choices.

People who read English have a strong habit. They scan text and other material in the same way. Layout the page to optimize visual access. Make the body of the screen flow from top left to the right and down.

Left justify text, labels and data. Left justified elements are easier to scan. Numbers are an exception. Never present textual items in all capital letters. Using all capital letters slows reading speed.

Organize information to avoid a cluttered look. Clutter should never occur due to lack of grouping or poor justification. There is a relationship between clutter and the time required to find an item. Clutter costs in terms of scan time and intimidation to new users. Clutter due to high density can be acceptable at times.

When designing forms, group fields by functions. Group using blank lines, indentation, panels, and windows. Grouping helps users understand and find fields easily. Avoid horizontal scrolling of entry fields. The amount of text that appears in the field by default (without scrolling) may be misleading.

Use consistent button labels. Use sufficiently large icons and buttons. Be consistent with button size within a window, form, or page.

Fitt's Law:

As the size of an icon or button increases, so does the speed of traversing to and selecting that icon or button. As the distance of the mouse movement decreases, speed is also increased, so keep buttons and other targets large and mouse movement distances short.

Don't over do the use of bold and italic text. It can be confusing and distracting to the user. Be careful when using italic text. It is less readable on the screen.

Page links should not disturb the concept or structure of the text. Be careful not to over link. Whenever possible, choose a linking phrase that matches the title page in the destination document. The text phrase used as a link should be understandable on its own. The text of a link should make sense even if the link is not present. Avoid the use of "Click Here".

Color        Top

Use colors and highlighting sparingly. According to Signal Detection theory, lots of different colors and highlighting make the screen so noisy that you can't find anything.

Information should be conveyed by means other than just color. Consider the needs of blind and color-blind users. Use color to draw attention. Use bright colors for items you want the user to notice now.

Background and text colors should enhance the presentation. Choose a background that does not interfere with the text or other information on the page. Do not use yellow on white. Do not use pure red or blue on black. These combinations don't give enough contrast between letters and background. You need 90% contrast between foreground and background to read text clearly. Do not show pure red and blue together. Red and blue focus improperly in opposite directions. Extreme fuzziness or a 3-D illusion can occur when juxtaposed.

Coding        Top

Do not hinder accessibility by misusing markup for a presentation effect.Heading Level Codes (<H1>, <H2>, <H3>…) are intended to distinguish logical structure levels in a document. Do not use them to increase font size. Use the second level (<H2>) as a subordinate or sub section to the first level. Use the third level (<H3>) as a subordinate or sub section to the second level. Use the size attribute within the FONT tag to increase font size.

Choose fonts to enhance readability. Many type experts believe that sans serif fonts are better for screen display, even though serif fonts are easier to read on paper. The difference is due to the resolution of computer screens (72-120 dots per inch) in contrast to printers (300-2,540 dots per inch). Because on-screen dots are so big, fine details like serifs are exaggerated or distorted. Type designer Chuck Bigelow (co-designer of Lucida family of typefaces) says "serifs should be small things - but on screen they become big - no longer visual cues but noise - distracting chunks of interference".

"Arial" is a good default font face. It is one of the most popular sans-serif fonts used on the web. "Georgia" is an alternative face that looks as sharp and clean on screen as other fonts look on paper. Do not mix more than 2 typefaces within a single document. Make a habit of specifying the size attribute within the font tag, Netscape Navigator and Microsoft IE use different default sizes.

Provide a text equivalent for every non-text element. This includes: images, graphical representations of text (including symbols), image map regions, animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds, stand-alone audio files, audio tracks of video, and video.

Specify the expansion of each abbreviation or acronym in a document where it first occurs. Use the "title" attribute of the ABBR and ACRONYM elements. Providing the expansion in the main body of the document also helps document usability.

Be careful when formatting tables. The content must make sense when presented in a linear fashion. Identify row and column headers. When tables are presented in a linear fashion, the cells are sequenced by rows, not columns.

Avoid the use of frames. Frames reduce the usability of the page by making it difficult to print or bookmark. If you must use frames, title each frame to facilitate identification and navigation. Describe the purpose of the frames and how they relate to each other.

Use "Under Construction" or "Work in Progress" for incomplete pages. Do not leave a page "Under Construction" for more than one month.

References        Top

Internet Sites:

State of Ohio, Department of Administrative Services, Web Style Guide(http://www.state.oh.us/das/styleguide)

State of Ohio, Department of Administrative Services, Internet Advisory Committee, Best Practices for Website Development(http://www.state.oh.us/bestpr/)

Human Factors International, Wording, Color, and Layout(http://www.humanfactors.com/)

University of Wisconsin-Madison Campus Libraries Web Page Standards and Guidelines(http://www.library.wisc.edu/help/tech/Web_standards.html)

AT&T Style Guide, Information Architecture(http://www.att.com/style)

The Library of Congress, World Wide Web Style Guide(http://lcweb.loc.gov/loc/webstyle)

U.S. Department of Justice, Information Regarding Section 508 of the Rehabilitation Act(http://www.usdoj.gov/crt/508/info.html)

W3C, World Wide Web Consortium, Web Content Accessibility Guidelines 1.0(http://www.w3.org/TR/WAI-WEBCONTENT/)

The State University of New Jersey, Rutgers, Web Toolkit(http://toolkit.rutgers.edu/)

Computer Society, Style Guide Introduction(http://www.computer.org/author/style/intro.htm)

Information & Access Technology Services, Glossary of Terms(http://iatservices.missouri.edu/)

webmonkey, The Web Developer's Resource, Under Design - Site Building(http://hotwired.lycos.com/webmonkey/)

Embry-Riddle, Daytona Beach Campus, Web Style Policy and Guide(http://www.db.erau.edu/appm/)

Radford University, World Wide Web Style and Standards(http://www.runet.edu/RUStyle.html)

Colorado State University, Web Standards and Content Guidelines(http://www.colostate.edu/info/webgd.html)

The State of Texas, World Wide Web Design Standards and Coding Guidelines(http://www.state.tx.us/Standards/srrpub11.htm)

IBM, developerWorks, Web architecture library, Is your site accessible?(http://www-4.ibm.com/software/developer/library/web-acc.html?dwzone=web)

City of San Jose, World Wide Web Page, Disability Access Design Standards(http://www.ci.san-jose.ca.us/oaacc/disacces.html)

Other References:

Deloitte Consulting - Cincinnati Water Works Customer Care Improvement Project

Hamilton County Web Site Review by Outside Web Manager/Master

City of Cincinnati - E-Government Network Design and Security Policy

City of Cincinnati's Web Style Guidelines & Standards

City of Cincinnati Web Page Standards

General Services' Top Priority

Home | Guestbook | Prayer Request | Contact Us