Homepage content guidelines
About the homepage
These content guidelines are for the custom “homepage” content type built for the Drupal 9 sites.
The content type has a fixed layout.
The design uses Folwell Design System components and address key user needs and expectations that are based on UX best practices, U of M student user needs, and tracked user behavior.
Flexibility in content and visual style
Using the available Folwell components, there is some freedom to use different callout colors and link/button styles. When making these choices, keep in mind the purpose of the content section and what the user experience is like for desktop and mobile users.
Request changes
To request a change to the homepage, contact your campus' content writer.
hero image and callout text
Hero image and overlay callout
This section reflects a focus on student services and highlights important information at different times of the year.
Image
Use a photographic image that compliments the purpose and identity of the site, and reflects the topic of the callout text.
Make sure the image copyrights allow you to use the image on the homepage. If you're unsure about this, contact ASR UX or University Relations for help. Images from the UMN Image Library are safe to use.
The image should be cropped to roughly a 3:1 ratio with 1200px width.
Include descriptive alt text.
Resource: UMN Image Library (requires login to download)
Callout (optional)
The callout should feature a timely topic with an action button or in-text link to an internal page. You may choose to have no callout text and that's ok!
Topics
Relevant topic based on user traffic (refer to Google Analytics or Salesforce contact data, for example).
The topic should have an action associated with it (find registration times, learn how to pay bill, view financial aid timeline, etc.) and should lead users to an internal page. MyU may be an appropriate exception.
Content requirements
Callout title (H2)
The description should be no more than 30 words
Call to action via button or in-text link that is descriptive, actionable, and unique
buttons to top-visited pages
Buttons of top tasks (8 total)
This section displays our most-used pages to help users get to where they need to go faster.
First row
The first row of 4 buttons link to the top most-visited pages on the site (this could change with changes in user behavior):
Academic calendar
APAS
Transcripts
Contact
Second row
The second row of 4 buttons are variable and should reflect topics relevant to the time of year. Refer to Google Analytics or Salesforce contact data.
Button labels
Limit button labels to about 22 characters so as not to break the grid of 8 buttons.
table of select upcoming dates
Upcoming calendar dates table
The table of upcoming dates previews upcoming dates from our most-used content on the site. This section is an integration with the academic calendar Google Sheet.
Recommended categories of dates
Drop (specifically only those with 100% refund dates)
Register (specifically registration begins dates)
Term start/end
Graduation
University closed
No classes
featured content callout text and buttons
Featured content callouts
This section provides a place to highlight information that may be useful to specific audiences. It should not be used as a way to share critical or required information (there are likely better methods to reach your target audience than this section).
Topics
Generally, there should be 2 to 5 topics at any given time.
Appropriate topics include:
New or changed information
Featured programs
News-type announcements that users are not required to view in order to complete their business
Required components
Header (H3)
Description (around 30 words)
Call to action via button, emphasis link, or in-text link that is descriptive, actionable, and unique