FACS logo

Maintaining Your Web Page

Expression Engine makes it easy to keep your page up-to-date and within FACS web standards. Below are the FACS web standards and guides on performing your tasks..

Standards

Our website is managed by numerous content authors. A typical user journey spans pages managed by multiple authors. If we cooperative, these standards ensure that our readers get a unified and easy-to-use experience.

What's standard use?

This is the easy part: Just use fields as they're supposed to be used. This usually involves much less work than trying to be different or going overly-complicated with design. Each field has documentation with it telling you how it's used. Finish reading this page to get a clear understanding of FACS web standards.

If editing a page, simply edit in accordance with how it's already defined. 

If creating a new page, the FACS Web Team will collaborate with you on any new web page, so there's no guesswork as to how to create/maintain your page. 

Edit Your Web Page

From your public web page, click on "Edit Page" at the bottom right. (You can also see it on this page.)

After you click "Edit Page," you'll find your content defined one of these tabs:

Edit Entry with tabs Publish, Advanced, People/News/Events

Scan over these tabs to find your content, then follow the instructions of the field to update it.

The Body Field

The most used field, Body, is simply for heading + text content, just like what you see in this page. 

The toolbar is used for performing common tasks.

styles box, link chain, unlink, flag, lists, bold, italic, photo, word, source

Top Tasks

  1. Create a heading: Select some text, click the "Styles" dropdown box, choose a heading.
  2. Create a link: Select some text, then click the Link tool (first icon after Styles, looks like a chain).
  3. Upload a file: Select some text, click the Link tool, click "Browse Server" then click "Upload File." See Video
  4. Edit a link: Double-click on a link.
  5. Make a button: Click a link, click the "Styles" dropdown, select a button.
  6. Paste formatted/rich text: To retain links and formatting, you'd use the Paste from Word tool near the right of the toolbar.
  7. Make a table: You can paste your table (use Paste from Word) from another program, or create a table from the toolbar using the Table tool. After creating it, click in it somewhere, click the "Styles" dropdown, then select "Table." That will make it pretty.

Images are best included into other fields, where fancy design is done for you.

Other Fields: Widgets

When anything other than basic heading + text content are needed, other fields called "widgets" are used--these build advanced visuals with minimal requirements from you (view short demo). For example, the Contact widget gives you a dropdown box where you select a person--that's all you do. Behind the scenes the Contact box, link to the person, and person icon are constructed.

It's best to use a widget rather than trying to get fancy in the Body field, as this will construct things that look better, are easier to do, and standardized.

Fields

The most popular fields will be visible by default on the Publish tab.

Less common fields are on the Advanced tab. 

Fields that let you import people, news and events are on the People/News/Events tab.

Edit Entry with tabs Publish, Advanced, People/News/Events

Image Use

If you want to add an image, use one of these fields, all on the Publish tab.

Field Name Image Size Text Use For
Image Grid Medium to Large 1 sentence Image galleries
Card Grid Small to Medium 1-2 sentences Small amount of text
Image + Text Small to Medium 1-2 paragraphs Medium amount of text
Image Popup Medium to Large 1-? paragraphs Large amount of text

We have more fields for specific functions, which include an image. These are:

  • Highlight Box - Box on the right side of your page. Can contain a single image with a link.
  • Advanced > Testimonials 
  • Advanced > Header Image
  • Advanced > Timeline
  • People/News/Events > Related Person
  • People/News/Events > Featured Person 
  • People/News/Events > News

For more info, see the field documentation or Widget Demos for examples.

Images should:

  1. Be highly relevant to your content.
  2. Not purely decoration.
  3. Not impede your user from performing their top tasks. This is why header images should be used sparingly or not at all, as they push down the content that your user is looking for.
  4. Have a description defined. Next to any image field you'll see something like "Description" - define this for users with vision impairments.

If you want to add an image and are unsure of which field to use, contact us.

Nielsen Norman, the experts on usability, have many articles on image use. A few are:

In short, use images that actually help your reader and don't make it harder for them to find the information they came for.

Icon Use

For icons you'd simply locate the icon you'd like to use and reference that. No need to upload anything; the icons are already built in.

  • Highlight Box Icon Links
  • Advanced > Highlight Box Social Links 
  • Advanced > Icon Body Links
  • Advanced > Big Icon Links

Adding headings between grid fields

Many fields let you add variable items in them, such as Accordion. They look like this:

Accordion field with add new row as the focus and text: This lists your items by Title only, with Body expanding upon Title being clicked. If you want a new heading, only define Title.

Sometimes you'll want a heading separating groups of items. For instance, you might have "Area 1" with its items, then "Area 2" with its items. You can define headings in between items by only defining Title. This will always be documented, like what you see in the screenshot.

Channels

Expression Engine organizes content into channels. You can see these if you click on Create or Edit at the top left.

Popular Channels

As a content admin, you'll likely edit content in your own department's channel, plus these.

Less popular channels, but potentially useful

  • Events Repeating - Use this to duplicate events. Video Tutorial
  • Featured People - This is great when you want a detailed profile on somebody.
  • Highlight Boxes - Sometimes you want to use the same highlight box repeatedly. Define it here, then you can use "Highlight Box Import" (Advanced tab) to import it into those pages.
  • Internal News - This generates a deparmental news kind of page. Examples: FDN, FHCE.
  • Mass Upload - Do you have a bunch of images or documents that you'd like to add to the website, but don't want to add them one-at-a-time? Use this.

Common Mistakes

Adding decorative images as header images

Solution: See Images.

Overusing bold and italics

Keep things simple. Don't bold or italicize headings or links. 

There's a balance between standards, which ensures our users have a good, consistent experience, and all of the possible ways a web page can look. Keep things simple so our pages stay within the standard FACS look and feel.

Every few years we update the typography of the website. Sticking with default styling ensures a smooth upgrade.

Solution: Bold and italize sparingly.

Making entire paragraphs bold / CAPS LOCK / a heading

This is not the way to call special attention to a paragraph.

Solution: Bold only key words and/or place a short heading above your paragraph, e.g., "Emergency Update."

Using CAPS LOCK or exclamation mark(s)

This doesn't help your assertion and looks unprofessional. 

Solution: Being succinct and clear (e.g., "Apply" vs. "APPLY NOW!") is the best way to draw focus to your call to action.

Trying to fit everything 'above the fold'

Modern, mobile-first design means that we design for very small screens, prioritizing content in a hierarchy, since content is broken up into a 'one-part-at-a-time' order on mobile.

Solution: Keep Highlight Box content short, or not use them at all.

Adding links with no explanation

Unless the link text is already clear, adding links with no explanation harms the user experience in your web pages.

Related: A Link is a Promise

Solution: If you'd like to persuade a user to click your link, state what benefits they can enjoy from this link or have some explanatory text around the link, providing information scent.

Adding images with no explanation

Images are great to supplement your narrative. But they shouldn't be your narrative. 

Solution: Caption your photos to engage your user and tell a more compelling story.

Video Tutorials

Accessibility

  1. Don't include text inside images or videos. Use text fields for text.
  2. When including images, define the "Description" field nearby.
  3. When including videos, caption them.
  4. When uploading documents, follow these instructions:
Jump to top