Web Style

The St. Olaf Web Guidelines apply to all department or academic program web pages and pages managed by administrative offices of the college. Every web page contained within the official stolaf.edu site conveys an impression of the college to both internal and external audiences. Therefore, it is important that all such pages help maintain and reinforce the consistency of messaging and look the college is attempting to project to web viewers.

Individual faculty, staff, and student pages are not considered official college pages.

These guidelines provide instruction on applying the required St. Olaf design layouts and implementing other site-wide standards, plus recommendations on best practices. Web authors also should consult the St. Olaf Writing Style for help with proper word usage, spelling of St. Olaf terms, grammar, capitalization, and punctuation.

Additional reference materials can be found at the WordPress Overview page.

WordPress design layouts

Three basic design layouts (or templates) are available for use by departments and offices:

stnd_2column1. Standard two-column
This layout contains a left-hand navigation column and a center text block. The navigation column introduces the information structure for the department or office site, organizing the presentation of individual pages and providing hyperlinks to site content. The text block is used for presenting copy. Photos may be embedded within the copy through the “add” and “insert media” editing functions.

stnd_3column2. Three-column
These pages contain three parts: the left-hand navigation column, the center text block, and a right-hand column used for highlighting dynamic information not found in regular copy. Examples of right-column content include special features and hyperlinks leading to unique content, announcements of events or deadlines, or other time-specific information. Icons and images may be used in the right-hand column to introduce hyperlinks.

stnd_1column3. Single-column
This layout, which contains only a single page-wide text block and no left-hand navigation column, is used rarely — most often for framing video or slide presentations, presenting forms, or projecting other stand-alone material (e.g., official documents). Although it has no left-hand navigation column, care should still be taken to provide a link back to the parent navigation structure.

Content

All official stolaf.edu content must reflect the mission, goals, and objectives of the college. College web pages are not the appropriate venue for anything that does not contribute in a professional manner to the tone the department or office wishes to establish (for example: animation, non-academic videos, and sound bytes are not appropriate).

Web authors are responsible for ensuring that posted content is current, accurate, and copyright/trademark compliant. Posted material should be reviewed periodically for currency and updated or revised accordingly. Refrain from creating content that needs constant refreshing if you are unable to maintain the site in a timely manner.

Home pages

Office and departmental home (or “landing”) pages should provide a brief overview of the academic program or services/activities offered by the department or administrative office, plus a clear information structure for the organization and presentation of additional pages. The left-hand navigation column serves as the principal framework for navigating a site’s major pages.

PeoplePageSampleFaculty/Staff listings: the ‘People’ page

Navigation for each office/department site must include a link named “Faculty and Staff” or “Contact Us” that directs viewers to the  standard “People” page template containing directory information for the office or department.

This page includes (see example at right, or a more realistic version here):

  • A top-of-the-page section identifying the location of and general contact information for the department or office.
  • A photo directory that provides individual contact information, title, areas of expertise or administrative responsibility, office hours as applicable, etc. Use color photos (140 x 140 pixels) of good quality (no fuzzy cellphone images). Photos should be deliberate portraits (as opposed to a headshot cropped out of a family reunion image). Contact the Office of Marketing and Communications for assistance in obtaining standardized photography for this purpose.
  • Brief biographical information (degrees held, areas of expertise, etc. for faculty; specific duties for administrators and staff) is required for each entry.
  • A built-in hyperlink is permitted to personalized pages containing detailed biographical information such as the teaching and research interests of individual faculty members, plus audio and video files.

Additional expectations for academic department/program pages

Each department/program landing page should generally contain links to the following pages:

  • Requirements of the major (or concentration)
  • Course offerings (may use a link to the course catalog for this purpose)
  • Information about relevant off-campus program offerings
  • Special opportunities or honors for students in the major/concentration

Special note:
New content on the site should comply with Section 508 of the Rehabilitation Act standards. (Also check out the guide from the Federal Access Board, plus a checklist.)

Do not use …

  • Auto-start video or audio. Instead, allow users to determine when to play multimedia components embedded on the site.
  • “Splash” pages that use high-end graphics requiring the user to click through to the actual site or page content
  • Pages that announce that the content is “Under Construction.” Publish pages only when they are prepared for viewing.

Formatting

Page titling

The page title block serves as the main header at the top of the page. Where possible, choose simple, short titles. The page title and navigation should match as closely as possible. Use title case in headlines according to the following abridged Chicago Manual of Style rules:

  1. Capitalize the first and last words in titles, and capitalize all other major words (nouns, pronouns, verbs, adjectives, adverbs, and some conjunctions — see No. 2).
  2. Lowercase the articles the, a, and an, prepositions, and the conjunctions and, but, for, or, and nor.
  3. Lowercase to not only as a preposition but also as part of an infinitive (to Run, to Hide, etc.), and lowercase as in any grammatical function.

