Web Standards

Mission and Audience

The mission of the website is to communicate strategic messages to external audiences, with particular focus on showing:

  1. The dynamic nature of life on campus
  2. The academic opportunities available to students
  3. The success of our graduates
  4. The caliber of our faculty in both teaching and research

The philosophy of the website is “show, don’t tell.” For instance, rather than including a page the that describes the College’s social commitment, we’d rather have page with a multitude of news stories that illustrate the commitment in concrete terms with multiple news stories.

The primary audience is prospective students and their families, but also includes prospective donors, supporters, and prospective faculty and staff. Other functions include informing external audiences about newsworthy events on campus and inspiring audience members to take targeted action, such as to give, apply, or visit the university. Occasionally, needs may arise to use the homepage to communicate short-term, emergency notices or news to current students, faculty, and staff. However the homepage will be strongly oriented toward external audiences.

Why We Have Guidelines

First impressions matter, and our website is often the first thing prospective students and faculty, alumni, or job applicants see of Grinnell.

For this reason, it is important that our site works seamlessly, we show the many facets of Grinnell, but we emphasize our College’s strengths and identity as a whole. This happens when we speak together and our content represents Grinnell College consistently and accurately.

To aid in this goal, the Office of Communications has created these web editorial guidelines to serve as a resource for those contributing content to the website.
Information below describes the site's mission, audience, governance, and editorial guidelines.

The Interactive Team’s Role

Working under the umbrella of the Communications Office, the Interactive Communications team manages design and content of grinnell.edu.

The Office of Communications developed the public website to be consistent with the College’s identity. This design has established colors, fonts, and navigation that allow for users to easily move through the site. Colors, fonts, and navigation cannot be changed. Requests to add pages to the official site must be approved by the Office of Communications in order to protect the navigational structure of the site.

Accessibility

“Universal design,” maintains Elaine Ostroff,  “is not a trend, but an enduring design approach that assumes that the range of human ability is ordinary, not ‘special.’” All of us pass through stages where we gain and lose different abilities.  Difference can include those we think of as physical, like diminished or enhanced vision, to those we classify as cognitive, such as ease or difficulty focusing on a task.  Some difference may be temporary—a lack of focus may be caused by a lack of sleep—while others are permanent. No matter what abilities our visitors have, we want them to find the College website rich, functional, and easy to use.  Accessibility and universal design standards help us make sure we meet that goal.  In addition, we have legal obligations to make the site accessible under the Americans with Disabilities Act and other code and regulations.  The United States Department of Justice periodically checks our website to make sure we meet the requirements.

Website Standards

To maintain consistency and compliance with Federal regulations, you have the responsibility to follow the website standard by

  • Following the standards described here and throughout the site.
  • Avoiding hacks or work-arounds.  Just because you can do something, doesn't mean you should. 
  • Asking for additional formatting options (styles), special content types, or other, standards ways of doing things. 

