Website Help Web Design 101

Image

For Amherst College Website Editors

On this page are tips for creating content on the Amherst College website and for making your 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.)

If you would like a more advanced website training, contact Michael Reid (mjreid@amherst.edu) to set up a web editing workshop. These usually take an hour and can be tailored to your department’s/office’s specific needs. For general questions, you can also Contact us in Communications.

Getting Started

In order to edit content on the site, you first need to log in. Do this by going to Tools & Resources tab in the site’s top toolbar (the wrench icon), selecting “log in,” and entering your Amherst.edu credentials. After you’re logged in, go to a page that you would like to add and/or edit content. If you have permission to add/edit content on that page, you will see the Content and Settings tabs above the left menu on that page.

To add content, click “Add” and you will see the available components for that page. Most of the long-form content on Amherst webpages is displayed in “Articles,” which allow you to format your content as you wish. This guide shows how to format your content effectively for ease of reading.

Note: The below tips will also be useful when working with “Formatted Article with Image” component, which combines some pre-formatting with the flexibility of a regular Article. 

Get to Know the Toolbar

The toolbar above an article’s text field is similar to the one you find in a word processor application, such as Microsoft Word or Google Docs. 

Image

Under the “Paragraph” menu, you will find the styles for text and headings. (See “Add Headings & Subheadings” below.) Under the “Styles” menu, you will find styling options for an article’s content. Under the three-dot menu, you will find options for adding a table to your text and, for more advanced users, the ability to see an article’s HTML.

A Note About Hyperlinks/Permalinks

This is very important, as links to Amherst pages can break if using hyperlinks incorrectly!

Every page on the site has a URL and a permalink. For example, the URL for the site’s main Academics page is https://www.amherst.edu/academiclife. 

But if scroll all the way to the bottom of that page, you’ll see a permalink: https://www.amherst.edu/mm/12644.

Always use the permalink when linking to a page. The URL will change if the page gets moved, and could change if the page is renamed, but the permalink will never change, so links to a page using a permalink will never break.

Rely on photos, rather than text formatting, to add color and life to your pages. 

Insert a photo into text by using the “Insert Media” icon from the toolbar. After clicking the icon, you will be taken to site tree and brought to the page you’re working on. If you uploaded the image to a component on that page, you’ll see it as an available image; if you uploaded it to another page, navigate to that page in the tree and select the image from there.

When inserting a photo:

• Choose “Small” or “Large” to size the photo accordingly. (The option “Small Square” is the same size as small, but cropped into a 1:1 square.)
• Choose “Default” to display the full-sized image. 
• Use “Thumbnail” to display the image in a smaller square size. (The option “Thumbnail Square” is the same size as thumbnail, but cropped into a 1:1 square.)
• The option "Link to Media" gives you the option to create a hyperlink from the image. If you choose this option, you can add a URL link by clicking on the link media option in the photo editing bar.

The following photo was set to display as “Large.”

Image

This is the “Caption” style, for use under your photo.

Provide “Alt” Text to Make Images Accessible

Before you insert a photo into text, you must also add “alt” text by clicking on the “Edit Properties ”button in the “Insert Media” popup window. Every image needs to be accompanied by “alt” text, which is descriptive text that makes the image accessible to people with visual disabilities. Alt text will be read aloud by a screen-reader or translated by a Braille device.

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

Align Images and Wrap Text

Image

After adding alt text and inserting the image into your text, click on the image to see its display options. You will have the option to align your image in one of four ways: break text, align left and wrap text, align center and break text, and align left and wrap text.

You can see these options as the four options to the right in the photo editing bar.

• The photo of the King and Weiland dorms above was set to “break text,” which aligns it to the left and does not allow text wrapping.
• The photo to the right of Johnson Chapel was set to  “align right and wrap text,” which aligns the photo to the right and wraps the text around the photo.

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

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:

Image

Do’s and Don’ts

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!)

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 make the most of it.

Do use headings and bullets to draw attention to important points. 

Do use images. Photographs add life to pages. See our Image Resources.

Do contact Communications for help! Use our web services request form.

In general, it's advised to not use PDFs on the College's website. This is because:

1. PDFs frequently contain barriers to accessibility and often cannot be read by screen-readers. Regular webpages on Amherst.edu are accessible.
2. PDFs are harder to update and delete. Regular webpages can be easily updated and deleted, and contain revision histories. 
3. PDFs might not be found easily by search. Webpages with headings are more search engine-friendly.
4. PDFs don’t contain the website’s navigation menus, so they are isolated from other content on your site.
5. PDFs have no built-in design template, so their readability depends on the design skills of the person making them, whereas Amherst.edu webpages will automatically be displayed in legible fonts with accessible color contrast.
6. PDFs, having no built-in Amherst visual identity, might look unofficial or out of date (and often, PDFs found on the site are out of date). 

What Can I Do Instead?

Try our Formatted Article with Image display option for an easy way to make a presentable and professional webpage instead of a PDF.

What if I Have to Post a PDF?

In some cases, the state of Massachusetts or other regulatory entity will require certain documents to be posted as PDFs. Please see IT’s page on Accessible Documents for help making those PDFs accessible. Accessible PDFs can be uploaded to your files subpage (if you have one under your office’s or department’s top page) or can be uploaded directly in an article and set to display.

The example in this article is set to display below, but you could also link to the file directly in the text like this:

• Test Document

While articles make up a lot of the content on the site, you will see a number of other component types when you add a component to a page. The most common of these are Flexible Articles and Flexible Galleries. The advantage to using these components is that most require no design or formatting—you’re simply filling out the required fields and uploading images directly to the component and the design is taken care of for you.

Reordering Content on a Page

Image

To reorder the components that appear on a given page, select “Reorder” from the top editing menu. This will bring up the “Reorder contents” page.

From here you can move the components that appear on the main content area of the page, or move them to the above or below content sections of a page.