For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Global Website Design Standards

Drexel Website Showing Required Global Elements
Required Global Design Elements

All Drexel University websites which are not considered part of the "core" drexel.edu site must use the following global elements which cannot be modified (with exceptions noted):

Utility Navigation

The utility navigation is comprised of four elements: site home, utility links, search, and a 5-pixel tall rule line at the top of the page.

Site Home

In addition to providing a link to Drexel's home page, the site home utility lists a website's parent and related sibling sites (that report to the same parent), if they exist.

Utility Links

Pages that are permanent and of global interest to a site's average user may be listed as a utility link. Examples include; "Contact," "Donate," and audience links, such as, "Students," "Faculty," and "Staff." Audience links cannot be used in the main menu bar and may only appear in the utility navigation. Utility links are not quick links and should not be used as such: they are not intended to drive traffic to pages for the purpose or promotion or marketing and should never take a user off the site.

Search

The search box appears on every Drexel website and uses the Google Search Appliance to provide local and university-wide search results.

Primary Navigation

The position, height and width, behavior, colors, and fonts used for the main menu bar and its dropdown menus and a subpages' section navigation cannot be altered. The left column on section and basic pages (not the home page) is reserved for the section navigation; it cannot contain other elements or be altered. Colleges and schools using the academic design standards have some flexibility regarding colors and fonts, as described in that section.

If an About section exists, it should be labeled "About" (not, "About Us") and should always be the last item in the main menu bar.

Footer

The position, height and width, behavior, colors, fonts, and elements found in the footer cannot be altered; however, some of the information that it provides may be customized:

  • Address and Phone Number: colleges, schools, centers, and institutes may replace the University's main address and phone number with their own.
  • Social Media Links: any organization may link to their own social media sites, replacing the default University links. Only Facebook, Flickr, Instagram, LinkedIn, Twitter, and/or YouTube may appear in the footer.

The expandable footer used on the University’s core website is not permitted for use elsewhere.

Page Content Presentation

Section pages and basic pages (not the home page) that make up a site's content have multiple standard layouts available for site editors to choose from. Examples and descriptions of page layout options are provided on the Sitecore Gallery.

The basic elements that comprise a page's content (displayed in the main content column "center rail" and the sidebar content column "right rail") are styled to adhere to a consistent presentation that includes font family, size, color, formatting, and spacing; decorative images; and background colors. These elements cannot be altered and include:

  • Headings
  • Paragraphs
  • Lists
  • Links (and link behavior)
  • Call Outs
  • Quotes
  • Buttons
  • Components

Colleges and schools have some flexibility with fonts and colors as described in the academic design standards section.

Navigation Specifications

Utility Navigation

Rule Line

  • 100% W x 5px H
  • #07294d

Site Home and Utility Links

  • Site Home: 106px W x 32px H
  • Utility Links: variable W (word length) x 32px H
  • Font: Arial, 11px, #FFFFFF
  • Font hover: #FFC600
  • Separator: #4b545e

Site Home Dropdown Menu

  • Font: 1.1em
  • Font hover: underline
  • Current menu items font: bold, #006699
  • Hover reveals dropdown menu
  • Drexel University and Parent site listed above
  • Sibling sites listed above and below (alphabetized)

Search

  • Container: 180px W x 32px H
  • Font: 15px, #888888

Main Navigation

Main Menu Bar

  • Font: Futura, #FFFFFF, 14px, Uppercase
  • Font Hover: #FFC600
  • Current menu item font: #FFC600
  • Container: variable W x 56px H

Main Menu Bar Dropdown Menu

  • Font: 12px, Arial, #FFFFFF
  • Font hover: #FFC600
  • Container: 200px W
  • Hover reveals the dropdown menu

Footer

  • Container: 100% W x 100px H, #FFC600, (box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);)
  • Font: Arial, #333333

Footer links

  • Font: 11px
  • Font hover: underline
  • Separator: #D6A831

Address

  • Font: 1.1em