Components

Here’s your new site’s suite of editable components: select a component to learn more about how and when to use it most effectively.

These components are your strongest and boldest, often used in specific circumstances such as your homepage or on landing pages.

These components are paired with WYSIWYG content and provide emphasis higher up on the page.

Featured News

See Component Live

How to use it

Choosing news to feature is a delicate balance of the college’s needs, and the user’s needs. The college has specific things that it would like to talk about, but it needs to marry those desires with what students—and especially prospective students—want to see. Rely heavily on stories of success. Show outcomes, especially those that result in Siena alums success in the wider world.

Siena’s close knit community means that you can focus on people in these features, especially when you are engaging your current student body. Be comfortable referring to individuals as themselves instead of relying on categorical information (i.e. Talk about them as a person, not as a student or as a Biology major).

Faculty Header

See Component Live

How to use it

This information is pulled from Siena's internal database. It should be checked for accuracy, but doesn't have a specific content strategy.

News Detail Metadata

See Component Live

How to use it

The news detail metadata component is a simple modification of the page top, bringing in relevant metadata from the news article. It doesn’t have a specific content strategy, but should be checked to ensure that the system is being utilized well.

Image Header

See Component Live

How to use it

When selecting visuals for an Image Header, remember that this is the first impression a user gets when landing on an interior page. Provide extra context to these pages, and select visuals that are not just inspirational, but relevant. When in doubt, it’s better to not use an image than to use one that will be confusing or frivolous. Image Header should be avoided on task specific pages—they’re much better at setting the tone on an expositional or story centric page

When selecting imagery, ensure that the important elements of the photo are in the vertical center, as the top and bottom may become cropped off at various browser widths. Ensure that file types are kept small so the page still loads quickly. Check text legibility over light or highly varied media using tools like the Contrast Analyzer Chrome extension.

Flex Callout

See Component Live

How to use it

Attention! Very noisy callout ahead!

Flex callouts are a visually arresting way to direct the user to a specific place. Due to their visually loud nature, flex callouts should be used sparingly and for important or visually beautiful things. Select a high-quality image, and prioritize imagery that fits the layout well.

Callout Cards

See Component Live

How to use it

These cards are supplemental information that can be at home on almost any page. There are three types of cards available: Statistic, Story, and Testimonial. Any of these can be relevant to a page, but it’s important that the connection is understandable by the student. This is most true for the Story and for the Testimonial. While generic stories and testimonials are easy to include, their impact is greatest when there is a common thread with their parent page. Statistics can be used more generally, especially when talking about the success of the college or its students.

Student Directory Listing

See Component Live

How to use it

The student directory is even simpler than the standard directory—so its only need is an occasional scan to ensure accuracy of information and that the system is working.

WYSIWYG

See Component Live

How to use it

WYSIWYG is an acronym, short for "What you see is what you get". It indicates that this is a visual designer for the web, allowing the content creator to get a sense of what the content will look like upon publishing, and visually see the structure and layout of the content. WYSIWYGs are the core of content entry on most web applications—think of it like the editor you use in gmail to compose an email.

The WYSIWYG will hold the majority of the content in the site. WYSIWYGs are highly flexible components that can take wide ranges of styled text, as well as certain block like elements, like quotes, images, or tables.

Each page comes with a built in WYSIWYG which is entered in as "Content" before the Callout fields. So why would we have a separate WYSIWYG component that can be entered into these callouts?

These WYSIWYGs allow you to build up more varied expositional content, by interspersing standard text and image content with other components. When using these content style WYSIWYGs, use the the built in page element first, and be sure to check the layout before publishing to ensure that the components flow together as seamlessly as possible.

Contact Information

See Component Live

How to use it

Contact information callouts give the user a specific person or place to contact relevant to the current page. Wherever possible, make it clear to the user who they should be contacting to get the best information. Ensure that the person on the receiving end of each phone number or email inbox is aware of where it is being published and why so they can effectively field requests sent to them.

Announcement

See Component Live

How to use it

Announcements are a sitewide feature that is active on every page of the site simultaneously. It’s important to use announcements incredibly sparingly—only in situations that truly demand it. Over use of an announcement will decrease its importance, causing users to skip it and miss important information. It’s important to consider that this type of component is used for nefarious or irrelevant purposes all over the internet, so it should be a surprise when it appears on Siena’s site.

Directory Listing with Filters

See Component Live

How to use it

