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?

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, in a different style to make it stand out from the regular text. The photo will automatically shrink to fit smaller screens.
  • Want to post small images with text to the right? To create thumbnail-photo news items, like those on the Admission homepage, use the Format menu to insert a “div” tag, apply the “news item container” style to the div, then place your image and paragraph within the div. If you run into trouble with the items wrapping up next to each other, add a horizontal rule between each div.
  • Want your main content divided into two columns? Place each column in a div and apply the “left aligned container” style to both divs. This will cause the divs to appear in two columns on a desktop screen, but to stack into one column on mobile 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. Our headings are designed to add some color to the page.

Use bulleted lists
  • The “pretty list” style will add colorful bullets.
Never say “Click here”

Make the name of the thing itself the link. Your links will be clearer and more prominent.


Need Help?

Contact the IT Help Desk or the college web designer.

 

Use a Right Column!

Use a right column to place content on the right side of the page. On a mobile screen, the right column will jump below the main column, so that both are comfortably readable. (A table has no such flexibility.) Try it now by narrowing your browser window. You’ll see the page design change as the screen gets smaller. This right column will drop below the main column when you get to the mobile size.