Jump to main content.

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

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.

Top of page

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.

Top of page

XHTML 1.0 Strict Code

New pages created with the template should be coded to the XHTML 1.0 Strict specification.

Top of page

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.

Top of page

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 -->

Top of page

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:

Top of page

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

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.

Top of page

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>&nbsp;&nbsp;) 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

Top of page

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.

Top of page

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.

Top of page

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.

Top of page

For help with these pages, contact the Web Redesign Workgroup.

Local Navigation

Jump to main content.