website presentation
 
 

Website Presentation

After significant review and testing, UMD has developed a new Web header to address several shortcomings with the existing wrap that prevented uniform implementation.

The new Web header, pictured below, has been developed to meet the following goals:
  • Provide brand consistency on all UMD websites;
  • Reduce the weight of the previous wrap by reducing its overall size and removing the black background;
  • Embed rotating headlines to keep content fresh on all sites;
  • Embed a link to the Giving page to ensure that every UMD Web page has this crucial link to fundraising;
  • Allow for users to collapse or expand.

All official University of Maryland websites—not student sites—should be identified with the new Web page header. As of July 1, 2014, any UMD website being redesigned or newly developed will incorporate it. The Web header should be the top element on the every page; nothing should appear above it. Additionally, all UMD pages must include the individual unit’s standard logo, preferably above the fold.

Brand Toolkit

The Web header displays a UMD news feed, a UMD Home button and a drop-down menu for selected UMD website pages. The UMD Home button links back to the University of Maryland home page. The Web header appears with each page load. The user can close the header by clicking anywhere within the red University of Maryland band.

The Web header was developed to be responsive to the width of any browser. You don’t have to have a separate version for mobile phone or tablet devices

The Web header code page can assist you in your website redesign; it is available in code form and as a Drupal 7-compatible module.

Feature, design and color alterations to the Web header are prohibited.

For more information on website presentation, contact Linda Martin, executive director of Web and new media strategies, at 301.405.4610 or emailum@umd.edu.

Download and Implementation

The Website header is simple to install. If your site was developed using Drupal 7, you can download and install the Drupal-contributed module. If your site does not use Drupal 7, simply add the JavaScript below to your site template. Copy and paste the code within the tag, preferably at the bottom.

If you currently use the old UMD Web wrap, please edit your template to remove the UMD logo and the search feature.

Drupal
A Drupal 7.x module is available at umdheader-7.x-1.0.tar.gz. It:
  • Adds the UMD header to all non-admin pages;
  • Toggles news display through Drupal’s configuration;
  • Can be used alongside the Drupal “Toolbar” module;
  • Supports the Drupal “Update Manager” module.

JavaScript
The UMD header should be included on sites using one of the following:

With News
<script src="//s3.amazonaws.com/umdheader.umd.edu/app/js/main.min.js"></script>
<script> umdHeader.init(); </script>

Without News
<script src="//s3.amazonaws.com/umdheader.umd.edu/app/js/main.min.js"></script>
<script> umdHeader.init({ news: false }); </script>

Additionally, a "ready" property can be passed to the init method. This function is run after the UMD header has been appended to the body.