Skip common site navigation and headers
United States Environmental Protection Agency
EPA Web Design
Contact Us | Print Version Search:
Begin Hierarchical Links EPA Home > EPA Web Guide > EPA Web Design End Hierarchical Links

 

This site provides the specification for the standard EPA look and feel and supporting materials.

Deadlines

All pages must be converted by June 30, 2002. These deadlines are set out in the memo from Administrator Whitman to senior management.

All top-level AA & RA areas were completed by January 31, 2002.

Files

You need to download several files, all provided below.

Specification & Training

  • Specification (a description of recent changes is also available)
  • Training presentation; PDF (425 K)
  • Page layout graphic - this is included in the first two items, but is also available as a standalone image: GIF and PDF (formatted to fill an 8.5" x 11" page)

Model Templates for Pages Other Than Regional & AA Home Pages

There are two model template files, each in two formats: Dreamweaver template (.dwt) and plain HTML (.htm). Feel free to use .htm or .html for your actual pages as you see fit; we had to pick one extension for the template files, but we're not setting a standard for the entire site.

They are called model templates because you will modify them according to the specification to create templates for each area.

If you find errors in the template, please send them to Jeffrey Levy immediately, with a clear explanation of the problem and your suggested solution.

Current version: 2.1.1, as noted in a comment near the top of the template files. Do not remove this comment; we use it to track progress in converting the site to the standard design.

The only difference between the HQ and Regional templates is that the Regional files provide space to list the Regions' states.