Why Should I Maintain the Standards?

  • It's the right thing to do. Grinnell College has a long history of social justice and activism, and universal web design is consistent with that history.
  • Many standards, such as using headings correctly, make the site easier for everyone to use.  Others may be focused on the needs of a particular audience.  Either way, following all standards makes it possible for us to create a site that is both easy to use and rich with valuable tools and content.
  • Want to highlight a couple of sentences?  Don't just make them a Heading 3.  You cause problems for search engines, screen readers, people scanning the page, etc.  Work with the Web team to come up with an approved highlight style.  You'll benefit (you'll get a nice looking style that works everywhere and is easy to apply), other content owners will benefit (they'll get the same thing), and site visitors will benefit (they'll be able to easily skim the organization of the page, while still finding pertinent information).

Additional Resources

Headings

Headings are similar to an outline; they indicate the page structure and give readers a quick overview of what the page is about. 

Standards for Headings

  • Only use headings to indicate document structure, not to make text BIG or bold. Contact us if you need additional styles for emphasis.
  • Heading 1 is the node title. A node can have only one Heading 1.
  • Use the formatting dropdown in the WYSIWYG to apply headings 2 through 6.
  • Use headings like an outline to structure your page. For example, use heading 2s to indicate major sections of your page, with heading 3s marking subsections inside the major sections.

Why Are These Standards Important?

  • Search engines use them to figure out what a page is about.
  • Heading 1 (also used as the page title) is the single most important piece of information used by the search engines to identify what the page is about, and also appears in search results.
  • People scanning the page use them to get a feel for the organization of the page and to skip to the sections that are relevant for them.
  • Chunked and labeled information is easier for people to understand.
  • Screen readers use them as page navigation.
Links

Links provide mobility on a web site because they allow visitors to move between pages.  The text you use in the link works as a signpost to tell people what they'll find if they take that path.

Standards for Creating Links

Link text should be

  • precise. Give a clear idea of what's behind the link.  If appropriate, reflect the words readers will find at the other end of the link (for example, in the title of the page you've linked to).
  • short (2 to 5 words).
  • descriptive. Never make a link that says "Click here"—it says nothing of worth.  If your audience doesn't understand the nature of links, you can include instructions before or after the link.

Link URLs should be

Link Targets

The WYSIWYG we’re using in Drupal allows users to set a link to open in the same window (the default action), or open in a different window. Only make links open in a new window if the link

  • Provides timely assistance or help. Links providing additional or background information don't count.
  • May interrupt an ongoing process. For example, links on forms or pages with some type of application interface.
  • Leads to a non-html-document. For example, links to PDFs.
  • Leads to a large image which takes time to load.

Do not make links that open in a new window in any other instance without consulting the Quality Assurance Committee.

Why are Link Standards Important?

Well written links are

  • Easier to scan.
  • Easier to understand
  • Screen readers can skip from link to link and still make sense.
  • Links that open in new windows can cause a host of usability problems.

Examples

(Very) Bad:

  • Click here to go to the Off-Campus Studies web site.
  • To learn more about financial aid at Grinnell, click here.
  • For more information, click here.

In these examples, readers scanning the page would have to stop at each link and scan the surrounding text to find the links they were looking for. Those using assistive devices, or tabbing through the page, would get "click here," followed by "click here," followed by "here."  Not very useful.

Better:

Or simply

By simply scanning the links, you can quickly see where each is likely to take you.  The links are short and informative.

Metadata

Metadata is the information—like creation date, author, address, and more—that describes the content of a node.

Standards

  • Fill in metadata whenever possible.
  • Provide as much metadata as you can.
  • Provide copyright or permissions information.

Why?

  • You’ll want the information 10 years from now.
  • It’s easier to find now than in five months.
  • You may want it in a different view or display.
  • It can help us avoid copyright problems.
  • Some metadata helps those using different devices, such as screen readers or small devices.
Multimedia

Pictures, videos, animations, audio files, and other multimedia elements can all be used to give richness and depth to our visitors' experiences. However, these elements cannot be enjoyed fully by many visitors without text alternatives.

Standards

  • Add alt text to images.
  • Add closed caption options to videos.
  • Save pdfs in accessible formats.
  • Offer transcripts of audio files.

Talk to us about other media types.

Why?

  • Required by law.
  • Text files improve search results.
  • Makes the media accessible and available to everyone.
Page Titles

Drupal displays node titles in multiple places:

As the node's Heading 1 (the most prominent and important heading on the page)

As the link text in many views (for example, the node titles for news releases appear as the clickable headlines on the front page of the website).

And as the page's HTML title (in combination with the section title and "Grinnell College"). 

Standards

  • Make titles distinctive and descriptive.
  • Describe the contents of the page.
  • Don't include “Grinnell College” or section name. The site automatically adds the section and Grinnell College to the HTML title. For example, a node with title of Faculty in the History section would have an HTML title of Faculty – History | Grinnell College
  • Don't use acronyms in titles. E.g. use "Digital Millennium Copyright Act" instead of DMCA.
  • Create titles that make sense when read out of context, for example by a screen reader or in a site map or list of search results

