Help

Web Design Style Guide

Amherst homepage being tested on various screens

Questions?

Have a question about designing your pages, or need help using our styles?

Contact the web designer, Willa Jarnagin, in the Office of Communications.

Creating or editing webpages on the Amherst site? This guide shows the styles available to you via the college’s Content Management System. First, here are a few general tips:

  • Less is more. Keep your formatting simple.
  • Test your page on a mobile screen.
  • Don’t make your text unnecessarily small. Font size varies by computer or device.
  • Keep all-caps and bold text to a minimum.
  • Add photos to your pages. No amount of formatting adds more life to a page than one photo does.
  • Make your pages accessible to the visually impaired.

Drop Caps

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


Headings

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.


Paragraph Styles

Most of the time you’ll want to use regular paragraphs, which require no style to be added.

For small text or captions, you can use the “Fine Print” style. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed auctor ligula eu pede. Praesent congue felis vel massa. Phasellus placerat varius nulla.


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. Use the Fine Print style for the caption, if you wish.

Sometimes you’ll want to use small 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, with some margin between the image and text.

A similar style called “image align right” makes the image align to the right side of the page, and text wrap on the left.

 

 

Example Pages

Here are a few pages showing a variety of styles:

Financial Aid

Commencement 2014

Convocation 2013

Parents & Families


Table Styles

Use tables only for tabular data, not for layout. Keep in mind that tables may not be readable on mobile screens if they have more than a few columns or if there is a lot of text in each column.

Table with Horizontal Rules
Click the “Insert new table” button in the editing toolbar to make a table. Choose the class, “table with rules.” This table is “100%” wide, which makes it fill the page.
Add a “cell spacing” of 3 or more to prevent the text from being squished in the table cells. Click the “Table cell properties” button to set the column width. These columns are set to 50%.