As this page is another viewing of a module, there isn’t a specific content strategy for this page outside of ensuring valid data. While there isn’t an undue focus on photography in this directory, they still are attention catching, and should be checked for appropriate sizing and subject matter.

News Listing with Filters

See Component Live

How to use it

The content on the news listing is an aggregation of the news system, showing the snippets of individual articles and the featured articles. Consequentially, this page’s content is populated from the individual articles that form the news module.

This page doesn’t have a specific content strategy on its own, but it does have one in aggregate. Regularly scan this page to ensure consistent tone, and good variance of content. Ensure that there is a nice rhythm of the types of stories, in their content, focus, and seriousness. Ensure that this rhythm shows Siena’s community, and emphasizes people.

Faculty Listing

See Component Live

How to use it

The faculty listing outputs a list of directory members based off of an applied category in the directory. The chief purpose for this is to output the members of a department or office on that organizational body’s page. Because this is essentially a query of an internal system, the main function of the content strategy for this page will be checking to ensure that it is returning people accurately.

Resource Listing with Filters

See Component Live

How to use it

Each individual resource has a small description that can be written for it. These descriptions should be fairly dry and straightforward—try to convey what this resource is as quickly and efficiently as possible. Consider not writing descriptions for relatively self evident items, and saving them for resources that users will be less familiar with, or those with names that don’t convey the products use themselves.

Featured Event

See Component Live

How to use it

This component will be pulling content directly from the MasterCalendar iCal feed, which requires careful use in order to be successful. MasterCalendar’s feed is a little idiosyncratic, so it may take some time and internal processes to ensure that the data comes through correctly. The most important part of this is to check this component on the front end, to ensure that the data is coming through well and is accurately conveying its information to the end user.

Media Gallery

See Component Live

How to use it

This component creates a set of media along with captions that the user can browse through. It accepts images and urls to link to videos.

When creating a media gallery, first consider the types and grouping of media that will be added. If they’re all from a single event or range in time, they should be in chronological or reverse-chronological order. If they’re grouped by concept, order them by importance, as media higher in the set is more likely to be interacted with. Ensure that videos are are logical points in the set.

When captioning media, write descriptions that don’t repeat the surrounding text.

Scholarship Listing

See Component Live

How to use this

how to use it

Related News

See Component Live

How to use it

The goal of related news is to give the user a place to go after reading through an article, allowing lateral movement between articles that cover similar topics. Related news is brought in by selecting a category, so it works best when categories are assigned thoughtfully. While there isn’t a specific strategy applied to this component, it is worth checking to ensure that the articles that populate on any given story (Especially featured stories) are relevant and topical.

Topic Row

See Component Live

How to use it

Topic rows are a tremendously flexible component that helps move users between pages. When creating content for topic rows, always consider why the user is on this current page and what actions they would need next. The two links should be contextually related, so each topic row should be constrained to a single topic.

The biggest benefit of topic rows over other types of links is their ability to add extra context and to provide a supporting image. If you have a lot of resources to link to or if the context would be superfluous, consider one of the simpler options. If you need a callout to be more visually apparent, use a flex callout.

Program Finder (Component)

See Component Live

How to use it

The content for the program finder isn’t going to be written directly to this page, but instead will be written as part of entering programs in the program module. When writing these descriptions, use an optimistic and excited tone that conveys the value of what this program is, and what students will be able to accomplish with it after graduation.

Be sure that programs that have similar siblings have differentiation in their descriptions. It’s important that when comparing something like multiple accounting degrees, that the user is able to differentiate what it means to attend these different programs. This is especially important when you consider that a search term that will return one of these programs will also return programs that are very similar.

Link List

See Component Live

How to use it

Link sets are used to group together contextually related links and actions in a simple way. These are especially useful for pages that are at the beginning of a process or pages that users will return to frequently. Use them in place of more visual callouts when there will be more than 2 or 3 links, especially if the links are useful without extra context.

Related Program

See Component Live

How to use it

Related programs are meant to show programs that are similar to each other, whether it is in subject matter or in structure. The URL Structure Mindmeister shows some examples of these programs by connecting them together with green lines, to show examples that fit these super-sets.

These programs are manually selected, so choose ones that make sense and feel similar to the current program—don’t use this component to just highlight random programs. It’s better to omit this component than to put irrelevant information in it.

Unordered List - Two-Columns

See Component Live

How to use it

A two column unordered list is most useful when there is a long list of bulleted items that can't be well fleshed out with other media. This component works best when surrounded by other WYSIWYG content, so it doesn't look out of place in the midst of visually strong elements.