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.

Other than enabling or disabling the news feed, feature, design, or color alterations to the Web Header are prohibited.
  • All uses of University Marks must comply with University Design Standards.
  • University Marks may not be modified in any way without prior University approval from the University Marketing and Communications.
  • University marks may not be used in conjunction with the name or mark(s) of any other entity without the prior written permission from University Marketing and Communications and that entity. If permission is granted to use both the university mark and another party's mark, the marks must be distinct and separate from one another and neither mark may dominate the other in order to protect the integrity of both marks.
  • University marks may not be used in any manner that suggests or implies university endorsement of products, services, political parties or views, or religious organizations or beliefs.
  • Only the university may claim copyright or trademark rights in, or seek to register, any design that uses university marks.
  • The university will not approve the use of university marks in connection with alcoholic beverages, inherently dangerous products (firearms, explosives), illegal drugs, tobacco, gambling, sexually suggestive products or language, or any health-related product.

For more information on website presentation, contact Joshua Harless, executive director of Digital Experience, at 301.405.3384 or

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.

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.

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

With News
<script src="//"></script>
<script> umdHeader.init(); </script>

Without News
<script src="//"></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.