In addition, titles should be short, begin with the most salient words describing the contents of the page, and not begin with "The" or "Welcome."

Why?

  • Drastically improves search results. Search engines use the page title to determine what the page is about.
  • Helps people guess what they’ll find on the page. It's the most prominent item on the page.

Examples

“Mentored Advanced Projects” or “Campus Map” are significantly better than “Map”

Required Fields

When you are adding content, you'll find some fields are required.  If you leave them blank, you'll get an error message.

Fields are required for a reason. 

If you feel a field shouldn't be required, or you aren't sure how to fill it in, let us know.

Standards

  • Don't lie to the database. If it’s required, fill it in with real information!
  • Check the help text on the field to see what needs to be in the field.

Why?

Required fields are there for a reason.  It may be required for:

  • Legal reasons: e.g. copyright information
  • Accessibility or usability: e.g. alt text
  • Views and blocks: e.g. general tags used to FAQs
Standardized Information

Standardized information can include small bits of information such as dates or phone numbers, or larger groups such as fields in a content type.  Standardized information can also include snippets of data, such as hours of operation. For example, Spencer Grill hours might appear in the context of dining options, as a restaurant suggestion in visitor information, and in a listing of hours for services located in the Rosenfield Center. Pages of record are pages referenced in several places throughout the site. These include:

  • Campus map
  • Hotel and restaurant information
  • Course information
  • Academic calendar

Standards for Shared Information

  • Always think about the information you are presenting within the context of the entire site, not just your sub-site.
  • Use the correct content type.
  • Use shared nodes—such as file, image, and video nodes—correctly.
  • Follow writing standards.
  • Don't duplicate large chunks of information that are available elsewhere on the site. If content appears elsewhere on the site, link to it, or add it to your pages using a filter, view, or block.
  • Consider whether shared data might be better coming from external databases (such as the calendar or directory).
  • If you find information that appears to be duplicated across the site, contact the other content managers or web[at]grinnell[dot]edu to see if it can be coordinated.

Why are These Standards Important?

  • Having fewer people updating it speeds work flow.
  • If an error is found on one place, it can be automatically corrected in all places.
  • Visitors find it easier to locate what they need when it's in the same place and/or format throughout our site.

Examples

  • Course information is linked to with the same word on all academic sites, making it easy for students for find.
  • Rather than having many different versions of the map and hotel information, we have "pages of record" in the About information of the site.
  • Files owned by Financial Aid can are maintained by them, and Admission uses filters to link to the forms.
Short Titles

We use short titles to create the URLs for our pages. When your page appears in a browser, the short title will be the last part of the web address.

Standards

  • Use keywords (most often these come from the title).
  • Keep short titles short, sweet, and easy to read.
  • Use only letters, numbers, dashes, and underscores.
  • Do not use spaces or other characters.
  • Keep full URL under 100 characters.

Why?

  • URLs with spaces break when emailed and can be difficult to interpret in print.
  • Certain special characters are not allowed. Others may be misinterpreted.
  • Long URLs are difficult to remember, type, or describe to others over the phone, and tend to break when e-mailed.
  • Our site does not support urls over 100 characters.

Examples

  • Incorrect: Tobias Fünke ’03, Personal Profile Page
  • Better: Tobias-Funke-Profile-Page
  • Best: Tobias-Funke, TobiasFunke, or Funke
Writing

Web writing must be clear, concise, and well-organized to be effective.

Standards for Web Writing

  • Follow the Grinnell Style Guide.
  • Write clearly and concisely.
  • Organize your content logically.
  • Use proper spelling and grammar.
  • Edit your work. Have someone else review it.

Why are These Standards Important?

  • Easier to understand.
  • Looks more professional and reflects the quality of the institution.
  • Provides site-wide consistency.
  • Reads better.
  • Not jarring to grammarians.