Web Style Requirements: Site Header and Branding

Last Revised: June 7, 2016

The branding area at the top of our web properties.

Modifications to theme v 2.5 to address community needs and accessibility compliance.

2.5: Headers

Option 1: Full Width Header


Full width header with site subtitle

Sample of Georgia Tech full header 2.5 with site subtitle
Click image for full size.


Full width header with site subtitle use case

Sample of Georgia Tech full header 2.5 with site title use case
Click image for full size.


2.5: Full Width Header Diagram

Georgia Tech website full header 2.5 diagram

Click image for full size.


2.5: Full Width Header Key

A: Utility Bar

The default height of the Utility Bar is 45px, and the background color is white (#FFFFFF). All text and graphics in this area should be set to dark gray (#545454). This area serves as a location for links to frequently accessed campus services and resources, and social media channels.

1. Utility Links: Includes links to: the Georgia Tech main site (www.gatech.edu), Campus Map (www.map.gatech.edu), Directory (www.directory.gatech.edu,) and the Offices and Department listings (www.gatech.edu/department).
2. Social Media Links (optional): Includes links/icons to your relevant social media channels.

B: Branding Strip

The default height of the Branding Strip is 90px. The default color of the branding strip is light black (#262626) with no transparency, or rgba black with 85 percent transparency. This area serves as a location for the primary logo and tag line or site subtitle.

3. Primary Logo: A solid white version (no outlines), of an approved Georgia Tech Brand Mark should be used, and should link back to the home page of your site. Logo versions that include a lower unit identifier in smaller Palatino text are not recommended for this application. Instead, crop or otherwise remove the small text and use the site subtitle area (B4) to display the unit identifier or other qualifying text as needed. The height of the Campanile element within the logo/brand mark is 60px. Combined with a top and bottom padding of 15px, the total logo height is 90px, with a left and right padding of 20px. In mobile views, the logo should maintain a proportional width and height with the height of the Campanile shrinking to no smaller than 30px tall. If using the GT Theme, the Logo must be between 188px and 700px wide.

Georgia Tech logo padding diagram

To request an official Georgia Tech brand mark, please contact your Client Manager, or email Director of Campus Creative Services Stephen Bollinger.

4. Site subtitle (optional): Site subtitle title should be set in Buzz Gold (#eeb211), right justified and vertically centered within the branding strip (which is 40 percent of the width). By default, the text is set in Roboto Light at 20px. When no site subtitle is required, use of this area for the CREATING THE NEXT tag line is recommended.

C: Primary Navigation

The default height of the Primary Navigation is 36px. This area includes: the main menu, action links, and a site search form.

5. Main Menu: Main menu links should be set in a light black (#262626) text on a Buzz Gold (#eeb211) background. The hover state should be set in white text with a light black (#262626) background. Drop-down links are acceptable and recommended for larger sites. Third level items, if used in the main menu, should have a lighter gold background (#FFE08B) and use light black (#262626) text. (More detailed code requirements for menus are listed in Accessibility section.)
6. Action Links (optional): Should be set in uppercase and include a chevron icon. Action links should be light black (#262626) with a background color of light gray (#E6E6E6). On hover, link color does not change. In the mobile view, the background changes to white (#FFFFFF) and the text to dark gray (#545454). It is recommended that no more than three action links be included.
7. Site Search Form: Search link should be set in light gray with a dark gray background field, and include a search icon. Search link should trigger the reveal of an input field, and users should have the option to search the current site, or the campus Google Appliance index (i.e., “All of Georgia Tech.”)

D: Breadcrumb

The default height of the Breadcrumb area is 36px.

8. Breadcrumb links: By default the breadcrumb is set as a white (#FFFFFF) field with dark gray (#545454) links that include a chevron icon separator. On hover, link color does not change.

Option 2: Demi Header

Future versions of the theme will offer an option to use this demi header, but will be accompanied by a requirement that the accessibility additions section (detailed below) also be applied to the html between the header and footer elements.


Demi Header gold

Sample of Georgia Tech demi header
Click image for full size.

Sample of Georgia Tech demi header
Click image for full size.

Demi Header white

Sample of Georgia Tech demi header
Click image for full size.

Sample of Georgia Tech demi header
Click image for full size.


Demi Header Wireframe

Sample of Georgia Tech demi header
Click image for full size.


Demi Header Key

The default height of the Demi Header is 60px and the default colors may be either Buzz Gold (#eeb211) with light black (#262626) text and icons; or white (#FFFFFF) with dark gray (#545454) text and icons. This element may serve as an abbreviated presentation for branding, menu, frequently accessed campus services and resources, social media channels, and search. Demi headers may be used atop internal site pages or for specialized applications such as blogs. At this writing, the design of Demi Headers has been approved for use, but the element has not been coded.

1. Primary Logo: Georgia Tech logo or approved Georgia Tech Brand Mark should be used, with height of Campanile sized to 42px. Georgia Tech logo links to Georgia Tech main site (www.gatech.edu), or your brand mark links to your site home.
2. Utility Links: Includes links to: site menu, the Georgia Tech main site (www.gatech.edu) or your site home (or vice versa), Campus Map (www.map.gatech.edu), Directory (www.directory.gatech.edu,) and the Offices and Department listings (www.gatech.edu/department).
3. Social Media Links (optional): Includes links to your relevant social media channels.
4. Search Icon: Search dialog box link.


Accessibility additions

In order to achieve greater Section 508 Accessibility Compliance, the theme uses a number of different pieces of code.

HTML5 Semantic elements

Both 2.5 and the legacy (2.4) design include html5 semantic elements such as <header>, <section>, <aside>, and <nav>. We do not yet use the <complementary> element, but its appropriate use is approved.

Skip Links

Both 2.5 and the legacy (2.4) design include skip links at the very top of the html code, so screen readers can skip directly to the main content of a page (instead of having to read through all the links and code before that).

WAI-ARIA Roles

As of version 2.5.2, ARIA code was added to the html code in order to achieve greater Section 508 Accessibility Compliance and to increase ease of use for screen readers.

main

<section id="main"> now reads <section id="main" role="main">.

banner

<section id="identity"> now reads <section id="identity" role="banner">.

navigation

Each of the menu elements in the header area (including action links) now includes a role="navigation" as well as an aria-label="Description" to indicate how each navigation menu is titled.

search

<div id="site-search"> now reads <div id="site-search" role="search">.

Menus

When using drop-down menus, it is important to make your menus accessible, so that they work well for keyboard-only access as well as for mobile devices.