Web Guidelines

This is the official University of Maryland Website Header. These pages can be used to help download the code required to implement the header on your site.

University of Maryland Web Site Guidelines

As of May 20, 2014, any University of Maryland website being redesigned or newly developed will incorporate the University of Maryland "Web Header," with the goal that all university Web pages will use it. The University of Maryland Web header should be the top element on the Web page. Nothing should appear above it.

The Web Header displays a UMD news feed, a UMD Home button, and drop down menus for selected UMD website pages. The UMD Home button links back to the University of Maryland home page (www.umd.edu). The web header will appear open with each page load. The user can close the header by clicking anywhere within the red Univeristy of Maryland band.

Please see a sample implementation at the top of this page. 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. The Web Header 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.

Web Guideline Questions?
Contact: Linda Martin
Office of Web and New Media Strategies
University of Maryland
2101 Turner Building
College Park, Maryland 20742-5411
301.405.4610 TEL
301.314.9344 FAX
emailum@umd.edu

Official UMD Web Header

Below is the official UMD Web Header applied to a sample website for a desktop, tablet and mobile device. Click on the image to see larger graphic.

Multiple devices showing the UMD home page.

Web Guideline Questions?

Contact: Linda Martin
Office of Web and New Media Strategies
University of Maryland
2101 Turner Building
College Park, Maryland 20742-5411
301.405.4610 TEL
301.314.9344 FAX
emailum@umd.edu

Download and Implementation

The Website Header is simple to install. If your site is 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 the code and paste it within the <body> tag, preferrably at the bottom.

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

Drupal

A Drupal 7.x module is available: umdheader-7.x-1.1.tar.gz.

  • Adds the UMD Header to all non-admin pages.
  • Toggle 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.