On the Cutting Edge - Professional Development for Geoscience Faculty
Leadership
Cutting Edge > Leadership > Resources for Workshop Leaders > Developing Workshop Web Pages > Style Guide

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.

Right-clicking is a good idea so you can keep the documentation pages open while you work on your site.


screen shot for documentation

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:



Google Earth - every image must have the Google Earth logo plus the contributing partners (e.g., DigitalGlobe, TerraMetrics, SPOT image) for the particular image (and this changes with both location and image extent). This all has to be readable on the image itself, it can't be just in a caption. Google Earth does not fall under the creative commons license.

NASA images can be used for free but you do have to provide credit. Every mission has its own required credits, most of which go beyond just crediting NASA. The image itself does not have to have the credits on it the way Google Earth images do - a credit in the caption is fine.

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.


« Previous Page      Next Page »