The University of Tennessee, Knoxville

Office of Communications and Marketing

Template Requirements and Elements

The templates are composed of four primary areas: a header, a navigation scheme, a content area, and a footer area. Required and optional elements for each of these areas are outlined below.

Note: The following are the requirements issued by the Office of Communications and Marketing. Individual colleges, departments, or units may establish additional branding and/or design requirements of their own.


REQUIRED ELEMENTS

There will be four required elements for a site to be in compliance with a UT web template:

  1. The "UT Header”

    The "UT Header” should appear at the top of all web pages (orange bar and up), and must include the grey tools navigation.

  2. The “Unit Header"

    The “Unit Header" is an image with the unit's name in the recommended fonts.

  3. Navigation

    Whether horizontal, vertical, or otherwise, please provide your visitors with a clear means of navigating your website.

  4. The “UT Footer”

    The “UT Footer" appears at the bottom of all web pages and includes the bounding orange bar beneath the content, followed by (at minimum) the lighter grey footer. Some units will also want to include the "giving bar" and/or the expanded footer navigation area between the orange bar and the lighter grey footer for including contact information, social media links, etc. If your unit has an approved logo, we recommend placement in the footer rather than the Unit Header.


HEADERS

The “UT Header”

utheader

The UT Header includes everything from the topmost orange bar and up, including the University of Tennessee, Knoxville, wordmark, the custom Google search field, and the dark grey toolbar with links to Calendars, Maps, Libraries, etc. This header is required for a site to be considered “in template.” Please do not alter this element.

The “Unit Header”

utheader

The Unit Header is positioned immediately below the top orange bar. It is a 960x120 pixel image that should be used to display the name of your college, department, or unit. This image should also be linked to your home page.

Unit Header Typography

The identifying typography for the Unit Header should follow the specifications found in the typography guidelines. For units within a larger department or college, list the unit name using 36 pt Gotham Light (mixed case, as in the example above). Beneath your unit name, left-aligned in ALL CAPS, list the parent unit, department, or college in 21pt Gotham Medium. For stand-alone units, list the unit name using 36 pt Gotham Light, mixed case.

To make things a bit simpler, we’ve provided some standard unit header images in our template packages, but you are free to use background images of your choosing provided they conform to our photography guidelines. If you do choose to use an image rather than a single color as the background of your Unit Header, please make sure that imagery does not interfere with the legibility of your college, department, or unit name.

A note on typography: The Office of Communications and Marketing has purchased a limited number of licenses for Gotham so that we can distribute those fonts to campus designers. If you are an employee of the University of Tennessee and one of your primary job responsibilities is designing web and/or print materials for your unit, you may request a license for Gotham. If your sole reason for requesting Gotham is to create the unit header for your website, and you don't need a license, we're happy to help. Simply complete our short project request form and we'll be in touch.

These guidelines are consistent with those implemented for the use of college and departmental marks in print pieces, letterhead, and the like.


NAVIGATION

There are two options for primary navigation—horizontal or vertical. The navigation style you select should be largely determined by the number of top-level pages of your website.

Generally, smaller sites without complicated or deep menu structures are ideal candidates for the horizontal option. Please note that the horizontal menu includes drop-down subnavigation. Subnavigational elements in the vertical menu are indicated with an indent. To add subnavigational elements to your primary navigation menu, simply follow the example given below:


	<nav id="menu" role="navigation">
		<ul id="nav1-v" class="navigation">
			<li><a href="#">Lorem Ipsum</a></li>
			<li><a href="#">Diam</a></li>
			<li><a href="#">Consectetuer</a></li>
			<li><a href="#">Adipiscing elit</a>
					<ul>
						<li><a href="#">Lorem Ipsum</a></li>
						<li><a href="#">Diam</a></li>
						<li><a href="#">Consectetuer</a></li>
						<li><a href="#">Adipiscing elit</a></li>
						<li><a href="#">Dolor sit</a></li>
						<li><a href="#">Nonummy nibh</a></li>
						<li><a href="#">Tincidunt</a></li>
					</ul>
			</li>
			<li><a href="#">Dolor sit</a></li>
			<li><a href="#">Nonummy nibh</a></li>
			<li><a href="#">Tincidunt</a></li>
		</ul>
	</nav>


To choose between horizontal and vertical navigation, simply swap the id of the unordered list that comprises your navigation menu. If you’d like the vertical navigation, give the <ul> an id of “nav1-v,” as in <ul id="nav1-v">. If you’d like the horizontal navigation, assign the <ul> and id of “nav1-h,” as in <ul id="nav1-h">. It’s as simple as that!


CONTENT

Required Elements

The content area (everything between the orange bounding bars and excepting the Unit Header) for these templates is set to a fixed width of 960 pixels, and content within that area should not exceed those bounds (excepting possible use of background images and colors). We also recommend that your language conform to our Editorial Guidelines, including approved style manuals, references to the university, and so forth.

We highly recommend that you post contact information on your home page (at minimum), including a mailing address, phone or fax numbers, and an e-mail contact.

Optional Elements

Knowing that units across campus have widely varying levels of web support, we have created several “themes” that can be easily and immediately implemented. Each theme is divided into three columns of equal width—and we suggest that you do the same—but even that is not required. Again, please be aware that your college or department may have established additional design or branding requirements.

 


FOOTER

The styling of each of the footer elements is defined by the primary style sheet (global.css), which you should have no reason to edit.

Required Elements

UT FOOTER

Footer

This element includes at minimum the orange bounding bar and the bottommost grey footer, which includes general UT information and links. Please do not alter this element.

 

Optional Elements

If you choose to include one or more of these optional footer elements, be sure that the orange bounding bar appears above the top element only.

GIVING BAR

Giving Bar

This area of the footer offers units the opportunity to link to the Give to UT website in a prominent yet simple way. Text should read, “Contribute to a Big Idea. Give to [unit name].” The last sentence of the giving prompt ("Give to [unit name].") should link to the giving website.

Please note: Some units may be interested in customizing the link to the giving website so that it will pre-populate gift designations. For inquiries regarding this process or general questions about online giving at UT, please contact Lance Taylor, director of annual giving and student philanthropy, at ltaylor@utfi.org.

EXPANDED FOOTER NAVIGATION

Footer Navigation

Using the example of utk.edu, you may add up to four columns of additional navigational elements, contact information, social media links, etc., to this area. Our boilerplate examples include the campus map illustration, which you may choose to include on unit websites, but which is not required. We have also provided examples of social media icons that are in line with recommendations for usage set forth by the social media outlets. If your unit has an approved secondary logo, we recommend sizing it appropriately and placing it in the space where the illustration for the campus map appears.

Contribute to a big idea. Give to UT.

The University of Tennessee. Our New Tagline Here.

Knoxville Tennessee 37996  |  865-974-1000
The flagship campus of the University of Tennessee System.