EPAFiles: Web Design
EPA Web Design Specification
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 to Coders
- Advantage: As new styles become available or EPA makes a look and feel change, no additional work is required for individual sites.
If you use local copies for development.
- Do not modify the style sheets in any way.
- You are responsible for maintaining current copies. Check for updates frequently.
This specification provides a high-level overview of the template. More detailed information is available.
This specification and the associated template and style sheets apply to all HTML pages on EPA's Web site and all pages that the browser interprets as HTML (e.g., Oracle, Cold Fusion, Domino, etc.).
Our organizing principle is to divide EPA's single site into many "areas." An area covers some cohesive topic or set of materials. It is defined visually by a set of sidebar links and an area name. Each page within an area will use the same set of sidebar links as the means of navigating among those parts. Each area will use a template developed from the master template. Local templates vary from the master template according to this specification.
Rules in local style sheets cannot override any rules in the master style sheets.
- Standard EPA Web Design Layout
Standard EPA Web Design Layout
Each HTML page has a standard layout, with four primary sections:
- Header: the CSS specifies exactly how everything in this section appears. The code, text, and link destination (if necessary) for the area name, search engine code, Contact Us and Recent Addition links, and breadcrumbs are set locally.
- Content: the "white space". The CSS specifies fonts and text appearance, and includes examples of boxes, lists, and images with captions, which you can use. The area footer text is set locally.
- Area-navigation: the left-hand sidebar links. The CSS specifies fonts and appearance. The actual wording of link text and destinations are set locally.
- Footer: The template specifies the appearance and the link text. The Contact Us link destination is set locally.
Instructions for editing the template are available.
Header <div id="header">
The header contains the EPA logo, the top right EPA name (image), the area name, a Contact Us link, and the breadcrumbs.
You must modify:
- Area Name
- The destination of the Contact Us link in the header must match the destination of the Contact Us link in the footer.
Notes: In Template 4, the Recent Additions link is in the sidebar. The Print Version link has been removed. Breadcrumbs are no longer separated with > (">").
The header style is part of the EPA look and feel. If you use a local style sheet, do not modify any of the styles associated with the header in your local style sheet or with inline style declarations.
Content <div id="content">
The content is everything from the page title to the area footer (inclusive), just before the blue separator line. The page title (the<h1> header) is required, except on area home pages.
You must modify:
- All content, including forms, images, etc.
- Area footer text
- If a site uses an area footer, it goes into the template and is used across the entire web area.
- Validate code for XHTML 1.0 strict
- Directions to update existing pages to Template 4
The master style sheet includes basic styles for the content portion of your pages. You can use additional styles in a local style sheet, but you must not edit the rule governing the layout and positioning of the "content box" nor the area footer in the template. These are components of the EPA look and feel.
Available Styles in the EPA Master Style Sheet
The EPA look and feel is driven by the master style sheet. If local styles are restricted to the content, EPA will be able to revise the site-wide look and feel by simply editing the master style sheet, with no additional work on your part.
EPA's JQuery Framework for the content <div>
Left sidebar (Area Navigation) <div id="area-nav">
The left sidebar contains the sidebar links for an area.
You must modify:
- Link text
- Link destination
The area navigation style is part of the EPA look and feel. If you use a local style sheet, do not modify any of the styles associated with the area navigation in your local style sheet or with inline style declarations.
- [Subject] Home
- Basic Information
- Where You Live (optional)
- Recent Additions (optional)
Footer <div id="footer">
You must modify:
- Contact Us link
- The destination of the Contact Us link in the footer must match the destination of the Contact Us link in the header.
The footer style is part of the EPA look and feel. If you use a local style sheet, do not modify any of the styles associated with the footer in your local style sheet or with inline style declarations.