Procedure: Complying with EPA.gov "Look and Feel"

Note

All EPA public content pages and Web applications are required to use the components that make up the common look and feel.

This procedure defines the requirement for EPA’s public access webpages and Web applications to be published with a consistent “Look and Feel.”

The “Look and Feel” enables each EPA public Web page to be clearly identified as an EPA web site and ensures that each page has required code (like analytics and search), links, and other design elements.

All public EPA applications must conform to this standard.

Definitions

Look and Feel: EPA's web page layout and design. The header, footer, and USWDS components are standard and required across all pages on all Agency websites.

Public Web site: Any web site created by the US EPA that can be reached by anonymous readers via a browser.

Responsive Design: Design that renders content formatted specifically for the size of the viewing device.

U.S. Web Design System (USWDS): a toolkit of principles, guidance, and code that makes it easier to build accessible, mobile-friendly government websites. Using the USWDS code and patterns is required of all public EPA applications.

Requirements

New applications can download this Pattern Lab page. Existing applications can choose to add the individual components or the Pattern Lab template. All applications must conform to this standard by 15 October 2023.

Content

Application contents are reviewed by ODC just like all web content. It's better to work with ODC from the beginning.
Applications should follow all other EPA Web Standards and Web Procedures and meet Section 508 requirements, just like web content.

Style

All applications must use the components that make up this look and feel. Application owners will be expected to use both the individual EPA components and the USWDS Components in their applications.

Required Steps

The Agency flagship Web Content Management System uses the standard look and feel. Every EPA applications should also use the components that make up this standard look and feel.

Every EPA application must have the following:
- Global header at the top:
  - Banner that identifies your site as an official website of a government organization in the United States
  - EPA logo in the upper left
    - Applications may use their own tagline next to the logo. This tagline must be the name of the application.
    - The EPA logo must be linked to www.epa.gov
    - The tagline can link to the application home page
  - EPA Search box, posting to search.epa.gov, in the upper right
  - EPA main navigation blue bar, with four links (as of April 2022)
    - The child links are not required
- Global footer, including all links and EPA seal, at the bottom
  - If possible, show the date last updated in the footer (e.g., some pages are generated on the fly; using the current date is appropriate)
- USWDS Components
  - For example, if your application outputs content into a table, you must use the USWDS Table component
  - Another example, follow the USWDS Typography component
  - As another example, any app that has pagination would use the USWDS Pagination component styling
  - It is expected that if USWDS has a component, application owners will use the USWDS version. If any application has a requirement for a component not covered in the USWDS, a process for requesting an exception will be available. However, if the component does exist in USWDS, getting approval to use an alternative will not be granted.
- Analytics: include the Agency's standard Google Analytics Tag Manager tracking code

How-To

New applications can download this Pattern Lab template. Existing applications can choose to add the individual components or the Pattern Lab template. The EPA Pattern Lab has examples of other pages that conform to this standard. Application developers can copy the HTML from the Page with Sidenav, Page with no Sidenav, Page with Sitewide Alerts, etc.

Rationale

Agencies should use the United States Web Design System (USWDS) to ensure a consistent appearance across public-facing websites and digital services. All public-facing websites and digital services must comply with the Federal website standards[8] published by the Technology Transformation Services of the General Services Administration (GSA) which incorporate the USWDS.

Agencies are responsible for establishing and maintaining appropriate brand identities (e.g., use of an agency’s seal or logo) for themselves (or their individual components, offices, or programs) and their respective websites and digital services. Agencies should not establish unnecessary brand and product identities, or multiple uncoordinated identities, that could create public confusion (such as using an internal-facing project or program name for the name of a public-facing digital service).

Agencies should ensure that websites and digital services use appropriate brand identity in a consistent manner, including when an agency uses a third-party website or web application (such as a social media platform) to communicate. Agency websites and digital services should have a cohesive, consistent look and feel that is aligned with agency design and branding guidelines. Agencies should establish internal control processes to ensure that all public-facing websites and digital services are checked for consistency prior to public release.

EPA has established specifications for the layout of all publicly available web pages to create a consistent “look and feel” to establish an EPA brand and ensure that visitors know when they are on an EPA, a federal government agency, page. The template also assures maximum readability when viewing on mobile devices.

This look and feel also incorporates required links (like FOIA), analytics code (Digital Analytics Program), a search box, enhanced accessibility, and USWDS components.

Using these components or this template will help EPA applications more easily meet all federal and EPA web requirements.

Exemptions

While using all of the above components is required, there are certain cases where exemptions are necessary.

The following types of pages are exempt from the "Look and Feel" specifications and require registration, but do not need a waiver:

Extranet Sites

Pages of publicly accessible websites that require authentication and are intended for small target audiences generally comprised of EPA partners are exempt from the "look and feel" specifications. Pages of publicly accessible websites, including those of extranet sites, that do not require authentication are not exempt.

Extranet sites require registration but do not need a waiver. To register your extranet site, please send an email to the Office of Digital Communication (ODC) at [email protected] with a brief description of the site and the planned URL. This email provides ODC with information about the extranet site and should:

identify the audience and the number of users that will have access,
describe the purpose for this site, and
include a description of the structure (e.g. number of pages, technical architecture) of the site.

Joint Partnership Sites

Sites that are developed and operated in partnership with organizations outside of EPA are exempt from this procedure, provided they satisfy other EPA directives about presenting EPA information and that the URL is not on www.epa.gov or www3.epa.gov. In addition, a joint site’s design must differ enough from the standard EPA "look and feel" so that the site does not appear to have intended to use the EPA template but did it incorrectly.

Additional Steps for Partnership Sites

When beginning to design a joint site, send an email to the Office of Digital Communication (ODC) at [email protected] with a brief description of the site and the planned URL. The URL should not be on www.epa.gov or www3.epa.gov. This email provides ODC with information about EPA's joint web efforts and should:

clearly identify all partners,
include materials from outside EPA, and
include input on site structure and content from outside EPA.

Kids Pages and Sites

Information aimed at "kids" or students, meaning up to and including 6th grade, do not need to use the standard design, but a consistent "Look and Feel" must be applied, and this "Look and Feel" must be approved by ODC. Information aimed at older students (7th grade through 12th grade) must use the standard "Look and Feel" design.

Widgets

There is no required EPA appearance or color scheme required for widgets. Please follow the standards found on the Widget Guidance and work with ODC to develop the look of the widget.

Full Metadata about this standard

Name Complying with epa.gov “Look and Feel”
Type Procedure
Required or Recommended Required
Effective date 02/8/2017
Date Approved 1/10/2024
Original Date approved 03/18/2014
Category Page Elements
Web Council review by 1/10/2027 (or earlier if deemed necessary by the Web Council)
Governing Policy Web Governance and Management (PDF) Intranet (5 pp, 339 K, About PDF)

Procedure: Complying with EPA.gov "Look and Feel"

Note

On this page:

Definitions

Requirements

Content

Style

Required Steps

How-To

Rationale

Exemptions

Extranet Sites

Joint Partnership Sites

Additional Steps for Partnership Sites

Kids Pages and Sites

Widgets

Related Governance Documents

EPA

Related Policies

Related Procedures

Related Standards

Related Guidance

Non-EPA

Full Metadata about this standard

Web Policies and Procedures