ATTACHMENT_12__FSA_INTERACTIVE_WEB_APPLICATION_STYLE_GUIDE.pdf

USDA Web Style Guide

Version 2.1

Table of Contents

1 Introduction

1.1 Style Guide Contents

2 Informational Web Pages and Sites

2.1 Masthead

2.2 Top Navigation Bar

2.3 Left Navigation Column

2.4 Right Navigation Column

2.5 Footer

2.6 Content Area

3 Interactive Web Application Pages

3.1 Masthead

3.1 Masthead

3.2 Top Navigation Bar

3.3 Left Navigation Column

3.4 Footer

3.4 Footer

3.5 Content Area

4 Overall Style Guidelines

4.1 Font

4.2 Body Text

4.3 Color Palettes

4.4 Links

4.5 Tables and Forms

4.6 Imagery

4.7 Exception Pages

4.8 Error Handling

4.9 Technical Considerations

5 Templates for Informational Web Pages and Sites

5.1 Agency 1 Template

5.2 Local Navigation Template

5.3 Child Window Template

5.4 Data Table Template

5.4 Data Table Template

5.5 User Registration (Form) Template

5.6 Newsroom Template

5.7 Photo Gallery Template

5.8 Large Image Template

5.9 Data Display Template

6 Templates for Interactive Web Application Pages

6.1 Interactive Application 1 Template

6.2 Interactive Application 2 Template

7 Targeting USDA Audiences 8 Editorial Content

8.1 Crafting Text

8.2 Strategies for Crafting Text

8.3 Guidelines for Ensuring Clarity

9 Accessibility Guidelines

10 Usability Guidelines 11 OMB Guidelines 11 OMB Guidelines continued 11 OMB Guidelines continued 11 OMB Guidelines continued 11 OMB Guidelines continued 11 OMB Guidelines continued 11 OMB Guidelines continued 12 Appendix

1 Introduction

USDA has numerous Web sites representing its various agencies and staff offices, as well as an abundant number of Web-based applications used within those agencies and staff offices. Many of these Web sites and applications have unique navigation models, content structures, and visual presentations. This presents a challenge to the citizens, business partners, and employees who come to USDA to find information, complete forms, or conduct transactions. Each time users visit a given site or application, it is often necessary to “re-learn” the navigational structure and other features. In order to overcome these challenges, an enterprise-wide User Interface (UI) Web Style Guide has been created for USDA agencies and staff offices to leverage in designing and developing their Web sites and Web-based applications.

The USDA Web Style Guide defines guidelines and standards for look, feel, and navigation to promote consistency while also improving the overall user experience. The guide will help reinforce and protect the integrity of the USDA brand. Therefore, it is critical that designers and developers use this guide to better understand how to apply the new USDA Web standards to all public-facing agency and staff office Web sites and Web-based applications.

For the purposes of this document, “public-facing” refers to any Web page or Web application page that can be viewed by external (non-USDA) customers. Also included is any Web page or application that targets all USDA employees, such as a USDA enterprise application. Web pages that fall in either of the categories mentioned above are within the scope of the USDA Web Style Guide and must follow the standards described herein.

Version 2.1 – Last Updated on 12/22/06

1.1 Style Guide Contents

This Style Guide is your blueprint for building new Web pages. While it is not possible to plan for every contingency, you should find all the resources and framework you need to make informed decisions in your Web page development efforts.

The guide provides the following detailed information:

• Templates displaying varying levels of Web pages and types of content, to provide designers and developers with examples of how to display commonly used information among agencies

• Instructions on how to design Web-based applications

• Specifications for layout, global navigation, color palettes, and typography to ensure that a consistent look and feel is maintained throughout all sites

• Guidelines and advice on how to prepare editorial content for your Web pages to maximize users’ ability to locate and understand information

• Section 508 accessibility requirements to help your agency pages meet and exceed these standards

• Summary of USDA audience types, based on an extensively conducted audience analysis, to assist you in knowing more about your customers

2 Informational Web Pages and Sites

The primary function of an informational Web page or site is to deliver content to USDA’s customers.

Examples of informational Web sites in USDA include ‘USDA.gov’, as well as the various Web sites maintained by USDA agencies, staff offices, programs, and regional/local USDA offices. The primary objective of these pages or sites is to disseminate information to citizens, business partners, and USDA employees.

This section outlines specific design standards to be employed when designing and developing public-facing informational Web sites or pages. Instructions are provided for how to handle specific page components, such as page layout and navigation elements. In addition, specific examples such as how to present tabular or graphical data within the confines of an agency Web site are presented in this section.

All informational Web sites and pages are to be centered and must contain each of the following six sections:

the Masthead, Top Navigation Bar, Left Navigation Column, Right Navigation Column, Footer and Content Area. Specifications for designing and developing each of these sections are outlined in the subsequent pages of this chapter.

Spacing 10px

Spacing 10px

Spacing 15px

Spacing 10px

Masthead

Top Navigation Bar

Left Navigation Column

Footer

Right Navigation Column

Content Area Spacing 10px

Spacing

2.1 Masthead

The Masthead is the main branding area for your agency or staff office informational Web site and will appear on every page. It consists of the Branding Area and Photo Banner. Various options for handling the Masthead component of your informational Web site are described below. You may choose from any of these options.

Masthead Option 1

This option closely resembles the ‘USDA.gov’ Masthead, with the same image and typography sizes and relationships. The images used should be directly relevant to the specific mission of your agency. This type of Masthead can be developed quickly with minimal effort.

Note: Masthead Option 1 requires 8px image space between the Photo Banner and the Top Navigation Bar.

Masthead Option 1

Masthead Components

1. Branding Area

