Pedagogy in Action > Pedagogic Service > Creating Activities and Modules > SERC Style Guide

Style Guide: Tenets of SERC Web Design

Step-by-step instructions for everything you do in the CMS are included here 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

Jump down to Formatting : Links : Navigation : How to handle long pages : Imagery


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)


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.


The basic format for links is as follows: [link 'link text goes here']. Find out more about how to create links in the CMS documentation.

Links can be used in any section to link to web pages within, external web pages, catalog records, or uploaded files. 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.

Links to files:When including a link to an uploaded file, use the format such as [file 12345 'link text goes here']. The file type will automatically be shown to the user along with file size and the date the file was uploaded. For example: (Acrobat (PDF) 9kB Jun17 03) or (Microsoft Word 61kB Feb16 05). Find out more about working with files in the CMS documentation.

Links to cataloged resources: Links to cataloged records, such as [resource 22145] will automatically have a (more info) link displayed following the catalog record title.


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.

How to handle long scrolling pages

Ideally, online information is easier to read in small chunks of text with short sentences and effective use of bulleted lists. In trying to keep a lot of content on one web page, there are a couple of ways to help the user.

Use the [hidden] text tag for supporting content. This tag and it's counter part [end hidden] are used to surround text that we'd like to have hidden except when the user explicitly wants to see it. This is also how image captions are handled. For example: Example of hidden tag

Another way to handle long scrolling pages is to add 'anchor-like' links to the top of the page as a sort of alternate navigation technique. For example, this page contains anchor links.


Images can be used in any section. Images provide visual appeal but should also serve a clear purpose. Often a simple image can convey a lot of relevant information a glance. Examples:

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 »