Also avoid extraneous words such as “Welcome,” which distract from the clarity of the page offering.

Subheadings and font style/size for text

Appropriate subheadings and font style/size for text are set within the St. Olaf College WordPress layouts. No additional or alternative font styles should be selected in preparing page content. Web authors should use only existing paragraph and subheader options contained in the pull-down editing menu.

If you use code, do not use the deprecated “font” HTML tag or specify a font style within another HTML tag (a “span” tag, for example).

headers

The following includes approved font styles that have been specified within the layouts. Heading 1 (see “Page titling,” above) should be used only at the top of the page. Subheadings (headings 2 and 3 — both the same due to WordPress issues) and secondary subheadings (heading 4) should be used in all other cases.

Use sentence-style capitalization for subheads and secondary subheads (capitalizing only the first word and any proper names).

styles1

Paragraphs

Paragraphs should be left-justified. Keep paragraphs short. Avoid using spaces to place text.  For example, do not try to line up or indent text by adding space. The content management system is programmed to strip out extra spaces. Spaces display differently depending on the browser, so what lines up on the computer you are using may appear differently on another one.

Hyperlinks

Do not precede hyperlinks with the words “click here” or “go to.” Links should be integrated into text — either incorporated in the main text or in a separate “call to action” statement. When possible, link to an original information source instead of duplicating it.

Examples:

  • “St. Olaf was one of 10 institutions across the nation to win a Beckman Scholars Program grant this year.” (link to external, non-St. Olaf page; select the “Open link in a new window/tab” box when creating)
  • “Instead, audience members attending this month’s performance of The Alice Project at St. Olaf College will traverse through Dittmann Center as they try to keep up with the cast.” (link to internal St. Olaf page; do not select the “Open link in a new window/tab” box when creating)
  • Visit the President’s Office

The text of an email link should be the email address only. For example, an email link to contact St. Olaf Admissions should read simply “admissions@stolaf.edu”; in text you could use “Contact St. Olaf Admissions for more information” or “Send us a note for more information.”

Note that hyperlinks are the only colored text on your page (besides the green title) and the only time text should be underlined.

Refrain from showing links to content on the page being viewed (i.e., including a series of links at the top of a page that link to different headers on the same page). Scrolling is preferable to the clutter those links create.

If you have a number of external links you would like to promote, consider building a “links” page.

Test links regularly … and fix them if they’re broken.

Images

Use quality images (good exposure, in focus, color). If you have an image that’s less than ideal, try improving it using a photo editor (which can be as simple as the editing tools in Apple’s basic Preview program, for example). If it can’t be fixed, don’t use it.

  • Web photos should be 72 dpi (that’s “dots per inch”) resolution with “JPG” or “PNG” file extensions. Aim for a shorter load time by using images that are 30 kilobytes or smaller.
  • Scale the photo according to your needs and align it along the left- or right-hand margin within your text.
  • Permissions should be obtained from subjects represented in photos published on the website whenever possible.
  • Avoid posting photos that include children.
  • Avoid slideshows or presentations in Flash, which is not supported by Apple products/software.
  • To comply with Federal Access Board standards, make sure that photos include information in the “alternative text” field within WordPress that describes what is shown in the image.

The Office of Marketing and Communications has a library of campus photography available for use by web authors. Web authors may set up a time to come browse through the library and select images for their site.

When selecting photography, if you’re not sure whether a photo is appropriate (depicting your department chair in an unflattering light or showing campus on the grayest day in the middle of winter, for example) you probably should not use it.

Clip art should not be used on college web pages. If necessary, use photographic icons instead to highlight hyperlinks or information.

If you have questions about images and graphics not covered here, contact Marie Frederickson in Marketing and Communications and she’ll direct your query to the proper staffer.

Banner images

Banner images are stored in the WordPress media library for use by web authors. Contact the Office of Marketing and Communications if you require a more specific focus or have need for a specific banner.

More Tips

Writing web copy

Write clearly and succinctly. Most readers scan online pages for content, so avoid large blocks of text by breaking your words into manageable sections. Have at least one other set of eyes proof your work for spelling, grammar, and punctuation. The following techniques will help:

  • Write short sentences and short paragraphs
  • Limit paragraphs to two or three sentences
  • Use subheads to break up longer tracts of text
  • Avoid jargon and spell out acronyms
  • Use bullets or numbers for lists
  • Avoid contractions
  • Use black — never colorized — text (except for hyperlinks, which are colorized and underlined automatically)

Never:

  • Underline text (which can denote a non-existent hyperlink); instead, use italics and/or bold (sparingly) for emphasis
  • TYPE IN ALL CAPS (it’s kind of like shouting)