This is the area at the top of the Masthead where the USDA logo, United States Department of Agriculture, and your Agency Name appear at the top left. The size, position, and placement of these Branding Area elements cannot be altered.

Attributes: Logo and text: “United States Department of Agriculture” / Font: Helvetica Medium / Size: 10px / Text: “Agency Name” / Font: Helvetica Medium / Size: 16px / Color: #000099 / Rollover: None / Rollover Color: None / Image: masthead_logo.gif / Width: 767px / Height: 64px / Cutsheet Name: masthead.psd

2. Photo Banner

The Photo Banner is a series of images that represents the diversity of your agency. Each agency is responsible for providing and updating the images used.

Attributes: Image: masthead_banner.gif / Width: 767px / Height: 44px / Cutsheet Name: masthead.psd Please ensure that photo banners have a 1 pixel border surrounding it.

2.1 Masthead continued

Masthead Option 1a

Agency names vary in complexity and length. The following example shows how a long agency name would appear using Masthead Option 1.

Masthead Option 1b

Masthead Option 1a

Some agencies have already conducted efforts to design specific logo treatments for their Web sites. The following example shows how an agency could incorporate existing logo treatments into Masthead Option 1.

Masthead Option 1c

1b

Some agencies, in addition to their own logo treatments, have developed sub-branding for sites such as field, regional, local, or state offices. These agencies require flexibility to be able to incorporate additional text into the Masthead area. The following example shows how an agency could incorporate existing logo treatments as well as sub-branding elements into Masthead Option 1.

1c

Masthead Option 2

This Masthead option has the same size and relationships as the ‘USDA.gov’ Masthead. This Masthead includes “Did You Know” factoid animations. Additionally, the images in the Photo Banner should be relevant to the specific mission of your agency.

Agencies are welcome to incorporate this kind of element if they have the resources to maintain it. This design works well if there are enough facts to support it. 1 A minimum of five facts is recommended.

Note: Masthead Option 2 requires 8px image space between the Photo Banner and the Top Navigation Bar.

Masthead Option 2

This is the area at the top of the Masthead where the USDA logo, United States Department of Agriculture, and your Agency Name appear at the top left. The size, position, and placement of these Branding Area elements cannot be altered.

Attributes: Logo and text: “United States Department of Agriculture” / Font: Helvetica Medium / Size: 10px / Text: “Agency Name” / Font: Helvetica Medium / Size: 16px / Color: #000099 / Rollover: None / Rollover Color: None / Image: masthead_logo2.gif / Width: 767px / Height: 53px / Cutsheet Name: masthead2.psd

2. “Did You Know” Factoid

The animated GIF highlights three facts about the agency that visitors may not know. These facts correspond to the three photos within the Photo Banner. The GIF, along with the Photo Banner, should change on a daily basis.

Attributes: Text (For example: “The forest service manages over 400,000 miles of bike paths”) / Font: Helvetica Medium / Size: 10px / Color: #333333 / Rollover: None / Rollover color: None / Image: masthead_anim_forest.gif / Width: 767px / Height: 22px / Cutsheet Name: presence_home.psd

Animation: 3 frames / 10 seconds per frame

1 The annual USDA Fact Book is a good source of information to populate this area.

3. Photo Banner

The Photo Banner is a series of images that represents the diversity of the agency and corresponds to the factoid above. This image and the corresponding “Did You Know” factoid animation should change on a daily basis.

An archive of “Did You Know” factoid animations and Photo Banners is available for rotation.

Attributes: Three thematic images to match the animated GIF factoids / Font: None / Image: masthead_banner.gif / Width: 767px / Height: 46px / Cutsheet Name: agency_one.psd

Masthead Option 3

This Masthead option uses a photo image as the background for the Branding Area. It integrates the two areas into one unit.

Masthead Option 3

This is the area at the top of the Masthead where the USDA logo, United States Department of Agriculture, and the Agency Name appears at the top left. The size, position, and placement of the Branding Area elements cannot be altered.

Attributes: Logo and text: “United States Department of Agriculture” / Font: Helvetica Medium / Size: 10px / Text: “Agency Name” / Font: Helvetica Medium / Size: 16px / Color: #323467 / Rollover: None / Rollover Color: None / Image: masthead_logo4.gif / Width: 767px / Height: 86px / Cutsheet Name: masthead4.psd

2.2 Top Navigation Bar

The Top Navigation Bar appears in the same place on every page of the informational Web site. Agencies have flexibility in determining which Top Navigation sections are appropriate for their agency. However, there are some items that must always be included in the Top Navigation Bar. These are: Home, About “Agency”, Help, and Contact Us.

Top Navigation Components

The Top Navigation Bar includes a rollover state. When you roll over each section of the Top Navigation Bar, the section type changes color and appearance. When you are in a particular screen of the Web site or application, the corresponding Top Navigation will remain locked in the rollover state.

Content: “Home, About ‘Agency’, Newsroom, Opportunities, Online Forms, Help, Contact Us, En Español” / Font: Helvetica Medium / Size: 13px / Color: #FFFFFF / Rollover: Color and Background / Rollover Color: #000000

Images:

nav_top_home.gif, nav_top_home_over.gif / Width: 54px / Height: 21px nav_top_about.gif, nav_top_about_over.gif / Width: 107px / Height: 21px nav_top_newsroom.gif, nav_top_newsroom_over.gif / Width: 82px / Height: 21px nav_top_help.gif, nav_top_help_over.gif / Width: 47px / Height: 21px nav_top_contact, nav_top_contact_over.gif / Width: 84px / Height: 21px nav_top_opportunities, nav_top_opportunities_over.gif / Width: 97px / Height: 21px nav_top_espanol, nav_top_espanol_over.gif / Width: 85px / Height: 21px nav_top_onlineforms, nav_top_onlineforms_over.gif / Width: 98px / Height: 21px Cutsheet Name: global_nav.psd

