Initial Publication Date: April 28, 2010

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.

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

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

The basic format for links is as follows: [link http://www.google.com '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 serc.carleton.edu, 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.

Navigation

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.

Imagery

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:

  • 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.