Program Template
This section provides an overview of the program template.
Home Page
Click on any label below to go to that section.
EERE Header
The EERE header—including the tagline—is required on all pages of an EERE site.
Blue-Line Illustration
The blue-line illustration displays in the EERE and program headers. Blue-line illustrations can be found in the Print Section of the Guidelines.
Program Header
This header, with the appropriate program name and blue-line illustration added, will appear on all 11 program sites. On subpages, this header should link back to the program's home page.
Top (Site-Wide) Navigation
Top navigation is included on all pages of each program site.
See more information on how top, or "site-wide" navigation should be used on EERE sites.
Program Photo
This photo should reflect your program's primary emphasis and goals. The image size must be 748 pixels wide x 54 pixels high. The most important content of the image should be located on the left side as this is background image that will reveal more or less depending on the user's browser resolution. The right side fades off into white.
Main Content Area
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 program. Please include your home page content when you submit your graphical mockup for review.
Search Box and Site Utilities
Search Code
Official search code must be obtained from the EERE Search Specialist and placed in the searchmenu.html includes page and the search_options.html page located in the template download.
Search Help
The "Search Help" is required for the template. "Search Help" links to a general search help page.
See a sample More Search Options page |
More Search Options
"More Search Options" is also required and should link to a page that lists the various search options available to users. A program site search and an EERE site search are required on this page. You must obtain official search code from the EERE Search Specialist to make these work.
In addition to the two search options mentioned above, you may also give people the option to search specific program subsites, or make links to other site utilities (subject index, site map, etc.) available. Contact the EERE Search Specialist for help developing your "More Search Options" page.
Site Utilities
The link to EERE Information Center is required. The other site utilities — Site Map and Subject Index — are optional. You can also link to your own program-specific clearinghouse or hotline.
See more information on how search and site utilities should be used on EERE sites. See more information on meta tags and "stop index" tags.
Right Navigation
Right navigation can include dynamic content such as news or updates and events as well as highlighted content such as publications and solicitations. See more information on how right navigation should be used on EERE sites.
Features must be created in the approved EERE style and format as shown below. Download the following zipped Photoshop file to create all features. Layout, colors, and fonts are interchangeable based on the needs of the particular feature, so you can mix and match elements. (ZIP 514 KB)
Printable Version
All EERE Web pages are required to have a "Printable Version." The printable version excludes top, left, and right navigation. The printable version link should be included along with the small printer icon. On home pages, the printable version is only required at the bottom of the content. On all other pages, a printable version must be available at both the top of the main content and the bottom.
Footer
The EERE footer is required on all pages. Your site's home page will include links to EERE Home, the U.S. Department of Energy home page, your site's Webmaster, EERE's Web Site Policies, the EERE Security & Privacy page, and the USA.gov home page.
The footer also contains the text "U.S. Department of Energy" and the last updated date for the page. The form should be "Content Last Updated."
See more information on how footer navigation should be used on EERE sites.
Second-Level Pages
Click on any label below to go to that section.
Second-Level EERE Header
The second-level EERE header is the same as the home page EERE header.
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 text is a little smaller and farther to the right than the home page header. It links back to the program home page.
Second-Level Top (Site-Wide) Navigation
On second-level pages that are opened by clicking on top navigation (section home pages), the corresponding top-navigation menu choice is "on" but not linked. On lower level pages of that section, the top-navigation menu choice is "on" and linked.
See more information on how top, or "site-wide" navigation should be used on EERE sites, including a library of approved navigation labels.
Second-Level Section Header
These green headers appear on the left side of the page above the main content. When on the section home page, do not repeat the green header in an <H1> tag. An <H1> with the section title should appear on the printable version.
Second-Level Left Navigation
The left navigation is used to navigate within a section. The left navigation is graphical and has the capability to show three levels, with both on and off states. A section home page shows the first level only. As you drill down into a section, second- and third-level navigation may open up. Gray lines separate top-level categories. Each navigation label should be left-aligned and third-level labels have a "-" in front of them. Left navigation should not link off site. Please note: If there is no left navigation, you must still leave an empty left column.
In addition to primary left navigation, you may also choose to use one of two optional left navigation treatments.
Blue Button
- Use to give special treatment for one primary navigation element.
- Use when needing to draw attention to strategic content.
- Displays on every page.
- Example
Quick Links
- Supplemental navigation
- Links must stay on site
- Can display on home page, all pages, or select pages.
- Example
Please note: We recommend that content owners to do not use both optional left navigation treatments on the same page.
Second-Level Program Content
There are two layout options for second-level pages: You can use a three-column layout with both left and right navigation, or you can leave out the right navigation and span the second and third-column under the search and 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
The second-level search box and site utilities are the same as the home page search box and site utilities.
Second-Level Right Navigation (News, Events, Features, and Updates)
The second-level right navigation is the same as the home page right navigation.
Second-Level Printable Version
The second-level printable version requirements are the same as the home page printable version requirements but also require an additional link to a printable version at the top of the main content.
Second-Level Footer
All second-level pages should have a link to the 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.
Sample Template Code and Images
Please contact Shauna Fjeld for sample template code and images.
