Web Guidelines

All district office web pages viewable by the general public should consider the following guidelines.

1. Review and understand MCCCD Technology Resource Standards.
2. Use a district office template. Contact the web team to obtain templates.
3. Validate all pages.
   • CSS - jigsaw.w3.org/css-validator
   • Mark-up - validator.w3.org
   • Section 508, WCAG - http://www.cynthiasays.com/
4. Test all pages on target browsers.
   • Chrome
   • Firefox
   • IE 7+
   • Safari
5. Separate presentation from content.
   • Avoid using tables for layout (Seybold). Using CSS instead will make your pages load faster, make changes to your site easier and more efficient, get you better search engine results and make your site more accessible for cell phones, PDA's and users with disabilities.
   • Use CSS to specify fonts and list several options
     (font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif;).
6. Write for the web (Nielsen).
   • Be succinct. Write no more than 50% of the text you would have used to cover the same material in a print publication. Reading from computer screens is 25% slower than print and a majority of people report feeling unpleasant when reading online text.
   • Write for scannability. Skimming instead of reading is a fact of the web. Use meaningful rather than cute headings in addition to short paragraphs, subheadings, and bulleted lists. Use highlighting and emphasis to make important words catch the user's eye.
   • Practice the inverted-pyramid principle with summary paragraph first, one idea per paragraph, clear and simple topic sentences.
   • Avoid metaphors in headings; use humor in paragraphs with great caution.
   • Split up long information into multiple pages. Each page should be written in the inverted-pyramid style. In case someone ends up in the middle of your article, each page should make sense and be able to stand alone relatively well.
   • ALWAYS spell check and proofread for grammatical errors.
7. Make your type web-friendly.
   • Maximize the color contrast between text and its background.
   • Do not use absolute font sizes - use %, but generally no lower than 85%.
   • Use web-friendly fonts: Georgia, Verdana, Arial, Trebuchet. Times is difficult to read on-screen and recommended for print only.
   • Contain large blocks of text in about 400px of space or roughly 7 words per line and left-justify only.
   • Avoid emphasizing text with an underline or color. Underlined and colored type is often mistaken for hyperlinks. Use bold, a larger font size or a different type face instead.
8. Handle your links wisely.
   • Check for broken links regularly - validator.w3.org/checklink
   • When linking to a PDF, MS Word document, or any non-web document type, let people know. It can be an unpleasant surprise, especially for those with slow connections, to wait for another program to open.
9. Plan ahead when moving, renaming and deleting pages (W3C)
   • Be sure to use redirects when moving, renaming or deleting web pages. Moving or renaming a Web resource breaks hyperlinks from other Web resources, makes people's bookmarks irrelevant, and confuses caches and Web search engines. In short, it draws traffic away.