|
 |
|
This site provides the specification for
the standard EPA look and feel and supporting materials.
May 30, 2006: EPA Web Design version launched
EPA Web Design 2.1.1 Files are provided below for use during the transition
to version 3.
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 |
Spanish-language sites:
normal template with a sidebar
Note: please read information about the template
for Spanish-language sites before you apply it to your content. |
DWT
| HTM |
N/A |
| 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.
- 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.
- Insert your photos into the Photoshop file and export the photo bar
as images/aara_ban_image.jpg.
- 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.
- 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.
- 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.
- 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.
- Use the standard template for interior pages until the revisions is
released with the state name listing.
- 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.
- 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.
- Insert your photos into the Photoshop file and export the photo bar
as images/aara_ban_image.jpg.
- Insert your Office's name. Don't change any of the formatting or
alignment of the text or the photo bar.
- 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.
- 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.
- 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.
Sample Files
Development Process
Here is a quick overview of the steps needed to create your own pages
in the new EPA design.
- Read the specification and the training presentation.
- Download the appropriate model templates.
- Download the style sheet.
- Modify the model template as follows:
- Add your area name
- Edit the global links so they point to your own versions of Recent
Additions and Contact Us
- Edit the search code, following the instructions at http://www.epa.gov/epafiles/searchcode.htm.
- Add breadcrumbs so that they start with "EPA Home" and
end with your area name
- Add your area sidebar, following the instructions at http://www.epa.gov/epafiles/sidebarcode.htm.
- If you have an area footer, add it; if not, delete the text placeholder
- Edit the Contact Us link in the global footer so it points to
your version
- 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.
- Save your template and apply it to each page. On each page, do the
following:
- Edit the <title> tag to begin with "EPA" and reflect
the page's contents
- Edit the meta tags as appropriate (if you're not using them, leave
them as they are, with nothing between the quotes)
- Add breadcrumbs as appropriate, including part name and any subsequent
navigation pages, ending with an appropriate form of the page name
- Edit the page name
- Edit the content
- Check each page against the list of common
template implementation issues
- As required by the specification,
create auxiliary pages
- A page that appears when someone uses an incorrect URL (known
as a 404 error page). See the
instructions for details.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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"
- 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"
- 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.
- 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.
- 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.
- 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.
Information about the Template for Spanish
Pages
- Purpose:
- to provide a common look and feel to all Spanish-language areas within
epa.gov. The look and feel of this template closely matches the look and feel of pages
within the EPA Spanish portal
(other than the Spanish portal home page).
- to encourage cross-linking between the EPA Spanish portal and other
Spanish-language areas within epa.gov, thereby publicizing the fact that EPA has a
Spanish portal.
- to provide standard practices for linking from pages in Spanish to pages in
English.
- Application: You should use this template if you
are creating or adding to a Spanish-language area of your Web site.
If you are only creating one page in Spanish, such as a translation
of an HTML fact sheet, then it may make more sense to use the same header,
sidebar and footer that you use on your English pages. Use your judgment
to determine what makes the most sense. You may also call or e-mail Lina Younes,
202-564-9924, younes.lina@epa.gov or
Christine Dibble, 202-564-9147, dibble.christine@epa.gov
in OPA for help.
- Features:
- Ability to increase text size ("Aumento de texto"
near top of page, with four "A" boxes following it): Note that this
feature, which is also used in the EPA
Spanish portal, requires the use of four alternate style sheets.
Note the location of these style sheets within the head of the file.
These style sheets are located within epa.gov/espanol/layout-files/.
If you have local styles, you can create relative links to a second
set of local style sheets.
- "English" icon/link (yellow box near top of page
with "English" in it). This box can be used as a link either
(a) to an English version of the text on the Spanish-language page,
OR
(b) to related (but not identical) information in English.
Reason: Spanish speakers are comfortable with viewing material
that is either related or identical to the material on the current
page. They will not necessarily assume that a link with the text
"English" is going to lead to an English version of the text on
the page.
- Double row of breadcrumbs. Like regional pages
within topical Web sites (example
of a regional page), individual pages within a Spanish-language
area of epa.gov should include a double row of breadcrumbs, the
first from the EPA Spanish portal, and the second from your overarching
English-language area. Example of a double row of breadcrumbs:
EPA Home > EPA
en espaņol > Aire
> Aire Interior
> Humo de Segunda Mano/Hogares Libres de Humo
EPA Home > Indoor
Air > Aire Interior: Recursos En Espaņol
> Humo de Segunda Mano/Hogares Libres de Humo
Reason: Displaying both sets of breadcrumbs should provide
context both for viewers who come to the page from the EPA Spanish
portal, and for viewers who come to the page from the overarching
English-language area. In addition, viewers who come to the page
from the overarching English-language area may notice for the first
time that EPA has a portal for Spanish-speaking visitors. This will
also be true of viewers who come to the page straight from a search
engine.
- Links. Directions for linking
to the following are in the template itself:
- pages in English,
- pages outside of epa.gov, and
- PDF files.
- Resources:
- EPA's Spanish portal.
Questions about the portal or any of its features? Call or e-mail
Lina Younes at (202) 564-9924, younes.lina@epa.gov
- Superfund
en Espaņol. Although the pages on the Spanish-language Superfund
site do not employ all of the features of the template, it is most
likely the most comprehensive Spanish-language site on a particular
environmental topic within epa.gov. Questions about the site or
any of its features? Call or e-mail Rafael Gonzalez at (703) 603-8892,
gonzalez.rafael@epa.gov
|
