Formatting Content for a Responsive Design

What does “responsive design” mean? It means that a website changes to show content differently on different screen sizes, such as the smaller screens of tablets or the very small screens of mobiles. Amherst’s website is now responsive in its overall look and behavior, but we rely on individual page authors to format their content so that it can collapse well on small screens, while still looking good on large screens.

To assure your content renders across all devices, it is necessary to sacrifice some complexity of presentation, as you will see in the instructions below. Increasingly your audience is viewing your pages on mobile devices and tablets, and it is important that the college site be accessible and readable to everyone.

See also: Make Your Pages Accessible to the Visually Impaired


How Can I Format My Content So It Will Look Good on a Variety of Screens?

Trust that less is more

Avoid a complicated layout. Don’t make everything bold. Format less.

Rely on photographs to add life to your page—learn about photographic services available from the Office of Communications, and find a multitiude of photos on the Amherst Flickr site.

Use headings

Headings—H3 through H5 in particular—add hierarchy to your information and break it into more readable chunks.

Use bulleted lists

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

Don’t use tables to construct your layout

Want to place a photo and caption on your page? Simply drop a large photo between paragraphs, or perhaps under your headline. Place a caption under it, using the ”caption” style to make it stand out from the regular text. The photo will automatically shrink to fit smaller screens.

Want to post a small image with text wrapping to the right? Insert a small photo before your paragraph, then apply the “image align left” style to the image.

Never say “Click here”

To make your links clearer and more prominent, 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.


Need Help?

Contact the Office of Communications.