SCHOOL WEBS

Sample Design Conventions

Design conventions are provided to maximize information flow and minimize maintenance by using standard navigation, page layout, and design elements.

Design Conventions

• Every page is identified as part of the district web site and has navigation to other main parts of the site. The top banner should be included on every page after the home page.
• Consistent use of the banner with the navigation bar will eliminate orphaned pages and dead-end links.
• Every page includes the district copyright notice and identification, a disclaimer, a link to the acceptable use policy, email contact with the webmaster, and the last updated date. This information in a footer must be included on every page.
• Users should not need more than three links to find information. Side bars provide detailed navigation. Sidebars may change on different pages (for example, individual school pages would provide side bar navigation to their unique pages).
• Users should not need to scroll horizontally. Most pages should be approximately three screens or less in length.
• File names and anchor names are alpha numeric, short, lower case, and avoid special characters because some servers and some applications are case sensitive or require eight-dot-three or four naming conventions. For example, the Acme School page is "acme.html" rather than "Acme School.html".
• The most readable text on the web is sans serif font in very dark (black or dark blue) on white or very light background without distracting background images. Page properties examples are:
  o Background Image: NONE
  o Background color: #FFFFFF (white)
  o Text color: #000033 (dark blue)
  o Link color: #0000CC (bright blue)
  o Visited link color: #999999 (gray)
  o Left Margin: 10 pixels
• The font face is “face="Arial, Helvetica, sans serif" with size “2” for most text. Headings are bold, size 3, color #0000CC.
• Web-safe colors, the 216 colors best interpreted by browsers, are used for consistent display and ease of maintenance.
• Audio and/or video that consume bandwidth and slow access time for users are discouraged. Access to such links must be optional for the user.
• Templates are used for consistent design and navigation.
• Macromedia Dreamweaver software was used for web editing, and Fireworks software was used for image editing.
• Absolute links, e.g., http://doe.state.in.us, are used for external links. Relative links, e.g., /resource/currmap.html, are used for internal links.
• Frames should not be used because in the academic world we often compile lists of links and site sources. Frames hide the urls of external pages, making identification difficult.
• Do not use “under construction” signs. All web sites are works in progress. Do not post pages until they are ready for public viewing.