Web Design Style Guide

Amherst homepage being tested on various screens

Creating Webpages on Amherst.edu?

This guide shows how to use the tools in the college’s Content Management System to make your webpages display well on a variety of screens and devices.

A Few Tips to Start

  • Less is more. Keep your formatting simple.
  • Test your page on a mobile screen.
  • Add photos to your pages. No amount of formatting adds more life than one photo does!

A Note on Accessibility

If you follow the suggestions here in this style 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.


Mobiles & Responsive Design

A responsive website changes to display its content optimally on different screen sizes—from a large desktop to a small mobile, and everything in between. Amherst’s website is already responsive: Our page width, menus, and images adjust for screen size. But you can help by ensuring that your content can be displayed responsively:

  • Keep your presentation simple. Use one column, with headings and paragraphs.
  • Avoid tables. Use them only when you must display information in corresponding rows and columns.

Headings

Use headings to structure your content hierarchically. To make a heading, select the text and choose a heading from the “Format” (or “Paragrah”) drop-down menu.

Heading 2 is used automatically for the page title, at the top of the page. Elsewhere on your pages, use:

Heading 3

Header 4

Header 5
Header 6

Tip: Use headings to break up large blocks of text and allow people to scan a page more easily.


Bulleted Lists

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

Text Styles

When editing a page on the Amherst website, select text and then choose a style from the “Styles” drop-down menu.

Paragraph Styles

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

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

Drop Caps

This is Drop cap 1. Select the first letter of a paragraph and apply the “drop cap1” style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nunc id nisl consectetur adipiscing mollis imperdiet purus. Ut malesuada urna ut est consectetur malesuada.

This is Drop cap 2. Select the first letter of a paragraph and apply the “drop cap2” style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nunc id nisl consectetur adipiscing mollis imperdiet purus. Ut malesuada urna ut est consectetur malesuada.


Images

Keep it simple: Insert a large photo in your article, with a caption under it.

Most of the time you don’t need to add any styles to photos; simply place a large photo under your title, or between paragaphs, and place a caption below, using the “caption” style.

Sometimes you’ll 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.


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.