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. See the bottom right of this page to identify it.

After you click "Edit Page," you'll find your content defined in the default tab, Publish, or one tab over in the Advanced tab.

publish tab and advanced tab beside it

Scan over the Publish and Advanced 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 and are easier to do.

Fields

The most popular fields will be visible by default on the Publish tab (view screenshot).

The less common fields are on the Advanced tab (view screenshot). 

Image Use

If you want to add an image, use a field like Image Grid, Card Grid, or Image + Text.

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.

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:

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

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

Jump to top