Required Elements
For specific implementation instructions and downloads, see How-to's.
Breadcrumb Navigation
- Visitors must be able see how they reached a particular point so that they can a) understand a site's architecture, and b) get back to where they came from if they make a "wrong turn."
-
The breadcrumb must be presented in a consistent manner: links shown left to right, right-aligned in a single line (if possible), above main content. It must include a minimum of two levels above the current page (if applicable), including the page's immediate parent. For example:
University Logo and Link to Northwestern University Home Page
See How-to's for specific sizes, dowload information.
- The University's logo is comprised of two parts: the University seal and the words "Northwestern University" used as a single unit in a specific font (below).
- The logo must appear at the top left or bottom left of every page. The logo must always link back to the Northwestern University home page.
- The logo and its background must be a high-contrast combination.
-
View the University's Logo Guidelines at: <http://www.northwestern.edu/logo/guidelines.html>.
Only logo versions available from University Relations are to be used on University web sites. Download a high-quality version of the University logo at: <http://www.northwestern.edu/logo/downloads.html>
- The logo is available in three sizes: small (120 px. wide), medium (140 px. wide), and large (160 px. wide).
- The logo is available in three colors: one for a purple background, one for a white background, and black.
- If you are using a different background color, please contact the Office of Web Communications (847-467-4747) to have the logo custom designed.
- Do not alter the logos provided; the logo must not be overlapped, cropped, or distorted.
- It must have at least 20 pixels of "breathing room" on each side and 10 pixels at the top.
- The downloadable versions are already set with the appropriate boundaries and should be set flush to the left and top.
- If you wish to display the logo in the footer, see the Standard Footer section (below).
Unit Logo
If you have your own logo and would like to incorporate it into your page with the required Northwestern logo:
- The Northwestern logo must appear at either the upper left or lower left of the page (in the footer)
- If the Northwestern logo is in the header, the unit logo may appear at the left of the footer
- If both the Northwestern logo and the unit logo are in the footer, the Northwestern logo must appear to the left, the unit logo to the right, with center-aligned text for the body of the footer. For illustration, see the Standard Footer section (below).
Standard Footer
See How-to's for specific sizes, download information
- A textual footer provides a means of navigation for visually impaired visitors who use text readers. It also provides consistent connection with the University's top-level pages and its legal requirements.
- Footer must be consistent with one of the examples shown below (with or without logo).
- Footer consists of 1) links to the three main areas of Northwestern University's site; 2) contact information for the sponsoring entity; and 3) date of last update, the University's Web and Policy statements, and copyright notice.
-
If your navigation is not accessible for any reason, you must provide links to the main sections of your site in the first line of the footer.

-
If both the Northwestern logo and the unit logo are in the footer, the Northwestern logo must appear to the left, the unit logo to the right, with center-aligned text for the body of the footer (below).
Title Tag
A page's HTML title should be unique, clear, and concise, with an indication of the page's contents. It is helpful to think of (and create) the title as a "reverse breadcrumb," with specific page information first, then broader site context. For example, the Web Communications home page title is: "Web Communications, University Relations, Northwestern University."
University Search
See How-to's (online) for dowload information <http://www.northwestern.edu/univ-relations/web_comm/howto/index.html>
- The University Search is required on all pages, except when there is a conflicting search function on the page (e.g. Jobs, Plan-It Purple). In the case of a conflicting search function, a link to the Northwestern Search must be provided on the page. The standard footer fulfills this requirement.
- The search function must search the top-level Northwestern site and should be configured to search the site the page is located on, unless the site consists of a single page.
- There are three distinct, search treatments available (shown below). All sites must use one of these approved layouts unless an exception has been granted by the Office of Web Communications. Download University search layouts at: <http://www.northwestern.edu/univ-relations/web_comm/howto/index.html>
Option 1: Stacked Horizontal Search
Positioning: Upper right; upper left if logo is in footer; NOT in footer.

Option 2: Stacked Vertical Search
Positioning: Upper right; upper left if logo is in footer; NOT in footer.

Option 3: Pure Horizontal Search
Positioning: Within or below top banner; above footer.

