Standard: Sidebar
Brief description
(see the full document below for details)
The sidebar is the vertical list of links in the left panel of an EPA Web page. Every page within an area uses the same sidebar. Every sidebar offers standard links, and uses standard language for certain kinds of content.
On this page
All standards and guidance
Definitions
The sidebar is a vertical bar of links, generally on the left side of the page, that provide the primary navigational links to each part within a Web area.
Top of page
Content requirements
- The left sidebar must be identical on all pages within a Web area. All content within an area will use the same area name and sidebar; if one changes, the other must change.
- Conventions for left sidebar standards and navigation:
- Use an ampersand (&) in place of "and" or "/"
- Capitalize the first letter of all major words. Do not use all caps.
- Do not use acronyms unless (a) the acronym is more familiar than the phrase the acronym stands for (e.g., "PCBs" is a more familiar term than "polychlorinated biphenyls") or (b) the acronym is explained in the navy-blue lozenge at the top of the page (see the PBT home page as an example).
- Any text used on the left sidebar must be an active link.
- A background image provides the graphic backing for the sidebar. Do not download or modify the image or change the code that refers to it.
- Sidebar links connect only to other pages within the Web area, not to any other pages on EPA's or other sites, with two exceptions:
- they may connect directly to the home pages of areas lower or higher in a logical hierarchy; and
- they may connect to related kids' sites.
- Multi-level, hierarchical links are allowed. Each heading must be a link, typically to a page providing more context about the options under that heading. Indent each lower level link two spaces using codes and link these codes as well as the text. Note that the same links must appear in the sidebar on all pages within an area; do not create different sidebar hierarchies for different parts within one area. To display different hierarchical links within various parts, create a horizontal task bar or use another navigation scheme. If every part has a substantial hierarchy, consider creating areas for them.
- Standard sidebar language/primary terms: the following links are required in the sidebar in the following order:
- a link to the home page of a Web area, with the link text "[Subject area] home." The description of the subject should match the area name provided in the navy-blue lozenge at the top of the page. Lengthy subject names may be handled by including an acronym in parentheses in the lozenge and then using the acronym by itself in the link.
- a link to a page providing general information about the subject, with the link text "Basic Information." The Basic Information page provides national (versus regional or local) information about a subject.
- a link to a "Where You Live" page that should provide information related to a particular geographical location or region of the country. "Where You Live" pages should include a Regional or state-by-state map that links to Regional or local information about the subject. If no Regional information exists, the Where You Live link is not required.
- The links described in the three bullets above should appear as the top links in the sidebar in this order:
- [Subject] Home
- Basic Information
- Where You Live
- on AA/RA home pages only, the standard EPA kids area icon, linked to the EPA kids area home page, should appears at the bottom of the sidebar. If kids pages relevant to the AAship or Region exist, then the standard local kids icon appears below the EPA kids area icon. Insert the AAship or Region name in the local icon, using the template graphic provided in the Web Guide.
- Standard sidebar language/secondary terms: These are to be used on both national and regional pages as needed. Use the specific wording provided below, but in an order appropriate to the topic. Although these terms are displayed below alphabetically, they do not need to be listed in your sidebar alphabetically.
- A to Z Subject Index. Links to subject index for the lozenge topic. Harmonizes "A-Z Index" and "Subject Index," both of which are currently used on EPA's site.
- Calendar. More inclusive than coming events; includes public notice periods, etc.
- Compliance Help. Intended for information to help industry and individuals comply or remain in compliance with regulatory and non-regulatory requirements. Content may range f rom plain-language guidance to self-auditing tools to formal regulatory assistance.
- En Español. Not "Spanish" – use if there are Spanish documents on the topic.
- Enforcement. Intended for information about civil, criminal and/or cleanup enforcement initiatives, activities and actions. This should be differentiated from information designed to help the regulated community be in compliance.
- Environmental Effects. Includes environmental impacts specific to your topic.
- Frequent Questions. Do not use the FAQs acronym because usability testing shows not everyone knows what it stands for. This phraseology makes the point, yet fits on one line in the sidebar.
- Glossary. Definitions of key terms.
- Grants & Funding. Resource information related to the topic.
- Human Health. Includes health information and impacts specific to your topic.
- Laws, or Regulations & Standards, or Laws & Regulations. Select the most appropriate term; use "Laws and Regulations" if you have content covering both areas. Regulations and standards are issued under a law or statute authority.
- Newsroom. Links to news releases, etc. (differentiates from "new pages on the site," which are linked from "Recent Additions.").
- Partnerships. Information about partnerships and partners who work with us on a topic. May include: government, non-government organizations, companies, other "stakeholders," etc.
- Policy, or Guidance, or Policy & Guidance. Select the most appropriate term; use "Policy & Guidance" if you have content covering both areas. Usually relates to regulatory and official policy guidance of the agency; distinct from "general" guidance, guidance on "how you can help," etc.
- Publications. Links to listing of EPA produced material including videos and CD-ROMs as well as all printed material. Most items under this heading will also be linked from more specific locations related to each document (e.g., a pamphlet on testing for lead in drinking water will be linked from the publications list and from pages providing specific information about that subject.
- Related Links. Related links within and outside EPA.
- Science, or Technology, or Science & Technology. Select the most appropriate term. Use "Science" to cover science and research content. Use "Technology" for strictly application content. Use "Science & Technology" if you have content covering both areas.
- Site Map. Links to a site map page, if you choose to create one. The site map should be at the national level and include regional content.
- What You Can Do. Actions, activities, ways to help for general public, students, etc.
- Links prohibited from sidebars:
- Graphics, except for icon links to kids' pages
- Links to the normal "Contact Us" page that provides ways to contact the staff running the Web area.
- NOTE: You may link to lists of program contacts. Label these links with specific descriptions like "State Contacts" as opposed to "Contacts" or "Contact Us." In that case, 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."
- Links to searches or search boxes
- Links to PDF files.
Top of page
Style requirements
- The standard style sheet specifies white bold 9-point Arial for sidebar links.
- Sidebar content should be organized and spaced following the style requirements located on the coding the sidebar page.
- The left sidebar has a dark blue background (hex: #336699)
- Left sidebar links appear as 9 pt. bold Arial without underlining. Except as discussed below, they are double-spaced using the <div> tag as defined in the standard style sheet, and there are no horizontal lines. Do not insert blank lines in the sidebar.
- When the visitor points to a link, it changes to light blue (hex: #90F0FF)
- For link text that stretches onto more than one line, indent each subsequent line two spaces using codes; the heading itself must also be a link.
- If there is a link to the home page of a higher (overarching) area, then that link should appear directly below the EPA seal, followed by a thin horizontal line (HTML code: <hr size="1">), followed by a link to the area's own home page.
Top of page
How to
Top of page
Examples
- State Contacts. Imagine you have a list of state contacts. The left sidebar would contain a link to "State Contacts." The state contacts page would have a link in the body that says "Contact EPA" and the "Contact Us" page would have a link in the body that says "List of State Contacts."
- Sidebar links may connect directly to the home pages of areas lower or higher in a logical hierarchy: Examples: the sidebar for a topic called "Water" might include a link to the home page for an area called "Drinking Water". A sidebar for the topic "Radon" might include a link to the home page for an area called "Indoor Air Quality." To illustrate this organization scheme, consider the area that provides information about beaches (http://www.epa.gov/beaches/). The area name is "Beaches" and the parts are:
- Beaches Home
- Basic Information
- Where You Live
- Plan a Trip
- Learn About Beaches
- How EPA Protects Beaches
- Grants & Funding
- Related Links
"Beach Standards, Monitoring, & Notification," one of the sidebar links, goes to its own Web area (http://www.epa.gov/waterscience/beaches/).
Top of page
Rationale
- Visitors rely on the sidebar to navigate and find what they are searching for.
- Consistent page features, like the sidebar, help visitors learn how to navigate the site. Using the same sidebar on all pages also helps visitors see that they remain within a given area of the site.
- All content within an area will use the same area name and sidebar; if one changes, the other must change. The Web visitor identifies the area by the area name and its sidebar links; when the area name changes, the sidebar links should also change. The sidebar and the area name together provide visual consistency on every page within an area. Thus, the sidebar will not shrink or otherwise change, regardless of how deep an area's hierarchy.
- Don't put the search function or the "Contact Us" link in the left sidebar: It's important that Web visitors see the same features in the same locations on pages throughout EPA's site so they can develop expectations that help them navigate. A visitor seeing "Contact Us" or the search box in the left sidebar of one area may then expect to see them in the sidebars of all areas. Since most areas don't have those features in the sidebar, the reader might assume that there is no search capability or contact information for that area. It's fine to put links to other types of contact information in the sidebar. For example, you could have a "State Contacts" link in the sidebar, as long as your "Contact Us" page presents contact information other than a list of state contacts. Furthermore, having these items in the sidebar isn't necessary. Usability tests show that people find the "Contact Us" link at either the top or bottom of each page.
- Standard sidebar language: It's important that Web visitors see the same features in the same locations on pages throughout epa.gov, so that they can develop expectations that help them navigate around our pages and sites.
Top of page
Exemptions
- Exemptions for rule that sidebar links connect only to an area's parts:
- they may connect directly to the home pages of areas lower or higher in a logical hierarchy. If there is a link to the home page of a higher (overarching) area, then that link should appear directly below the EPA seal, followed by a thin horizontal rule (HTML code: <hr size="1">), followed by a link to the area's own home page; and
- they may connect to related kids' sites.
- Exemption for wide pages: Pages with very wide data tables or graphics that cannot be configured otherwise may use the secondary template that lacks a sidebar (provided in the same place as the regular template). However, all other sections of the page must still appear and meet the specification. This exemption is a last resort, to be used only when a page cannot be designed in any other way, and it must be approved by the Office Director (in HQ) or Division Director (in Regions).
- The prohibition against sidebar graphics or icons may be waived when required to meet OMB dictates.
- OPA may approve a search box or link in the sidebar.
Top of page
Related governance documents
EPA
Related Policies
Related Procedures
Related Standards
Related Guidance
Non-EPA
None
Top of page
Full Metadata about this standard
Name Sidebar
Tracking number NT00000000
Type Standard
Required or Recommended Required
Effective date 09/28/2005
Date approved 09/28/2005
Category Links and Navigation, Page Elements
Web Council review by 09/21/2008 (or earlier if deemed necessary by the Web Council)
Governing Policy Web Governance and Management (PDF) (4 pp, 339K, About PDF)
Top of page