Homepage Recommendations

Your homepage is often the first page a user visits on your site. It should convey information about your department and the purpose of the website and provide easy access to the most important pages on the site via links, buttons, or Image Callouts.

Banner Image

The Banner image is the image at the top of the page above almost all content. This image is not required for administrative websites. On a homepage you should only use the Hero or Feature options.

Turn on the image in the Page Image Location Options with the Page Parameters.
Use the Image Editor to create the appropriate size image based on the selection you made.
Insert the image and set additional Banner Image options in MultiEdit Content.

Screen shot of the Accessible Technology homepage. — This example shows a homepage with no banner image. It includes two paragraphs discussing the intent of the website and includes key contact information and five key links in the form of buttons.

Screen shot of the Budget and Planning Office homepage. — This example shows a homepage with a hero image. It includes the intent of the website, key contact information, and key links in a more plain format.

Screen shot of the Little Huskies homepage. — This example shows a homepage with a feature image, an introduction to the website, key button links, announcements, and hours of operation.

Intro Content

If you include a Hero image you can choose to use the Intro Content Editable Region to include a highlighted summary statement about the department just below the image. This region is also a good place to include a row of buttons linking to important pages on your site.

Screen shot of the Biking at Michigan Tech homepage. — In this example, the homepage includes a hero image and intro content with a row of buttons.

Left Sidebar

You must turn off the left sidebar on your homepage by unchecking the box in Page Parameters.

Right Sidebar

Homepages generally do not use right sidebars, however there are some instances when it could be used to provide supplemental information. Turn on the Right Sidebar Editable Region using the checkbox in Page Parameters.

Screen shot of the Memorial Union homepage. — This is an example of a good use for a right sidebar on a homepage. Sidebars are optional and often include content such as content information, hours of operation, and/or resource links.

Main Content

Providing links to important pages from your homepage is important, especially for mobile users. This can be done in several ways.

Row of Buttons

We recommend 1-5 rollover buttons in a row.

Screen shot of the University Marketing and Communications homepage. — A row of five buttons on a homepage is pictured.

Card

We recommend 2-5 Card shortcuts in a row. You can include multiple rows.

Screen shot of the University Room Reservation Information homepage. — A row of four is pictured.

Link List

You can create a list of links using the heading and bulleted list options in the Editor toolbar. To remove the bullets and indentation, add a class of "none" to the <ul>.

Screen shot of the Financial Services and Operations homepage. — A regular bulleted list is used in the left column of the pictured page. The class of "none" is used for the links in the right column.

Additional Content Area Sections

You can create separate sections in the Additional Content Area that highlights a specific piece of content such as a giving section, a call to action, special programs, or an important event. These are full-width sections that use Boxed Section Snippet within a Row with Background Snippet creating a colored background which really makes the content stand out. To name a few, you can create separate sections for:

Touts
Quotes (quotes with video)
Giving
Department mission/priorities
Benefits of a program
FAQs

Section of a homepage — When layered on top of each other different colored sections can visually apply a break helping users to take in content easier.