Initial Publication Date: January 9, 2009

Style Guide: Tenets of SERC Web Design

Step-by-step instructions for everything you do in the CMS are included in the CMS documentation. This section is also accessible from the editing interface, so it's always just one click away.

Content

Your site and its content and presentation should speak to faculty, their interests and needs. It should mirror the approaches used in similar materials elsewhere on SERC.

Because many users will arrive at your site from a search engine, every page should make sense as the user's first introduction to the site. The intended audience and content should be immediately evident and appropriate outgoing links should be available.

Each page should focus on a single coherent topic. New topics should beget new pages. Long pages should have anchor links so that users can jump down to appropriate sections. (example from How to Teach with Google Earth)

Formatting

Web pages should be written to support scanning by users. Key points should be made clear through heading and subheads. Text should be as concise and direct as possible without long paragraphs; using lists or bullets where appropriate.

All design elements and formatting should serve a clear purpose in communicating the message of the page. Formatting should never be used solely to make a page more "interesting." Your pages should blend into the SERC look and feel, rather than make a statement of individuality.

Information should be presented directly in the page instead of linking to downloadable files, unless there is a clear benefit to the user in providing the information in a download (such as a PowerPoint presentation or a spreadsheet where presentation in the page would be awkward).

It is an excellent idea to preview your pages on someone else's computer and browser so you can see how it looks. Fonts that look subdued on one monitor can look huge on another.

Links and Navigation

Link text should clearly communicate where it will take the user, favoring longer action phrases and should never include any variant of "click here."

An example: Read the description of a lab about Darcy's Law developed at the 2005 Teaching Hydrogeology workshop.

In both cases it is very clear where the link will take you.

The navigation should present a complete, clear picture of all the material in the site. Links to other pages in the module should be constructed in the navigation menu and as links embedded in the text or listed in bullets. This is redundant but supports users with different browsing preferences.

Navigation links should match page titles. The order of links in the navigation menu should represent a logical hierarchy, and this order should be matched by links that are listed on the page itself. (example: Metacognition index page)

Links in the navigation menu should not take the user anyplace other than your module. Links that go to other SERC modules or to external sites should be on the page rather than in the navigation menu.

Appropriate use should be made of CMS affordances such as related links, catalog records or browses.

Imagery

The use of imagery and graphics is encouraged. However, the images need to be:

  • Copyright-free. If you must use copyrighted materials, explicit permission must be obtained and this permission must be documented when you upload the image. This also applies to any imagery posted by workshop participants. (See more details about copyright pointers.)
  • Relevant to the topic.
  • Placed on the page such that they do not interfere with the content on the page (check this by dragging your browser window to different sizes and watching how the positions of the graphics and text are affected).
  • Sized such that
    • all or most browsers can view the image without scrolling (maximum width ~850 pixels)
    • the content or subject of is clearly discernible
    • the file size is as small as possible for fast loading. Unless there is a clear need, aim for a file size no larger than 25 KB. If a larger and more detailed image is needed, use a thumbnail that links to a full-size image.
    • the resolution is appropriate and the image does not appear pixelated.


The thumbnail feature is useful for placing a small image on the page which links to a full-sized image. However, please do not use the thumbnail feature to simply resize an image that is too large. Also, if you use the thumbnail feature, make sure the full-size image is appreciably larger than the thumbnail, so that users don't wind up clicking on a thumbnail and hoping for a larger version, only to get an image that is approximately the same size.

Use captions with images whenever possible. The caption can be the same text you use in the short description of the image when you upload it.