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..
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.
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:
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.
- Create a heading: Select some text, click the "Styles" dropdown box, choose a heading.
- Create a link: Select some text, then click the Link tool (first icon after Styles, looks like a chain).
- Upload a file: Select some text, click the Link tool, click "Browse Server" then click "Upload File." See Video
- Edit a link: Double-click on a link.
- Make a button: Click a link, click the "Styles" dropdown, select a button.
- Paste formatted/rich text: To retain links and formatting, you'd use the Paste from Word tool near the right of the toolbar.
- 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.
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.
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.
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.
- Be highly relevant to your content.
- Not purely decoration.
- 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.
- 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:
- Decorative Images: Delightful or Dreadful?
- Image-Focused Design: Is Bigger Better?
- Photos as Web Content
In short, use images that actually help your reader and don't make it harder for them to find the information they came for.
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:
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.
Expression Engine organizes content into channels. You can see these if you click on Create or Edit at the top left.
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.
Adding decorative images as header images
Solution: See Images.
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.
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.
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.
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.
- Editing widgets
- Typical page edits
- Adding and editing Extension news articles
- Duplicating events (Events Repeating channel use)
- Editing common widgets in the Financial Planning Undergraduate page
- Uploading a file
- Editing a profile