2.3 Left Navigation Column

The Left Navigation Column appears on every page of your agency informational Web site. The components within the Left Navigation Column always appear in the same location on every page. There are three main ways to find information:

• Users can Search for specific information.

• Browse by Audience, an optional component, will direct users based on audience type.

• Browse by Subject will direct users by common topics of interest.

1. Search

2. Browse by Audience (optional)

3. Browse by Subject

Left Navigation

Column

Left Navigation Column Components

1. Search

The Search area consists of a search field, “Go” Button, “Search all USDA” checkbox, “Advanced Search” link and “Search Tips” link. If populated, the “Search all USDA” checkbox allows users to search all of USDA in addition to the agency site.

Attributes: Overall Size: Width: 171px / Variable Height / Content: “Search” image / Form Field and Button: button_go.gif / Cutsheet Name: buttons.psd

Navigation Headings: Text: “Search ‘Agency’” / Font: Helvetica Medium / Size: 14px / Color: #FFFFFF / Rollover: None / Rollover Color: None / Image: r_c_head_search.gif / Width: 171px / Height: 23px / Cutsheet Name: nav_columns.psd

2.3 Left Navigation Column continued

Other Headings: Text: “Advanced Search” / Font: Helvetica Medium / Size: 11px / Color: #000099 / Rollover: Underline / Rollover Color: None / Image: r_c_nav_advanced.gif / Width: 171px / Height: 15px / Cutsheet Name: presence_home.psd

Other Headings: Text: “Search Tips” / Font: Helvetica Medium / Size: 11px / Color: #000099 / Rollover: Underline / Rollover Color: None / Image: r_c_nav_tips.gif / Width: 171px / Height: 15px / Cutsheet Name: presence_home.psd

2. Browse by Audience (optional)

This area contains a drop-down menu that provides information based on specific types of users, such as “Producer”. Many agencies have conducted audience analyses or other relevant audience studies to understand the specific needs of users. These agencies should use this area of the site to tailor information to specific user groups. The recommended number of audience links is 10 or less; however, the maximum number is 15.

Attributes: Overall Size: Width: 171px / Variable Height / Content: “Browse by Audience” image and drop-down menu of audience types.

Navigation Headings: Text: “Browse by Audience” / Font: Helvetica Medium / Size: 14px / Color: #FFFFFF / Rollover: None / Rollover Color: None / Image: r_c_head_audience.gif / Width: 171px / Height: 30px / Cutsheet Name: nav_columns.psd

3. Browse by Subject

This area contains links to common topics of interest. The subjects in this list should be based on the top level of your agency’s taxonomy model. The recommended number of subject links is 10 or less; however, the maximum number is 15.

Attributes: Overall Size: Width: 171px / Variable Height / Content: “Browse by Subject” image and bulleted list of various subjects

Navigation Headings: Text: “Browse by Subject” / Font: Helvetica Medium / Size: 14px / Color: #FFFFFF / Rollover: None / Rollover Color: None / Image: r_c_head_subject.gif / Width: 171px / Height: 30px / Cutsheet Name: nav_columns.psd

Other Headings: Text: “Services and Programs” / Font: Helvetica Medium / Size: 11px / Color: #000099 / Rollover: Underline / Rollover Color: None / Image: r_c_nav_agricultural.gif / Width: 171px / Height: 15px / Cutsheet Name: nav_columns.psd

2.4 Right Navigation Column

The Right Navigation Column is an optional component on your Web site. The Right Navigation Column contains complementary and supplementary links based on the page users are on. The information in the Right Navigation Column changes on every page. Some utility pages such as Data Presentation, Error Page, New User Registration or Local Navigation will not require a Right Navigation Column.

1. I Want To

(optional)

2. Announcements and Events (optional)

3. Your Local Office (optional)

4. Media Help (optional)

Right Navigation Column

Right Navigation Components

Each agency is responsible for defining the components of the Right Navigation Column. The content of this section will vary on an agency-by-agency basis, depending on the information architecture of the respective agency’s site. Some suggested options are described below for your reference.

1. I Want To (optional)

This is an optional component that lists common and important tasks relevant to your agency such as Apply for a Direct Loan, Become a Certified Lender, Learn about Pilot Programs, Locate an Agent, etc. Topics listed in this component are limited to a maximum of five.

Attributes: Overall Size: Width: 188px / Variable Height / Content: “I Want To” image and bulleted list of various tasks.

Navigation Headings: Text: “I Want To” / Font: Helvetica Medium / Size: 14px / Color: #313131 / Rollover: None / Rollover Color: None / Image: l_c_head_iwantto.gif / Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

2.4 Right Navigation Column continued

2. Announcements and Events (optional)

This is a section in the Right Navigation Column that lists information such as important reports, announcements, upcoming events and publications.

Attributes: Overall Size: Width: 188px / Variable Height / Content: “Announcements and Events” image and bulleted list of various links.

Navigation Headings: Text: “Announcements and Events” / Font: Helvetica Medium / Size: 14px / Color: #313131 / Rollover: None / Rollover Color: None / Image: l_c_head_announcements.gif / Width: 188px / Height: 39px / Cutsheet Name: nav_columns.psd

3. Your Local Office (optional)

This is an agency specific feature and may be used to promote a notable item or application. In the example above, the space is used to assist users to locate a local office.

Attributes: Overall Size: Width: 188px / Variable Height / Content: “Your Local Office” image and text

Navigation Headings: Text: “Your Local Office” / Font: Helvetica Medium / Size: 14px / Color: #313131 / Rollover: None / Rollover Color: None / Image: l_c_head_yourlocaloffice.gif / Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

