This guide shows how to use the tools in the college’s Content Management System to make your webpages display well.

April 2016—New Design Components

To make selected content stand out, take advantage of our design components, which enable you to display content prominently without having to do much formatting. For example, you can use an Announcement component to post an urgent notice. All our components are fully responsive, displaying optimally on screens of all sizes—from desktop to mobile.

Regular Articles

You will still use the “article” content type for much of your content. In articles, keep your formatting simple for maximum readability. Read more below.

A Note on Accessibility

If you follow the suggestions in this guide, you’ll go a long way toward making your content accessible to the visually impaired. Now take the extra step, by learning more about making your pages accessible.

Formatting Content in Articles

For most content, you will continue to use the “article” content type. With the sitewide redesign in March 2016, we simplifed the formatting options in our articles. 

Headings

Use headings to categorize information and allow people to scan your page easily. To make a heading, select the text and choose a heading from the “Format” (or “Paragraph”) drop-down menu.

Heading 1 is automatically created, serving as the page title at the top of the page. The Title field in an article creates a Heading 2. In the body of your article, use: 

Heading 3

Heading 4

Heading 5

Bulleted Lists

  • A bulleted item stands out.
  • A bulleted list is easy to read.

Paragraphs

Most of the time you’ll use regular paragraphs, which require no style to be added. Keep it simple!


Captions

For captions under photos, you can use the Caption style, which is a bit smaller and lighter than regular text.


Drop Caps

To apply a drop cap, select the first letter of a paragraph and apply the “Drop cap” style. Use drop caps sparingly—preferably only for the opening paragraph on a page. Drop caps draw the eye into text, and are a nice way to begin a page. 


Images

Most of the time you don’t need to align a photo; simply place a medium-sized photo under a heading or between paragaphs. 

The Quad in August
This is the “Caption” style, for use under your photo.

Note—you can also use the Image with Caption component. Add the component above or below your article.

Sometimes you might want to use smaller photos:

Walking Toward the Range

The photo at left has the “image align left” style applied to it, which makes the image align to the left while text wraps on the right.

A similar style called “image align right” makes the image align to the right side of the page.


Links—Don’t Say “Click Here”

To make your links clearer and more prominent (and more accessible), link the specific name rather than “here.”

No:
The college’s scenic 1,000-acre campus is adjacent to downtown Amherst, and includes a 500-acre wildlife sanctuary, which you can learn more about here.

Yes:
The college’s scenic 1,000-acre campus is adjacent to downtown Amherst, and includes a 500-acre wildlife sanctuary.


Questions?

Have a question about design, images, organization, navigation, writing, formatting, special features, or anything else? The Office of Communications is here to help. Contact Willa Jarnagin, Director of Web Design & Communications Services.