Skip to main content

CleanSlate examples and guidelines

Please refer to the page examples (PDF files) linked below to see what constitutes “good” and “needs improvement” web page design. Keep in mind that you might not be able to create pages in the exact format, but you should be able to gain knowledge to help you create balanced and appealing (and readable!) web pages for your clients.

The following points will help you design your pages. (Refer back often as this will be changed to reflect what other users are demonstrating, experiencing, sharing as they create their pages in both the “Demo 2” and “Extension Service” websites.)

If you need help using CleanSlate commands and features, please refer to the CleanSlate Roadmap

Good pages should include:

  • appropriately named files (Stay away from cryptic names, “final” or “numbered/versions,” or anything else that would be confusing for someone outside of your office. This is especially important when you think that a good file name—and page name for that matter—can be used in various places automatically without any intervention by you. An example of this would be when the submenu snippet is used.).
    • File naming format - Make sure you give your files complete names. For example, when you are naming and uploading images of specific people, please remember to use their full name and not just a first or last name. 
  • a short descriptive “blurb” for each page that is placed at the top to describe the program or activity and not buried many paragraphs down the page.
  • consistent heading sizes (title largest and then stick with one heading size for page subtitles of the same hierarchical value) -- see the Block Format command for choices.
  • consistent font treatment for similar content (e.g., the Contact Us page should have names, titles in the same size, treatment, etc. for each person).
  • hidden email addresses (especially those of your volunteers) by linking to their address with “email” instead of their actual email address on the page (link using—mailto:John.Doe@mail.wvu.edu).
  • proper grammar.
  • proper and consistent punctuation (e.g., if some bulleted points have periods at the end, then all should, etc.).
  • working links to all linked information on the page.
  • pleasing and consistent spacing with appropriate “white space” to aid the reader.
  • appropriate and easily identifiable (and identified) images.
  • images that include a descriptive "alternate text" entry suitable for a page reader program used by the visually impaired.
  • consistent use of the submenu radius snippet——in the same location for each page. If you have decided to put the submenu snippet in a navigation region to the right, then do that for each page. Please don’t confuse your audience! Make sure everyone in your office is doing that, too.

Page Examples for Good Design

Diseases
Layaway
Legislative Day
Early Blight
Disasters

Page Examples that Need Improvement

Symposium
Diseases
Environment and Natural Resources