4. Media Help (optional)

This is an optional component that provides links to download plug-ins that may be needed on that particular page. An example of this is providing a link to download Acrobat Reader on pages that have pdf files on them.

Attributes: Overall Size: Width: 188px / Variable Height / Content: “Media Help” image and text

Navigation Headings: Text: “Media Help” / Font: Helvetica Medium / Size: 14px / Color: #313131 / Rollover: None / Rollover Color: None / Image: l_c_head_mediahelp.gif / Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

2.5 Footer

The Footer consists of two lines of HTML links. The first line has four required links: “Agency” Home, USDA.gov, Site Map, and Policies and Links. The remaining space on this first line can be devoted to agency-specific items, such as links to agencies in the same mission area, and/or links to related Web sites. It is up to each agency to decide what to place on this line. The second line must contain the following links: FOIA, Accessibility Statement, Privacy Policy, Non-Discrimination Statement, Information Quality, USA.gov (FirstGov), and White House.

Footer Components

Attributes: Font: Verdana Regular / Size: 10px / Color: #000099 / Text-Decoration: None / Hover: Underline

2.6 Content Area

The center portion of the page is devoted to content. Required elements within the Content Area are: Bread Crumb Trail, Headline Bars, Headlines, Body Text, and Divided Lines. Imagery is an optional component that may be used where relevant. The Content Area may extend across the page if no Right Navigation Column is needed.

1. Bread Crumb Trail

2. Headline Bars

3. Headline

4. Body Text

5. Divider Line

6. Imagery (optional)

Content Area

Content Area Components

This section focuses on the components of the Content Area; however, it does not go into detail about specific types of content that should be included. This decision will be left to the discretion of the agency and will vary on an agency-by-agency basis.

1. Bread Crumb Trail

The Bread Crumb Trail is a navigation tool that allows users to see where the current page is in relation to the Web site or application’s hierarchy. Pages visited (other than the current page) will be

2.6 Content Area continued

displayed as HTML links. The Bread Crumb Trail allows users to know where they are and they have been within the Web site or application at any given time.

Attributes: Font: Verdana Regular / Size: 10px / Color: #666666 / Text-Decoration: None / Hover: Underline

2. Headline Bars

Headline Bars designate a section of content and have been created as graphic elements. The Headline Bar may vary in width. It may measure half of the Content Area column; full length of the Content Area column; or extend to the right margin of the page if a Right Navigation Column is not required. The Divider Line is a graphic device used to separate stories within a Headline Bar area.

Attributes: Overall Size: Width: 368px / Height: 23px

Headings: Text: “In the News” / Font: Helvetica Bold / Size: 15px / Color: #00000 / Rollover: None / Rollover Color: None / Image: content_head_inthenews.gif / Width: 368px / Height: 23px / Cutsheet Name: subheads.psd

Other Headings: Text: “Spotlights” / Font: Helvetica Bold / Size: 15px / Color: #000000 / Rollover: None / Rollover Color: None / Image: content_head_spotlights.gif / Width: 368px / Height: 23px / Cutsheet Name: subheads.psd

3. Headline

A Headline is displayed as bold HTML text and always functions as an HTML link. A Headline may stand alone or may be followed by Body Text.

Attributes: Font: Verdana Bold / Size: 11px / Color: #000099 / Text-Decoration: None / Hover: Underline

4. Body Text

Body text is HTML text that represents descriptive copy. Body Text may contain HTML links, which must appear in blue type.

Attributes: Font: Verdana Regular / Size: 11px / Color: #000000 / Text-Decoration: None / Hover: None / Link Color: #000099

5. Divider Line

The Divider Line is a graphic device used to separate stories within a Headline Bar area.

Attributes: Width: 368px / Height: 10px / Cutsheet Name: presence_home.psd

2.6 Content Area continued

6. Imagery (optional)

Imagery is a photo or graphic used to visually support content. This is an optional component that may be used where relevant. Imagery may be horizontal or vertical in format but must be scaled and cropped to the pixel dimensions provided below. All imagery must have a one pixel black border.

Attributes: Not required / Portrait Orientation: Width 70px, Height 80px / Landscape Orientation: Width 80px, Height 70px

3 Interactive Web Application Pages

Interactive Web application pages allow users to perform a transaction or interaction, such as exchanging data with an interface. Examples of interactive Web applications include USDA enterprise applications such as AgLearn, as well as agency-specific applications such as the Farm Service Agency’s Electronic Loan Deficiency Payment (eLDP) application. Typically, applications such as these are defined as “stand-alone”, since they operate outside of the confines of an agency Web site. While these applications are required to comply with the USDA Web standards, there is more flexibility as to which page components must be included in an application.

Web applications are structured within the following sections: the Masthead, Top Navigation Bar, Left Navigation Column, Right Navigation Column, Footer and Content Area. Specifications for designing and developing each of these sections are outlined in the subsequent pages of this chapter.

Content Area

Masthead

Left Navigation

Spacing 10px

Spacing 10px

Spacing

3.1 Masthead

The Masthead is the main branding area for your interactive Web application pages and will appear on every page. It consists of the Branding Area and Photo Banner. An option for handling the Masthead component of your interactive Web application page is described below. You are also free to choose from the Masthead options presented in Section 2.1 for Informational Web sites and pages.

This option closely resembles the ‘USDA.gov’ Masthead, with the same image and typography sizes and relationships. The images used should be directly relevant to the specific mission of your agency. This type of Masthead can be developed quickly with minimal effort.

Note: Masthead Option 1 requires 8px image space between the Photo Banner and the Top Navigation Bar.

This is the area at the top of the Masthead where the USDA logo, United States Department of Agriculture, and your Agency (or Application) Name appear at the top left. The size, position and placement of these Branding Area elements cannot be altered.

