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

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

> Table of Contents

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

2 Web-based Attributes [4](#web-based-attributes)

2.1 Masthead [5](#section-1)

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

2.3 Left Navigation Column [8](#section-3)

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

2.5 Footer [14](#footer)

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

3 Overall Style Guidelines [18](#overall-style-guidelines)

3.1 Font [19](#font)

3.2 Body Text [21](#body-text)

3.3 Color Palettes [22](#color-palettes)

3.4 Links [24](#links)

3.5 Tables & Forms [25](#tables-forms)

3.6 Imagery [26](#imagery)

3.7 Exception Pages [27](#exception-pages)

3.8 Error Handling [28](#error-handling)

3.9 Technical Considerations [29](#technical-considerations)

4 Templates [32](#templates)

4.1 Homepage Template [33](#homepage-template)

4.2 Landing Page #1 Template [36](#landing-page-1-template)

4.3 Landing Page #2 Template [38](#landing-page-2-template)

4.4 Text with Inset Template [40](#text-with-inset-template)

4.5 Text with Image Template [41](#text-with-image-template)

4.6 List Template [43](#list-template)

4.7 List with Images Template [45](#list-with-images-template)

4.8 Table Template [47](#table-template)

4.9 Table with No Right Navigation Template
[49](#table-with-no-right-navigation-template)

4.10 Table Images Template [51](#table-images-template)

4.11 Expanded Image Template [53](#expanded-image-template)

4.12 Forms Template [55](#forms-template)

4.13 Advanced Search Template [57](#advanced-search-template)

4.14 Child Window Template [59](#child-window-template)

4.15 Print-Friendly Template [61](#print-friendly-template)

5 Targeting FSIS Audiences [62](#targeting-fsis-audiences)

6 Editorial Content [68](#editorial-content)

6.1 Crafting Text [69](#crafting-text)

6.2 Strategies for Crafting Text [71](#strategies-for-crafting-text)

6.3 Guidelines for Ensuring Clarity
[72](#guidelines-for-ensuring-clarity)

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

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

9 Appendix [78](#appendix)

**\
**

# Introduction

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

The FSIS UI Style Guide defines guidelines and standards for a look,
feel, and navigation that promote consistency while also improving the
overall user experience within the FSIS Web site.

This Style Guide is your blueprint for building out new FSIS 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 fifteen
templates included were chosen to provide designers and developers with
examples of how to display commonly used information amongst various
offices.

This guide provides the following detailed information:

-   Templates displaying varying levels of Web pages and types of
    content, to provide designers and developers with examples for how
    to display content,

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

-   Guidelines and advice on how to prepare editorial content for your
    Web pages to maximize users' ability to locate and understand
    information,

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

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

#  {#section .unnumbered}

# Web-based Attributes

This section outlines specific design standards to be employed when
designing and developing public-facing information Web site or pages.
Instructions are provided for how to handle specific page components,
such as page layout and navigation elements.

Most pages of the FSIS 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.png){width="4.999305555555556in"
height="4.209027777777778in"}

##    {#section-1 .unnumbered}

## Masthead 

The *Masthead* is the main branding area for the FSIS Web site. Several
versions of the Masthead have been created, and one will appear on every
page of the Web site. In all versions of the Masthead, the FSIS Logo is
a hyperlink to the FSIS Home page, and the USDA Logo is a hyperlink to
the USDA Home page.

Home Page Masthead

An animated flash Masthead has been created for the homepage of the FSIS
Web site. The animation loops through general themes that represent
agency goals and responsibilities. The flash Masthead only appears on
the home page.

![](media/image4.png){width="5.875in" height="0.9395833333333333in"}

**Attributes:** FSIS Logo / Rollover: none / Rollover Color: none /
Image: masthead_030404.swf / Width: 767px / Height: 121px /

Home Page Static Masthead

In order to compensate for users who do not have a flash plug-in, a
static homepage Masthead has been designed to display in place of the
flash Masthead.

![](media/image5.jpeg){width="5.874305555555556in"
height="0.9284722222222223in"}

**Attributes:** FSIS Logo / Rollover: none / Rollover Color: none /
Image: masthead_home.jpg / Width: 767px / Height: 121px

> Masthead continued

Interior Masthead

A smaller Masthead has been created for every page of the Web site
except for the home page. This Masthead is a static image.

![](media/image6.jpeg){width="5.999305555555556in"
height="0.6729166666666667in"}

**Attributes:** FSIS Logo / Rollover: none / Rollover Color: none /
Image: masthead_interior.jpg / Width: 767px / Height: 86px

Child Window Masthead

A unique Masthead has been created for pages that utilize the Child
Window template.

![](media/image7.png){width="5.208333333333333in"
height="0.5694444444444444in"}

**Attributes:** USDA / FSIS Logo / Rollover: none / Rollover Color: none
/ Image: masthead_interior.jpg /

Width: 500px / Height: 54px

Printer Friendly Masthead

A unique Masthead has been created for pages that utilize the Printer
Friendly template.

![](media/image8.png){width="5.75in" height="0.5541666666666667in"}

**Attributes:** USDA / FSIS Logo / Rollover: none / Rollover Color: none
/ Image: masthead_interior.jpg / Width: 766px / Height: 75px

##   {#section-2 .unnumbered}

## Top Navigation Bar

The *Top Navigation Bar* appears in the same place on every page of the
Web site, with the exception of pages utilizing the Child Window or
Printer Friendly templates. The Top Navigation sections for the FSIS Web
site are *Home, About FSIS, News & Events, Fact Sheets, Careers, Forms,
Help, Contact Us,* and *En Español*.

![](media/image9.png){width="7.555555555555555in"
height="0.2222222222222222in"}

![](media/image10.png){width="7.555555555555555in"
height="0.2222222222222222in"}

Top Navigation Bar Component

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

Each section of the Global Navigation, whether in its default or
rollover state, will serve as a hyperlink to the landing page of its
respective area. The only exception will be seen on individual landing
pages, where the respective section will be displayed in its rollover
state but will not be a clickable hyperlink.

**Content:** "Home, About FSIS, News & Events, Fact Sheets, Careers,
Forms, Help, Contact Us, En Español" / Font: Helvetica Medium / Size:
13px / Color: #FFFFFF / Rollover: color and background /\
Rollover Color: #000000

**Images:**\
nav_top_home.gif, nav_top_home_over.gif / width: 55px / height: 21px\
nav_top_about.gif, nav_top_about_over.gif / width: 86px / height: 21px\
nav_top_news.gif, nav_top_news_over.gif / width: 108px / height: 21px\
nav_top_facts.gif, nav_top_facts_over.gif / width: 89px / height: 21px\
nav_top_careers.gif, nav_top_careers_over.gif / width: 67px / height:
21px\
nav_top_forms.gif, nav_top_forms_over.gif / width: 57px / 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_espanol, nav_top_espanol_over.gif / width: 85px / height: 21px\
Cutsheet Name: FSIS_home.psd

##    {#section-3 .unnumbered}

## Left Navigation Column

The *Left Navigation Column* appears on every page of the FSIS Web site.
There are three main ways to find information. The user can *Search* for
specific information. *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 location on every
page, with the exception of those pages using the Child Window or
Printer Friendly templates.

![](media/image11.png){width="1.875in" height="3.6666666666666665in"}

Left Navigation Column Components

Search

The *Search* area consists of a search field, "Go" button, "Search all
USDA" checkbox, "Advanced Search" link and "Search Tips" link. If
populated, the "Search all USDA" checkbox allows users to search the
usda.gov site in addition to the FSIS site.

**Overall Size:** Width: 171px / Variable height / Content: "search"
image /\
Form Field: Width: 106px / Height: 14px /\
Button: button-go.gif, Cutsheet: Name: buttons.psd

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

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

Browse by Audience

This area contains a drop-down menu that provides information based on
specific types of users, such as "FSIS Employees". FSIS has conducted an
audience analyses study in order to better understand\
the specific needs of users. FSIS developers should use this area of the
site to cater to those individual groups' interests. The recommended
number of audience links is 10 or fewer; the maximum number is 15.

When navigating to an Audience based page, or a page residing with an
Audience based area, the Audience name becomes a selected item in the
drop-down navigation box. In instances where a user navigates to a page
within an Audience area that is below the landing page, the selected
audience item will become a clickable hyperlink once again in the
drop-down menu.

**Overall Size:** Width: 171px / Variable height / Content: "Browse by
Audience" image and drop down menu of audience types.

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

![](media/image12.png){width="1.8611111111111112in"
height="3.6527777777777777in"}

Left Navigation Column continued

Browse by Subject

This area contains links to landing pages that serve as a gateway to
content organized into common topics areas. The recommended number of
subject links is 10 or fewer; the maximum number is 15.

While navigating within a specific subject area, the respective element
in the Subject area of the left navigation will remain in the "down"
state, and will remain a clickable hyperlink to the main landing page of
that area. The only exception to this rule will be seen on actual
Subject based landing pages, where the item will remain in the "down"
state but will not be a clickable hyperlink.

**Overall Size:** Width: 171px / Variable height / Content: "Browse by
Subject" image and bulleted list of various subjects

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

**Subjects Option#1:** Text: "Food Safety Education", "Science", "FSIS
Recalls", "Regulations & Policies" / Font: Helvetica Bold Smooth / Size:
15px / Color: #FFFFFF / Down Image: "r_c_nav_foodsafety_down.gif",
"r_c_nav_science_down.gif", "r_c_nav_fsisrecalls_down.gif,"
"r_c_nav_regs&pols_down.gif" / Rollover Image:
"r_c_nav_foodsafety_over.gif", "r_c_nav_science_over.gif",
"r_c_nav_fsisrecalls_over.gif," "r_c_nav_regs&pols_over.gif" gif /
Image: "r_c_nav_foodsafety.gif", "r_c_nav_science.gif",
"r_c_nav_fsisrecalls.gif," "r_c_nav_regs&pols.gif" / Width: 171px /
Height: 22px / Cutsheet Name: nav_columns.psd

**Subjects Option#2:** Text: "Food Security & Emergency Preparedness" /
Font: Helvetica Bold Smooth / Size: 15px / Color: #FFFFFF / Down:
r_c_nav_foodsecuritites_down.gif / Rollover:
r_c_nav_foodsecuritites_over.gif / Image: r_c_nav_foodsecuritites.gif /
Width: 171px / Height: 34px / Cutsheet Name: nav_columns.psd

## ![](media/image13.png){width="1.8611111111111112in" height="3.6805555555555554in"}  {#section-4 .unnumbered}

##   {#section-5 .unnumbered}

## 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 utility pages will
> not have a Right Navigation Column
>
> The Right Navigation Column is always displayed with an image of 7
> small dots appearing in the upper-left and lower-right hand corners.
> When choosing elements for your right navigation, be sure to select
> elements that allow your Right Navigation Column to be displayed in
> this way.

![](media/image14.jpeg){width="2.1333333333333333in"
height="3.611111111111111in"}

Right Navigation Components

I Want To

> This is a section in the Right Navigation Column that lists common and
> important tasks relevant to FSIS such as *Ask a Food Safety Question,
> Locate an FSIS Office, Download an FSIS Form, Subscribe to
> Newsletters, Schedule a Food Safety Mobile Visit,* etc. Topics should
> be limited to a maximum of ten.
>
> **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: 10px / Color: #313131 / Rollover: none / Rollover Color: none /
> Image: l_c_head_iwantto.gif / Width: 188px / Height: 23px / Cutsheet
> Name: nav_columns.psd

Right Navigation Column continued

Sub Navigation

This is a section in the Right Navigation Column that lists the sub-menu
of topics under the main subject, audience, or global area. If possible,
primary sub-topics should be limited to ten.

On the landing page of a particular area of the Site, the Sub Navigation
area will be displayed with only primary level elements visible. If a
user selects one of these elements, they are redirected to that
respective page, and at this point it is possible for another tier of
sub-topics, or Indented Sub-Items, will be displayed beneath the
selected primary element.

In an Indented Sub-Item is selected, no further tiers of sub-items are
displayed.

As a rule, the Selected Bullet corresponds with whatever page the user
is currently viewing. If a user navigates to a second or third level
page that does not have a respective Indented Sub-Item, the Selected
Bullet will be displayed next to the element in the right navigation
that is the root of that particular page.

Elements in the Sub Navigation area serve as clickable hyperlinks to
their respective pages except when a user is viewing that particular
page.

**Overall Size:** Width: 188px / Variable height / Content: Subject,
Audience, or Global image and bulleted list of sub-menu items.

**Navigation Headings Option #1:** Text: Subject, Audience, or Global
Headings / Font: Helvetica Medium / Size: 10px / Color: #313131 /
Rollover: none / Rollover Color: none / Example Image:
l_c_head_Science.gif / Width: 188px / Height: 23px / Cutsheet Name:
nav_columns.psd

**Navigation Headings Option #2:** Text: Subject, Audience, or Global
Headings / Font: Helvetica Medium / Size: 10px / Color: #313131 /
Rollover: none / Rollover Color: none / Example Image:
l_c_head_FoodSecurity.gif / Width: 188px / Height: 40px / Cutsheet Name:
nav_columns.psd

![](media/image15.png){width="2.0in" height="3.625in"}

##  {#section-6 .unnumbered}

##  {#section-7 .unnumbered}

##  {#section-8 .unnumbered}

##  {#section-9 .unnumbered}

##   {#section-10 .unnumbered}

## Right Navigation Column continued {#right-navigation-column-continued .unnumbered}

Promotional Items

Various pages throughout the FSIS Web site feature promotional items in
the Right Navigation area. These items can be rotated upon each refresh
of an individual page depending upon the content and purpose of the
page.

Promotional Items are used to direct users to content that may be of
particular interest to them, and the use of an Advertisement rotator
allows for specific promotions to be geared towards particular users
based upon the pages they have selected to view. These promotional items
serve as clickable hyperlinks to specific content of interest.

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

![](media/image16.png){width="1.9861111111111112in"
height="1.6111111111111112in"}

##  {#section-11 .unnumbered}

##  {#section-12 .unnumbered}

**Promotional Items:\
**Name: Import & Export Data / Image Name: promo_export.jpg\
Name: Fight Bac / Image Name: promo_fight_bac.jpg\
Name: Food Safety Mobile / Image Name: promo_food_safety_bus.jpg\
Name: Homeland Security / Image Name: promo_homeland_security.jpg\
Name: Meat & Poultry Hotline / Image Name: promo_hotline.jpg\
Name: Ask Karen / Image Name: promo_karen.jpg\
Name: Subscribe to Newsletters / Image Name: promo_newsletters.jpg\
Name: Thermy / Image Name: promo_thermy.jpg\
Name: Veterinary Employment / Image Name: promo_veterinary.jpg

Media Help

Whenever a link is displayed to document in PDF, Real Player, or Flash
format, a Media Help box should appear in the right navigation area. The
Media Help boxes are included in order to satisfy 508 Compliance
standards, and allow Web users the ability to readily obtain the
software necessary to completely navigate the Web site.

Please note that alternative versions of these include files exist
without the dots in the lower right hand corner -- these files all have
the suffix "\_nodots" at the end of their file name.

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

![](media/image17.png){width="1.9861111111111112in"
height="1.3472222222222223in"}

##  {#section-13 .unnumbered}

**Media Help Include Files:** File Names: "media_help_pdf",
"media_help_pdf\_&\_flash", "media_help_pdf\_&\_realplay",
"media_help_realplay\_&\_flash", etc.

## Footer

The *Footer* consists of two lines of HTML links. The first line links
to *FSIS Home, USDA.gov,* FSIS-specific items, FSIS in the same mission
area, and/or links to related Web sites. The second line must contain
the following links: *FOIA, Accessibility Statement, Privacy Policy,
Non-Discrimination Statement, Information Quality, FirstGov,* and *White
House*.

These items are all clickable links, with the exception of instances
where the user is on that respective page.

## ![](media/image18.jpeg){width="4.944444444444445in" height="0.6388888888888888in"} {#section-14 .unnumbered}

##  {#section-15 .unnumbered}

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

##  {#section-16 .unnumbered}

##  {#section-17 .unnumbered}

##  {#section-18 .unnumbered}

##  {#section-19 .unnumbered}

##  {#section-20 .unnumbered}

##  {#section-21 .unnumbered}

##  {#section-22 .unnumbered}

##   {#section-23 .unnumbered}

## Content Area

The center portion of the page is devoted to content. Elements that may
appear within the *Content Area* are *Bread Crumb Trail, Introduction
Text, Headline Bars, Headlines, Body Text, Divided Lines* and *Imagery*.

The content area may extend across the page if no Right Navigation
Column is needed.

![](media/image19.png){width="5.874305555555556in"
height="3.4340277777777777in"}

Content Area Components

This section focuses on the components of the content area; however, it
does not go into detail about specific types of content that should be
included.

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 they are and where they
have been within the Web site or application at any given time.

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

Content Area continued

Section Header

The *Section Header* is a graphical bar which indicates the primary root
of the specific page being viewed. Section Headers can be displayed for
each of the various areas of the Site within the Audience, Subject, and
Global Navigation. The only pages that will not display a Section Header
include the Home page, Footer pages, and Printer Friendly pages.

**Attributes:** Width: 535px / Height: 37px / Image Name:
section_heads_science.gif

**Child Window Section Header Attributes:** Width: 498px / Height: 21px
/

Image Name: section_heads_child_newsand.gif

Introduction Text

The *Introduction Text* is slightly larger than other body text on the
Web site. It can be used as an introduction to your agency or a mission
statement. The Introduction can be two to four lines in length.

**Attributes:** Font: Helvetica Medium / Size: 16px / Color: \# 4D8544 /
Text-Decoration: none / Hover: none / Image: fsis_mission.gif / Width:
368/ Height: 70px / Cutsheet Name: text_intro.psd

> Divider Line

The *Divider Line* is a graphic device used to separate stories within a
Headline Bar area, or to separate headlines from the body text of a
particular page.

Attributes: Width: 368px / Height: 10px / Cutsheet Name: FSIS_home.psd /
Image: content-divider.gif

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 (suggested): Width
70px, Height 80px / Landscape Orientation (suggested): Width 80px,
Height 70px

> Content Area continued

Headline Bars

*Headline Bars* designate a section of content and have been created as
graphic elements. The Area column; full length of the Content Area
column; or extend to the right margin of the page if right navigation is
not required. Sometimes a *More* button will appear in the right margin
of the bar.

In general, content header graphics will always correspond with whatever
the bulleted item in the right navigation area is. On primary landing
pages, Headline Bars will reflect all Right Navigation Sub-Menu items,
and will be displayed with "More" buttons, conveying to the Web user
their ability to access further content.

When viewing a page that is below a Landing page, a Headline Bar without
a More button will be displayed at the top of the Content Area.
Whichever item has a selected bullet in the Right Navigation Column will
have its corresponding Headline Bar displayed. In many cases where a
page is being viewed that is below a second or third level and does not
have its name appear as a Sub-Menu Item in the Right Navigation Column,
the page's title can be displayed using a bolded BodyTextTitle font and
a content divider image just below the Headline bar.

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

**Overall Size #2:** Width: 368px / Height: 42px

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

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

Body Text

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

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

# Overall Style Guidelines

There are stylistic standards set for all fonts, forms, and tables used
in the FSIS Web site. This section will detail how to format the
information presented on your pages. FSIS should use this section as a
guide to lay out text, pictures, forms, and tables. Technical
considerations for designing and developing informational are also
provided.

##  {#section-24 .unnumbered}

##  {#section-25 .unnumbered}

##  {#section-26 .unnumbered}

##  {#section-27 .unnumbered}

##  {#section-28 .unnumbered}

##  {#section-29 .unnumbered}

##  {#section-30 .unnumbered}

##  {#section-31 .unnumbered}

##  {#section-32 .unnumbered}

##  {#section-33 .unnumbered}

##   {#section-34 .unnumbered}

## Font

> These are the guidelines set for all font usage.
>
> **Font Size**
>
> The FSIS Web site utilizes Cascading Style Sheets (CSS), which allow
> developers to control the font size that will be displayed to users in
> a Web browser. All HTML text in the center Content Area of the page
> must be set at 11px. HTML text in the Right Navigation Column and
> Footer must be set at 10px. The Bread Crumb HTML text must be set at
> 9px.
>
> **Font Type**
>
> The designated font is Verdana for all HTML text. The order of font
> type that should be employed for all HTML text is: {Verdana, Arial,
> Helvetica}. Based on best practices, this font family, Sans-Serif, was
> selected for its ease of readability.
>
> The designated font for all graphical text is Helvetica.
>
> The maximum number of unique font types that can be used on a page is
> two. The only exception to this
>
> rule applies to the Masthead area. A bolded version of the same font
> type is not considered a unique font.
>
> **Font Style**
>
> Never use ALL CAPS. The only exception to this rule occurs when
> denoting special instructions or
>
> acronyms.
>
> Limit the use of italics. Italics can be used for providing specific
> emphasis, scientific names, or denoting
>
> various available versions of a document such as printer friendly
> version or a Spanish version.
>
> No static text will be underlined. Users may confuse underlined static
> text with a hyperlink.
>
> **Text Formatting**
>
> **Article titles and dates**
>
> Please notice in the example that the title is bolded and the date is
> in parentheses. The Month is represented by a 3 letter abbreviation
> and has no period. Alternative document formats are separated by a
> pipe. The article summary or overview text begins on a new line.
>
> ***Listeria* in Ready-To-Eat Products** (Oct 16, 2003) \| PDF \| En
> Español
>
> FSIS released data showing a one year...
>
> **Commonly used terms:**
>
> Web site (Web is capitalized in all instances)
>
> foodborne
>
> fact sheet
>
> Email
>
> Web
>
> homepage
>
> Thermy ™
>
> Fight BAC!^®^
>
> **Phone Numbers**
>
> Toll free numbers should include the preliminary "1" and be separated
> by dashes. For all other phone numbers the area code should appear in
> parentheses.

## Font continued {#font-continued .unnumbered}

> 1-888-535-4555
>
> \(202\) 720-6144
>
> **And vs. &**
>
> Page titles, headers, breadcrumbs, and navigation items should always
> include the "&" symbol. Full text (articles, summaries, fact sheet
> content) should use the full word "and".
>
> **Abbreviations**
>
> The first time an abbreviated word appears on a page it should include
> the full text of the term. Subsequently, the abbreviation can stand
> alone. This rule does not apply to "FSIS" or "USDA".
>
> Advanced Meat Recovery (AMR) - AMR is a process that uses machinery...
>
> **File formats and sizes**
>
> When they stand alone, capitalize file extensions. Place file sizes in
> parentheses.
>
> Thermy in Circle \| JPG (38k) \| TIF (454k)
>
> **States**
>
> All states should be either spelled out or abbreviated with two
> capitalized letters.
>
> Maryland
>
> MD
>
> **Typography**
>
> The following is a list of default font color, family, sizes, and
> formatting styles as defined in the cascading
>
> style sheet (CSS). These styles reflect default (absolute) font
> sizing.
>
> **Text Area CSS Class Font Attributes**
>
> Center Content Body Text: BodyTextBlack Verdana, 11px, black (#000000)
>
> Center Content Body Text: BodyTextBlackTitle Verdana, 13px, black
> (#000000)
>
> Right Navigation Text: BodyTextBlue Verdana, 10px, blue (#000099)
>
> Bread crumb Text: Breadcrumb Verdana, 9px, black (#000000)
>
> Footer Text .Footer: Verdana, 10px, blue (#000099), border-bottom:
> 1px, solid, (#000000)
>
> Form Field Text: .searchform Verdana, 11px, black (#000000), width:
> 115px, height: 14px
>
> Form Field Text: .checkbox Verdana, width: 12px, height: 12px
>
> Form Field Text: .audiencebox Verdana, 11px, black (#000000), height:
> 12px
>
> Link Text A:link blue (#000099)
>
> Link Text A:hover blue (#000099), underline
>
> Link Text A:visited purple (#660099)

##   {#section-35 .unnumbered}

## Body Text

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

**Lists**

All listings of events, news stories, or announcements must appear
consistently (Sep 20, 2004). The

headline or title should use bold font. If a date applies to the
headline, the date must appear in this format, (Sep 22) after the
headline. All news stories must display a date.

Example: **Veneman Announces New Farm Bill** (Sep 22)

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

**Justification of Text**

All text should be aligned top/left at a table-cell level (container).
Only numeric data within a table can be right aligned. No other
elements, images or text should have alignment attributes applied to
them.

**Bullets**

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

## Color Palettes

Shown below are the colors for Color Palette One. All colors are
represented as hexadecimal values

## ![](media/image20.jpeg){width="1.7236111111111112in" height="3.25in"} {#section-36 .unnumbered}

##  {#section-37 .unnumbered}

##  {#section-38 .unnumbered}

##  {#section-39 .unnumbered}

##  {#section-40 .unnumbered}

##  {#section-41 .unnumbered}

##  {#section-42 .unnumbered}

## ![](media/image21.jpeg){width="2.25in" height="2.875in"} {#section-43 .unnumbered}

##  {#section-44 .unnumbered}

##  {#section-45 .unnumbered}

##  {#section-46 .unnumbered}

##   {#section-47 .unnumbered}

## Color Palettes continued {#color-palettes-continued .unnumbered}

## ![](media/image22.png){width="4.25in" height="2.3472222222222223in"} {#section-48 .unnumbered}

##  {#section-49 .unnumbered}

##  {#section-50 .unnumbered}

##  {#section-51 .unnumbered}

##  {#section-52 .unnumbered}

## ![](media/image23.jpeg){width="4.625in" height="2.9659722222222222in"} {#section-53 .unnumbered}

##  {#section-54 .unnumbered}

##  {#section-55 .unnumbered}

##  {#section-56 .unnumbered}

## ![](media/image24.png){width="4.5in" height="0.2972222222222222in"} {#section-57 .unnumbered}

## Links 

**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/))."

When linking to page that is either within the FSIS Web site or is the
page of either USDA or a USDA agency, a single new browser window should
be opened. This browser window would then be refreshed by any subsequent
links to any external pages. This is accomplished by assigning these
links the target="\_parent" attribute.

> **Embedded links**
>
> In some instances, content developers will ask to include a hyperlink
> within content written as such: "Click here for more information."
> This does not meet accessibility requirements. When linking to page
> that is either within the FSIS Web site or is the page of either USDA
> or a USDA agency, please use the page name instead of the URL for
> links wherever possible. Try to use the following format:
>
> Go to the USDA Meat & Poultry Hotline page for additional information.
>
> Learn more about National Food Safety Education Month.
>
> Questions about food safety? Ask Karen, the FSIS Virtual
> Representative.
>
> For similar images view the News Photo Gallery.

## Tables & Forms

> 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

-   All table cells are left-justified by default. Numerical values may
    be right-justified if it enhances

> the legibility of the page.

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 any time 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 (\*) 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 among two or
    more options.

-   Use a check box when user input may be none, one or more choices
    amongst one or more options.

Form fields must be organized in the order in which they should be
filled out. 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.

## Imagery

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

For photographic images, the file format is .gif. 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 (photographic images)\
> Attributes: (not required) / Portrait Orientation: Width 70px, Height
> 80px / Landscape Orientation: Width 80px, Height 70px
>
> Extra Large Images (photographic images)\
> This option is reserved for special exceptions only.\
> Attributes: (not required) / landscape orientation Width 300px, Height
> 200px
>
> Charts, Maps, Tables (non-photographic images)\
> For charts, maps, and other types of non-photographic 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.
>
> **Buttons**
>
> All buttons on your site should be consistent in appearance. Placement
> of all buttons on the page must be right-aligned with the form fields
> on the page. The text on all buttons should be succinct and
> descriptive of the action of the buttons. The text on all buttons
> should be center-aligned on the button and have six pixels of spacing
> between the text and right and left edges of the button.
>
> 'Cancel' buttons are reserved for instances to allow users to quit the
> form without
>
> saving. 'Reset' buttons allow users to clear the fields of a form.
> 'Submit' buttons should be reserved for the final step of a process
>
> **Attributes:** Text: "*Sample Text*" / Type: Helvetica Bold / Size:
> 11px / Color: #333333 /
>
> Height: 20px / Variable Width / Cutsheet Name: buttons.psd

## Exception Pages

Exception pages do not follow the typical application navigation
described above. The following pages are examples of exception pages:

**Child Windows**

Child Windows launched in a separate browser window will contain no
browser or global navigational elements other than to close, return to
the window that spawned them, or navigate to a subsequent Child Window.
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. Please refer to
the *Photo Gallery Template* section on page 60.

**Print-Friendly Page**

This page displays content that can easily be printed with proper
formatting. No navigation elements are visible on this page -- it merely
displayed the FSIS Logo at the upper left-hand corner of the page.

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

• General Error -- This type of error occurs when users leave a required
field in a form blank, or

when users attempt to submit invalid information to the application.

• 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 users can do to correct the
error. When appropriate, a link should

be provided allowing users to access the applicable section of the help
document. Error codes and system generated messages should be displayed
in manner users can understand.

**General Errors**

An informative error message should be displayed if a general error
occurs. When a user submits 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 only if the error occurs above the page
fold.

Below is an example from the FSIS Web site:

![](media/image25.png){width="6.127777777777778in"
height="3.763888888888889in"}

Error Handling continued

**\
System Errors**

An error page will be displayed when a high-severity system error
occurs. System errors occur when users 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 users attempt to perform an illegal operation. If any
of these errors occur, the application should fail gracefully and
redirect users to a formatted error page.

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

• Error description

• Possible side effects

• Fix or solution

• Whom to contact for support and how

• Link to Home page

• Link to Help

## ![](media/image26.png){width="6.749305555555556in" height="3.995138888888889in"}  {#section-58 .unnumbered}

## Technical Considerations {#technical-considerations .unnumbered}

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

**\
Frames**

Web pages should avoid the use of frames. In addition, these pages
should not be loaded into frames of other Web sites. A script should be
provided to detect when and if this happens. The script will be
responsible for breaking the page in question out of the confines of the
frame.

**Platforms / Operating Systems**

At minimum, all Web pages must be accessible on the following Operating
Systems:

• Microsoft Windows (95/98, NT, 2000, XP)

• Macintosh (OS 8.5+, OS 9.x, OS X)

• UNIX/Linux

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

**Web Browsers**

At minimum, the following common Web browsers must be supported:

• Netscape Version 6.x

• Netscape Version 7.x+

• Internet Explorer Version 5.x+

• Safari Version 1.0 (Macintosh)

Note: The XHTML 1.0 Transitional W3C standards should be adhered to when
designing templates. Users who are not using common browsers (AOL,
Opera, Mozilla, etc.) may experience minor differences in look and feel,
since all browsers do not follow the W3C guidelines to exact
specifications for HTML, XML, etc.

**Accessibility Considerations**

Web pages that require an applet, plug-in, or other application to be
present on the users' machine to

interpret page content must provide a link to the necessary application.
If users choose not to install the applet or plug-in, the Web page
should still be able to viewable 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, and 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 FSIS to adhere to the Web Presence standards.

In order to adhere to accessibility requirements, all pages must be
viewable without the use of style sheets. CSS classes are defined in
section 3.1 Fonts of this document.

Technical Considerations continued

**Screen Size and Bit Depth\
**All pages should be designed for a minimum of 800 x 600px screen
resolution with consideration of the navigational bars that each Web
browser contains (i.e.., top header icons, status bar, and right side

scrollbars).

The minimum color bit depth for your site should be 16-bit (65,536
colors). All color palettes described in

this Style Guide adhere to a 16-bit color depth.

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 Kbps 35 KB/sec and upwards

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

# Templates

The following fifteen designed pages were chosen to provide you with
examples of virtually every component you might need in building new
FSIS 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

##  {#section-59 .unnumbered}

##  {#section-60 .unnumbered}

##  {#section-61 .unnumbered}

##  {#section-62 .unnumbered}

##  {#section-63 .unnumbered}

##  {#section-64 .unnumbered}

##  {#section-65 .unnumbered}

##  {#section-66 .unnumbered}

##  {#section-67 .unnumbered}

##  {#section-68 .unnumbered}

##   {#section-69 .unnumbered}

## Homepage Template

This template is used primarily to create the FSIS Homepage. Its unique
characteristics include the agency tagline graphic and a particular
construct for featuring content in the center content area. This
template is also used when creating Footer pages.

The FSIS home page contains the following areas of information:
Introduction Text, In the News, I Want To, Promotion Area, and
Spotlight: Fact Sheets.

![](media/image27.png){width="6.0in" height="3.4402777777777778in"}

##  {#section-70 .unnumbered}

##  {#section-71 .unnumbered}

##  {#section-72 .unnumbered}

##  {#section-73 .unnumbered}

Template Components

1\. Introduction Text

The *Introduction Text* is slightly larger than other body text on the
Web site. It can be used as an introduction to your agency or a mission
statement. The Introduction can be two to four lines in length.

**Attributes:** Font: Verdana Regular / Size: 16px / Color: \# 4D8544 /
Text-Decoration: none / Hover: none / Image: fsis_mission.gif / Width:
368/ Height: 70px / Cutsheet Name: text_intro.psd

2\. I Want To

This is a section in the Right Navigation Column that lists common and
important tasks relevant to FSIS, such as *Ask a Food Safety Question,
Locate an FSIS Office, Download an FSIS Form, Subscribe to Newsletters,
Schedule a Food Safety Mobile Visit,* etc. Topics should be limited to a
maximum of ten.

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

Homepage Template continued

various tasks.

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

3\. In the News

This section highlights the top two current news releases and should be
updated frequently. 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 end 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: 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

4\. 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 USDA and FSIS programs. The messages promoted in this
area are temporary and will be updated on a regular basis.

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

**Attributes:** Text: "Questions about food safety? Ask Karen" / Font:
Helvetica Medium /\
Size: 15px / Color: #FFFFFF / Rollover: none / Rollover Color: none /
Image: l_c_promotion_questions.gif /\
Width: 188px / Height: 153px / Cutsheet Name: promotion.psd

5\. Spotlight: Fact Sheets

*Spotlights* contain important programs that will appear on the homepage
for a longer period of time than\
*News & Events*. 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: "Spotlight: Fact Sheets" / Font: Helvetica Medium /
Size: 15px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: content_head_spotlight_facts.gif / Width: 368px /\
Height: 23px / Cutsheet Name: subheads.psd

B. Headlines

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

Homepage Template continued

underline

C. Body text

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

## Landing Page #1 Template

The Landing Page #1 Template will primarily be used as a first or second
level page as its primarily feature is its use of multiple links in the
center content area. This template lists featured items in two columns
at the top of the page, and in a single column further down the page.

## ![](media/image28.jpeg){width="6.0in" height="3.4520833333333334in"} {#section-74 .unnumbered}

##  {#section-75 .unnumbered}

##  {#section-76 .unnumbered}

##  {#section-77 .unnumbered}

> Template Components

1\. Section Bar

> The *Section Bar* appears on all second and third-level pages. The
> *Contact Us* Section Bar color is #B32F01.
>
> **Overall Size:** Width: 565px / Height: 37px
>
> **Headings:** Text: "Contact Us" / Font: Helvetica Medium / Size: 24px
> / Color: #FFFFFF / Image: topics_head_services.gif / Width: 565px /
> Height: 37px / Cutsheet Name: section_heads.psd

Landing Page #1 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. 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 right navigation is not required. Sometimes a *More*
> button will appear in the right margin of the bar.
>
> **Overall Size:** Width: 368px / Height: 23px
>
> **Headings:** Text: "Toll Free Information Lines and Other Resources"
> / Font: Helvetica Medium / Size: 15px /\
> Color: #00000 / Rollover: none / Rollover Color: none / Image:
> content_head_tollfree.gif /\
> Width: 368px / Height: 23px / Cutsheet Name: subheads.psd
>
> **Other Headings:** Text: "Electronic Mailboxes Available" / Font:
> Helvetica Medium / Size: 15px /\
> Color: #000000 / Rollover: none / Rollover Color: none / Image:
> content_head_electronicmail.gif / Width: 368px / Height: 23px /
> Cutsheet Name: subheads.psd

3\. 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 UDSA and FSIS programs. The messages promoted in
> this area are temporary and will be updated on a regular basis.
>
> **Overall Size:** Width: 188px / Height: 134px
>
> **Attributes:** Text: "Learn more about the USDA Veterinary Student
> Program" / Font: Helvetica Medium /\
> Size: 15px / Color: #FFFFFF / Rollover: none / Rollover Color: none /
> Image: l_c_feature_vet.gif /\
> Width: 188px / Height: 153px / Cutsheet Name: promotion.psd

##   {#section-78 .unnumbered}

## Landing Page #2 Template

This template is used primarily for second and third-level pages for
users who have used the *Browse by Subject* menu from the homepage. This
template list featured items in a single column with accompanying
thumbnail images, and lists subsequent links in a single column further
down the page.\
All *Browse by Subject, Browse by Audience, and most Global Navigation*
menu pages utilize this template.

![](media/image29.png){width="6.0in" height="3.2881944444444446in"}

##  {#section-79 .unnumbered}

Template Components

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The
*Science* Section Bar color is #4D8544.

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

**Headings:** Text: "Science" / Font: Helvetica Medium / Size: 24px /
Color: #FFFFFF /

Image: section_heads_science.gif / Width: 565px / Height: 37px /
Cutsheet Name: section_heads.psd

2\. Introduction Text

The *Introduction Text* is slightly larger than other body text on the
Web site. It can be used as an introduction to your agency or a mission
statement or subject area. The Introduction can be two to four lines in
length.

**Attributes:** Font: Helvetica Medium / Size: 15px / Color: \# 666666 /
Text-Decoration: none / Hover: none / Image: text_intro_mission.gif /
Width: 368/ Height: 54px / Cutsheet Name: text_intro.psd

3\. Science

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: Bulleted
list of various topics.

## Landing Page #2 Template continued {#landing-page-2-template-continued .unnumbered}

**Navigation Headings:** Text: "Food Safety Education" / Font: Helvetica
Medium / Size: 14px / Color:

#313131 / Rollover: none / Rollover Color: none / Image:
l_c_head_foodsafety.gif /\
Width: 188px / Height: 23px / Cutsheet Name: nav_columns.psd

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

4\. I Want To

This is a section in the Right Navigation Column that lists common and
important tasks relevant to FSIS such as *Ask a Food Safety Question,
Locate an FSIS Office, Download an FSIS Form, Subscribe to Newsletters,
Schedule a Food Safety Mobile Visit,* etc. Topics should be limited to a
maximum of ten.

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

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 About USDA and FSIS programs. The messages promoted
in this area are temporary and will be updated on a regular basis.

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

**Attributes:** Text: "Learn more about the USDA Veterinary Student
Program" / Font: Helvetica Medium /\
Size: 15px / Color: #FFFFFF / Rollover: none / Rollover Color: none /
Image: l_c_feature_vet.gif /\
Width: 188px / Height: 153px / Cutsheet Name: promotion.psd

## Text with Inset Template

This template shows an example of how a page with a related news or
event can be formatted and displayed. An inset will display this content
in the center content area, with text from the primary page content
wrapping around the featured box.

## ![](media/image30.png){width="5.929861111111111in" height="3.2916666666666665in"} {#section-80 .unnumbered}

##  {#section-81 .unnumbered}

##  {#section-82 .unnumbered}

##  {#section-83 .unnumbered}

##  {#section-84 .unnumbered}

Template Components

Inset

This template shows how a text table can be inserted into the Content
Area on a page. Insert items should be aligned with the right margin of
the Content Area.

Attributes: Border: 1px / Border Color: #666666 / Background Color:
#E7ECF2

## Text with Image Template

This template shows an example of how a page with a related image can be
formatted and displayed. A thumbnail image can be displayed within the
content in the center content area, with text from the primary page
content wrapping around the image.

![](media/image31.png){width="6.05in" height="3.292361111111111in"}

> **Template Components**

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The
*About FSIS* Section Bar color is #333366

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

**Headings:** Text: "About FSIS" / Font: Helvetica Medium / Size: 24px /
Color: #FFFFFF Image: section_head_about.gif / Width: 565px / Height:
37px / Cutsheet Name: section_heads.psd

2\. FSIS Biographies

This section contains a detailed biography of a FSIS administrator.

A. Headline bars

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

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

B. Headlines

Text with Image Template continued

**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\. Image and Caption

An image may be displayed with a FSIS Biography and may include a one to
two-line HTML caption\
under the image. 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

## List Template

This template allows for multiple pages of content to be accessed from a
drop-down menu. The center content area is primarily used to display
content formatted into a list, but can be used to display general text
as well.

![](media/image32.png){width="5.990277777777778in"
height="3.292361111111111in"}

Template Components

1\. Section Bar

*Section Bars* appear on all the second and third-level pages. The
*Help* section bar color is #BD6701

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

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

> List Template continued

2\. Glossary

This page contains a glossary of terms listed in alphabetical order.

A. Headline bars

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

**Headings:** Text: "Glossary" / Font: Helvetica Medium / Size: 15px /
Color: #000000 / Rollover: none / Rollover Color: none / Image:
content_head_glossary.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. Images

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

3\. Drop-Down Menus

The *Glossary* page has a *Drop-Down Menu* enabling the user to select
pages of glossary terms alphabetically.

**Menus:** "A - Z"\
**Attributes:** Font: Verdana Regular / Size: 10px / Color: #000000\
**Default:** \"A\"

## List with Images Template

This template can be used to display a listing of featured items with an
accompanying thumbnail image. The content area is arranged so that
images are displayed in the left column, while their related text is
displayed in the right column.

## ![](media/image33.png){width="6.05in" height="3.2916666666666665in"} {#section-85 .unnumbered}

##  {#section-86 .unnumbered}

##  {#section-87 .unnumbered}

##  {#section-88 .unnumbered}

##  {#section-89 .unnumbered}

##  {#section-90 .unnumbered}

Template Components

1\. Section Bar

*Section Bars* appear on all the second and third-level pages. The *News
& Events* section bar color is #707F94.

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

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

> List with Images Template continued

2\. Image & Video Libraries

This section displays a maximum of ten listings. *Image & Video
Libraries* headlines are specified as bold HTML links. Use of imagery or
a summary is optional. Sometimes a *More* button will appear in the
right margin of the bar.

A. Headline bars

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

**Headings:** Text: "Image & Video Library" / Font: Helvetica Medium /
Size: 15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_imagelibrary.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

## Table Template

This template utilizes a table to display content in the center content
area. In this template, the table fits entirely within the center
content area, so it should only be used for instances where there is not
as much content that needs to be displayed, or the content can be placed
into a table with a small number of rows.

## ![](media/image34.png){width="6.05in" height="3.292361111111111in"} {#section-91 .unnumbered}

##  {#section-92 .unnumbered}

##  {#section-93 .unnumbered}

##  {#section-94 .unnumbered}

##  {#section-95 .unnumbered}

##  {#section-96 .unnumbered}

Template Components

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The *FSIS
Recalls* Section Bar color is #4D8544.

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

**Headings:** Text: "FSIS Recalls" / Font: Helvetica Medium / Size: 24px
/ Color: #FFFFFF Image: topic_head_recalls.gif / Width: 565px / Height:
37px / Cutsheet Name: section_heads.psd

> Table Template continued

2\. Open Federal Cases

This section contains summary data on active recall cases.

A. Headline bars

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

**Headings:** Text: "Open Federal Cases" / Font: Helvetica Medium /
Size: 15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_opencases.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\. Open Federal Case Table

*Open Federal Cases* are formatted in a three-column table organized by
*Product, Date,* and *Press Release.*\
Each product is a HTML link. Dates are given in descending order from
the current date.

A. Headline

**Overall Table Size:** Width: 368px

**Headings:** Text: "Open Federal Cases" / Font: Helvetica Medium /
Size: 15px /\
Color: #FFFFFF / Rollover: none / Rollover Color: none / Background Cell
Color: #717F94

B. Recall (RNR), Product Recall

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none /\
Background Cell Color: \# E7ECF2\
**Listing Attributes:** Font: Verdana Regular / Size: 11px / Color:
#000099 / Text-Decoration: none /\
Hover: underline

C. Date

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none /\
Background Cell Color: \# E7ECF2\
**Listing Attributes:** Font: Verdana Regular / Size: 11px / Color:
#000000 / Text-Decoration: none /\
Hover: none

D. Press Release

**Attributes:** Font: Verdana Bold / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none /\
Background Cell Color: \# E7ECF2\
**Listing Attributes:** Font: Verdana Regular / Size: 11px / Color:
#000099 / Text-Decoration: none /\
Hover: underline

## Table with No Right Navigation Template

This template also allows for the creation of a table to display
content; however, the table in this instance is much larger.
Consequently, the Right Navigation column is deleted, and the left
navigation column is modified in order to include sublevels of
information.

![](media/image35.png){width="6.029861111111111in"
height="3.2916666666666665in"}

##  {#section-97 .unnumbered}

##   {#section-98 .unnumbered}

##  {#section-99 .unnumbered}

Template Components

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The *FSIS
Recalls* Section Bar color is #4D8544.

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

**Headings:** Text: "FSIS Recalls" / Font: Helvetica Medium / Size: 24px
/ Color: #FFFFFF Image: topic_head_recalls.gif / Width: 565px / Height:
37px / Cutsheet Name: section_heads.psd

> Table with No Right Navigation Template continued

2\. Closed Federal Cases

This section contains summary data on closed recall cases.

A. Headline bars

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

**Headings:** Text: "Closed Federal Cases" / Font: Helvetica Medium /
Size: 15px / Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_closedcases.gif / Width: 565px /\
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\. Menu Selected State

This is an expanded view of the Left Navigation. If the user chooses
*FSIS Recalls* from the Left Navigation Column, the subject will expand
on the next screen as shown in this example.

**Overall Size:** Width: 171px / Variable Height / Content: "FSIS
Recalls" image sub-navigation items

**Navigation Headings:** Text: "FSIS Recalls" / Font: Helvetica Medium /
Size: 11px / Color: #FFFFFF / Rollover: underline / Selected State
Color: \# 4D8544 / Image: r_c_nav_recalls.gif / Width: 171px / Height:
22px / Cutsheet Name: nav_columns.psd

**Sub Topics:** Text: "Open Retail Ground Beef Cases\" / Font: Verdana
Regular / Size: 10px / Color: #000099 / Rollover: underline / Rollover
Color: none / Image: r_c_nav_sub_openbeefcases.gif / Width: 171px /\
Height: 27px / Cutsheet Name: nav_columns.psd

**Sub Topics:** Text: "Problems with Food Products \" / Font: Verdana
Regular / Size: 10px / Color: #000099 / Rollover: underline / Rollover
Color: none / Image: r_c_nav_sub_problemwithfood.gif / Width: 171px /
Height: 27px / Cutsheet Name: nav_columns.psd

**Sub Topics:** Text: "Additional Recall Links \" / Font: Verdana
Regular / Size: 10px / Color: #000099 / Rollover: underline / Rollover
Color: none / Image: r_c_nav_sub_addtionallinks.gif / Width: 171px /
Height: 16px / Cutsheet Name: nav_columns.psd

## Table Images Template

This template allows for the creation of a thumbnail images table. It is
an ideal page to utilize when creating large indexes of images.

![](media/image36.png){width="6.05in" height="3.292361111111111in"}

##  {#section-100 .unnumbered}

Template Components

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The *News
& Events* Section Bar color is \# 707F94.

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

**Headings:** Text: "News & Events" / Font: Helvetica Medium / Size:
24px / Color: #FFFFFF /\
Image: section_heads_news.gif / Width: 565px / Height: 37px / Cutsheet
Name: section_heads.psd

Table Images Template continued

2\. FSIS Images

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

A. Headline bars

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

**Headings:** Text: "FSIS Images" / Font: Helvetica Medium / Size: 15px
/ Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_fsisimages_nomore.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\. Image and Caption

Image and video libraries are listed by topic or by chronological order
with a two- to three-line HTML caption stating the name and file types.
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. Up to four images and captions may be displayed in each row.

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

## Expanded Image Template

This page shows how an enlarged or expanded image can be displayed. This
page will primarily be utilized to display larger versions of images
that are presented as thumbnail images elsewhere on the site.

## ![](media/image37.png){width="6.070138888888889in" height="3.2916666666666665in"} {#section-101 .unnumbered}

##  {#section-102 .unnumbered}

##  {#section-103 .unnumbered}

##  {#section-104 .unnumbered}

##  {#section-105 .unnumbered}

##  {#section-106 .unnumbered}

Template Components

1\. Section Bar

The Section Bar appears on all second and third-level pages. The *News &
Events* Section Bar color is \# 707F94.

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

**Headings:** Text: "News & Events" / Font: Helvetica Medium / Size:
24px / Color: #FFFFFF /\
Image: section_heads_news.gif / Width: 565px / Height: 37px / Cutsheet
Name: section_heads.psd

Expanded Image Template continued...

2\. FSIS Images & Content Area

A larger view of an image from the *Image & Video* library may be
displayed with a title and short description.\
All photos must include a one pixel black border.

A. Headline bars

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

**Headings:** Text: "FSIS Images" / Font: Helvetica Medium / Size: 15px
/ Color: #000000 /\
Rollover: none / Rollover Color: none / Image:
content_head_fsisimages.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 / Landscape Orientation: Width 300px,
Height 200px**\
Caption Attributes:** Font: Verdana Regular / Size: 9px / Color: #000000
/\
Text-Decoration: none / Hover: none

##   {#section-107 .unnumbered}

## Forms Template

This template allows for the creation of on-line forms that users can
utilize to register or subscribe for information.

## ![](media/image38.png){width="5.990277777777778in" height="3.292361111111111in"} {#section-108 .unnumbered}

##  {#section-109 .unnumbered}

##  {#section-110 .unnumbered}

##  {#section-111 .unnumbered}

##  {#section-112 .unnumbered}

##  {#section-113 .unnumbered}

Template Components

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The *News
& Events* Section Bar color is \# 707F94.

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

**Headings:** Text: "News & Events" / Font: Helvetica Medium / Size:
24px / Color: #FFFFFF /\
Image: section_heads_news.gif / Width: 565px / Height: 37px / Cutsheet
Name: section_heads.psd

Forms 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. 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: "Food Safety Educator" / Font: Helvetica Medium /
Size: 15px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: content_head_foodeducator_nomore.gif /\
Width: 368px / Height: 23px / Cutsheet Name: subheads.psd

3\. Body text

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

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

4\. Form fields

This is a standard HTML form field. See page **28** of *Style
Formatting* for more information on forms and Error Handling.

**Attributes:** Required fields are indicated by an \* / Size: 23
characters / Table Background Color: #E7ECF2

## Advanced Search Template

This template is only used to create the Advanced Search page. This
template allows for a Web user to search content within the redesigned
FSIS Web site, with the option of defining their search by category,
language, and modification date.

![](media/image39.png){width="6.070138888888889in"
height="3.2916666666666665in"}

##  {#section-114 .unnumbered}

##  {#section-115 .unnumbered}

##  {#section-116 .unnumbered}

##  {#section-117 .unnumbered}

##  {#section-118 .unnumbered}

Template Components

1\. Section Bar

The *Section Bar* appears on all second and third-level pages. The
*Advanced Search* Section Bar color is #4D8544.

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

**Headings:** Text: "Advanced Search & Search Tips" / Font: Helvetica
Medium / Size: 24px /\
Color: #FFFFFF Image: section_head_search.gif / Width: 565px / Height:
37px /\
Cutsheet Name: section_heads.psd

> Advanced Search 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. 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: "Search FSIS Web Site" / Font: Helvetica Medium /
Size: 15px / Color: #000000 / Rollover: none / Rollover Color: none /
Image: content_head_search.gif /\
Width: 368px / Height: 23px / Cutsheet Name: subheads.psd

3\. Search Criteria

The *Advanced Search* page contains a *Search Criteria Right
Navigation*, which aids the user when performing searches.

**Overall Size:** Width: 188px / Variable height /

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

4\. 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:** Location, Language, Date Modified
>
> **Attributes**: Type: Drop-Down / Values: \"All Catalogs...,Any
> Language..., 365 Days\"
>
> **Search String Attributes:** Type: text field / Size: 30 Characters

5\. Special Note

The *Advanced Search* page contains a Special Note Right Navigation
which aids the user when performing a search.

**Overall Size:** Width: 188px / Variable Height / Content: "Special
Note"

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

## Child Window Template

This template allows for a smaller browser window to be launched that
contains FSIS content. A best use for this template would be to display
individual slides from a presentation or an image from a slide show.

## ![](media/image40.png){width="5.629861111111111in" height="3.2875in"}  {#section-119 .unnumbered}

Te

Template Components

1\. Headline Bar

This *Headline Bar* is unique to the *child window template.* It extends
the length of the window.

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

**Headings:** Text: "News & Events" / Font: Helvetica Medium / Size:
15px / Color: #FFFFFF /\
Image: section_heads_child_newsandevents.gif / Width: 498px / Height:
21px /\
Cutsheet Name: section_heads.psd

2\. Images

An *Image* is a photo or graphic used to visually support content. An
Image 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:** required / Landscape Orientation: Width 250px, Height
180px

3\. Image Description (Body Text)

The *Image Description* provides information on the image, including
headline, caption, date, place and submitter.

A. Body text\
Attributes: Font: Verdana Regular / Size: 11px / Color: #000000 /
Text-Decoration: none / Hover: none

> Child Window Template continued

4\. Image Index

The *Image Index* indicates the position of the image in the series
contained in the Image Album.

A. Body text\
Attributes: Font: Verdana Regular / Size: 10px / Color: #000000 /
Text-Decoration: none / Hover: none

5\. Buttons

These buttons assist users to navigate the child window content.

**Navigations Headings:** Text: "Previous, Next and Close Window" /
Size: Helvetica Bold / Size: 11px / Color: #333333 / Height: 20px /
Variable width / Cutsheet Name: buttons.psd

## Print-Friendly Template

This template allows for a pop-up window to display a printer friendly
document.

> A best use for this template would be for documents that cannot be
> displayed with navigation, or to provide a ready-to-print alternative
> to an on-line document.

# ![](media/image41.png){width="5.980555555555555in" height="3.3090277777777777in"} {#section-120 .unnumbered}

#  {#section-121 .unnumbered}

#  {#section-122 .unnumbered}

#  {#section-123 .unnumbered}

#  {#section-124 .unnumbered}

#  {#section-125 .unnumbered}

Template Components

1\. Branding Area

This *Branding Area* is unique to the printer friendly documents. It
contains the Food Safety Inspection Service typography and the USDA
logo.

**Attributes:** Font: Helvetica Bold / Size: 20px / Color: #000000 /
Text-Decoration: none / Hover: none\
Image: masthead_printerfriendly.gif / Cutsheet Name: other_mastheads.psd

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

# Targeting FSIS Audiences

This chapter provides users of the Style Guide, such as Web designers,
developers, content providers, and content presenters, with an overview
of FSIS' target user audiences.

**Audience and Purpose\
**The FSIS Web audience comprises a diverse group of internal and
external audiences. The Style Guide will help FSIS on-line content
providers with a vehicle to ensure that important information is
effectively communicated on-line to the audiences that need it most.

**FSIS Employees\
**The employee user group represents all FSIS employees including agency
directors, managers and staff level personnel, field office personnel,
and office support staff. This is one of the largest segments of the
online user population. It is also one of the most divided.

> Individuals working in more traditional desk positions in the
> Department Headquarters building make up about 20% of the employee
> population. Inspectors and field office personnel make up the
> remainder of the group. Approximately 7,000 of the 9,000+ agency
> employees are inspectors, veterinarians, and other members of the
> field office workforce.
>
> Inspectors can be further divided into two distinct groups. The first,
> and larger of the two, includes those laborers who actually work on
> the processing plant floor. They are the unionized employees charged
> with the careful monitoring of plant processes and products. These
> individuals have almost no opportunity to access the Web. The second
> inspector group includes those employees who hold a degree in food
> science or are tenured members of the FSIS inspection staff. They are
> managers, veterinarians, and other field office specialists. These
> individuals do not belong to a union, and as a result of having been
> employed by FSIS for a longer period of time, are more experienced and
> better compensated for their work.
>
> The attitude of employees towards the use of the Internet to conduct
> services is varied. Employees staffed in the Department Headquarters
> enjoy the convenience and speed of conducting business online. Field
> employees however, are frustrated by lack of access and slow
> connection speeds. These individuals often do not have e-mail
> addresses, Internet training, or the desire to access electronic
> resources. This is a significant agency challenge.
>
> With the growth of eGovernment across the Enterprise, FSIS is moving
> toward an automated application and hiring process. This shift opens
> up the employee audience group to include prospective agency employees
> and job applicants.
>
> This group desires:

-   Ready access to directives, regulations, notices, and other industry
    news and updates,

-   Regulations documenting government mandates to be imposed on the
    plant floor,

-   Information on training, classes, and activities,

-   Access to workplace violence prevention information, a calendar of
    meetings and events, backgrounders, speeches, the strategic plan,
    and consolidated benefits information on health care, child care,
    and retirement planning,

-   Resources, research and communications about their careers,
    responsibilities, agency services, programs, and opportunities,

-   Concise position descriptions, compensation information, and
    application procedures.

> Targeting FSIS Audiences continued
>
> **Advocacy Groups**
>
> The advocacy group users are members of consumer groups, special
> interest groups, non-government associations and religious
> organizations. They are researching and contacting FSIS in response to
> a specific cause. Members of advocacy groups are often passionate
> activists and tend to be involved, energetic, and vocal in
> transactions with both the agency and the public. This group can also
> be largely adversarial in dealings with the agency.
>
> Consumers from the advocacy segment typically hold a 4-year college
> level degree. They tend to be well-educated and passionate on specific
> subject areas.
>
> Most members of advocacy groups have Internet access from either home
> or work, and use it regularly. These users are more motivated and
> issue savvy than the majority of the general public. They will
> frequent the FSIS Web site to research regulations, policies, and
> general interests.
>
> This group desires:

-   Information on regulations, directives, FOIA, recalls, press
    releases, plants, speeches, labeling, upcoming meetings, and new
    technologies.

> **Agribusiness Professionals**
>
> Agricultural producers are non-farm agriculture related business
> owners, managers and employees. They look to FSIS for guidance on
> regulations, policy, and legislation. Like members of advocacy groups,
> these users also tend to see FSIS as a bit of an adversary because of
> the agency's responsibility to enforce regulations and sometimes
> institute penalties that negatively affect business margins.
>
> The leadership of non-farm agriculture related businesses is a
> well-educated group. Additionally, according to the Bureau of Labor
> Studies, the agricultural industry is predominately male, with
> approximately 25% of the population being female. These business
> professionals are goal oriented and business minded.
>
> Most business professionals access the Internet regularly from home or
> work. These users are motivated to interact with the agency and access
> information from the FSIS Web site because the health of their
> businesses depends upon compliance with agency regulations. They will
> frequent the FSIS Web site to research regulations, business needs,
> and general interests.
>
> This group desires:

-   Press releases, labeling requirements, and regulatory information.

-   Licensing information for opening a new plant, as well as
    newsletters, and information on district offices and tech centers.
    Accessing the training programs available to FSIS inspection
    employees online.

-   HACCP information, state partnership information, and a concise FSIS
    contact list.

-   Information on imports and exports.

> Targeting FSIS Audiences continued
>
> **General Consumers**
>
> FSIS serves all 285 million Americans. Though food safety and public
> health services are often transparent to the consumer, agency
> functions help ensure the security of the food supply in the United
> States each day.
>
> More directly, FSIS online users include citizens interested in
> general food safety information, as well as those that have
> experienced a specific problem with their food and need to contact the
> Meat and Poultry Hotline for next steps.
>
> 58% of American Internet users, or 68 million adults, have visited at
> least one government Web site, and most have visited more than one.
> From that statistic alone it is evident that the general public
> provides a large audience base for the Web sites of government
> agencies like FSIS.
>
> At 13% of the overall population, the 37 million Hispanic residents of
> the United States represent an important minority. Roughly half are
> fluent in both English and Spanish, while half are Spanish dominant.
> About 50% of Hispanics remain concentrated in Texas, California, and
> New York. 54% of Hispanics live in the suburbs.
>
> Because of the continuing prevalence of the Internet and other
> technologies in American society, the general public is becoming
> increasingly more comfortable with turning to online resources to
> access information and services. Further, these people tend to trust
> the information they receive from official Web sites such as FSIS.
>
> This group desires:

-   Specific information, or seeking to fill an identified need.

-   Recall information, outbreak information

-   USDA Meat and Poultry Hotline contact information

-   information about public events and meetings.

-   general information about FSIS, such as a description of program
    areas, news, hot topics, and food safety information.

> **Children and Caregivers**
>
> This user group includes students and children who access the FSIS Web
> site for food safety information. For younger Americans, conducting
> research on the site is often prompted by a school project or homework
> assignment. The youngest
>
> viewers in this group may access the site with a parent or guardian.
>
> According to the U.S. Census there are approximately 60 million
> school-aged children in the United States. The level of education, and
> reading and cognitive abilities for this group varies by age. Again,
> the typical student is largely unaware of the programs and services
> offered by FSIS, and the benefits of these services to the American
> people.
>
> Currently, children make up one of the smaller user groups of FSIS
> online. However, government agencies are being increasingly encouraged
> to create educational and entertaining Web pages for children. Perhaps
> with this new emphasis, more children will come to the site and learn
> about food safety.
>
> The Internet has the potential to be a strong educational tool for
> children in the United States. In particular, young children with
> Internet access are enthusiastic about using the Web as a resource.
> FSIS could take advantage of this enthusiasm and provide more
> interactive food safety education tools to members of this user group
> online.
>
> This group desires:

-   Information in order to complete a homework assignment or some other
    assigned task

-   Games and puzzles for younger users.

> Targeting FSIS Audiences continued
>
> **Press and Media**
>
> Users in this group are writers, reporters, freelance journalists, and
> other media professionals working for radio, television, and newspaper
> producers.
>
> This audience group is well-written and well-spoken. Their ability to
> intelligently deliver news and information often makes them
> influential to the general public. Their minimum level of education is
> a 4-year college degree. Media professionals are motivated,
> persistent, and work on a deadline. These users seek information on a
> need-to-know basis. While accurate research is critical to publishing
> strong spots and columns, these users do not want to spend a
> significant amount of time searching for data.
>
> Almost all members of the media have desktop or laptop computers in
> their offices and homes. They are technically savvy, use email
> extensively, and go to the Internet regularly for research and
> personal purposes.

This group desires:

-   to verify information, provide background, and add hard facts to
    stories and primary source material.

```{=html}
<!-- -->
```
-   an objective source of food safety and recall information.

-   to spend less time searching and more time formatting facts for
    personal analysis.

-   recall information, press releases, speeches, notices, regulations
    and directives, upcoming events, and high-resolution photos.

> **Educators, Academia**
>
> This user group is comprised of individuals from a broad cross section
> of the education community. For example users include K-12 educators
> teaching a food safety curriculum in public and private schools. Also
> included are teaching professionals and researchers that desire
> focused material in a particular area of interest---perhaps public
> health or food science. The group includes university-based
> professionals working in scientific fields such as human nutrition,
> food science, biology, veterinary medicine, and public health.
>
> Moving beyond the more traditional definitions of academic users, this
> group also includes student teachers, or adult and teen leaders
> teaching in non-classroom settings such as the 4-H club, Boys and
> Girls Club, and YMCA. Lastly, a relatively large segment of the FSIS
> online visitor population is school cafeteria staff and food
> preparers. These individuals are concerned with providing safe school
> lunches to students in the United States.
>
> These users email extensively, access the Internet daily and have
> computers that allow them to take advantage of advanced applications.
> They are comfortable, and in many cases prefer, transacting business
> online. The challenge therefore, is not accessing the Internet but
> rather locating needed, wanted, and applicable information.
>
> This group desires:

-   to update their curriculum and teaching materials, benefit from free
    or low-cost teaching aides and lesson plans, research related topics
    for lectures, projects, and papers

-   stay informed on current agency updates that could potentially
    impact the health of their students.

-   these individuals also desire presentations, videos, FSIS training
    materials including HACCP information, and a link to information on
    the school lunch program.

> Targeting FSIS Audiences continued
>
> **Scientists, Researchers, Laboratories**
>
> This group is comprised of scientists, researchers, and laboratories
> interested in food science information including new policies,
> technologies, and processes.
>
> These scientists and researchers are driven by the pursuit of
> discovery. They want to be able to access information that will allow
> them to accurately test samples, further their own studies, or test a
> hypothesis. These users are researching FSIS data to use in writing
> technical articles, support advocacy arguments and suits against the
> agency, and ensure compliance with defined regulations. The majority
> of these users have the minimum of a 4-year college level degree. Many
> have or are working toward more advanced graduate degrees.
>
> Scientists and researchers are highly educated and technically savvy.
> They use email extensively, and access the Internet regularly for
> research, and personal purposes.
>
> This group desires:

-   information regarding testing methods and processes, contracting for
    FSIS, industry compliance, technical data and FSIS issued notices
    and directives.

-   access to any available research summaries and publications.

> **International Users**
>
> The international user group consists of businesses, and foreign
> governments involved with importing or exporting of meat, poultry, or
> egg products to the United States.
>
> There are currently 32 countries that export FSIS regulated products
> to the US. The individuals involved in maintaining these trade
> relationships are educated members of foreign industry and foreign
> government. While a significant number of these international users
> come from Spanish speaking countries, they do tend to have strong
> English speaking skills.
>
> Individuals from foreign production establishments and foreign
> governments tend to have occupations in which they have frequent
> access to the Web and other electronic applications. These users are
> generally comfortable with conducting business online, especially in
> international interactions.
>
> This group desires:

-   seeking approval to become trade partners.

-   information on US import regulations, labeling requirements, customs
    requirements, re-inspection guidelines, equivalence requirements and
    equivalence audit results, and listings of countries and businesses
    approved for international trade.

-   access the site for information on Codex Office responsibilities,
    activities, and upcoming meetings.

> Targeting FSIS Audiences continued
>
> **Congress, State and Federal Government**
>
> Functional dependencies exist between FSIS, public health agencies
> with related missions, and local, state, and federal government
> organizations. While individuals from other public sector groups are
> secondary consumers of agency information, they must not be
> overlooked.
>
> Sister public health agencies include CDC, FDA, EPA, and APHIS. Each
> is charged with protecting the food supply at some point along the
> farm to table continuum. Also part of the public sector, 28 states are
> responsible for inspecting local meat and poultry production plants.
> State inspection programs are audited by FSIS and must adopt
> applicable FSIS regulations and directives.
>
> Members of other governmental agencies and organizations tend to come
> to FSIS with very specific needs. Therefore, these users desire quick
> access to desired information. Because they tend to be comfortable
> with government processes, they will not hesitate to contact agency
> resources directly rather than spend time searching unsuccessfully.
>
> As is evident across all audience groups, Internet use is varied among
> governmental employees. Those individuals that work in traditional
> desk positions have easy access to online resources. However, state
> inspection employees, like field office officials, have very little
> opportunity to access Internet based information and services.
>
> This group desires:

-   to understand FSIS, as well as the integration points between
    related agencies.

-   background information on FSIS, including mission, responsibilities,
    organizational structure, and contact information.

-   information on regulations, inspection requirements, procedures, and
    training.

> **Healthcare Providers**
>
> These individuals are responsible for the health of American citizens
> each day. As a result they need to be informed about medical
> conditions including the occurrence, symptoms of, and cures for
> foodborne illnesses.
>
> Healthcare professionals represent one of the smaller audiences of
> FSIS online. However, the information that they seek from the Web site
> is critical to the well-being of their patients. These users are
> well-educated, and are motivated to be informed on the issue of public
> health.
>
> Almost all healthcare professionals have access to a desktop or laptop
> computer in their home or office. However, their time online during
> the day might be limited if they are responsible for patient
> appointments.
>
> This group desires:

-   to update themselves on issues related to food science and health.

-   general information about the diagnosis and treatment of foodborne
    illness, a subject in which they are not necessarily well versed.

-   to receive alerts in cases of emergencies, outbreaks, or wide-spread
    health incidents.

-   Information regarding the USDA Meat and Poultry Hotline, public
    health service information, and lab reports.

# 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 this
Style Guide serves to help FSIS 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 or application 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.

## 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 guide 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 users 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
in the users' 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,
your job is to place text and graphics in an order that mirrors users'
expectations.

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

##   {#section-126 .unnumbered}

##  Crafting Text continued

**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 readers'
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 a computer screen tires the eyes. Some
statistics even indicate that

reading from a Web site is approximately 25% slower than reading print.
Web users generally do not read word for word; they scan.

Given the nature of the Web, the sophistication of today's search engine
and users' short attention span, users will commonly visit more than one
site in search of what they need. Be mindful of this and remember that
burying information will cause you to lose your users' 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

expected structures, such as headers and graphics, to help readers
anticipate the content for any given page.

The GPO Style Manual (Government Printing Office Style Manual) can help
you do that. 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 an act of Congress, is considered the Public
Printer of the U.S. Government Printing Office. It is authorized to
determine the form and style of Government printing except in the cases
of press releases, media

advisories, or program announcements. 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.

On some matters of Grammar and Usage, the *GPO Manual* suggests you
refer to the Chicago Manual of Style. Many writers and editors consider
the *Chicago Manual of Style* 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
users in mind. You know from

experience that Web readers want text that is clear, concise, and
engaging.

**Make text concise.**

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 readers out before they feel
satisfied with the

information they have gathered from you.

-- Work against the urge to fill space by adding unnecessary text.
Remember, "less is

more." The shorter the amount of time it takes your audience to achieve
their goals, the

higher their satisfaction levels.

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?

Joseph Williams, Style: Ten Lessons in Clarity and Grace (New York:
Addison Wesley, 2002).

Guidelines for Ensuring Clarity continued

Change negatives to affirmatives.

-- If you write in negatives, people generally turn the sentence around
in their heads 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

**Help readers read the text.**

Seventy-nine percent of people scan Web pages instead of reading them
word for word. This poses a

challenge for you to develop your pages to place emphasis on key points
and concepts. Here are a few

ways to improve the readability of your pages for Web users.

-   Bulleted and numbered lists slow down the scanning eye and help draw
    attention to important

> points.

-   You can include a greater number of lists on a Web page than on a
    printed paper page.

-   Use numbered lists when the order of entries is important.

-   Use unnumbered lists whenever the sequence of the entries is not
    important.

-   Limit the number of items in a single list to no more than nine.

-   Generally, limit lists to no more than two levels: primary and
    secondary.

-   Each paragraph should contain one main topic. A second paragraph
    should be used to highlight a

> second idea, since users tend to skip over the second point while
> scanning the paragraph.

-   Start your pages with a conclusion and a short summary to help users
    know what to expect further

> down the page.

# Accessibility Guidelines

> This section introduces Federal Section 508 Accessibility Guidelines
> and provides direction for
>
> incorporating accessibility and usability research that is available
> on-line.
>
> **Section 508 Accessibility Guidelines**
>
> Section 508 (amendments to the Federal Rehabilitation Act),
> implemented in June 2001, and requires
>
> Federal agencies to make their Web sites accessible to people with
> disabilities. Section 508 contains 16
>
> specific technical requirements for Web sites. 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, 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 instead of server-side maps, because they are
> accessible if you provide "alt" text for each
>
> link describes links within each active region of the map.
>
> **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.
>
> Accessibility continued
>
> **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)
>
> 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
> opportunity to indicate if they need more time to complete and submit
> their information.
>
> Accessibility continued
>
> **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,
> especially those using 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. The value of creating a user focused
Web site or application far outweighs its investment.

**Usability Guidance\
**A federal site, www.usability.gov, provides broad information on
usability and accessibility. The site\
comprises original content, links to external Web sites, resources, and
articles.

This site provides current and accurate information on how to make
health-related information Web sites and other user interfaces more
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 addressed are:

> • What is usability?\
> • Why is usability important?\
> • What is the difference between usability engineering and usability
> testing?\
> • What steps are involved in usability?\
> • What is a usability test like?\
> • Do I need a lab to do usability testing?\
> • How many participants are needed for a usability test?\
> • How much does it cost to do usability testing?\
> • Why do iterative usability testing?\
> • How can you show that usability engineering 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 FSIS Web Redesign team.\
All information on past revisions is described in the area below.

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

  1.0               David Theis       3/22/04         First Version

  1.1               David Theis       3/29/04         Second Version

  1.2               Jennifer Murphy   4/1/04          Third Version

  1.3               David Theis       4/13/04         Corrected how "Web
                                                      site" was written in
                                                      three places in this
                                                      document
  ----------------- ----------------- --------------- --------------------

Contact Information

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

  ----------------- ----------------- ----------------- -----------------
  Name              Role              Phone \#          Mall

  Insert Names and                                      
  Contact Numbers                                       
  ----------------- ----------------- ----------------- -----------------

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

# Appendix continued {#appendix-continued .unnumbered}

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
>
> Note: For simple operations such as cropping, color adjustments, or
> resizing, agencies may use the image editor of their choice.