tablet, desktop computer, laptop, mobile phone

For Amherst College Website Editors

On this page are tips for making your Amherst College web content elegant and easy to read. These tips apply primarily to articles, which allow free-form formatting. (Most of our other display options are pre-formatted.)

Looking for help? Contact us in Communications.

How to Format Content in Articles

Most of the long-form content on Amherst webpages is displayed in “articles” — our display option that allows you to format your content as you wish. Within an article, you can paste text, create headings, insert images, add bulleted lists, and more. 

(See also our “Formatted Article with Image” component, which combines the ease of a pre-formatted component with the flexibility of a regular article. The below tips will also be handy when working within a Formatted Article.)

Where to Start? With Clean Text 

When pasting in text from an email, Google Doc, or Word doc, you might not realize it, but you’re pasting in artifacts of the original formatting, as well. If you encounter difficulty formatting your text for a webpage, it’s likely the original formatting causing trouble (we call it “junk code”). If that’s the case, try cleaning your text:

  • Select all your text and click the eraser/“clear formatting” icon in the toolbar to clear the previous formatting. You’ll need to redo your bold and italics. The eraser isn’t foolproof, but it should remove most of the previous formatting, while preserving links, headings, and (usually) bullets. 
  • If you’re still having difficulty formatting, such as getting bulleted text to line up correctly, try re-pasting in your text using the clipboard/“paste as text” icon in the toolbar. This tool will also remove your links, unfortunately, but it is the surest way to remove all previous formatting. 

Add Headings & Subheadings

Headings and subheadings provide structure for your information, helping people to read your page more easily. To make a heading, select the text and choose a heading from the “Paragraph” drop-down menu.

Heading 1 is automatically created when you create a page on our site. It’s the large title at the top of the page, above the left column.

Heading 2 comes from the Title field at the top of your article. 

In the body of your article, use: 

Heading 3

Heading 4

Heading 5

Use Bulleted Lists

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

Start Your Page with a Drop Cap

To apply a drop cap, select the first letter of a paragraph and choose the “Drop cap” style from the Format menu. Use drop caps sparingly — preferably one per page. A drop cap draws the eye into a block of text, and is an elegant way to begin a page. 

Bring Your Page to Life with Images

Rely on photos, rather than text formatting, to add color and life to your pages. When inserting a photo, choose “Standard” for a medium size photo or “Original” if you’d like your photo to fill the width of the page. 

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

Align Images and Wrap Text

Sometimes you might want to use a smaller photo and align it to the left or right. Using the styles below, your photo will be aligned to the left or right on larger screens, but on mobile screens will remain full-width.

A photo of the view into downtown Amherst from Johnson Chapel 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.

Check out our Formatted Article with Image component, which will automatically align your photo to the top left.

Provide “Alt” Text and Captions to Make Images Accessible

Every image should be accompanied by descriptive text, known as “alt” text, in order to make the image accessible to people with visual disabilities. Alt text will be read aloud by a screen-reader or translated by a Braille device. When inserting an image in an article, you’ll see a field for providing alt text.

  • If you need to post a graphic with a lot of text in it (too much to fit into the “alt” text field), such as an event poster, please repeat the image’s full text in a caption below the image. 
  • A better alternative to using an image of an entire poster is to post the photo by itself (such as the photo of the speaker) and add the poster’s text below the image. 

Create Specific Link Names (Don’t Say “Click Here”)

Use active and descriptive link names to make your links clearer, more prominent, and more accessible.

To reserve a space in our workshop, click here to register.

Register now to reserve a space in our workshop.

Be Smart with Special Characters

Smart quotes and proper em dashes help make your content look polished. Find these characters in the toolbar of your editing window when working in an article:

screenshot showing the icon for inserting special characters

Do’s and Don’ts

  • Don’t center your content. Our site is mostly designed for left-aligned content. Centered titles, buttons, and images can look floaty and awkward on our pages. 
  • Don’t overdo boldface. Use it sparingly to get the most out of it. Use headings and bullets to draw attention to important points. 
  • Do use images. Photographs add life to pages. See our Image Resources.
  • Don’t post your event poster as a graphic or PDF. Instead, upload the photo from the poster, and post the information as regular text. (And remember to post your event on the College’s Event Calendar!)
  • Do contact Communications for help! Use our web services request form.

slideshow with placeholder text

Display Options for Website Editors

See examples of the pre-formatted display components available for use on the Amherst College website, including slideshows, announcement boxes, buttons, and more.

mammoth with a wrench

Website Service Request Form

Need assistance creating or updating pages? We can help.

Visual indentity pieces, including a mammoth logo, the college wordmark, and a color chart

Visual Identity Toolkit

Find official Amherst College logos, colors, and more — as well as instructions for use — in our Visual Identity Toolkit. And browse a library of Amherst photos.