![](media/image1.jpeg){width="1.625in" height="1.1277777777777778in"}

![](media/image2.png){width="9.75in" height="6.767361111111111in"}

> Table of Contents

**1** **Introduction [1](#introduction)**

2 Web-based Components [2](#web-based-components)

2.1 Masthead [3](#masthead)

2.2 Top Navigation Bar [4](#top-navigation-bar)

2.3 Left Navigation Column [5](#left-navigation-column)

2.4 Right Navigation Column [8](#right-navigation-column)

2.5 Footer [10](#footer)

2.6 Content Area [11](#content-area)

2.7 Exception Pages [13](#exception-pages)

2.8 Error Handling [14](#error-handling)

2.9 Technical Considerations [16](#technical-considerations)

3 Font, Color, and Style Formatting
[18](#font-color-and-style-formatting)

3.1 Font [19](#font)

3.2 Web Site Color Palette [20](#web-site-color-palette)

3.3 Style Formatting [22](#style-formatting)

4 USDA.gov Templates [24](#__RefHeading___Toc57464737)

4.1 usda_gov_home Template [25](#usda_gov_home-template)

4.2 topic_l2 Template [28](#topic_l2-template)

4.3 audience Template [31](#audience-template)

4.4 topic_l3 Template [34](#topic_l3-template)

4.5 search_results Template [37](#search_results-template)

4.6 newsroom Template [39](#newsroom-template)

4.7 latest_releases Template [43](#latest_releases-template)

4.8 news_release Template [45](#news_release-template)

4.9 faq_by_topic Template [47](#faq_by_topic-template)

4.10 events_by_date Template [50](#events_by_date-template)

4.11 agency_reports Template [52](#agency_reports-template)

4.12 agencies_and_offices Template [54](#agencies_and_offices-template)

4.13 about_usda Template [56](#about_usda-template)

4.14 advanced_search Template [58](#advanced_search-template)

4.15 customize_portal Template [60](#customize_portal-template)

5 Editorial Content [62](#editorial-content)

5.1 Crafting Text [63](#crafting-text)

5.2 Strategies for Crafting Text [65](#strategies-for-crafting-text)

5.3 Guidelines for Ensuring Clarity
[66](#guidelines-for-ensuring-clarity)

6 Targeting USDA Audiences [68](#targeting-usda-audiences)

7 Accessibility Guidelines [75](#accessibility-guidelines)

8 Usability Guidelines [78](#usability-guidelines)

9 Appendix [80](#appendix)

#  Introduction 

The new USDA.gov Web site has been designed to provide users with a more
seamless experience in navigating from page to page. USDA's redesigned
Web site places an emphasis on customer intentions and service needs
rather than the current agency-centric approach. This approach will be
seen enterprise-wide as USDA agencies and offices adopt the new
guidelines and standards for USDA Web Presence.

The USDA User Interface (UI) Style Guide defines the guidelines and
standards for look, feel, and navigation that will promote consistency
while also improving the overall user experience. The guide will help
reinforce and protect the integrity of the USDA brand. Designers and
developers should use this guide to better understand how to apply these
standards to new web pages created for the USDA.gov portal.

This Style Guide is your blueprint for building out 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 detailed information
and templates for varying levels of Web pages. The 15 templates included
were chosen to provide designers and developers with examples of how to
display commonly used information amongst agencies. The guide also
includes specifications for the color palette and typography to ensure
that new Web pages meet department-wide standards. Finally, this guide
provides you with guidelines and advice on how to prepare editorial
content for your Web pages to maximize the user's ability to locate,
understand, and use information.

While this guide is specific to USDA.gov, designers and developers
should also reference the USDA Agency Web Presence UI Style Guide
because of its overarching reach.

# Web-based Components

Most pages of the USDA Web site have content that can be structured
within the following six sections: the *Masthead, Top Navigation Bar,
Left Navigation Column, Right Navigation Column, Footer* and *Content
Area*. The basic components of these areas will allow you to build
additional pages within the Web site.

![](media/image3.wmf){width="5.341732283464567in"
height="5.077165354330709in"}

## Masthead 

*Branding Area, Did You Know Factoid* and *Photo Banner*. The *Did You
Know Factoid*\
and *Photo Banner* should change daily. Multiple selections of each have
been provided to be used on a\
rotating basis.

![](media/image4.wmf){width="5.208333333333333in" height="1.25in"}

Masthead Components

1\. Branding Area

This is the area at the top of the masthead where the USDA logo and
typography appear. The size, position and placement of the Branding Area
elements cannot be altered.

**Attributes:** USDA logo and text "United States Department of
Agriculture" / Font: Helvetica Medium / Size: 15px / Color: #000000 /
Rollover: none / Rollover Color: none /\
Image: masthead_logo.gif / Width: 767px / Height: 53px / Cutsheet Name:
usda_home.psd

2\. "Did You Know" Factoid

The animated GIF highlights three facts about USDA that visitors may not
know. These facts correspond to the three photos within the *Photo
Banner*. The GIF, along with the *Photo Banner*, changes on a daily
basis. An archive of *Did You Know Factoid* animations and *Photo
Banners* is available for rotation.

**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: usda_home.psd

**Animation:** 3 frames / 10 seconds p/frame

3\. Photo Banner

The *Photo Banner* is a series of images that represents the diversity
of USDA 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 animated gif of facts /
Font: none / Image: masthead_banner.gif / Width: 767px / Height: 46px /
Cutsheet Name: usda_home.psd

## Top Navigation Bar

The Top Navigation Bar appears in the same place on every page of the
Web site and this example consists of\
*Home, About USDA, Newsroom, Agencies & Offices, Help, Contact Us, En
Español* and sometimes *My USDA.*\
The Top Navigation Bar was created as a graphic element.

![](media/image5.wmf){width="5.152777777777778in"
height="0.9722222222222222in"}

Top Navigation Bar Components

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

**Content:** "Home, About USDA, Newsroom, Agencies & Offices, 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: 60px / Height: 21px\
nav_top_about.gif, nav_top_about_over.gif / Width: 93px / 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_agencies, nav_top_agencies_over.gif / Width: 130px / Height:
21px\
nav_top_espanol, nav_top_espanol_over.gif / Width: 85px / Height: 21px\
Cutsheet Name: usda_home.psd

## Left Navigation Column

![](media/image6.wmf){width="2.066666666666667in"
height="4.4222222222222225in"}The Left Navigation Column appears on
every page of the Web site. There are four main ways to find information
on the USDA Web site. The user can *Search* for specific information.
*My USDA* can be used to customize information specific to the user.
*Browse by Audience* will direct users based on audience type. *Browse
by Subject* will direct users by common topics of interest. These
components always appear in the same place on every page.

Left Navigation Column Components

1\. Search

The Search area consists of a search field, "Go" Button, "Advanced
Search" link and "Search Tips" link.

**Overall Size:** Width: 171px / Variable height / Content: "Search"
image /\
Form Field Button.

**Navigation Headings:** Text: "Search" / Font: Helvetica Medium / Size:
14px /\
Color: #FFFFFF / Rollover: none / Rollover Color: none / Image:
r_c_head_search.gif /\
Width: 171px / Height: 23px / Cutsheet Name: usda_home.psd

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: usda_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: usda_home.psd

2\. My USDA

This area contains links to *Login* or *Customize*.

**Overall Size:** Width: 171px / Variable height / Content: "My USDA"
image\
Links: "Login," "Customize\"

**Navigation Headings:** Text: "My USDA" / Font: Helvetica Medium /
Size: 14px / Color: #FFFFFF / Rollover: none / Rollover Color: none /
Image: r_c_head_myusda.gif /\
Width: 171px / Height: 30px / Cutsheet Name: usda_home.psd

**Other Headings:** Text: "Login" / Font: Helvetica Medium / Size: 11px
/\
Color: #000099 / Rollover: underline / Rollover Color: none / Image:
r_c_nav_login.gif /\
Width: 171px / Height: 15px / Cutsheet Name: usda_home.psd

**Other Headings:** Text: "Customize" / Font: Helvetica Medium / Size:
11px /\
Color: #000099 / Rollover: underline / Rollover Color: none / Image:
r_c_nav_customize.gif /\
Width: 171px / Height: 15px / Cutsheet Name: usda_home.psd

3\. Browse by Audience

This area contains a drop down menu that provides information based on
specific types of users, such as "Producer". The recommended number of
audience links is 10 or fewer; the maximum number is 15.

**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: usda_home.psd

The names of audiences that should populate this drop down menu are
*Agribusiness and Cooperatives, Conservationists and Landowners,
Consumers, Educators and Students, Members of the Media, Parents and
Caregivers, Producers, Rural Community Members, Researchers* and *USDA
Employees.*

Left Navigation Column continued

4\. Browse by Subject

This area contains links to common topics of interest. The recommended
number of subject links is 10 or fewer; the maximum number is 15. Each
topic within this area has a rollover and a selected state. In the
rollover state,\
the type for each topic will be underlined. In the selected state, the
type for each subject will change to white and the graphic behind the
type will change color and appearance to visually tie into the section
bar of the corresponding page.

**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: usda_home.psd

**Other Headings:** Text: "Agricultural Production" / Font: Helvetica
Medium / Size: 11px /\
Color: #000099 / Rollover: Underline / Rollover Color: none / Image:
r_c_nav_agricultural.gif /\
Width: 171px / Height: 15px / Cutsheet Name: usda_home.psd

Other headings with the same attributes are *Consumer and Community
Services, Education and Outreach, Food and Nutrition, Laws and
Regulations, Marketing and Trade, Natural Resources and Environment,
Rural and Community Services, Research and Science, Travel and
Recreation* and *USDA Employee Services.*

## Right Navigation Column

The Right Navigation Column appears on most pages of the Web site. The
Right Navigation Column contains complementary and supplementary links
based on the page that the user is on. The information in the Right
Navigation Column changes on every page. Some pages, such as utility
pages like *Login, Logout, Search,\
Search Results* and *Customize My USDA,* will not have a Right
Navigation Column.

![](media/image7.wmf){width="2.314583333333333in" height="4.5in"}

Right Navigation Components

1\. I Want To

This is a section in the Right Navigation Column that lists common and
important tasks such as *Apply for Assistance, Find a USDA Program or
Service, Locate a Form, Read Food Recalls,* etc. Topics should be
limited to a maximum of five. Topics may be updated frequently, as they
should serve primary user intentions and reflect what is important to
users at any given time.

**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: usda_home.psd

Right Navigation Column continued

2\. Announcements and Events

This is a section in the Right Navigation Column that lists information
such as Important Reports, Announcements, Upcoming Events and
Publications.

**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_announcements.gif /\
Width: 188px / Height: 39px / Cutsheet Name: usda_home.psd

## Footer

The Footer is a list of seven HTML links appearing at the bottom of
every Web site page. The footer of every page contains the following
links: *FOIA, Accessibility Statement, Privacy Policy,
Non-Discrimination Statement, Information Quality, FirstGov,* and *White
House*.

![](media/image8.wmf){width="5.194488188976378in"
height="1.1807086614173228in"}

Footer components

**Attributes:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline

## 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, Divider Lines*
and *Imagery*. The content area may extend across the page if no Right
Navigation Column is needed.

![](media/image9.wmf){width="4.811805555555556in"
height="4.966666666666667in"}

Content Area Components

Bread Crumb Trail

The *Bread Crumb Trail* is a navigation tool that allows a user to see
where the current page is in relation to the Web site's hierarchy. Any
page visited (other than the current page) will be an HTML link. The
Bread Crumb Trail allows users to know where are and they have been
within the Web site at any given time

**Attributes:** Font: Verdana Regular / Size: 10px / Color: \# 666666 /
Link Color: #000099 /\
Text-Decoration: none / Hover: underline

Content Area continued

2\. Headline Bars

*Headline Bars* designate a section of content and have been created as
graphic elements. The Headline Bar may vary in width. The width of the
Headline Bar 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 no
Right Navigation is required. Sometimes a *More* button will appear in
the right margin of the bar.

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

**Headings:** Text: "In the News" / Font: Helvetica Medium / Size: 15px
/\
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_inthenews.gif /\
Width: 368px / Height: 23px / Cutsheet Name: usda_home.psd

**Other Headings:** Text: "Spotlights" / Font: Helvetica Medium / Size:
15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_spotlights.gif / Width: 368px /\
Height: 23px / Cutsheet Name: usda_home.psd

3\. Headline

A *Headline* is displayed as bold HTML text and should always function
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. (Please refer to
Style Formatting section on links.)

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none /\
Hover: none

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:
usda_home.psd

6\. Imagery

*Imagery* is a photo or graphic used to visually support content.
Imagery may be horizontal or vertical in format and must be scaled and
cropped to the pixel dimensions provided below. All photos must have a
one pixel black border.

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

## Exception Pages

Exception pages do not follow the typical application navigation
described above.

Login

The Login page allows the user access to the application. On Logout, the
user simply returns to the login page.

-   The Login page contains:

-   USDA branding area

-   Masthead

-   Welcome message (exit message if Logout)

-   Username field

-   Password field

-   Link to Forgot Password page

-   Login button

-   Cancel button

Child Windows

Child windows launched in a separate browser window will contain no
navigation other than to close and return to the window that spawned
them. Child windows will not contain any browser or global navigation
elements. When launched, these types of windows will display at the
upper left-hand corner of the screen. Child windows will always have a
"Close" button, and when closed, the window that spawned the child
window will refresh to its position prior to spawning the window.

## Error Handling 

Errors are defined as any action that impedes forward progress of the
application.

Error Handling

There are two different error types that will be discussed: General
Errors (low severity) and System Errors (high severity).

Examples of error types are as follows:

-   General Error -- This type of error occurs when a user leaves a
    required field in a form blank, or when a user attempts to submit
    invalid information to the application.

```{=html}
<!-- -->
```
-   System Error -- This type of error occurs when there is a hardware
    or software disruption.

Error messages must be informative and explicit. Regardless of error
type, every error must produce a description of what went wrong and what
the user can do to correct the error. When appropriate, a link should be
provided to the user allowing them to reference the applicable section
of the help document. Error codes or system-generated messages that the
user would not understand should never display.

> General Errors

An informative error message should be displayed if a general error
occurs. When users submit a form, for example, a specific JavaScript
function will check to see that all required fields have been filled
with valid information. If there are any errors, an informative error
message will appear in red text above the form\
fields warning the user of the problem. The cursor focus will be set to
the missing or incorrectly formatted\
field on the form.

![](media/image10.wmf){width="3.625in" height="3.0375in"}

## Error Handling continued {#error-handling-continued .unnumbered}

System Errors

An error page will be displayed when a high-severity system error
occurs. System errors occur when the user can no longer continue through
the application. This type of error usually happens if the application
server or database server goes down, the server is hanging on an
operation, or when the user attempts to perform an illegal operation. If
any of these errors occur, the application should fail gracefully and
redirect the user to a formatted error page.

The following error information will be provided for the user on the
System Error page:

-   Error description

-   Possible side effects

-   Fix or solution

-   Who to contact for support and how

-   Link to Home page

-   Link to Help

## Technical Considerations

The following guidelines will define best practices regarding general
implementation of the HTML pages.

Frames

The USDA.gov Web site has been designed to avoid the use of frames. No
template on this site should be used or loaded into frames of other Web
sites. A script should be provided to detect when and if that happens.
The script will be responsible for breaking the page in question out of
the confines of the offending frame.

Platforms

Operating Systems

All Web pages must be accessible on the following Operating Systems:

-   Microsoft Windows

-   Macintosh

-   UNIX/Linux

Note: Each operating system must provide the ability to use assistive
technologies for those individuals with disabilities.

Web Browsers

The following Web browsers must be supported:

-   Netscape Version 4.7x - Must provide as much functionality as
    possible, with the consideration that\
    minor look and feel differences may occur compared to the latest
    browser versions.

```{=html}
<!-- -->
```
-   Netscape Version 6.x

-   Netscape Version 7.x

-   Internet Explorer Version 5.x+

-   Safari Version 1.0 (Macintosh)

Note: Non-standard browsers such as AOL and Opera are not required to be
supported.

Accessibility Considerations

Web pages that require an applet, plugin, or other application be
present on the user\'s machine to interpret page content must provide a
link to the necessary application. If a user chooses not to install the
applet or plugin they still should be able to view the Web page without
an error message appearing.

Cascading Style Sheets (CSS)

All Web pages will use Cascading Style Sheets (CSS). With CSS, designers
and users can create style sheets that define how fonts, colors, layouts
of different elements, such as headers and links, appear. These style
sheets can then be applied to any Web page. A CSS has been developed for
USDA.gov that other agencies can use if desired to adhere to the Web
Presence style guidelines.

Screen Size and Bit Depth

All pages should be designed for a minimum of 800 x 600 pixel screen
resolution with consideration of the navigational bars that each Web
browser contains (i.e., top header icons, status bar, right side
scrollbars). The minimum color bit depth should be 16-bit (65,536
colors).

Technical Considerations continued

Load Time

Based on a 56-kilobytes (KB) connection, the recommended maximum load
time for any page should be 10 seconds. For any page that requires more
time there should be a status bar indicating the loading progress. The
table below can be used as guideline to determine page load times:

  -------------------- ------------------- ------------------------------
  Connection Type      Max. Speed          Max. Transmission Speed

  28.8K modem          28.8 Kbps           2.4 KB/sec
  (\"v.34\")                               

  56K modem (\"v.90\") 56 Kbps             4.8 KB/sec

  DSL/Cable Modem      384 Kbps to 1544    35 KB/sec and upwards
                       Kbps                

  LAN/Intranet         10 or 100Mbps       350 KB/sec or 3.5 MB/sec
  -------------------- ------------------- ------------------------------

#  Font, Color, and Style Formatting

There are stylistic standards set for all fonts, forms, and tables used
on agency Web sites and applications. This section will detail the how
to format the information presented on your pages. Your agency should
use this section as a guide to layout your text, pictures, forms, and
tables.

## Font

These are the guidelines set for all font usage on the Web site.

Font Size

Center content area HTML font should be 11pt. HTML text in the right
navigation and footer should be 10pt.

Font Type

The designated font order of Font Type for all HTML text is: {Verdana,
Arial, Sans-Serif}. Based on best practices, this font family was
selected for its ease of readability.

The designated font for all graphical images is Helvetica.

Font Style

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 logo. A bolded
version of the same font type is not considered a unique font.

Never use ALL CAPS. The only exception to this rule occurs when denoting
special instruction or acronyms.

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

No static text will be [underlined]{.underline}. The user 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.

-   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) when used in a listing of
    any sort.

    -   Example: **Farmer's Market Show** (Sep 4) -- Virginia's local
        farmers will display and sell their season's best.

-   All U.S. phone numbers will be listed in this format.

    -   Example: (202)720-0000

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

    -   Example: eight, 15

## Web Site Color Palette

This palette lists the primary colors to be used in the USDA.gov Web
site. All colors are represented as\
hexadecimal values.

![](media/image11.wmf){width="1.433464566929134in"
height="0.8881889763779528in"}![](media/image12.wmf){width="1.4208661417322834in"
height="2.791732283464567in"}![](media/image13.wmf){width="3.666535433070866in"
height="3.55in"}

Web Site Color Palette continued

![](media/image14.wmf){width="3.9in" height="2.4166666666666665in"}

![](media/image15.wmf){width="2.8493055555555555in"
height="2.759027777777778in"}

## Style Formatting

The following section describes overall guidelines for style formatting
.

Links

Text links should always be Blue #000099. The hover state of all text
links on the site is always underlined. Visited text links should always
be Purple #660099.

Links to resources or Web sites out of the USDA domain must explicitly
indicate that by adding the full URL of the destination link. Example:
"...as reported here ([http://www.pbs.com](http://www.cnn.com/))."

Justification of Text

All text in this Web site or application is aligned top/left at a
table-cell level (container). No elements, images or text should have
alignment attributes applied to them.

Imagery

There are two types of imagery displayed on Web sites and applications,
photographical images and non photographical images such as charts,
maps, 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.

Thumbnail Images (photographical images)

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

Large Images (photographical images)

**Attributes:** not required / landscape orientation Width 135px, Height
90px

Extra Large Images (photographical images)

**Attributes:** not required / landscape orientation Width 300px, Height
200px

Charts, Maps, Tables (non photographical images)

For charts, maps, and other types of non photographical images, the file
format is .gif. The width of these elements will be no greater than 396
pixels for those items placed within the center content area when a
right navigation bar is present. If there is no right navigation bar
present, the width of these elements will not exceed 584 pixels.

Table Formatting

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

-   Border Color: #339933

-   Cell Padding: 0

-   Cell Spacing: 0

-   Border: 1px

-   Table Header Color: #339933

## Style Formatting continued {#style-formatting-continued .unnumbered}

Tables should be labeled (table_id) with a descriptive term to help
screen readers (Section 508) identify content. Additionally, a summary
attribute (HTML) may be used to further describe the content of the
table displaying complex information.

Forms Formatting

Forms may be used anytime input from the user is 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. 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.

Form fields must be organized in the order in which they should be
filled out. Form field labels should be left aligned on the page. When
not possible, tab indexing (HTML) is required to ensure proper flow of
the process. Forms should provide as much information as possible to aid
the user in populating the form. For example, text hints or
context-sensitive help should be displayed where appropriate.

Buttons

All buttons on the site should be consistent in appearance. Placement of
all buttons on the page must be right aligned with the form fields on
the page. 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 6 pixels of spacing between the text and
right and left edges of the button.

Attributes: Text: "Sample Text" / Type: Helvetica Bold / Size: 11px /
Color: #333333 / Height: 20px / Variable width / Cutsheet Name:
buttons.psd

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.

[]{#__RefHeading___Toc57464737 .anchor}USDA.gov Templates

The following are 15 designed pages chosen to provide you with examples
of virtually every component\
you might need in building your own web pages. These templates include
examples of varying levels of\
pages as well as all the specifications required to help you design and
develop web pages in compliance\
with USDA standards.

## usda_gov_home Template

![](media/image16.wmf){width="4.510416666666667in"
height="4.457638888888889in"} The home page contains four areas of
information: In the News, I Want To, Spotlights, and Announcements and
Events.

usda_gov_home Template Components

1\. In the News

This section highlights the top four or five current news releases and
should be updated daily. News release headlines are bold text and are
HTML links. Use of imagery or summary is optional. When a summary is
shown, it will always begin with the news release date.

A. Headline bars

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

**Headings:** Text: "In the News" / Font: Helvetica Medium / Size: 15px
/\
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_inthenews.gif /\
Width: 368px / Height: 23px / Cutsheet Name: usda_home.psd

usda_gov_home Template continued

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

D. Images

**Attributes:** not required / Portrait Orientation: Width 70px, Height
80px /\
Landscape Orientation: Width 80px, Height 70px

2\. Spotlights

*Spotlights* contain important programs that will appear on the home
page for a longer period of time than\
*News Releases*. This section is formatted in two columns. Each program
headline is a bold HTML link. Use of imagery or summary is optional.

A. Headline bars

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

**Headings:** Text: "Spotlights" / Font: Helvetica Medium / Size: 15px /
Color: #00000 / Rollover: none / Rollover Color: none / Image:
content_head_spotlights.gif / Width: 368px /\
Height: 23p / Cutsheet Name: usda_home.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

D. Images

**Attributes:** not required / Portrait Orientation: Width 70px, Height
80px /\
Landscape Orientation: Width 80px, Height 70px

usda_gov_home Template continued

3\. I Want To

This is a section in the Right Navigation Column that lists common and
important tasks such as\
*Apply for Assistance, Find a USDA Program or Service, Locate a Form,
Find Weather Information,\
Read Food Recalls,* etc. Topics should be limited to a maximum of five.

**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: usda_home.psd

4\. Announcements and Events

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

**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_announcements.gif /\
Width: 188px / Height: 39px / Cutsheet Name: usda_home.psd

5\. Promotion Area

This is a section in the Right Navigation Column that features a
promotional item. When the redesigned site is launched, this area will
be used to feature My USDA personalization features. The messages
promoted in this area are temporary and will be updated on a regular
basis.

**Overall Size:** Width: 188px / Height: 134px

**Attibutes:** Text: "Personalize your My USDA page -- Find out more!" /
Font: Helvetica Medium /\
Size: 15px / Color: #336699 / Rollover: none / Rollover Color: none /
Image: l_c_feature.gif /\
Width: 188px / Height: 134px / Cutsheet Name: promotion.psd

## topic_l2 Template

This is a second-level page for users who have used the *Browse by
Subject* menu from the homepage.\
The TopicL2 page consists of *Section Bar, Spotlights, Features, Related
Topics* and *See Also.* All other items\
on the *Browse by Subject* menu will have similar pages.

![](media/image17.wmf){width="4.541666666666667in" height="4.6in"}

topicL2 Template Component Parts

1\. Section Bar

The Section Bar appears on all second and third-level pages. This
Section Bar color is *My USDA* Green.

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

**Headings:** Text: "Agricultural Production" / Font: Helvetica Medium /
Size: 24px / Color: #FFFFFF Image: topics_head_agicultural.gif / Width:
573px / Height: 37px / Cutsheet Name: section_heads.psd

topic_l2 Template continued

2\. Spotlights

The *Spotlights* section features two important programs of interest.
Each program headline is specified as a bold HTML link. Use of imagery
or a summary is optional.

A. Headline bars

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

**Headings:** Text: "Spotlights" / Font: Helvetica Medium / Size: 15px /
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_spotlights.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

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

C. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

D. Images

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

3\. Related Topics

This is a section in the Right Navigation Column that lists the topics
covered within a particular subject area.\
The number of topics is limited to a maximum of 12.

**Overall Size:** Width: 188px / Variable height / Content: "Related
Topics" image and bulleted list of various topics.

**Navigation Headings:** Text: "Related Topics" / Font: Helvetica Medium
/ Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_related.gif /\
Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline

topic_l2 Template continued

4\. Menu Selected State

When a user is on any page from the *Browse by Subject* menu, the
corresponding menu item will be replaced with its selected state
version.

**Overall Size:** Width: 171px / Height: 22px

**Attributes:** Font: Helvetica Bold / Size: 11px / Color: #FFFFFF /
Rollover: none / Rollover Color: none / Image:
r_c_nav_agricultural_down.gif / Cutsheet Name: usda_home.psd

5\. Features

The *Features* section includes important events, publications and
reports. Five is the maximum recommended number of features.

A. Headline bars

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

**Headings:** Text: "Features" / Font: Helvetica Medium / Size: 15px /
Color: #00000 / Rollover: none / Rollover Color: none / Image:
content_head_features.gif / Width: 368px / Height: 23px /\
Cutsheet Name: subheads.psd

B. Subhead Bar

**Attributes:** Font: Verdana Bold / Size: 12px / Color: #000000 /
Text-Decoration: none / Hover: none

**Other Attributes:** More button and divider line / Cutsheet:
Subhead.psd

C. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

D. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

6\. See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various links.

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Bold / Size: 10px / Color: #000099 /
Text-Decoration: none / Hover: underline / bulleted list

## audience Template

![](media/image18.wmf){width="4.574305555555555in"
height="4.763888888888889in"}The Audience page is very similar in
structure to the TopicL2 page. It can be accessed by selecting one of
the audience types from the drop-down menu in the *Browse by Audience*
section of the Left Navigation column.

audience Template Component Parts

1\. Section Bar

The Section Bar appears on all second and third-level pages. This
Section Bar color is *My USDA* Green.

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

**Headings:** Text: "Producers" / Font: Helvetica Medium / Size: 24px /
Color: #FFFFFF /\
Image: audience_head_producer.gif / Width: 573px / Height: 37px /
Cutsheet Name: section_heads.psd

audience Template continued

2\. Spotlights

The *Spotlights* section features two important programs of interest.
Each program headline is specified as a bold HTML link. Use of imagery
or a summary is optional.

A. Headline bars

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

**Headings:** Text: "Spotlights" / Font: Helvetica Medium / Size: 15px /
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_spotlights.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none /\
Hover: underline

C. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

D. Images

**Attributes:** not required / Portrait Orientation: Width 70px, Height
80px /\
Landscape Orientation: Width 80px, Height 70px

3\. Features

The *Features* section includes important events, publications and
reports. Five is the maximum recommended number of features.

A. Headline bars

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

**Headings:** Text: "Features" / Font: Helvetica Medium / Size: 15px /
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_features.gif / Width: 368px / Height: 23px /\
Cutsheet Name: subheads.psd

B. Subhead Bar

**Attributes:** Font: Verdana Bold / Size: 12 px / Color: 000000 /
Text-Decoration: none / Hover: none

**Other Attributes:** More button and dotted line / Cutsheet:
Subhead.psd

C. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

D. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

audience Template continued

4\. Related Topics

This is a section in the Right Navigation Column that lists the topics
covered within a particular subject area.\
The number of topics is limited to a maximum of 12.

**Overall Size:** Width: 188px / Variable height / Content: "Related
Topics" image and bulleted list of various topics.

**Navigation Headings:** Text: "Related Topics" / Font: Helvetica Medium
/ Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_related.gif /\
Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

5 I Want To

This is a section in the Right Navigation Column that lists common and
important tasks such as *Apply for a Direct Loan, Locate a Form, Buy
Insurance, Find Weather Information. Review Commodity Prices,* etc.
Topics should be limited to a maximum of five.

**Overall Size:** Width: 188px / Variable height / Content: "I Want To"
image and bulleted list of various links.

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

6.  See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various tasks.

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: column_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

## topic_l3 Template

![](media/image19.wmf){width="4.511805555555555in"
height="4.563888888888889in"}This is a third-level page for users who
have chosen a *Related Topics* from the TopicL2 page. The content of\
this page consists of links and information and may include alerts,
events, policies and other items of interest.\
Third-level topic pages follow a two-column format. All other *Related
Topics* pages will follow this format.

topicL3 Template Component Parts

1.  Section Bar

The Section Bar appears on all second and third-level pages. This
Section Bar color is *My USDA* Green.

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

**Headings:** Text: "Agricultural Production" / Font: Helvetica Medium /
Size: 24px / Color: #FFFFFF Image: subtopic_head_agproduction.gif /
Width: 573px / Height: 37px / Cutsheet Name: section_heads.psd

topic_l3 Template continued

2\. Headline Bar\
*Headline Bars* designate a section of content and have been created as
graphic elements. The Headline Bar may vary in width. Sometimes a More
button will appear in the right margin of the bar.

A. Headline bars

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

**Headings:** Text: "Exporting and Importing" / Font: Helvetica Medium /
Size: 15px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: content_head_spotlights.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

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

C. Body text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

D. Images

**Attributes:** not required / Portrait Orientation: Width 70px, Height
80px /\
Landscape Orientation: Width 80px, Height 70px

3.  Subhead Bar

Subhead Bars identify sub-sections of content and are HTML text followed
by a dotted line graphic. Sometimes a *More* button will appear in the
right margin of the bar.

**Attributes:** Font: Verdana Bold / Size: 12px / Color: #000000 /
Text-Decoration: none / Hover: none

**Other attributes:** *More* button and dotted line / Cutsheet Name:
subheads.psd

topicL3 Template continued

4\. Related Topics

This is a section in the Right Navigation Column that lists the topics
covered within a particular subject area.\
The number of topics is limited to a maximum of 12.

**Overall Size:** Width: 188px / Variable height / Content: "Related
Topics" image and bulleted list of various topics.

**Navigation Headings:** Text: "Related Topics" / Font: Helvetica Medium
/ Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_related.gif /\
Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

5\. See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various tasks.

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

## search_results Template

The *Search Results* page, a utility page, is reached by using the
*Search* option in the Left Navigation Column\
and lists results in order of relevance. Utility pages do not include a
Right Navigation Column, which allows\
content to extend across the page. Examples of other utility pages are
*Login, Logout, Advanced Search,* and *Customize My USDA*.

![](media/image20.wmf){width="4.533333333333333in"
height="4.4743055555555555in"}

search_results Template Components

1\. Additional Search Field

The Search Results page has an *Additional Search* field similar to the
*Search* area in the Left Navigation Column. Options for *Advanced
Search* and *Search Tips* are also provided. A link to "Search within
these results" allows users to further refine a search query.

A. Headline bar

**Overall Size:** Width: 561px / Height: 23px

> search_results Template continued

**Headings:** Text: "Search Results" / Font: Helvetica Medium / Size:
15px / Color: #00000 / Rollover: none / Rollover Color: none / Image:
content_head_section_advancedsearch.gif / Width: 561px / Height: 23px /
Cutsheet Name: subheads.psd

B. Results Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Fields:** "Subject", "Abstract", "Author", "Date", "Format", "Agency
Affiliation"

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

**Field Content Attributes:** Font: Verdana Regular / Size: 11px /
Color: #000000 /\
Text-Decoration: none / Hover: none

## newsroom Template

This second-level page is accessed by selecting *Newsroom* from the Top
Navigation Bar.

![](media/image21.wmf){width="4.511805555555555in"
height="4.563888888888889in"}

newsroom Template Component Parts

1\. Section Bar

The Section Bar appears on all second and third-level pages. This
section bar color is *Newsroom* Blue.

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

**Headings:** Text: "Newsroom" / Font: Helvetica Medium / Size: 24px /\
Color: #FFFFFF / Image: section_head_newsroom.gif / Width: 573px /
Height: 37px /\
Cutsheet Name: section_heads.psd

newsroom Template continued

2\. News Releases

Similar to the *In the News* section of the home page, this section
displays a maximum of three to four news releases and should be updated
frequently. *News Release* headlines are specified as bold HTML links.
Use of imagery or a summary is optional. When a summary is shown, it
will always begin with the news release date.

A. Headline bars

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

**Headings:** Text: "News Releases" / Font: Helvetica Medium / Size:
15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_newsreleases.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

3\. Publications

*Publications* contain a HTML listing with a maximum of three important
publications.

A. Headline bars

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

**Headings:** Text: "Publications" / Font: Helvetica Medium / Size: 15px
/ Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_publications_small.gif / Width: 174px / Height: 23px /
Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

newsroom Template continued

4\. Reports

*Reports* contain a HTML listing with a maximum of three important
reports.

A. Headline bars

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

**Headings:** Text: "Reports" / Font: Helvetica Medium / Size: 15px /
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_reports_small.gif / Width: 174px / Height: 23px / Cutsheet
Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

5\. Events

*Events* contain a HTML listing with a maximum of three important
events. Each event title is always followed by the event date.

A. Headline bars

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

**Headings:** Text: "Events" / Font: Helvetica Medium / Size: 15px /
Color: #000000 / Rollover: none /\
Rollover Color: none / Image: content_head_section_events.gif / Width:
368px / Height: 23px /\
Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none /\
Hover: none

newsroom Template continued

6\. Newsroom Right Navigation

All Newsroom pages contain *Newsroom Right Navigation*, which is divided
into *News Releases, Events, Publications and Reports*.

**Overall Size:** Width: 188px / Variable height / Content: "News
Releases, Events, Publications, Reports" and sub-navigation elements

**Navigation Headings:** Text: "Newsroom" / Font: Helvetica Medium /
Size: 14px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: l_c_newsroom.gif / Width: 188px / Height: 23px / Cutsheet Name:
nav_columns.psd

**Navigation Headings:** Text: "News Releases" / Font: Helvetica Medium
/ Size: 12px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: subsection_newsroom_newsreleases.gif / Width: 188px / Height:
16px / Cutsheet Name: nav_columns.psd

**Other Navigation Headings:**\
Text: "Events" / Font: Helvetica Medium / Size: 12px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
subsection_newsroom_events.gif / Width: 188px /\
Height: 16px / Cutsheet Name: nav_columns.psd

Text: "Publications" / Font: Helvetica Medium / Size: 12px / Color:
#000000 / Rollover: none /\
Rollover Color: none / Image: subsection_newsroom_publications.gif /
Width: 188px / Height: 16px / Cutsheet Name: nav_columns.psd

Text: "Reports" / Font: Helvetica Medium / Size: 12px / Color: #000000 /
Rollover: none /\
Rollover Color: none / Image: subsection_newsroom_reports.gif / Width:
188px / Height: 16px /\
Cutsheet Name: nav_columns.psd

**Links:** Font: Verdana Bold / Size: 10px / Color: #000099 /
Text-Decoration: none / Hover: underline / bulleted list

7\. E-mail Subscription

*E-mail Subscription* is a section in the Right Navigation Column
allowing users to subscribe and unsubscribe to e-mail news and events.

**Overall Size:** Width: 188px / Variable height / Content: "Email
Subscription" image, text and form field.

**Navigation Headings:** Text: "Email Subscription" / Font: Helvetica
Medium / Size: 14px / Color: #000000 / Rollover: none / Rollover Color:
none / Image: l_c_head_email.gif / Width: 188px / Height: 23px /
Cutsheet Name: nav_columns.psd

**Text Attributes:** Font: Verdana Regular / Size: 10px / Color: #000000
/ Text-Decoration: none /\
Hover: none

**Link Content:** "Manage Your Subscription" / Font: Verdana Bold /
Size: 10px /\
Color: #000099 / Text-Decoration: none / Hover: underline / bulleted
list

## latest_releases Template

![](media/image22.wmf){width="4.5472222222222225in" height="4.6in"}The
*Latest Releases* page lists the releases organized by date in
descending chronological order. The current date is the default listing.
No images or summaries are shown with the news releases on this page

latest_releases Template Components

1.  Section Bar

The Section Bar appears on all second and third-level pages. The Section
Bar color is *Newsroom* Blue.

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

**Headings:** Text: "Newsroom" / Font: Helvetica Medium / Size: 24px /\
Color: #FFFFFF Image: section_head_newsroom.gif / Width: 573px / Height:
37px / Cutsheet Name: section_heads.psd

latest_releases Template continued

2\. Drop-Down Menus

The *Latest Releases* page has a series of *Drop-Down Menus* enabling
the user to view press releases by month, day and year.

**Menus:** "Month, Day, Year"\
**Attributes:** Font: Verdana Regular / Size: 10px / Color: #000000\
**Default:** Current Month and Day

3\. Latest Releases Listing

Releases within this section are listed by date (month, day, year)
followed by the News Release title, which is an HTML link. No imagery or
summaries are displayed on this page. This is the only page where the
date precedes the title in a listing.

A. Headline bars

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

**Headings:** Text: "Latest Releases" / Font: Helvetica Medium / Size:
15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_latestreleasess.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

## news_release Template

![](media/image23.wmf){width="4.5in" height="4.441666666666666in"}This
page is accessed when the user selects a specific news release.

news_release Template Components

1.  Headline Bar

Headline Bars designate a section of content and have been created as
graphic elements. The Headline Bar may vary in width.

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

**Headings:** Text: "News Release" / Font: Helvetica Medium / Size: 15px
/ Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_newsrelease.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

> news_release Template continued

2\. Large Image and Caption

A Large Image may be displayed with a News Release and may include a one
to two-line HTML caption\
under the image. A link to the *Photo Gallery* may be included if more
images related to the article are\
available. All photos must include a one pixel black border.

**Attributes:** not required / Landscape Orientation: Width 135px,
Height 90px**\
Caption Attributes:** Font: Verdana Regular / Size: 9px / Color: #000000
/\
Text-Decoration: none / Hover: none

3\. Contact information

All News Releases must include a Release Number and Contacts with phone
numbers.

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

4\. Utility Links

News releases may include utility links if the release is available in
Spanish, *(En Español)*, or if a *Printable Version* is available.

**Attributes:** Text: "En Español *l*, Printable Version" / Font:
Verdana Italics / Size: 11px / Color: #000099 / Text-Decoration: none /
Hover: none

5\. News Release Body

Titles are specified as bold HTML text and the body text is normal HTML
text.

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

6\. See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various links.

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

## faq_by_topic Template

This second-level page is accessed by selecting *FAQs By Topic* from the
Right Navigation Bar of the *Help* page.\
This page contains an alphabetical listing of the FAQs By Topic.

![](media/image24.wmf){width="4.51875in" height="4.574305555555555in"}

faq_by_topic Template Components

1.  Section Bar

The Section Bar appears on all second and third-level pages. The Section
Bar color is *Help* Orange.

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

**Headings:** Text: "Help" / Font: Helvetica Medium / Size: 24px /
Color: #FFFFFF\
Image: section_head_help.gif / Width: 573px / Height: 37px / Cutsheet
Name: section_heads.psd

> faq_by_topic Template continued

2\. FAQs by Topic

This section lists all frequently asked questions (FAQs) in alphabetical
order by topic.

A. Headline bars

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

**Headings:** Text: "FAQs by Topic" / Font: Helvetica Medium / Size:
15px /\
Color: #00000 / Rollover: none / Rollover Color: none / Image:
content_head_section_faqtopic.gif / Width: 368px / Height: 23p /
Cutsheet Name: subheads.psd. Topics

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

**See Also Attributes:** Font: Verdana Bold Italic / Size: 11px / Color:
#000099 /\
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

3\. Drop-Down Menu

For easy access, the *FAQs By Topic* page includes a drop-down menu of
all available topics.

**Menu:** "FAQs Topics"\
**Attributes:** Font: Verdana Regular / Size: 10px / Color: #000000\
**Default:** "All Topics"

4.  Help Right Navigation

All Help pages contain *Help Right Navigation* which is divided into
*Help Guide, Frequently Asked Questions and Site Map*. The sub-heading
bullet will be filled in with color to indicate which page the user is
viewing.

**Navigation Headings:** Text: "Help" / Font: Helvetica Medium / Size:
14px / Color: #000000 / Rollover: none / Rollover Color: none / Image:
l_c_head_help.gif / Width: 188px / Height: 23px /\
Cutsheet Name: nav_columns.psd

**Sub-Headings:** Text: "Help Guide, Frequently Asked Questions, Site
Map" / Font: Helvetica Medium /\
Size: 12px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: l_c_subhead_helpguide.gif, l_c_subhead_faq.gif,
l_c_subhead_sitemap.gif / Width: 188px / Height: 15px / Cutsheet Name:
nav_columns.psd

> faq_by_topic Template continued

5.  See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable Height / Content: "See Also"
image and bulleted list of various tasks.

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #131313 / Rollover: none / Rollover Color: none /
Image: l_c_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: Underline

## events_by_date Template

This page is accessed by selecting *Events by Date* from the Newsroom
landing page. Events are listed in ascending chronological order.

![](media/image25.wmf){width="4.511111111111111in"
height="4.563888888888889in"}

Events_by_date Template Components

1.  Section Bar

The Section Bar appears on all second and third-level pages. The Section
Bar color is *Newsroom* Blue.

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

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

events_by_date Template continued

2\. Drop-Down Menus

The drop-down menus *Month* and *Year* create the chronological list of
events. The current date is the default.

**Menu:** "Month and Year"\
**Attributes:** Font: Verdana Regular / Size: 10px / Color: #000000\
**Default:** Current Date

3\. Events Listing

Events are listed in ascending chronological order beginning with the
selected date from the drop-down menu. Use of imagery is optional. Event
titles are specified as bold HTML links and are followed by date and
location specified as regular HTML text*.*

A. Headline bar

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

**Headings:** Text: "Events by Date" / Font: Helvetica Medium / Size:
15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_section_eventsbydate.gif / Width: 368px / Height: 23px /
Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

D. Image

**Attributes:** not required / Landscape Orientation: Width 80px /
Height 70px**\
**

## agency_reports Template

This page is accessed from the *Newsroom* landing page by selecting
*Agency Reports* in the Right Navigation Column. This page displays
scheduled releases of important reports.

![](media/image26.wmf){width="4.51875in" height="4.574305555555555in"}

Agency Reports Template Components

1.  Section Bar

The Section Bar appears on all second and third-level pages. The Section
Bar color is *Newsroom* Blue.

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

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

agency_reports Template continued...

2.  Drop-Down Menus

The drop-down menus *Month, Day,* and *Year* create the chronological
list of events. The current date is the default.

**Menu:** "Month, Day, Year"\
**Attributes:** Font: Verdana Regular / Size: 10px / Color: #000000\
**Default:** Current Date

3\. Agency Reports Table

Agency Reports are formatted in a three-column table organized by *Date,
Report Description* and *Agency*. Each Agency acronym is a HTML link.
Dates are given in ascending order from the current date.

A. Headline bar

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

**Headings:** Text: "Agency Reports" / Font: Helvetica Medium / Size:
15px /\
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head \_agencyreports.gif / Width: 368px / Height: 23px /
Cutsheet Name: subheads.psd

**Listing Heading:** Text: "Date, Report Description, Agency" / Font:
Helvetica Medium / Size: 15px /\
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_section_agencyreports.gif / Width: 368px / Height: 23px /
Cutsheet Name: subheads.psd

B. Report Dates

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

C. Release Times

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

4\. See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various links

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: l_c_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

## agencies_and_offices Template

This second-level page is accessed by selecting *Agencies and Offices*
from the Top Navigation Bar. It is a listing of USDA Agencies and USDA
Offices. An alphabetical list of Agencies is displayed first followed by
an alphabetical list of Offices.

![](media/image27.wmf){width="4.5472222222222225in" height="4.6in"}

agencies_and_offices Template Component Parts

1\. Section Bar

The Section Bar appears on all second and third-level pages. This
Section Bar color is *Agencies and Offices* Maroon.

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

**Headings:** Text: "Agencies and Offices" / Font: Helvetica Medium /
Size: 24px / Color: #FFFFFF /\
Image: section_heads_agencies.gif / Width: 573px / Height: 37px /\
Cutsheet Name: section_heads.psd

agencies_and_offices Template continued

2.  Agencies Listing

> The landing page of *Agencies and Offices* will alphabetically list
> and provide a short two-line description of each USDA agency. The
> alphabetical listing of USDA Offices will follow the list of agencies.

A. Headline bar

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

**Headings:** Text: "USDA Agencies" / Font: Helvetica Medium / Size:
15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_agencyreports.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

C. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

3\. USDA Offices

The listing of USDA Offices can be accessed from the *USDA Offices* link
in the Right Navigation Column. This link will take the user to the
listing of offices at the bottom of the *Agencies and Offices* page.

4\. See Also

This is a section in the Right Navigation Column that includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various links

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: column_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

## about_usda Template

This second-level page is accessed by selecting *About USDA* from the
Top Navigation Bar and contains important information about USDA.

![](media/image28.wmf){width="4.511111111111111in"
height="4.566666666666666in"}

about_usda Template Components

1\. Section Bar

The Section Bar appears on all second and third-level pages. This
Section Bar color is *About USDA* Blue.

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

**Headings:** Text: "About USDA" / Font: Helvetica Medium / Size: 24px
/\
Color: #FFFFFF Image: section_heads_about.gif / Width: 573px / Height:
37px /\
Cutsheet Name: section_heads.psd

> about_USDA Template continued

Large Photo

The *About USDA* landing page should contain a photo of the Secretary of
Agriculture. All photos must have a one pixel black border.

**Attributes:** not required / Landscape Orientation: Width 135px,
Height 105px

3\. Body text

The body text of the *About USDA* landing page is specified as regular
HTML text and may include\
bulleted text.

A. Headline bar

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

**Headings:** Text: "Welcome by the Secretary" / Font: Helvetica Medium
/ Size: 15px / Color: #00000 / Rollover: none / Rollover Color: none /
Image: content_head_welcome.gif / Width: 368px / Height: 23p / Cutsheet
Name: subheads.psd

B. Body Text

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

4\. See Also

This is a section in the Right Navigation Column and includes topics of
interest such as links to related publications, reports, agencies, etc.

**Overall Size:** Width: 188px / Variable height / Content: "See Also"
image and bulleted list of various links

**Navigation Headings:** Text: "See Also" / Font: Helvetica Medium /
Size: 14px / Color: #313131 / Rollover: none / Rollover Color: none /
Image: column_head_seealso.gif / Width: 188px / Height: 23px / Cutsheet
Name: nav_columns.psd

**Links:** Font: Verdana Regular / Size: 10px / Color: #000099 /
Text-Decoration: none /\
Hover: underline / bulleted list

## advanced_search Template 

![](media/image29.wmf){width="4.5in" height="4.441666666666666in"}The
Advanced Search Page is a utility page accessed by selecting the
*Advanced Search* link in the Left Navigation Column. Utility pages do
not have a Right Navigation Column, allowing content to extend across
the page.

advanced_search Template Components

1.  Headline Bar

Headline Bars designate a section of content and have been created as
graphic elements. The Headline Bar may vary in width.

**Overall Size:** Width: 561px / Height: 23px

**Headings:** Text: "Advanced Search" / Font: Helvetica Medium / Size:
15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_advancedsearch.gif / Width: 561px /\
Height: 23px / Cutsheet Name: subheads.psd

advanced_search Template continued

2\. Advanced Search Fields

The content on this page consists of HTML fields and drop-down menus
narrowing the scope of the search parameters.

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

> **A. Search for Keywords Containing\
> **Allows the user to include or/and exclude additional search strings
> to the query. This section also enables the user to narrow the
> document attributes to be searched.
>
> **Form Fields:** Scope, Search String, Location
>
> **Scope Attributes**: Type: Drop-Down / Values: All of the words, Any
> of the words, The exact phrase
>
> **Search String Attributes:** Type: text field / Size: 30 Characters
>
> **Location Attributes:** Type: Drop-Down / Values: All Document
> sections, Title, Document author
>
> **B. Search Options\
> **Allows the user to determine the file format, language, published
> date and subject or search results.
>
> **Form Fields:** Format, Language, Date, Subject
>
> **Field Attributes:** Type: Drop-Down **/** Values are determined by
> the existing pool of document indexed for search.
>
> **C. Display Options\
> **Allows the user to affect total search results displayed per page
> and the manner in which they should be listed.
>
> **Form Fields:** Result Set, Sort
>
> **Result Set Attributes:** Type: Drop-Down / Values: Range \[5 -- 15\]
>
> **Sort Attributes:** Type: Drop-Down / Values: Relevance, Date
> Published, Document Type, Alphabetic Descending, Alphabetic Ascending

3\. FirstGov.gov link

All Search pages must have a link to FirstGov.gov at the bottom of the
page.

**Link:** Font: Verdana Regular / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

## customize_portal Template 

This is a utility page accessed after a user logs in by selecting
*Customize* from the *My USDA* section of the\
Left Navigation Column. This page allows users to customize relevant
content.

![](media/image30.wmf){width="4.541732283464567in"
height="4.4834645669291335in"}

customize_portal Template Components

1\. Customization Progress Bar

This is a graphic element indicating the current stage in the
customization process.

**Headings:** Text: "Step 1, select your subjects" / Font: Helvetica
Medium / Size: 11.5px / Color: #000000 / Rollover: none / Rollover
Color: none / Image: button-step1.gif / Width: 181px / Height: 25px /\
Cutsheet Name: buttons.psd

**Other Headings:\
** Text: "Step 2, select your content" / Font: Helvetica Medium / Size:
11.5px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image: button-step2.gif / Width:
181px / Height: 25px /\
Cutsheet Name: buttons.psd

Text: "Step 3, select your layout" / Font: Helvetica Medium / Size:
11.5px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image: button-step3.gif / Width:
181px / Height: 25px /\
Cutsheet Name: buttons.psd

customize_portal Template continued

2\. Available Content / My Content

The main content area of this page is formatted in two columns. The user
can select content from the options in the left column, *Available
Content,* and transfer that content to the *My Content* section in the
right column.

**Overall Size:** Width: 561px / Height: 23px

**Headings:** Text: "Customize Your Portal" / Font: Helvetica Medium /
Size: 15px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: content_head_section_customizeportal.gif / Width: 561px / Height:
23px / Cutsheet Name: subheads.psd

**Other Headings:** Text: "Available Content" / Font: Helvetica Medium /
Size: 15px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: content_head_avaliable.gif / Width: 264px / Height: 23px /
Cutsheet Name: subheads.psd

"My Content" / Font: Helvetica Medium / Size: 15px / Color: #000000 /
Rollover: none / Rollover Color: none / Image:
content_head_mycontent.gif / Width: 264px / 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 be in blue type. (Please refer to Style
Formatting section on links.)

**Attributes:** Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none\
**Links:** Font: Verdana Regular / Size: 11px / Color: #000099 /
Text-Decoration: none / Hover: underline

# Editorial Content

Although the basics of good writing are universal, writing copy for the
Web differs from preparing text for a printed publication. Just as the
Style Guide serves to help USDA and agency web developers create
user-friendly, consistent, informative and effective web pages, this
section on editorial content will ensure that the text throughout your
Web site meets those same standards.

The chapters within this section are intended to provide an overview of
how to craft text and ensure clarity in writing for the Web. However,
please reference the USDA Web Presence UI Style guide for more specific
details and specific examples.

## Crafting Text

This chapter provides specific information on how users read web text;
strategies for structuring text; and guidelines for ensuring clarity.

Overview: How people read web content

Users of information enter sites with specific goals in mind. When
visitors to your site need specific information, they look for structure
to guides them through your site. As a creator of visual information,
you must work to develop a structured site -- one that enables users to
quickly find the information they require.

This first section explains how people read Web text and presents the
most common challenges users face.

What do people demand from Web text?

The Web is a "performance-based" medium. Users turn to Web sites for
information, and as the amount of information increases, the demand for
attention increases. Readers will remain in your Web site as long as
they can find the information they require, but it must be presented
clearly.

People want to complete tasks.

Some users browse the Web for recreational purposes or for
entertainment. But when your users look for information, they do so
because they have a task they want to complete.

Think about the users of information on USDA sites. When they enter
"information space," they are looking for specific information. They
want to make their way through a Web site quickly and efficiently,
absorbing as much information as possible.

Think in terms of tasks and actions. Give users what they are looking
for in a structure they don't have to "work" through, so they can
achieve their goals and come away satisfied.

People want text that matters to them.

Users attempting to complete tasks are looking only for the information
that pertains to them. Their first question will always be, "What's in
it for me?"

Present this information clearly and succinctly so they can complete
their tasks. A successful user experience delivers the value proposition
in a way every user can understand it. Poorly constructed text does not
allow your audience to engage fully and in a broader sense, it
diminishes the Web site's usefulness is in the user's mind.

People want an intuitive hierarchy of information.

Users are accustomed to receiving information in a particular way. Begin
with the most pertinent and/or general information and from here, users
can decide whether or not to delve deeper into content. Every element on
the screen can draw attention to another element. As a Web developer, it
is your job to place text and graphics in an order that mirrors users'
expectations.

> Crafting Text continued

People want their expectations fulfilled.

When people read, they want to have a good understanding of how they
might move through content. You have the opportunity to structure
information that "predicts" what's coming up.

Good Web writing supports the users' expectations and facilitates
relationships between sections and chunks of information.

People want a good experience.

Research tells us that Web users want to successfully complete their
tasks. Do not offer them fluffy marketing prose or pedantic academic
ramblings. Respect your reader's intelligence. You have the opportunity
and the obligation to craft information that supports users' needs.

Challenges with reading Web text

Research shows that reading from the screen is tiring for the eyes. Some
statistics even indicate that reading from a Web site is approximately
25% slower than reading print. Users do not read word for word; they
scan.

More importantly, users tend to visit more than one site. If you cannot
provide useful information, they will go to your "competition." Be
mindful of this and remember that burying information will cause you to
lose your user's interest.

In the following section, you will see how content must enable people to
see the structure in documents, find relationships and act.

## Strategies for Crafting Text

As Web writers, you have the opportunity to focus content, chunk it into
digestible units, and use expectation structures to help readers
anticipate the content for any given page.

Each of these topics is covered in great detail in the *Crafting Text*
section of the Web Presence Style Guide. As you write, you may wish to
refer to the principles and style recommendations set forth in that
publication.

You should be aware of the GPO Style Manual ([Government Printing Office
Style Manual](http://www.gpoaccess.gov/stylemanual/index.html)). This
Style Manual is the product of many years of public printing experience,
and its rules are based on principles of good usage and custom in the
printing trade.

The Style Manual has served Federal printers since 1894, and with this
29th edition, the traditions of printing and graphic arts are carried
forward into new technologies. The Manual, supported by act of Congress,
is considered the Public Printer of the U.S. Government Printing Office
is authorized to determine the form and style of Government printing.
For these press related items, Associated Press (AP) Style Guide should
be used except for exceptions noted in the Office of Communications
Guidelines -- [Style Guidelines for Media
Materials](http://www.egov.usda.gov/intranet/WebPresence/MediaMat.pdf).

On some matters of Grammar and Usage, the *GPO Manual* suggests you
refer to the [Chicago Manual of
Style](http://www.press.uchicago.edu/Misc/Chicago/cmosfaq/). Many
writers and editors consider the *Chicago Manual of Style* to be the
essential reference in publishing.

## Guidelines for Ensuring Clarity

Web writing should be concise. It uses headings, lists, and subheadings
to convey information. Don't worry about transitions. Web readers don't
look for a smooth, essay-like structure. They do want to see how
sentences and sections fit together.

Help readers envision the text.

You can help users see the sentences you are writing if you help them
visualize who is doing what in a sentence. To help users see the
structure in a sentence, you need to help them see characters and
actions.

In much of today's writing, there is a tendency to downplay the question
of who is doing what. Sometimes you want to hide the character. Other
times, you are following traditional conventions or modeling the ways
your supervisors learned to write.

In Web writing, however, your goal is to structure information with the
user in mind. You know from experience that Web readers want text that
is clear, concise, and engaging.

Make text concise.

Joseph Williams[^1] offers the following tips for writing concise text:

-   Remove confusing "characters."

> -- Do you read a sentence and wonder, "Who's doing what?"
>
> -- Look at your writing and identify any TO BE verbs (is, are, was,
> were, etc.) Can you change your sentence so your reader can more
> easily visualize your content?

-   Delete words that mean little or nothing.

> -- Avoid extra words. They will not impress others. As a builder of
> information, you do not have long to impress your audience. When they
> come to your site they have a goal in mind. Excess words will wear
> your reader out before they feel happy with the information they have
> gathered from you.
>
> --Work against the urge to fill space with by adding unnecessary text.
> Believe it when you hear the saying, "In this case, less is more." The
> shorter the amount of time it takes your audience to achieve their
> goal, the higher their satisfaction level.

-   Delete the words that repeat the meaning of other words.

> -- Do you need all the words you use? For example, would you write,
> "Sprint quickly" or "\
> Yell loudly?" Reduce the words to "Sprint" or "Yell."

-   Remove redundant pairs.

> -- Do you have a tendency to say something is "true and accurate" when
> you could you simple say "true?"
>
> -- Look at your writing for the word "and". Do you need all your
> redundant pairs?

Guidelines for Ensuring Clarity continued

-   Change negatives to affirmatives.

> -- If you write in negatives, people generally turn the sentence
> around in their head to process it.
>
> Examples:
>
> Not different = same
>
> Not many = few
>
> Not often = rarely
>
> Not include = omit

-   Replace complicated words with shorter ones.

> -- This does not reduce wordiness but it can make your writing easier
> to understand.
>
> Examples:
>
> Transmit = send
>
> Prior to = before
>
> Endeavor = try
>
> Utilize = use
>
> Ascertain = find out

# Targeting USDA Audiences

This chapter provides the users of the style guide, such as designers,
developers, content providers, and content presenters, with an overview
of USDA's target user audiences.

Audience and Purpose

The USDA Web audience comprises a diverse group of internal and external
audiences. Because the audience interacts with multiple USDA agencies, a
cohesive on-line visual presence will greatly aid users in finding the
information they need quickly and efficiently. The Style Guide will help
USDA on-line content providers with a vehicle to ensure that important
information is effectively communicated on-line to the audiences that
need it most.

Context

USDA's Web Presence strives to be consistent with the goals of the
President's Management Agenda, the eGovernment Act of 2002, and the USDA
eGovernment Strategic Plan. As a result, USDA's Web Presence should
incorporate consistent site architecture and clear navigational tools,
which greatly enhance overall site usability. After all, USDA's Web
audiences want to find the content they need and move on to using it
offline. This overview will help focus content to specific user groups.
It provides a brief synopsis of the knowledge gained by USDA's [Web
Presence Audience
Analysis](http://www.egov.usda.gov/intranet/WebPresence_docs.html)
(completed in 2003) and examples of content that will be helpful to the
target audience groups.

Targeting USDA User Groups

USDA user groups can be viewed as two distinct groups: an internal
audience and an external audience. This section introduces you to each
group, and identifies a sample site where you can see how one USDA
agency has focused its audiences.

Internal User Groups

Internal User Groups include employees and policy makers.

Employees

USDA has over 100,000 employees. This group includes employees who are
Washington-based (headquarters), state and regional offices, field
offices and some foreign locations. Approximately fifty percent (50%) of
USDA employees are Service Center employees and about 25% are Forest
Service employees. Most USDA employees have a computer at work and/or at
home. Headquarters and Service Center personnel have high-quality
Internet connections. A marked disparity exists with Field, Inspection
and Foreign-based personnel, who are less like to have any access.

Effective Web content for this group may include the following:

-   Clear links to USDA departments/divisions,

-   E-Mail Alerts, i.e. "Issues of the Day",

-   Clear links to research on-line, i.e., AgWeb.com, National
    Agricultural Statistics Service and Economic Research Service,
    National Agricultural Library, Agricultural Research Service,

-   On-line calendars of important agency events, and

-   Links to staff training opportunities through Human Resources and
    the USDA Graduate School.

Targeting USDA Audiences continued

Policy Makers & Influencers

This group includes 541 members of Congress, 7,382 State legislators and
USDA's own policy staff. Additional users in this group include the
295,000 employees of more than 147,000 associations and interest groups.

Some 10,000 Washington, DC-based lobbyists are also included in this
highly educated, Internet savvy user group. Members of this group are
overwhelmingly male, possess advanced degrees and serve professions like
law, communications, public relations and journalism.

Effective Web content for this group includes the following:

-   Clear links to research on-line, i.e. AgWeb.com, National
    Agricultural Statistics Service and Economic Research Service,
    National Agricultural Library, Agricultural Research Service,

-   E-Mail Alerts, i.e. "Issues of the Day", and

-   Links to related government research tools they are already using,
    such as Food and Agricultural Policy Research Institute, the Library
    of Congress's THOMAS system, the Congressional Research Service and
    the Mann Library at Cornell University.

External User Groups

USDA has a variety of external user groups. As you consider the groups
for your site, keep in mind the following:

Producers

It is estimated that the potential USDA audience includes some 2.2
million ranchers, agricultural, aqua-cultural and specialty crop
producers, among others. The majority of this audience is male; over age
50; haves at least completed high school, and fluently speak and read
English.

A significant sub-set of this group is Spanish-speaking. The primary
reason this group goes to USDA (traditionally in person) is to determine
program eligibility and complete application processes. They are highly
motivated, don't want to waste time on paperwork and thus, rely heavily
on USDA staff and/or intermediaries for support.

Fifty-four percent (54%) of producers own or lease a computer and 43% of
all US farms have Internet access, predominantly dial-up. Producers with
sales in excess of \$100,000 had the highest prevalence of computer
ownership (73%); however, small sale producers (sales less than
\$10,000) still had 50% computer access rates.

Effective Web content for this group includes:

-   Clear summaries of eligibility requirements for benefits,

-   On-line form submission capability and/or easily down-loadable
    forms,

-   Links to farm policy documents, i.e. the Farm Bill, and

-   Links to topical information such as farm loans, marketing
    assistance, crop insurance and\
    risk management, etc.

Targeting USDA Audiences continued

Agribusiness & Cooperatives

There are approximately 100,000 members of this audience group,
including non-farm, agricultural-related businesses (processors, packers
and cooperatives). This is highly educated group, as most hold a
four-year degree and many hold graduate degrees.

The members of this audience typically support farm businesses and help
them process their applications to USDA programs. The target audience is
interested in agricultural research, public meeting announcements,
enforcement reports and hazard analysis, among other topics. This group
is on-line an average of two hours a day; these are savvy user of USDA
and other on-line sources of information.

To craft clear content for this group, include the following:

-   Clear summaries of eligibility requirements for benefits, grants,
    and partnerships,

-   On-line form submission capability and/or easily down-loadable
    forms,

-   Links to topical information like Hazard Analysis and Critical
    Control Plans, and

-   Links to appropriate FDA sites to obtain temporary food licenses.

Low-Income Families & Individuals

USDA provides assistance to approximately 20 million low-income families
and individuals. This group has low literacy rates and other language
barriers. They appreciate straightforward text with content aimed at
basic comprehension.

Only 12.7% of low-income families have Internet access. Over the last
year, this represented a 78% increase among low-income populations,
demonstrating that more and more low-income users are availing
themselves of on-line capabilities at public libraries, community
centers and schools. Due to share computer usage, this group is somewhat
leery of using on-line forms requesting personal information; however,
eligibility requirements for benefits and programmatic news are of
interest.

Effective Web content for this group includes the following:

-   Clear summaries of eligibility requirements for benefits,

-   Information clearly segmented with descriptive titles like
    "seniors,"\
    "families with kids," and "rural families", and

-   Bilingual information, as known Spanish-speaking populations are
    included in this target audience group.

More than any other group, Web Presence for this audience should be
marketed and backed-up with paper literature placed in libraries and
community centers, so that users are aware that they can read about
topics of interest off-line.

Targeting USDA Audiences continued

Children & Caregivers

There are approximately 55,000 child nutrition professionals, including
food service employees and managers; nutrition services coordinators,
principals and superintendents.

This target group is located in almost 15,000 school districts and
serves the 30 million children receiving USDA benefits (school meals,
the Child and Adult Care Food Program (CACFP) and other Food and
Nutrition Service (FNS) sponsored programs. It should be noted that 99%
of all U.S. schools have Web access and 85% of these schools use
broadband technology.

Effective Web content for this group includes the following:

-   Clear links to state education agencies administering school food
    service programs,

-   Curriculum, lesson plans, recipes and other educational materials
    for in-school use,

-   Links to children's pages,

-   Downloadable posters with good nutrition messages to hang in
    classrooms studies have shown educators use these posters and
    children aged 4-18 connect more readily with USDA through these
    messages than on-line, and

-   Links to food safety educational materials and alerts.

Rural Communities & Businesses

This is a significant target group, as some two million rural families
directly and indirectly receives USDA loan aid. This group also includes
almost 5,000 rural businesses and cooperatives (with four million
members) and 3,000 rural utility cooperatives. Forty-two percent of
rural families are using the Internet, as are 48% of rural businesses.
Educational levels vary widely, similar to those in urban areas.

Effective Web content for this group includes the following:

-   Information clearly segmented with descriptive titles like "rural
    business"\
    "rural power/utilities" and "rural families",

-   Links to USDA agencies such as Rural Housing Service, Farm Service
    Agency and the Rural Business-Cooperative Service, among others, and

-   Information on empowerment zones, credit guarantees and export
    assistance.

Researchers & Academic Community

Another significant group, the researcher and academic community
encompasses professionals at more than 3,300 colleges and universities.
This group has some overlap with K-12 educators (already discussed in
detail above in "Children & Caregivers").

Targeting USDA Audiences continued

Researchers and the academic community often work in scientific fields
such as food science, biology, horticulture and veterinary medicine.
This is a well-educated group, as many teachers and researchers at the
university level hold a Ph.D. On-line use is very high, with many having
access to a computer at both home and office. Corporate-based
researchers share these same demographics.

Effective Web content for this group includes the following:

-   Links to data from the Economic Research Service, National
    Agricultural Statistics Service and the Agricultural Research
    Service, National Agricultural Library, Agricultural Research
    Service,

-   Ability to choose, compare and contrast among different data
    elements to determine usefulness of data for their audiences,

-   Ability to use on-line tools to gather and analyze data,

-   Downloadable publications,

-   Clear explanations of grant program eligibility, on-line submission
    and/or downloadable applications from the Cooperative State
    Research, Education and Extension Service, and

-   Links to trade data and industry regulations.

Landowners & Conservationists

There are approximately 10 million members of environmental groups,
private forest and other landowners. This target user group includes
recreation users, ranchers, forest producers and mining industries.

Landowners are overwhelmingly middle-aged and male. While most of their
children no longer live at home, they will one day inherit their land.
Members of environmental groups account for 4.2 million of the 10
million users; this sub-group includes the Sierra Club, Natural
Resources Defense Council, Friends of the Earth, Greenpeace and many
smaller groups.

Some 33% of ranchers have Internet access as compared to 87% of forest
product and mining worksites. Environmental groups are also Web savvy,
using on-line information for both research and advocacy. Educational
levels vary among this group, but Internet access rates suggest a high
level of users with some college if not a four-year degree or higher.

Effective Web content for this group includes the following:

-   Topical information on fire protection, managing public lands,
    managing natural resources such as coal and timber,

-   Secure watershed information (one example of sensitive data),

-   More E-forms, i.e., standardized unified Forest Permits, modeled
    after eReservations for forests and parks through Recreation.gov
    and/or Rural Development's on-line form system, and

-   Educational curriculum on parks and land conservation, targeted to
    K-12 audience.

Targeting USDA Audiences continued

National & Local Media

This group includes all reporters and freelance journalists for
newswires, radio, TV and related news publications. This user group is
well educated (most hold at least a four-year journalism degree). Many
in this group interact with USDA on-line (via Web Presence) and in
person, conducting interviews with key players at USDA as needed. This
group is always "on deadline" and wants credible information fast!

Effective Web presentation for this group includes the following:

-   Clear Links to summaries of topic information,

-   Contact information,

-   Tools which will assist in sorting through data,

-   E-Alerts of Breaking News/Topics of the Day @ USDA, and agency press
    release pages, and

-   Relevant financial information pertaining to USDA's producer groups
    and agricultural products. (This is especially important to
    financial reporters).

General Public (All Americans)

This is the most diverse user group by far. The Pew Charitable Trusts,
through its focused site Pewinternet.org, reports that 58% of American
Internet users---68 million adults---have visited at least one
government Web site. The general public turns to USDA for information on
education and fun topics, such as nutrition and recreation, as well as
areas of concern, such as food safety and disasters (i.e. wildfires).

It should be noted that only 13% of all Americans are connected via
broadband; many Americans still use dial-up services.

Effective Web content for this group includes:

-   Clear links to summaries of topic information,

-   Clear summaries of eligibility requirements for benefits,

-   Information clearly segmented with descriptive titles like
    "seniors,"\
    "families with kids," and "rural families",

-   Information on National parks and other recreational activities,

-   Increasing bilingual information, particularly on disasters, as
    Spanish-speaking populations are more heavily concentrated in
    Florida, Texas and California, where hurricanes, earthquakes and
    wildfires are prevalent, and

-   Nutritional information and downloadable meals plans.

Targeting USDA Audiences continued

Getting to Know Your Audiences

The more you know about Web audiences and what they do, the more you can
direct content that will enable them to get their jobs done. One way of
focusing on audiences is to develop personas. When you create personas,
you envision real people going into your site to complete their tasks.
USDA has developed personas for the above-mentioned audiences in the Web
Presence Audience Analysis document. These personas can be referenced
online at http://www.egov.usda.gov/intranet/WebPresence_docs.html.

Another example of personas in action is provided by USDA's Economic
Research Service. As part of a Web strategy document, they identified
specific personas for their site and products. You can access this
document on-line at <http://www.ers.usda.gov/AboutERS/OurSite/> and
access PDF samples of personas.

**\
**

# Accessibility Guidelines 

This section introduces Federal Section 508 Accessibility Guidelines and
provides direction for incorporating accessibility and usability
research as it is available on-line.

Section 508 Accessibility Guidelines

Section 508 (amendments to the Federal Rehabilitation Act) was
implemented in June 2001 and requires Federal agencies to make their
websites accessible to people with disabilities. Section 508 contains 16
specific technical requirements for websites. These are outlined below
with links to additional learning materials.

Alternative ("Alt") Text 

<http://www.access-board.gov/sec508/guide/1194.22.htm#(a>)

Provide a text equivalent for every non-text element (like images, audio
clips, buttons, etc.).

Multimedia Presentations

<http://www.access-board.gov/sec508/guide/1194.22.htm#(b>)

> Provide captions for audio/video presentations that are synchronized
> with the presentation so that the caption reader can associate body
> language with the speech.

Color and Meaning

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(c>)
>
> Color should not be the only way that page elements and controls (for
> example, buttons that activate new windows) are identified. Provide
> "alt" text or other context-sensitive information along with the color
> cue.

Readability and Style Sheets

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(d>)
>
> Organize documents so that they are readable without an associated
> style sheet.

Server-Side Image Maps

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(e>)
>
> Server-side image maps are not accessible. For each active region of a
> server-side image map, provide redundant text links elsewhere on the
> page. If possible, you should replace any server-side maps with
> client-side ones (see next item).

Client-Side Image Maps

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(f>)
>
> Use client-side maps instead of server-side ones, because they are
> accessible if you provide "alt" text that describes links within each
> active region of the map.

Accessibility Guidelines continued

Data Tables: Row and Column Headers

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(g>)
>
> Identify all row and column headers in data tables.

Data Tables: Data Cells

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(g>)
>
> Add extra attributes to your source code that associate the data
> within each cell to its corresponding row and column headers.

Frames

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(i>)
>
> Provide titles for frames to facilitate frame identification and
> navigation.

Screen Flicker

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(j>)
>
> Pages should not flicker, blink or flash within certain high intensity
> frequencies. Screen flicker can trigger seizures for some people with
> photosensitive epilepsy.

Text-Only Pages

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(k>)
>
> Use a text-only page, with equivalent information and/or functions,
> **only** if there is no other way to comply with the web accessibility
> requirements.

Readability and Scripts

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(l>)
>
> <http://www.access-board.gov/sec508/software-tutorial.htm>
>
> Developers who create scripts or programs -- like JavaScript, Java,
> etc. \-- to display web page content or create an interface, must
> include functional text within those scripts or programs that is
> accessible to assistive technology devices.

Link to Plug-Ins

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(m>)
>
> For every page that contains downloadable content which can only be
> read using a plug-in (like a PDF that requires the Adobe Reader),
> include a link to the location of the plug-in. Additionally, confirm
> that the plug-in itself is accessible to people with disabilities
> before using it.

Electronic, Online Forms

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(n>)

## Accessibility Guidelines continued  {#accessibility-guidelines-continued .unnumbered}

Add extra attributes to your source code that let people using assistive
technology access all form information, fill in all fields, trigger all
functions, and otherwise follow all directions and cues needed to
complete and submit the form.

Navigation Links

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(o>)
>
> Add extra attributes to your source code that provide a way for people
> using assistive technology to skip repetitive navigation links (for
> example, a navigation bar that is used on every page) and jump
> directly to the main content areas of the page.

Timed Responses

> <http://www.access-board.gov/sec508/guide/1194.22.htm#(p>)
>
> Sometimes, for security, pages that solicit information from customers
> are designed to expire within a certain timeframe if a response is not
> received. Add extra attributes to your source code that alert
> customers about the timed response and give them sufficient time to
> indicate if they need more time to complete and submit their
> information.

Categories of Disabilities

There are four main categories of disabilities:

-   Mobility (difficulty operating mouse or keyboard)

-   Hearing

-   Vision (partial/total blindness and color-blindness)

-   Cognition/Learning (reading comprehension, focusing)

The breadth of the challenge is significant. The number of people with a
disability in the U.S. is estimated to be between 43 and 54 million. Of
these, it is estimated that 535,000 Americans are blind and 4 million
Americans are vision-challenged.

Weighing Costs and Benefits

Making sites accessible has spillover effects for all users, like those
who use low-end modems and wireless Internet devices, and the aging
population. Additionally, costs are not significant if you follow
user-focused processes for planning. Kynn Bartlett, Director of the HTML
Writer\'s Guild Accessible Web Authoring Resources and Education Center,
states that "Making a site accessible adds about one or two percent to
the cost." Removing barriers on web sites is simply a matter of good
design.

Accessibility Resources

-   Official Section 508 site \-- <http://www.section508.gov/>

-   USDA Section 508 site \--
    <http://www.ocio.usda.gov/irm/508/sec508.html>

-   Free Online Training \--
    <http://www.section508.gov/index.cfm?FuseAction=Content&ID=5>

-   Access Board Section 508 site \--
    <http://www.access-board.gov/508.htm>

# Usability Guidelines 

This section touches on usability issues to consider when designing your
Web site or application.

Usability

Usability is the overall measurement of the satisfaction of interactions
a user has with a product or system such as a Web site or software
application. A high level of satisfaction occurs when users find a Web
site or application useful and usable. Users want an engaging
experience.

Usability Heuristics

Quality of the user's experience on a Web site can be measured using the
following usability principles, or heuristics:

-   Use a simple page design

-   Know your users and speak their language

-   Ensure consistency throughout the site

-   Design your site for efficiency and ease of use

-   Provide an engaging experience

-   Support the user and provide feedback

-   Use a clear navigation structure

Weighing Costs and Benefits

An engaging user experience on a particular Web site or application
results in increased usage of that site, improved user productivity, and
reduced training, support, and development costs. Research shows that
users cannot find information they seek on Web sites 60% of the time,
leading to wasted time, reduced productivity, increased frustration and
loss of repeat visits and money.[^2] The value of creating a
user-focused Web site or application far outweighs its investment.

Usability Guidance

A federal site,
[[www.usability.gov]{.underline}](http://www.grafik.com/xtranet/clients/ACC/ACC-3217/031113/www.usability.gov),
provides broad information on usability and accessibility. The site
comprises original content in addition to links to external Web sites,
resources, and articles.

This site is designed to provide current and accurate information on how
to make health-related information Web sites and other user interfaces
more usable, accessible and useful. The site also links to a variety of
quality Web sites and resources on usability, accessibility and related
topics that exist in the field.

Among the specific topics are the following:

-   [What is
    usability?](http://www.usability.gov/basics/index.html#definition)

-   [Why is usability
    important?](http://www.usability.gov/basics/index.html#importance)

-   [What is the difference between usability engineering and usability
    testing?](http://www.usability.gov/basics/index.html#difference)

# Usability Guidelines continued {#usability-guidelines-continued .unnumbered}

-   [What steps are involved in
    usability?](http://www.usability.gov/basics/index.html#steps)

-   [What is a usability test
    like?](http://www.usability.gov/basics/index.html#whatisitlike)

-   [Do I need a lab to do usability
    testing?](http://www.usability.gov/basics/index.html#needs)

-   [How many participants are needed for a usability
    test?](http://www.usability.gov/basics/index.html#how_many)

-   [How much does it cost to do usability
    testing?](http://www.usability.gov/basics/index.html#costs)

-   [Why do iterative usability
    testing?](http://www.usability.gov/basics/index.html#why_do)

-   [How can you show that usability engineering saves
    money?](http://www.usability.gov/basics/index.html#saves_money)

-   How can I encourage people in my organization to conduct usability
    engineering and testing?

# Appendix

Revision History

This Style Guide is a living document that will be updated and
maintained by the USDA Web Presence team.\
All information on past revisions is described in the area below.

  -------------------- ---------------- ---------------- ------------------
  **Version**          **Updated By**   **Date Updated** **Reason for
                                                         Revision**

  1.0                                                    
  -------------------- ---------------- ---------------- ------------------

Contact Information

Please feel free to contact any one of the following members of the Web
Presence Team if you have any questions about this guide.

  -------------------- ---------------- ---------------- ------------------
  **Name**             **Role**         **Phone**        **Email**

  Insert names and                                       
  contact information                                    
  here                                                   
  -------------------- ---------------- ---------------- ------------------

Resource Sites:

Technical Resources

<http://www.internet.com/>

[http://www.webmonkey.com](http://www.webmonkey.com/)

[http://www.webreference.com](http://www.webreference.com/)

Usability Resources

<http://www.usability.gov/>

[http://www.useit.com](http://www.useit.com/)

Accessibility Resources

<http://www.section508.gov/>

<http://www.usability.gov/accessibility/index.html>

[http://www.access-board.gov](http://www.access-board.gov/)

Recommended Software:

The following software and fonts are necessary to create and edit the
text and imagery on your Web site or application.

> Preferred: Adobe Photoshop Version 6+
>
> Alternatives: Fireworks MX 2004, Microsoft Photo Editor
>
> Fonts Required: Helvetica, Verdana

[^1]: Joseph Williams, Style Ten Lessons in Clarity and Grace, 2000

[^2]: Mauro New Media, Charles Mauro