Attributes: Logo and text: “United States Department of Agriculture” / Font: Helvetica Medium / Size: 10px / “Agency or Application Name” / Font: Helvetica Medium / Size: 16px / Electronic Loan Deficiency Payments / Font: Helvetica Medium / Size: 12px / Color: #000099 / Rollover: None / Rollover Color: None / Image: masthead_logo.gif / Width: 767px / Height: 64px / Cutsheet Name: masthead.psd

2. Photo Banner

The Photo Banner is a series of images that represent the diversity of your agency. Each agency is responsible for providing and updating the images used.

Attributes: Image: masthead_banner.gif / Width: 767px / Height: 44px / Cutsheet Name: masthead.psd

3.2 Top Navigation Bar

The Top Navigation Bar appears on every page of your agency application if a Top Navigation Bar is necessary for the application. The Top Navigation Bar is only optional when the application does not require a top navigation bar. Agencies have flexibility in determining which Top Navigation sections are appropriate for their agency. However, there are some items that must always be included in the Top Navigation Bar. These are: Home, Help, and Contact Us.

Top Navigation Components

The Top Navigation Bar includes a rollover state. When you roll over each section of the Top Navigation Bar, the section type changes color and appearance. When you are in a particular screen of the Web site or application, the corresponding Top Navigation will remain locked in the rollover state.

Content: “Home, About ‘Application’, What’s New, E-Forms, Local Offices, Help, Contact Us” / Font: Helvetica Medium / Size: 13px / Color: #FFFFFF / Rollover: Color and Background / Rollover Color: #000000

3.3 Left Navigation Column

The Left Navigation Column appears on every page of your agency application if a left navigation column is necessary for the application. This Left Navigation Column is only optional if the application does not require a left navigation column. You will be able to tailor these section headings to fit your application needs.

1. Search (optional)

2. Producer Certification (optional)

3. Application Functions (optional)

Left Navigation

Left Navigation Column Components

1. Search (optional)

The Search area consists of a search field, “Go” Button, “Search all USDA” checkbox, “Advanced Search” link and “Search Tips” link. If populated, the “Search all USDA” checkbox allows users to search all of USDA in addition to the application site.

Attributes: Overall Size: Width: 171px / Variable Height / Content: “Search” image / Form Field and Button: button_go.gif / Cutsheet Name: buttons.psd

Navigation Headings: Text: “Search ‘Agency’” / Font: Helvetica Medium / Size: 14px / Color: #FFFFFF / Rollover: None / Rollover Color: None / Image: r_c_head_search.gif / Width: 171px / Height: 23px / Cutsheet Name: nav_columns.psd

3.3 Left Navigation Column continued

Other Headings: Text: “Advanced Search” / Font: Helvetica Medium / Size: 11px / Color: #000099 / Rollover: Underline / Rollover Color: None / Image: r_c_nav_advanced.gif / Width: 171px / Height: 15px / Cutsheet Name: presence_home.psd

Other Headings: Text: “Search Tips” / Font: Helvetica Medium / Size: 11px / Color: #000099 / Rollover: Underline / Rollover Color: None / Image: r_c_nav_tips.gif / Width: 171px / Height: 15px / Cutsheet Name: presence_home.psd

2. Producer Certification (optional)

This area contains links to common functions within the application. The recommended number of links is 10 or less; however, the maximum number is 15.

Attributes: Overall Size: Width: 171px / Variable Height / Content: “Producer Certification” image and bulleted list of various subjects

Navigation Headings: Text: “Producer Certification” / Font: Helvetica Medium / Size: 14px / Color: #FFFFFF / Rollover: None / Rollover Color: None / Width: 171px / Height: 30px

3. Application Functions (optional)

This area contains links to common functions within the application. The recommended number of links is 10 or less; however, the maximum number is 15.

Attributes: Overall Size: Width: 171px / Variable Height / Content: “Application Functions” image and bulleted list of various subjects

Navigation Headings: Text: “Application Functions” / Font: Helvetica Medium / Size: 14px / Color: #FFFFFF / Rollover: None / Rollover Color: None / Width: 171px / Height: 30px

Other Headings: Text: “Inquire” / Font: Helvetica Bold / Size: 11px / Color: #000099 / Rollover Color: None / Width: 171px / Height: 15px

3.4 Footer

The Footer consists of HTML links on two lines. The required links on the first line include: “Application” Home and USDA.gov. Depending on the nature of the application, it may be required to include two additional links in the first line: Site Map and Policies and Links2. Please reference section 2.5 for more details on how to implement this requirement. The remainder of the first line is reserved for application or agency specific links.

An option could be “Agency” Home. The second line must include the following links: Accessibility Statement, Privacy Policy, and Non-Discrimination Statement.

Footer Com

Attributes Hover: Un

2 Office of Managemen

Version 2.1 – Last Upd ponents

: Font: Verdana Regular / Size: 10px / Color: #000099 / Text-Decoration: None / derline t and Budget, Policies for Federal Agency Public Websites ated on 12/22/06

3.5 Content Area

The center portion of the page is devoted to content. Elements that may appear within the Content Area are:

Bread Crumb Trail, Headline Bars, Headlines, Body Text, Divided Lines and Imagery. The Content Area may extend across the page if no Right Navigation Column is needed.

Version

1. Bread Crumb Trail

2. Headline Bar

3. Body Text

Content Area Components

This section focuses on the components of the content area; however, it does not go into detail about specific types of content that should be included. This decision will be left to the discretion of the agency or application and will vary.

1. Bread Crumb Trail (optional)

The Bread Crumb Trail is a navigation tool that allows users to see where the current page is in relation to the Web site or application’s hierarchy. Pages visited (other than the current page) will be

