U.S. Department of Energy - Energy Efficiency and Renewable Energy

Communication Standards and Guidelines

Program Subsite Template

This section covers the subsite template. Only elements unique to the subsite template will be covered here. Elements that are common to all templates are covered in the program template.

Sample Template Code and Images

Please contact Shauna Fjeld for sample template code and graphics.

Home Page

Click on any label below to go to that section.

EERE HeaderEERE HeaderEERE HomeProgram HeaderProgram HeaderBlue-line IllustrationTop (Site-Wide) NavigationTop (Site-Wide) NavigationSubsite HeaderSubsite HeaderLeft (Subsite) NavigationPhotos, Images, and TablesMain Content AreaProgram Search and Site UtilitiesFooterPhotos, Images and TablesFooterRight Navigation (News, Events and Features)Right Navigation (News, Events, and Features)Program Search and Site Utilities

EERE Header

Example of the EERE header

The EERE header in the subsite template is the same as in the program template.

Blue-Line Illustration

Example of a subsite blue-line illustration

The blue-line illustration on subsite pages may be the same as the program blue line or a new one may be created. See guidance in the program template.

Program Header

Example of the program header on a subsite

The program header on a subsite is the same as on a second level program page. The header should link back to the program home page.

Top (Site-wide) Navigation

Example of top navigation on a subsite

The subsite top navigation is the same as the second-level program navigation. The top-navigation under which a subsite page lives must be "on" and linked back to the main page of the section.

Subsite Header

Example of a subsite header

The header on subsite pages is red and uses Helvetica Neue Condensed Bold which is available at Adobe. The photo fades in from white on the left to full color on the right.

Left (Subsite) Navigation

Example of left navigation on a subsite

The left navigation is used to navigate within the subsite. The left navigation is the same as on the program template.


Main Content Area

You can use the content area in the middle of the screen to highlight sections of content that are popular with your target audience. We recommend including a brief statement about the purpose of the subsite.

Logo Use

Subsites that have nationally recognized logos may continue to use those logos in the template, with approval from the EERE Information Architect. Logos should not take the place of the subsite header; instead, they should be incorporated at the top of the main content area.

Example of logo treatment in subsite pages.

Search Box and Site Utilities

Example of search box and site utilities.

The search box and site utilities are the same as on the program template.

Right Navigation

Example of the news, events, and features right navigation

As in the program template, these elements are optional.

Printable Version

The subsite printable version requirements are the same as the program printable version requirements.

Footer

Example of the footer to be used on all subsite pages.

All subsite pages should have a link to the main program home page in addition to EERE Home, the U.S. Department of Energy home page, the site's Webmaster, EERE's Web Site Policies, the EERE Security & Privacy page, and the USA.gov home page.

Second-Level Subsite Pages

This section covers the elements that are different on a subsite second-level page as compared to the home page. Click on any label below to go to that section.

Subsite HeaderSubsite NavigationMain ContentMain Content AreaPhotos, Images and TablesFooterSubsite HeaderMain Content

Second-Level EERE Header

The second-level EERE header is the same as the program template.

Second-Level Blue-Line Illustration

The second-level blue-line illustration is the same as the home page blue-line illustration.

Second-Level Program Header

The second-level program header is the same as the home page header.

Second-Level Program (Top) Navigation

The second-level program top navigation is the same as the home page top navigation.

Second-Level Subsite Header

The subsite header on second-level pages is the same as on the home page. See the home page subsite header for further specifications.

Second-Level Subsite Navigation (Left)

Example of a second-level subsite left navigation

On second-level pages, a "subsite home" menu option is added to the top to allow users to navigate back to the subsite home page. See the home page left navigation for further specifications.



Second-Level Main Content

Content for your site goes in this section. There are two layout options for second-level pages: You can maintain the strict three-column layout similar to the home page, or you can span the second and third columns under the search box & site utilities to allow for larger images or tables.

On the three-column layout, images and tables should be no wider than 300 pixels. On the two-column layout, images and tables should be no wider than 470 pixels.

Second-Level Search Box and Site Utilities

Same as the program template.

Second-Level News, Events, and Features (Right navigation)

Same as the home page right navigation.

Second-Level Printable Version

The subsite second-level printable version requirements are the same as the program printable version requirements.

Second-Level Footer

Same as the home page footer.