The template uses relative links to the style sheet. To ensure they work properly:

  • Dreamweaver version: put in a directory called "templates" within your root directory (e.g., http://www.epa.gov/tssmsname/templates/).
  • HTML version: put in your root directory
Directions: Right click on the link below and select "Save Target as.." (Internet Explorer) or "Save Link as..." (Netscape) from the pop-up menu.
HQ Regional (includes state list below area name)
Normal template with a sidebar DWT | HTM DWT | HTM
The following template lacks a sidebar and may not be used on home pages. It is a last-resort option; see the specification for more detail on when to use it.Using it requires approval by the Office Director (in HQ) or Division Director (in Regions).
Template without a sidebar DWT | HTM DWT | HTM

Note: version 2.1 eliminated the need for a separate template for long area names; use the normal template regardless of the length of the area name.

A ZIP file is also available for all HQ and all Regional model templates.

The template version history details all changes.

A Domino template has been created by OEI.

Templates for Regional and AA-level Home Pages

These templates apply only to the Regional and AA-level home pages, not to entire areas associated with the home pages.

Regional Home Page

Note: as of version 2.1, all Regional and AA-level home pages must use a photo bar.

  1. Download http://www.epa.gov/epafiles/templates/raship211.zip. That file includes both the template file and a Photoshop file for the photo bar with the correct dimensions and masking.
  2. Insert your photos into the Photoshop file and export the photo bar as images/aara_ban_image.jpg.
  3. Insert your region's number, and if you use one, the description preceded by a colon and a single space (e.g., "Region 1: New England"). Don't change any of the formatting or alignment of the text or the photo bar.
  4. Add the states, etc. that you serve on the next line. Again, don't change any formatting. Use commas and spaces to separate the states:
    Serving Alabama, Maine, New York, California, Oklahoma, North Dakota
    If you have room at 640 x 480, add "and" before the last one.
  5. You don't need a page name on your home page, but do use a distinctive title tag that includes EPA's name, like "EPA Region A" because this will yield useful bookmarks. Using just "Region X" means someone will have to remember what that meant when they bookmarked it 6 months earlier.
  6. Design the rest of the page just like the rest of your home page area - same sidebar, etc. It's the same coding as the normal template.
  7. Use the standard template for interior pages until the revisions is released with the state name listing.
  8. Note that even if you are using a template system, this page will require manual maintenance. It's different from normal pages, so it won't fit into the normal template.

AA-level Home Page

Note: as of version 2.1, all Regional and AA-level home pages must use a photo bar.

  1. Download http://www.epa.gov/epafiles/templates/aaship211.zip. That file includes both the template file and a Photoshop file for the photo bar with the correct dimensions and masking.
  2. Insert your photos into the Photoshop file and export the photo bar as images/aara_ban_image.jpg.
  3. Insert your Office's name. Don't change any of the formatting or alignment of the text or the photo bar.
  4. You don't need a page name on your home page, but do use a distinctive title tag that includes EPA's name, like "EPA Office of A and B" because this will yield useful bookmarks. Using just "Office of A and B" means someone will have to remember what that meant when they bookmarked it 6months earlier.
  5. Design the rest of the page just like the rest of your home page area - same sidebar, etc. It's the same coding as the normal template.
  6. Note that even if you are using a template system, this page will require manual maintenance. It's different from normal pages, so it won't fit into the normal template.

Style Sheet

The style sheet is http://www.epa.gov/epafiles/styles/epafiles_epastyles.css
Current version: 2.2 (05/30/02) (style sheet version history).

Put this file in a directory called "styles" within an area's root directory (http://www.epa.gov/tssmsname/styles/).
To get the style sheet:

  • In Netscape, right-click on the link and choose "Save Link As..."
  • In Internet Explorer, right-click on the link and choose "Save Target As..."

As discussed in the specification, you do not need to edit the style sheet; it contains appropriate styles for all standard HTML codes, including headers (h1-h6). You may add your own styles for use in the content section, but do not modify the code already in the style sheet.

If you haven't created any of your own styles, simply use this one instead of the version you already have. If you have, copy the EPA standard styles into your version of the style sheet.

Images

Do not download any of the standard images, and do not use relative addresses for them; the template uses absolute URLs to refer to them. Don't even download the background image. The background image is called from the style sheet; do not change the <body> tag to call the background image.

To see the individual images but not download them, explore http://www.epa.gov/epafiles/images

Sample Files

Development Process

Here is a quick overview of the steps needed to create your own pages in the new EPA design.

  1. Read the specification and the training presentation.

  2. Download the appropriate model templates.

  3. Download the style sheet.

  4. Modify the model template as follows:
    1. Add your area name
    2. Edit the global links so they point to your own versions of Recent Additions and Contact Us
    3. Edit the search code, following the instructions at http://www.epa.gov/epafiles/searchcode.htm.
    4. Add breadcrumbs so that they start with "EPA Home" and end with your area name
    5. Add your area sidebar, following the instructions at http://www.epa.gov/epafiles/sidebarcode.htm.
    6. If you have an area footer, add it; if not, delete the text placeholder
    7. Edit the Contact Us link in the global footer so it points to your version
    8. Check the template against the list of common template implementation issues ("gotchas")

    Do not modify any code other than what is necessary to meet the specification; editing or removing a number of layout items will seriously degrade the page. For example, the background image is called from the style sheet, not from the body tag. Adding it to the body tag will render the page unusable in a browser that doesn't support style sheets.

  5. Save your template and apply it to each page. On each page, do the following:
    1. Edit the <title> tag to begin with "EPA" and reflect the page's contents
    2. Edit the meta tags as appropriate (if you're not using them, leave them as they are, with nothing between the quotes)
    3. Add breadcrumbs as appropriate, including part name and any subsequent navigation pages, ending with an appropriate form of the page name
    4. Edit the page name
    5. Edit the content
    6. Check each page against the list of common template implementation issues

  6. As required by the specification, create auxiliary pages
    1. A page that appears when someone uses an incorrect URL (known as a 404 error page). See the instructions for details.
    2. Pages thanking people for sending any forms you create. See the instructions for creating forms at http://yosemite.epa.gov/OEI/webguide.nsf/customize/format1.

Questions & Answers

Please email questions to Jeffrey Levy (levy.jeffrey@epa.gov). We'll post answers as soon as we can.

If you find errors in the template, please send them to Jeffrey immediately, with a clear explanation of the problem and your suggested solution.

  1. The sidebar links get pushed pretty far down the page on the EPA home page, which is all we have as an example of an AA home page. Would it be acceptable to re-nest the tables, such that the top of the sidebar aligns with the "Recent Additions, Contact Us, Print Version" area?
    No. Do not change any of the layout code. We're still considering how to design the AA/RA home page photo bar.

  2. You say to, 'Avoid "Office of" / "Region X" and similar language' in area names. Should I interpret this to mean that I should use "Exposure Models" as an area name rather than "CEAM" or "Center for Exposure Assessment Modeling"? If so, I will probably need to justify this change to my management.
    Yes. Precisely. Here's how to determine the area name: what's it about?

    Is it about exposure models, and the info happens to come from CEAM? Then the area name should be "Exposure Models." Or is it really about CEAM, CEAM's structure, how CEAM operates, etc.? Then the area name should be "Center
    for Exposure Assessment Modeling."

    Please don't use "CEAM" as the area name. No one knows what that means except expert users.

  3. The maximum width of 450 pixels for graphics would affect several hundred maps designed to direct users to geographic data files. The majority of the map graphics are 800 pixels wide.
    If you can't reconfigure maps or other graphics to fit, use the wide template that lacks a sidebar.

  4. The EPA Home page doesn't do something required by the specification.
    Correct. The EPA Home page serves a different function from the rest of the site, and will often require design elements different from the standard template. Similarly, pages within the EPA home page area may be designed somewhat differently from the template.

  5. In the template, the title says, "Environmental Protection Agency." Would we put the page's actual title before this? after this? instead of this? separated by semi-colon? dash? other?
    Replace the template's title tag with one appropriate to your area and page. The title in the template is just a placeholder.

  6. What do I do if my area name takes up 3 lines?
    You do not need to do anything special. The template automatically expands the lozenge.

  7. On the contact page, does the backup email address have to be within EPA, or may give out a contractor's email address?
    All contact email addresses must be within EPA. Who actually opens those messages is up to you.

  8. Does the search box use all of a TSSMS directory or just what's in the Web Inventory?
    All of a given TSSMS directory. The search is not limited to what's in the Web Inventory.

  9. For online database applications, how do we distinguish between our own internal search and the area's search box?
    On pages within a searchable database or application, change the text for the search box at the top of each page to "Search EPA" and label the application's search "Search database" or something appropriate.

  10. May we add something to the global links to make "Search" more specific, e.g., "Search Waste?"
    No. There isn't a short description available for every area, which would mean a great deal of variation in the global links. The standard search results template reminds the visitor the area that was searched.

  11. What separators may we use in the sidebar to logically organize the links?
    Use blank lines. Do not use horizontal rules, colored tables, or other means.

  12. May we put anything in the sidebar other than links to our parts or subareas?
    No. The sidebar may contain only these links. No other text (e.g., contact information) is permitted. Also, do not put graphics in the sidebar, other than the icons for kids pages.

  13. May we replace the javascript that produces the "last updated" line at the bottom of the page with the single Dreamweaver code that does the same thing?
    Yes, provided you use the same format as the standard, other than suffixes on numbers.

    For example, "Last updated on Thursday, January 10, 2002" is fine; no need to say "Last updated on Thursday, January 10th, 2002"

  14. There is a problem with the javascript that produces the date at the bottom of the page when they are dynamically generated by an application (e.g., the search results template, Domino, Oracle, etc.). The date is always Tuesday, December 31st, 2069. The problem only occurs in Netscape.
    This seems to be an error in how Netscape asks the relevant server for the correct date, not in the javascript itself, since it works fine in Internet Explorer. In addition, if you download such a page and either view it directly from your hard drive, or you then upload it back to mountain, it works fine, even in Netscape.

    Since the error only occurs on dynamically generated pages, just remove the javascript and use appropriate code to insert the date. Use the same format as the standard, other than suffixes on numbers.

    For example, "Last updated on Thursday, January 10, 2002" is fine; no need to say "Last updated on Thursday, January 10th, 2002"

  15. May I place a horizontal taskbar between the breadcrumbs and the page name?
    Yes. The template includes a comment showing where to put a taskbar.

  16. May I place a graphic file, aligned to the right, on the same line as the page name?
    Yes. The template includes a comment showing where to put such a graphic.

  17. May we remove the "Recent Additions" from the top of the page completely? We don't have this page.
    Yes. As discussed in the specification, creating a "Recent Additions" page is optional. If you don't create such a page, remove the text from the global links.

  18. May we create expanding sidebars, so that clicking a heading expands it into a full list of subsidiary items?
    No. All sidebar items, and the same items, must appear on each page within an area.

 
 
Begin Site Footer

EPA Home | Privacy and Security Notice | Contact Us