OPA Review of Web Concepts and Drafts:
What We Look For
This page explains the Web review process and several aspects of Web design that Web Content Coordinators and the OPA Office of Web Communications (OWC) focus on during reviews. There's more to do than what is covered here, particularly for the standard look and feel, but here we focus on what people frequently misunderstand or don't get quite right. If you do these things right, you'll sail through product review.
- Introduction
- Phases of Review
- Concept Review
- Draft Review
- Web standards approved by the Web Council since September 2005
- Revision History
Introduction
Web Content Coordinators in each AAship and Region and the OPA Office of Web Communications (OWC) review all concepts of new, redesigned or reorganized areas of the EPA Web site to ensure that materials meet all requirements and provide the best possible information and presentation. Prior to February 2008, OWC also reviewed drafts of new, redesigned or reorganized areas of epa.gov.
We find that materials we review meet most requirements, and most design choices are sound. However, there is a small set of problems that we find occur often. Below, we briefly describe each issue and what we expect. After each section, we provide references to policies and guidance.
Nothing presented here is original to this document; rather we have excerpted information relevant to these problems from the full set of guidance about building Web materials at EPA, especially the guidance found in Appendicies 3 and 4 of the Policy and Implementation Guide for Communications Product Development and Approval and the standard look and feel specification Other standards are available from the procedures, standards, and guidance section of the Web Guide.
We focus here on what we expect to find during our review, not the review process itself, which we've covered in the Product Development and Approval section of the Development Guide.
The best way to sail through Web product review is to read all of the requirements one time, and then refer to this guide as a checklist each time you develop something new. We'll still check materials against all requirements, but usually items not discussed here aren't a problem. Doing so will help you in two ways:
- You'll know up front what to do, avoiding late changes required during our review.
- Our review will be faster, since we won't have to comment on these problems.
Please contact OWC with any questions or concerns.
Phases of Review
Web materials are reviewed at the concept stage and the draft stage. Both Web Content Coordinators and OWC perform concept review; this review marks the first time the Content Coordinators and OWC see an idea and have an opportunity to provide input. A concept does not involve a developed set of materials, but rather the idea for something. Draft review, conducted only by the Web Content Coordinators, can entail several rounds of comments and editing. Draft review involves preparing materials for final posting to EPA's Web site.
Concept Review
At the concept stage, the Web Content Coordinators and the OPA Office of Web Communications (OWC) check that:
- the concept is appropriate for EPA's site;
- the submitter has identified the audiences;
- all EPA offices with information relevant to the subject matter are participating;
- there isn't needless duplication of information already found on the EPA Web site;
- developers working on a site for kids, students and/or educators have contacted the Environmental Education Web Workgroup (EEWW) to arrange for involving the EEWW in the development of the site (call Megan Gavin at (312) 353-5282; OWC will not approve concepts of kids, students and educators sites until OWC has consulted with the EEWW); and
- proposed URLs and aliases (Web addresses) are as simple as possible and do not include organizational acronyms (for example, use www.epa.gov/seleniumcriteria rather than www.epa.gov/ost/seleniumcriteria. Information about creating aliases is located in the EPA Web Guide, as is the form to request an alias ).
OWC presumes that developers and their managers have the best understanding of what is appropriate, but we will raise issues if we see any.
Concept review is also when OWC discusses how best to integrate national-level and regional-level information with the submitter and relevant offices.
References
- Getting Through Web Product Development and Review: A Step-By-Step Guide: www.epa.gov/productreview/guide/web_gettingthrough.html
- Web Content Coordinators: www.epa.gov/webgovernance/leadership.html
Draft Review
Web Content Coordinators in each AAship and Region review new areas of the EPA Web site against four broad types of criteria, all of which are established by formal Web standards:
- standard look and feel
- topical organization and design principles
- writing style and information conveyed
- Web design best practices and Web site usability
Each criterion is discussed below. If a Web Content Coordinator determines that many simple issues exist (e.g., many spelling mistakes), he or she may reject the draft and ask you to use this document to assist you in further proofreading the draft before resubmitting it for review.
If you are developing a site for kids, students and/or educators, the Web Content Coordinator must also check with the Environmental Education Web Workgroup (EEWW) to make sure that the EEWW has reviewed the site.
Standard Look and Feel
Web Content Coordiantors check that materials comply with the standard look and feel. They pay special attention to the items noted in Common Template Implementation Issues. Please refer to this list in the Web design area of the EPA Web site; specific items are not replicated here.
References
- Complying with www.epa.gov “Look and Feel" Procedure: yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/look-feel
- Look and feel documentation: www.epa.gov//epafiles
- Common template implementation Issues: www.epa.gov//epafiles/gotchas.htm
Topical Organization and Design Principles
Topical organization: organize your information along topical lines instead your org. chart.
-
Split up information by geographic location. Follow the National and Regional Organization Standard.
-
U.S. map: Use the standard U.S. map to link to regional bridge pages. Follow the Where You Live Page Standard and the Maps of the U.S. Standard.
-
Create a page in each Region for information below the national level. Follow the Regional Bridge Page Standard.
References
- National and Regional Organization (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/organization
- Where You Live Page (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/where-you-live2
- Maps of the U.S. (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/maps2
- Regional Bridge Page (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/bridgepage
Writing Style and Information Conveyed
- Home Page (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/homepage2
- Graphic Selection and Screen Layout (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/graphicselection
- Basic Information Page (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/basic-info2
- Writing Style (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/writingstyle2
- Timeless Text (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/timelesstext
- Scannable Text (Guidance): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/scan-pages2
- Writing for the Web: Resources and Examples: http://www.epa.gov/productreview/writing/resources.html
Web Design Best Practices and Web Site Usability
Web site usability is a measure of how well the site provides information in a way that is:
- Easy to understand
- Efficient to use
- Easy to remember
- Free of serious errors
- Subjectively pleasing
In addition, goals for the practices described below include:
- reducing the time it takes for pages to appear
- ensuring that EPA's site is easy to navigate
- ensuring that there are no technical errors (e.g., links work, forms work, etc.)
The following list presents items we frequently note in our comments on draft materials:
- Navigation: Readers must be able to answer the following
from every page:
Where am I?
Where have I been?
Where can I go?
How do I get there?
Use the following navigational tools to help answer these questions: - The left sidebar must include links to the first page for each part of an area and use standard language where available; Follor the Sidebar Standard.
- Include a page name and relevant subheadings on each page that are consistent with the navigational aids (e.g., the left sidebar) in the site. Follow the Page Name Sstandard.
- Use breadcrumbs per the standard page design; they show the page's location within EPA's site. Follow the Breadcrumbs Standard.
- Provide links back to the area's home page via the breadcrumbs and to the other main sections of the site (e.g., via the left side-bar) on every page of the site.
- Make the purpose of each button clear.
- Provide multiple paths to the same information.
- Consider creating a site map. If you do, link to it from the left
sidebar.
- URLs: Use aliases as much as possible. It is much easier
to remember "www.epa.gov/seleniumcriteria" than "www.epa.gov/ost/criteria/selenium/".
Proposed aliases should be as simple as possible and should not
include any organizational acronyms. For example, use www.epa.gov//seleniumcriteria
rather than www.epa.gov//ost/seleniumcriteria.
- Links: Follow these procedures and standards:
- External Site Links (Procedure)
- Link Text and Printing URLs (Standard)
- Email Address Links (Standard)
- File formats:
- Generally use HTML or a similar markup language (e.g., CFML).
- Use formats that require someone to purchase software (e.g.,
Word, WordPerfect, Excel) only if the purpose is for the
reader to download and edit the document (e.g., a form).
- Adobe Acrobat (PDF) format: Follow these standards and best practices:
- PDF Links (Standard)
- PDF: When to Use (Standard)
- PDF Checklist (from a white paper by the Web Workgroup)
- Drop-down / slide-out menus and instant selection boxes: These items are banned under the Dropdown Menus and Instant Selection Boxes Standard.
- Accessibility / section 508 compliance: Complying with Section 508 is mandatory, and OPA supports whatever efforts you take to make your sites accessible. OPA does not currently have the resources to determine whether sites submitted under product review are fully accessible; however, OPA does look for some hallmarks of accessibility, such as the proper use of alt text for all graphics. Include the best possible alt text descriptions:
- `alt text must communicate the purpose of the image, not its appearance. For example, if the graphic is a green triangle pointing to the right to indicate a link to the next page, use alt="next page" instead of alt="green triangle pointing to the right"
- use null alt text (alt="") for images that don't convey content or when the content is included elsewhere (for example, in a caption).
- provide text information about pie charts, bar charts and other
complex graphics: in the image tag itself; through a text link;
or, in cases of extremely complex graphics, by providing a telephone
number that viewers can call for more information.
- Javascript
- Do your best to make pages work the same way without Javascript enabled. At minimum, provide the same information and navigation options whether Javascript is enabled or not:
- use <noscript> tags to warn users when certain functions are not working
- provide a phone number or email address to get help
- if you have permission to use image rollovers, ensure that content is equivalent and navigation still works without the rollover effect
- Do not rely on Javascript for critical functions. For example, if form entries must be validated before they go into a database, carry out that function on the server side instead of relying on Javascript.
- If you provide an online Javascript calculator, also provide a plain-text page explaining how users can complete a calculation manually with a formula or algorithm.
- Follow the Javascript Standard.
- New browser windows: Avoid these under the News Browser Windows Standard.
- Pop-up windows: Use only when appropriate under the Pop-Ups Standard.
- "New" Icon: Use the EPA "NEW" icon to indicate that a piece of content is new. Follow the "NEW" Icon Standard.
References
- Sidebar (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/sidebars
- Page Name (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/page-names
- Breadcrumbs (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/breadcrumbs
- External Site Links (Procedure): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/external-links
- Link Text and Printing URLs (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/linktext2
- Email Address Links (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/emailaddresses
- PDF Links (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/pdf-linking
- PDF: When to Use and Creating Document Metadata (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/pdf-when2
- PDF: Best Practices: yosemite.epa.gov/OEI/webguide.nsf/design/pdf_guidance
- Dropdown Menus and Instant Selection Boxes (Standard) : yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/dropdown2
- Javascript (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/javascript
- New Browser Windows (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/newwindow
- Pop-Ups (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/popups
- "NEW" Icon (Standard): yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/newicon
- Program logo policy: www.epa.gov//productreview/app2.html#programlogo
- EPA Web site usability testing lab: Beverly Gregory (202-566-0672; gregory.beverly@epa.gov)
- Accessibility (section 508): intranet.epa.gov/accessibility/web.htm
- Creating aliases: yosemite.epa.gov/OEI/webguide.nsf/create/alias
Graphics
See the standards related to graphics and multimedia (yosemite.epa.gov/oei/webguide.nsf/approved_cat?openView&RestrictToCategory=Graphics%20and%20Multimedia)
Making Web graphics smaller: www.epa.gov//productreview/guide/graphicsize.html
Revision History
February 2008: updated to reflect OPA Office of Web Communications no longer reviewing draft Web content
March 2007: Significantly shortened to incorporate links to EPA Web Standards and remove references to Topics Lite
December 16, 2005: Added links and information from Web
standards approved by the Web Council in September 2005, including
creating a new section just for graphics
August 2, 2004: clarified various points without adding any new concepts
June 3, 2004: Added section on writing for the web and
making pages scannable
April 27, 2004: added link to Making Web graphics
smaller
March 4, 2004: released initial version
December 10, 2004: Added language about the role of the Environmental
Education Web Workgroup in the development of sites for kids, students
and educators; added language about developing aliases.