2.1 – Last Updated on 12/22/06

3.5 Content Area continued

displayed as HTML links. The Bread Crumb Trail allows users to know where are and they have been within the Web site or application at any given time. This is an optional component for your application.

Attributes: Font: Verdana Regular / Size: 10px / Color: #666666 / Text-Decoration: None / Hover: Underline

2. Headline Bars (optional)

Headline Bars designate a section of content and have been created as graphic elements. The Headline Bar may vary in width. It may measure half of the Content Area column; full length of the Content Area column; or extend to the right margin of the page if a Right Navigation Column is not required.

Attributes: Overall Size: Width: 368px / Height: 23px

Headings: Text: “Inquire About A Producer” / Font: Helvetica Bold / Size: 15px / Color: #00000 / Rollover: None / Rollover Color: None / Width: 368px / Height: 23px / Cutsheet Name: subheads.psd

3. Body Text

Body text is HTML text that represents descriptive copy. Body Text may contain HTML links, which must appear in blue type.

Attributes: Font: Verdana Regular / Size: 11px / Color: #000000 / Text-Decoration: None / Hover: None / Link Color: #000099

4 Overall Style Guidelines

Stylistic standards related to the formatting of font, forms, tables, and other common Web page components are identified in this section. These elements apply to both informational Web sites and interative Web application pages. As such, these standards must be followed when creating any type of Web page.

This section provides instruction on how to format the information presented on your pages, how to select a color palette, how to handle exceptions, and more. Technical considerations for designing and developing informational and interactive Web application pages are also provided.

4.1 Font

These are the guidelines set for all font usage.

Font Size

Absolute font sizes, usually defined by Cascading Style Sheets (CSS), allow developers to control the font size that will be displayed to users in a Web browser. When using absolute font sizes, all HTML text in the center Content Area of the page must be set at 11px. HTML text in the Right Navigation Column and Footer must be set at 10px. The Bread Crumb HTML text must be set at 9px. Absolute font sizing is the default method to be followed for defining font sizes.

Relative font sizes allow the user to increase or decrease font sizes by changing the settings on a Web browser.

Agencies can choose to provide this flexibility to users in the center content area, right navigation column, and footer of the page. If using relative font sizing, HTML text must be set at a minimum of xx-small (minimum, equivalent to 10px) and cannot exceed x-small (maximum, equivalent to 12px).

Font Type

The designated font is Verdana for all HTML text. The order of font type that should be employed for all HTML text is: {Verdana, Arial, Helvetica}. Based on best practices, this font family, Sans-Serif, was selected for its ease of readability.

The designated font for all graphical text is Helvetica.

The maximum number of unique font types that can be used on a page is two. The only exception to this rule applies to the Masthead area. A bolded version of the same font type is not considered a unique font.

Font Style

Never use ALL CAPS. The only exception to this rule occurs when denoting special instructions, acronyms, or headlines for news stories.

Limit the use of italics. Italics can be used for providing specific emphasis, scientific names, or denoting various available versions of a document such as printer friendly version or a Spanish version.

Avoid the use of acronyms. If acronyms are used, they must be capitalized and spelled out the first instance.

Any acronyms used should be industry standard, and widely-known. No acronyms should in exist in navigational components.

No static text will be underlined. Users may confuse underlined static text with a hyperlink.

Numeric and Grammatical Formatting

The following standards should be applied consistently throughout all Web sites and applications.

• Web site is two words, with the word Web capitalized in all instances.

• ‘Homepage’ is one word.

• The word ‘e-mail’ is always hyphenated.

4.1 Font continued

• All U.S. states should be either spelled out in its entirety or abbreviated to two letters.

Example: Maryland, DC, VA

• Dates should be in this format: (Sep 4, 2003) when used in a listing of any sort.

Example: Farmer’s Market Show (Sep 4, 2003) – Virginia’s local farmers display and sell their season’s best

• Time values are displayed in this standard format: 01:30:45 p.m. EST. Seconds may not always be necessary. If the time is not 24 hour time, then "a.m." or "p.m." is included. Time zone must be specified.

Example: This Web page was last updated on Sep 30, 2003 04:00 p.m. EST

• All U.S. phone numbers will be listed in a standard format.

Example: 202-720-0000

• All numbers between zero and nine should be spelled out in their entirety. Any number 10 and above should be displayed numerically.

Example: eight, 15

• All numeric data contain the appropriate formatting (e.g. commas, dollar sign, negative sign, DB, CR, Long, Short, etc).

Example: $2,000

Typography

The following is a list of default font color, family, sizes, and formatting styles as defined in the cascading style sheet (CSS). These styles reflect default (absolute) font sizing.

Text Area CSS Class Font Attributes

