Overview of Changes between Template 2.1.1 and Template 3
Here is a summary of the changes between template 2.1.1 (which we used starting on 3/22/2002) and the new template.
- Font/Typeface
- Resizable Text
- XHTML 1.0 Strict Code
- Metadata
- Page and Area Names
- Print Version
- Breadcrumbs
- Left sidebar (Area Navigation)
- Area Footer
- Global Footer
- Skip Navigation
Font/Typeface
Version 3 uses Verdana nearly everywhere: throughout the content section, the area links (recent additions, contact us), the breadcrumbs, and the footer links.
Version 2.1.1 used Arial.
Version 3 retains Arial in the sidebar links because of sizing and readability problems with Verdana styled bold. This version also retains the popular "epaLtSans" style from the version 2.1.1 style sheet.
Resizable Text
The style sheet for version 2.1.1 does not let you resize the text in Internet Explorer for Windows (this problem does not occur in other browsers). Version 3 uses relative font sizes. Instead of specifying text size in points, it's expressed as a percentage, allowing resizable text in all browsers.
font: 75%/1.3 Verdana, Tahoma, sans-serif;
Text resizing is an accessibility improvement.
XHTML 1.0 Strict Code
New pages created with the template should be coded to the XHTML 1.0 Strict specification.
Metadata
Additional metadata tags were added to template 3. This information will be used with EPA's search engine and the eventual move to the Web content management system (CMS). The addition of these metatags also prepares EPA to participate in federal government wide searching.
Page and Area Names
Both 2.1.1 and 3 use <h1> for the Page Name; this makes it the most important information on the page for search engines.
The area name (what you see in the lozenge) appears in <p> tags, inside a <div> with id="areaname".
<div id="areaname"> <!-- START AREA NAME --> <p>Area Name</p> </div> <!-- END AREA NAME -->
Print Version
In version 2.1.1, there was a "Print Version" link available under the Area Name. Clicking on this link called a special program that stripped out the area navigation (sidebar) links and background. The template required a set of special (and invalid) tags, such as <epasidebar>, to accomplish this feature and didn't always work well.
In version 3, the "Print Version" link is gone. When you print the page, the print output is print-friendly, which is drastically different. Changes include:
- The URL of the page is now at the top, along with the date last updated.
- The breadcrumbs, the search box, and other navigation elements at the top of the page have been removed.
- The content fills the width of the printed page, without being cut off.
- At the bottom of the print output, you may see a section titled, "URLs Provided for your Reference" (more information about this feature). Within this section, referenced by the endnote number, is a list of all of the URLs linked from the page.
Breadcrumbs
In version 2.1.1, breadcrumbs are link text separated by a "greater than" symbol (>).
In version 3, the link text is a list item (<li>) in an unordered list (<ul>), which has been styled to include double right angle bracket () as a separator.
Breadcrumbs are prefaced by the words "You are here:".
Advantages
- Improves accessibility. Assistive technologies interpret the new code better.
- The code is cleaner and simpler.
Note: "You are here: EPA Home" is the first item in the breadcrumb list. It's styled with a class of "first" (<li class="first">) to prevent the separator character from appearing before it.
Left sidebar (Area Navigation)
In Version 2.1.1, each sidebar link is in its own <div>. Each link has a class of "epaSideBarLinks":
<div><a href="part1.htm" class="epaSideBarLinks">Part 1</a></div>
For long links that spill over onto additional lines, you have to insert a line break and two non-breaking spaces (<br> ) before the second line.
In version 3, the sidebar links are coded as list items(<li>) in an unordered list (<ul>). If the links are long, the style will automatically wrap and indent them. You no longer need to use non-breaking spaces in sidebar links.
The code for the area navigation links has moved to the bottom of the template. With style sheets, it is not necessary to order the code exactly the same way as we lay out the page. This modification does not change the look of the page at all, but improves accessibility.
Advantages
- Improves accessibility. Section 508 requires us to provide a way for assistive technologies to skip repeating links. People using assistive technology will encounter the content first and the navigation last, and they won't have to skip the links to get to the content.
- Helps our site work better in older browsers. Someone using an older browser will see the EPA seal, Area Name, breadcrumbs, Page Name, and the content first. The sidebar links and footer appear after the content.
Area Footer
The Area Footer has moved from the Footer section to the Content section. This ensures that the Area Footer stays with the Area Content. If EPA implements a new style for the Global Footer, the change will not involve the Area Footer.
All the footer links go into a <p id="areafooter"> element. The id of "areafooter" creates the style for the text.
Global Footer
The Global Footer contains the EPA Home, Privacy and Security Notice, and Contact Us links.
In Version 2.1.1, the footer is text separated by the vertical bar symbols (|).
In version 3, the global footer is an unordered list <ul>.
Note: The Contact Us link is styled with a class of "last" (<li class="last">) to remove the "|" that is used after the other list items.
The blue bar image has been switched out in favor of a blue border using the style sheet. The border is a decorative element serving the purpose of visually dividing information. To assistive technologies, it is now invisible and no "alt text" is required.
Skip Navigation
Version 2.1.1 offers a link at the top of the page for people using screen readers: "Skip common site navigation and headers".
version 3 also contains a link at the top of the page: "Jump to main content."
Our research indicated that assistive technology users sometimes start from the bottom of a page and go up. This is an adaptive behavior to improve their web browsing experience. To them, all the things at the top of web pages that aren't content make it more difficult to reach the content. Thus, in version 3, there's a second "Jump to main content" link at the bottom of the template.