Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Common Template Implementation Issues

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

Note: for the most part, the information below reflects the look and feel as implemented in mid-2006. The EPA Web Council approves new standards from time to time, and there are other content requirements as well. The Council is creating a single location for all Web standards, but until then, please refer to the individual sites. Where relevant to the look and feel, there are brief reviews of the standards in this document plus a link to the full standard.

Don't look at the EPA home page as an example for anything

The home page must satisfy requirements, including some that come from outside of EPA, that don't apply to the rest of the site.

Top of Page

Understand areas and what goes with them

  • Area name
  • Recent additions, contact pages
  • Sidebar
  • Search code
  • Area footers

Top of Page

Area Name

  • Choose an area name that reflects the area's topic, not the organization providing the information
  • The area name must accurately portray the scope of the information covered
  • Use the same area name on all pages within that area
  • Regional area names must include the Region's identifier (either name—"New England" or number—"Region 1").
    • Do not include the names of organizational units other than Regions, unless the organization itself is the subject of the area
    • While meeting the requirements above, keep area names as short as possible
  • Full area name standard

Top of Page

Title tags—used for bookmarks

  • The title tag contains exactly three elements that appear in this order (specific to general):
    • the name of the page (if helpful to the reader, combine overarching concepts with the literal name of the page)
    • the relevant area name
    • US EPA
  • Give just enough info to identify page
  • Must make some sense out of context
  • Must be unique to page—don't repeat title tags on multiple pages
  • Full title tag standard

Top of Page

Recent additions, contact us, search

Top of Page

Contact us

  • Both contact us links (top and bottom of the page) must point to the same place
  • Contact pages must include phone number, mailing address, and online form
  • Comments form elements must fit on a 640 pixel wide screen (if on their own line, set inputs no wider than 40 columns; see sample code
  • Code the form correctly—TSSMS name, recipients file, thank you page URL (and create your own thank you page)
  • Full contact us links and pages standard

Top of Page

Search coding

  • See instructions for coding the search box
  • Replace variable values, not names
  • Use the correct area name, since it's what shows up at the top of search results (e.g., use "Region Y" instead of "regionY")
  • Use the standard results template: epafiles_default.xsl
  • Don't link to "Advanced Search" in your area's template (template 4 includes that link). Instead, if a search page exists, provide the URL for it in the value for the variable areasearchURL

Top of Page

Breadcrumbs

  • Omit "home" in the breadcrumb for the area home page
  • Include partial names in breadcrumbs
  • Do not link the last breadcrumb (for the current page)
  • Full breadcrumbs standard

Top of Page

Page name

  • Don't use a page name on area home pages
  • Don't change the formatting of the page name—leave it left-justified and in the style found in the model template
  • All logos must be approved by OEA and appear right-justified with the page name
  • Full page name standard

Top of Page

  • Text only: no graphics other than kids pages icons
  • All text must be a properly formatted link
  • Use standard language when providing information for which a standard exists
  • Do not put the following in the sidebar:
    • Graphics, except for icon links to kids' pages
    • Links to the normal "Contact Us" page
    • Links to searches or search boxes
  • You may link to lists of program contacts:
    • Label these links with specific descriptions like "State Contacts" as opposed to "Contacts"
    • Link back and forth between those other contacts pages and the "Contact Us" page
  • If you are soliciting comments, then use sidebar language like "Send Comments" or "Comment on the rule" instead of "Contact Us."
  • Full sidebar standard

Top of Page

Exit EPA procedure

  • See the exit disclaimer procedure
  • Icon: https://www3.epa.gov/epafiles/images/epafiles_misc_exitepadisc.gif
    Use the absolute URL instead of a local copy
  • Link it to https://www.epa.gov/epahome/exitepa.htm
  • Do not use the Exit EPA icon for links to other federal websites

Top of Page

Text formatting

  • Use font styles specified in the standard style sheet
  • Black for text is the default; use colored text only to highlight short items
  • Don't change link colors unless highlighting a specific link
  • Don't use blue or purple color for text that isn't a link
  • Full text and heading styles standard

Top of Page

Headings

Per the full table of contents standard use HTML headings, not styled text.

Top of Page

Do a "file not found" (404 page)

  • See instructions for creating a 404 page
  • All URLs (style sheet, contact us, recent additions, etc.) on the 404 page must be absolute (i.e., include https://www.epa.gov/ and the rest of the path)

Top of Page

New browser windows and pop-up windows

These are two different ways to open new windows to provide information. A new browser window is typically the same size as the original window. It usually contains information intended to stand on its own, as opposed to serving solely as a reference for the original window. It opens on top of the original browser window. A pop-up is a window, smaller than the full screen, intended to supplement the primary browser window.

Top of Page

Date last updated on dynamic pages

Use whatever is appropriate to create the date last updated.

Top of Page

Test everything—forms, links, search box

No matter how many times you create forms or scripts, you need to confirm they work before making them public.

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.