Center Content Body Text .BodyTextBlack Verdana, 11px, black (#000000)

Center Content Body Text .BodyTextBlue Verdana, 11px, blue (#000099)

Center Content Body Text .BodyTextBlackBold Verdana, 11px, black (#000000), bold

Center Content Body Text .BodyTextBlueBold Verdana, 11px, blue (#000099), bold

Center Content Body Text .HdrBlack Verdana, 13px, black (#000000)

Center Content Body Text .HdrBlackBold Verdana, 13px, black (#000000), bold

Right Navigation Text .BodyTextBlueSmallBold Verdana, 10px, blue (#000099), bold

4.1 Font continued

Text Area CSS Class Font Attributes

Center Content Body Text .HdrBlue Verdana, 13px, blue (#000099)

Center Content Body Text .HdrBlueBold Verdana, 13px, blue (#000099), bold

Right Navigation Text .BodyTextBlackSmall Verdana, 10px, black (#000000)

Right Navigation Text .BodyTextBlueSmall Verdana, 10px, blue (#000099)

Bread crumb Text .Breadcrumb Verdana, 9px, black (#000000)

Footer Text .Footer Verdana, 10px, blue (#000099), border-bottom: 1px, solid, (#000000)

Form Field Text .searchform Verdana, 11px, black (#000000), width:

115px, height: 14px

Form Field Text .checkbox Verdana, width: 12px, height: 12px

Form Field Text .audiencebox Verdana, 11px, black (#000000), height: 12px

Link Text A:link blue (#000099)

Link Text A:hover blue (#000099), underline

Link Text A:visited purple (#660099)

4.2 Body Text

These are the guidelines set for all text styles within the Content Area.

Lists

All listings of events, news stories, or announcements must appear consistently. The headline or title must use bold font. If a date applies to the headline, the date must appear in this format, (Sep 22, 2003) after the headline. All news stories must display a date.

Example: Veneman Announces New Farm Bill (Sep 22, 2003)

Example: Crop Planting Convention (Jan 1-5, 2004), Washington, DC

Justification of Text

All text in your Web site or application should be top and left-justified at a table-cell level (container). Only numeric data within a table can be right-justified. No other elements, images or text should have alignment attributes applied to them.

Bullets

All bullets on the site should be consistent in appearance. Bullets used in the center content area must be HTML bullets. The bullet and text should be “baseline” aligned if the text following the bullet extends to more than one line.

Heading Levels

The following table shows the header styles defined for the site.

Header Type CSS class Example Description/Use

Headline Bars (image) Helvetica Bold, 15px

N/A Level 2 Titles

Headers to divide the page into areas such as In the News, Spotlights (2nd Level Titles)

Section Header

(HTML)

Verdana, 13px, bold

.HdrBlackBold

Level 3 Titles

Section headers within the above sections (3rd Level Titles)

Content Header

(HTML)

Verdana, 11px, bold

.BodyTextBlackBold

Level 4 Titles

Headers to distinguish between topic areas or paragraphs sections within the content (4th Level Titles)

4.3 Color Palettes

Below are several sample color palettes to choose from to build your agency Web site or application. All colors are represented as hexadecimal values.

Color Option 1

Shown below are the colors for Color Palette One. This is the ‘USDA.gov’ color palette.

1. Left Navigation Dark Grey: #838594

2. Button Yellow: #FFFED0

3. Left Navigation Medium Grey: #C5C5C5

4. Blue Link Color: #000099

5. Purple Visited Link Color: #660099

6. Black Rule: #000000

7. Right Navigation Grey: #D5D5D5

8. Right Navigation Light Grey: #F2F2F2

9. Right navigation Grey Rule: #B8B8B8

10. Background Dark Grey: #3F3D3E

4.3 Color Palettes continued

The following section bars can be used on all second and third level pages. These colors correlate to the different Top and Left Navigation items.

Section Bars

Section Bar Components

11. Services and Programs Green: #228622

12. About “Agency” Navy: #35106E

13. Newsroom Blue: #536CA5

14. Opportunities Maroon: #7F1C1C

15. Online Forms Rust: #A1420F

16. Help Orange: #7F1C1C

17. Contact Us Red: #B32F01

18. En Español Purple: #73305F

Attributes: Overall Size: Width: 573px / Height: 37px

Headings: Text: “Section Name” / Font: Helvetica Medium / Size: 24px / Color: #FFFFFF / Image: section_head_newsroom.gif / Width: 573px / Height: 37px / Cutsheet Name: section_heads.psd

Color Option 2

Shown below are the colors for Color Palette Two.

1. Left Navigation Dark Blue: #707F94

2. Button Yellow: #FFFED0

3. Left Navigation Medium Blue: #BDC5D0

10. Background Dark Grey: #3F3D3E

7. Right Navigation Blue: #CBD3DE

8. Right Navigation Light Blue: #E7ECF2

9. Right navigation Grey Rule: #B8B8B8

Color Option 3

Shown below are the colors for Color Palette Three.

1. Left Navigation Dark Green: #788E79

3. Left Navigation Medium Green: #B8C9B9

7. Right Navigation Green: #C6D4C5

8. Right Navigation Light Green: #E7EEE6

9. Right Navigation Grey Rule: #B8B8B8

10. Background Dark Grey: # 3F3D3E

Color Option 4

Shown below are the colors for Color Palette Four.

1. Left Navigation Dark Blue: #333367

3. Left Navigation Medium Blue: #ABBACF

Ve

7. Right Navigation Blue: #ABBACF

8. Right Navigation Light Blue: #DBE4ED rsio

10. Background Medium Blue: # A8ACB7 n 2.1 – Last Updated on 12/22/06

Color Option 5

Shown below are the colors for Color Palette Five.

Vers

1. Left Navigation Dark Green: #01541C

3. Left Navigation Medium Green: #B8C9B9

7. Right Navigation Green: #C6D4C5

8. Right Navigation Light Green: #E7EEE6

10. Background Warm Grey: #B2B19D ion 2.1 – Last Updated on 12/22/06

4.4 Links

These are the guidelines set for all HTML links in the Content Area and Right Navigation Column.

Links

HTML text links is always blue (#000099). The hover state of all HTML text links on the site is always underlined. Visited text links is always purple (#660099).

Links to resources or Web sites outside of the .gov domain must explicitly indicate that the link goes to a non-federal site/resource by one of the following:

• Identifying the full URL of the destination link and open in a new browser window.

Example: “…as reported here (http://www.pbs.com)”,

• Inserting an exit page that displays after the user selects the link, or

• By some other clear means.

All links to non-Web information that are application-dependent (e.g. pdf files, Word documents) must display the file format name and size. These links must open in a new browser window. The files launched must be in industry standard format so as not to impose a burden on the intended audience. Base your choice of file format on both the needs of your intended audience and the business needs of your agency.

Example: Link text (PDF; 1.3Mb)

The only exception to this rule applies to live streaming media (e.g. video and audio clips).

http://www.cnn.com/

4.5 Tables and Forms

These are the guidelines set for tables and forms in the Content area and Right Navigation Column.

Table Formatting

Tabular information should be displayed in a table with the following general attributes:

• Border Color: #838594

• Cell Padding: 0

• Cell Spacing: 0

• Border: 1px

• Table Header Color: #838594

• All table cells are left-justified and vertically aligned to the ‘Top” by default. Numerical values may be right-justified if it enhances the legibility of the page.

Tables should be labeled with a descriptive term to help screen readers (Section 508) identify content.

Additionally, a summary and caption attribute (HTML) may be used to further describe the content of the table displaying complex information. In order for those using screen readers to more easily associate cell data with its respective headers, the id and headers attributes are used. Every <th> tag should contain an id attribute that associates a name with each table header. Then, each <td> tag should contain a header attribute that references the assigned id of any headers it is associated with. If the header is for a column (vertical axis), assign the scope attribute of the <th> tag the value "col". If the header is for a row (horizontal axis), assign the scope attribute of the <th> tag the value "row". This enables assistive devices to read the contents of the header cells before their associated data cells.

Forms Formatting

Forms are used anytime when input from users are necessary. For text input, a simple text field may be used.

Anytime a text field is required, it must be clearly noted using an asterisk “*” at the end, to avoid form submission errors. Form fields and labels should be left-aligned on the page and a colon “:” must follow the field label (e.g. “First Name*:”). Some general guidelines related to using forms are as follows:

• Use radio buttons when user inputs must be one choice between two or more options

• Use a check box when user input may be none, one or more choices among one or more options

• Drop-down boxes in forms must have a default value. If a default value can’t be determined, “<Select XXX >” should be used

• Buttons (e.g. Go button) should be right-aligned with the bottom drop-down box

• Forms should be Section 508 compliant (see Section 9 for Accessibility Guidelines)

Note: Radio buttons and check boxes are always initialized to their most commonly used setting.

4.5 Tables and Forms continued

Form fields must be organized in the order in which they should be filled out. When this is not possible, tab indexing (HTML) is required to ensure proper flow of the process. Cursor focus is on the very first field in a form page. Tab order should follow a top-down and left-right pattern for all input fields, drop-down boxes, and buttons. Forms should provide as much information as possible to aid users in populating the form. For example, text hints, context-sensitive help or alternating light and dark color rows should be displayed where appropriate. Please refer to the User Registration Template on page 61.

4.6 Imagery

These are the guidelines set for all imagery used within the Web site or application.

Imagery

There are two types of imagery displayed on Web sites and applications: photographical images and non-photographical images such as charts, graphs, buttons, etc.

For photographical images, the file format is JPEG. Image quality compression should be at medium level.

The minimum dots per inch (dpi) requirement is 72. All colors should be in RGB, not CMYK.

A one pixel border is required around all photographical images. Non-photographical images should have a one pixel border where appropriate. Round or irregular-shaped images (i.e. the Farm Bill icon ) are not required to have a one pixel border. To add the border (in Adobe Photoshop), select the rectangular marquee tool; then drag a rectangle around the image; next select Edit -> Stroke. Ensure the width is 1 px, color is black (000000), and the location is set to center.

Note: Images used within Web sites and Web-based applications must be copyrighted.

Thumbnail Images (photographical images)

Only images that also appear in the Photo Gallery are required to have the “Click on to Enlarge” feature associated with it.

Attributes: Not required / Portrait Orientation: Width 70px, Height 80px / Landscape Orientation: Width 80px, Height 70px

Large Images (photographical images)

Only images that also appear in the Photo Gallery are required to have the “Click on to Enlarge” feature associated with it.

Attributes: Not required / Portrait Orientation: Width 90px, Height 135px / Landscape Orientation: Width 135px, Height 90px

Enlarged Images (photographical images)

This option is reserved only for enlarged photographs inside the Photo Gallery.

Attributes: Not required / Portrait Orientation: Width 230px, Height 315px / Landscape Orientation: Width 315px, Height 230px

Charts, Graphs, Tables (non-photographical images)

For charts, graphs, and other types of non-photographical images, the file format is GIF when possible. The width of these elements cannot be greater than 396px for those items placed within the center Content Area when a Right Navigation Column is present. Otherwise, the width of these elements cannot exceed 584px.

Special types of images, such as large data charts, maps, and scientific pictures, may require larger dimensions to display. These images must open in a separate window. Please refer to the Large Image Template on page 69.

Alternative Text Tags (all images)

All imagery must have a descriptive alternative text tag associated with it.

4.6 Imagery continued

Buttons

All buttons on your site should be consistent in appearance. Placement of all buttons on the page must be right-aligned with the form fields on the page. If forms and/or results list require scrolling, it is recommended that buttons are placed above the form/list as well. The text on all buttons should be succinct and descriptive of the action of the buttons. The text on all buttons should be center-aligned on the button and have six pixels of spacing between the text and right and left edges of the button.

Buttons should be ordered by frequency of use from left to right. It is recommended that the most frequently used button is made the default action, i.e., that which is activated when users press the ‘Enter’ key.

Multi-page data collection forms should always contain a ‘Continue’ button to allow users to advance to the next page or step. ‘Cancel’ buttons are reserved for instances to allow users to quit the form without saving.

‘Reset’ buttons allow users to clear the fields of a form. ‘Submit’ buttons should be reserved for the final step of a process, though the wording of this…