www.union.edu website template

This responsively-designed template was created for departments/programs/special initiatives/offices. The fixed layout has space for a "hero" (banner) image (A), page title (B), a "body" section that can accommodate copy and images (C), and a column on the right reserved for a menu/nav. (D), with an area below for office location, hours and links to social media channels (E).

  • Why standardize?

    A common practice among institutions of higher learning, standardization ensures brand consistency and provides website visitors with a more cohesive user experience. Further, this approach makes it easier for the web team to troubleshoot and updates the website as needed.

An example of an organization homepage


  • A) Hero (banner) image

    A) Typically a photo, the same hero image can be displayed in three different resolutions —small, medium, and large— the hero, and the text overlay ("Organization" in this example), are optional. The hero is attached to the homepage "content-type" and will automatically appear on every page.

  • B) Page titles

    B) The system is programmed to automatically make page titles uppercase.

  • C) Body section

    C) Body copy should not be too dense and make use of styles for readability. Please make sure to use the correct semantic structures for headings. There are several ways you can add photos.

  • D) Menu

    D) Ideally, the number of menu items should not exceed six. The italicized bold text and red dot are visual cues that indicate the current page. The menu's location and design cannot be changed.

  • E) Contact and other information

    E) The more detailed, the better. If linking to social media channels, don't forget to update those social media channels. As in the case of the hero, this information will appear on every page.

  • The shell/wrapper is fixed and cannot be changed (colors, display, logo etcetera).
  • The menu/navigation items on the right are always text (they display as a "hamburger" menu on a mobile device).
  • The large banner (hero) image is optional and typically a photograph.

Interested in doing more? Here are a few examples of what other users are doing on their websites:

Questions? Contact tdcms@union.edu.