![[logo] US EPA](http://www.epa.gov/epafiles/images/logo_epaseal.gif){kind=logo}
Common Template Implementation Issues
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
- Understand areas and what goes with them
- Area Name
- Recent additions, contact us, search
- Title tags—used for bookmarks
- Contact us
- Search coding
- Breadcrumbs
- Page name
- Sidebar
- Exit EPA procedure
- Text formatting
- Headings
- Do a "file not found" (404 page)
- New browser windows and pop-up windows
- Date last updated on dynamic pages
- Test everything—forms, links, search box
Don't look at the EPA home page as an example for anything
The home page must satisfy a variety of requirements, including some that come from outside of EPA, that don't apply to the rest of the site.
Understand areas and what goes with them
- Area name
- Recent additions, contact pages
- Sidebar
- Search code
- Area footers
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 an area.
- Regional area names must include the Region's identifier (either name—"New England" or number—"Region 10").
- 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
Recent additions, contact us, search
- Don't change text
- "Recent Additions" pages are optional; remove link if not doing one
- Don't add other links to the global links section
- Full contact us links and pages standard
- Full recent additions links and pages standard
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
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
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 in the lozenge 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. Instead, if a search page exists, provide the URL for it in the value for the variable areasearchURL
Breadcrumbs
- Omit "home" in the breadcrumb for the area home page
- Include part names in breadcrumbs
- The last breadcrumb isn't a link
- Full breadcrumbs standard
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 OPA and appear right-justified with the page name
- Full page name standard
Sidebar
- Only text—no graphics other than kids pages icons
- All text must be a properly formatted link, including headings for link categories
- Use standard links at the top of the sidebar and 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 that lets people contact the staff running the Web area
- 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
Exit EPA procedure
- See the exit disclaimer procedure
- Icon: http://www.epa.gov/epafiles/images/epafiles_misc_exitepadisc.gif
Use the absolute URL instead of a local copy - Link it to http://www.epa.gov/epahome/exitepa.htm
Text formatting
- Use font sizes specified in the model template and standard style sheet for various sections (e.g., 0.85em for breadcrumbs and ~12px for content).
- Do not change the font face specified in the standard style sheet.
- Don't change link colors unless highlighting a specific link
- Use black text as the default; use colored text only to highlight short items
- Don't use blue or purple for text that isn't a link
- Full text and heading styles standard
Headings
Per the full table of contents standard use HTML headings, not styled text.
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 "http://www.epa.gov/" and the rest of the path)
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.
Date last updated on dynamic pages
Use whatever is appropriate to create the date last updated.
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.