USDA Web Standards and Style Guide

Home , Arial

Version 1.1

Table of Contents

USDA WEB STANDARDS AND STYLE GUIDE 1

INTRODUCTION 3

1. FEDERAL LAWS AND REGULATIONS 4

2. OVERVIEW 4

3. OVERALL STYLE GUIDELINES 7 A. FONTS 7 B. LINKS 7 C. DOMAIN NAMES 8

4. REQUIRED ELEMENTS 8 D. COMMON ELEMENTS 8 E. HOMEPAGE STRUCTURE 14 F. LANDING PAGE (SUB PAGE) ATTRIBUTES 23

5. ACCESSIBILITY 27

6. MULTILINGUAL 28

7. SOCIAL MEDIA 28

8. PLAIN LANGUAGE 28

9. USABILITY 29

10. SEARCH ENGINE OPTIMIZATION1 30

11. RECORDS MANAGEMENT 30

12. CONTACT INFORMATION 30

Introduction

The USDA Web Standards and Style Guide was created to ensure a consistent look and feel for all USDA websites, and provide a seamless online experience for USDA customers who are potentially traveling across multiple USDA Agencies and Offices during their online sessions. Adherence to the Web Standards and Style Guide is a priority for the Secretary’s “One USDA” vision, and assists with the objectives for accomplishing that vision.

Every USDA website contributes to the user’s perception of the Department. To ensure a unified web presence, all official USDA websites and web pages should appear visually related to help reinforce the USDA’s brand identity. As part of a branding strategy, it is expected that all USDA branded websites will adopt the standards and style elements outlined in this document.

This guide should be used as a blueprint for building out your Agency and Office websites. Although consistency is important, this guide recognizes and takes into consideration the fact that USDA Agency and Office websites offer a different customer experience than USDA.gov based on many factors including missions and audiences. The design standards built into USDA.gov were developed in a way to allow flexibility for other USDA websites to incorporate the common look and feel while maintaining individual Agency and Office identity. With flexibility, however, it is required that all USDA websites conforming to the new look and feel be vetted through the Office of Communications prior to public launch to ensure adherence to the USDA Web Standards.

Throughout this document, you will find references and links to resources to USA.gov. USA.gov was created as a resource for Federal Web Managers as an aggregated source of best practices and information for creating and maintaining Federal websites. Rather than duplicate that information in this Guide, links to those resources are provided as those resources are updated regularly.

In addition, the USDA Web Standards and Style Guide is part of a larger Style Guide package for the Department. This complete guide includes branding style, writing style, print style, etc.

This Guide should also be treated as a “living” document. Although the majority of guidance and specifications outlined in this document are final and can be used to map out your Agency and Office websites, various resources will be updated on a regular basis. Always refer to the latest version on USDA Connect: http://connections.usda.gov

1. Federal Laws and Regulations

USDA websites should adhere to all applicable Federal laws and regulations. Laws and regulations have been listed on USA.gov.

Federal Laws and Regulations for Government Websites

2. Overview

USDA.gov has been developed using IBM RAD V 7.0 for IBM’s Websphere Portal V 6.2 environment. It uses standard theme CSS to control the general presentation of the website. USDA.gov’s content architecture is backed by an Oracle Database and managed by Oracle’s Universal Content Management System.

3. Overall Style Guidelines a. Fonts

Absolute font sizes, defined by Cascading Style Sheets (CSS), allow for the control of the font size that will be displayed to users in a Web browser. The downside to absolute sizes is the inability for users to control the size of the fonts on their screen. USDA.gov uses absolute fonts on the homepage to ensure a consistent screen size and to avoid distortion.

Relative font sizes allow the user to increase or decrease font sizes by changing the settings on a Web browser. Agencies can choose to provide this flexibility to users in the center content area, left navigation column, and footer of the page.

Fonts on USDA.gov are coded in a series, such as Arial, Helvetica, Sans Serif. This allows for browsers to use the first font that is available in the series; using the latter fonts when the previous fonts are unavailable.

The designated font for Titles, Headers and Section Titles is Arial.

The designated font for content text is Verdana. Verdana was chosen for its readability for large amounts of text.

The designated font for all graphical text is Helvetica.

b. Links

Links to third party websites outside of the .gov domain must explicitly indicate that the link goes to a nonfederal site/resource by one of the following:

• Identify the full URL of the destination link and open that website in a new browser window.

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

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

All links to non-Web information that are application-dependent (e.g. pdf files, Word documents) must display the file format name and

size. These links must open in a new browser window. The files launched must be in industry standard format so as not to impose a burden on the intended audience. Base your choice of file format on both the needs of your intended audience and the business needs of your agency.

Example: Link text (PDF; 1.3Mb)

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

c. Domain Names

All USDA Agency and Offices must follow the following syntax for the websites:

http://agencyname.usda.gov

Creation of new domains, although easily attainable, should always be vetted through the Office of Communications.

A “www” redirect must be put in place so that users typing in “www” before the Agency Name can resolve to the proper address.

4. Required Elements d. Common Elements Common elements are those that are static on all web pages of the USDA.gov website. Maintaining a static masthead and footer will ensure a consistent navigational path throughout the USDA.gov website and enhance the browsing experience by positioning navigational elements in areas that repeat throughout the website.

i. Logo and Department / Agency Title

The logo and Department name appear in the top left corner, flush with the corner of the masthead on every page.

Logo and Department name on USDA.gov

Logo and Agency name – Example

Attributes: Font: Helvetica Bold for Department name, 15px; Helvetica Regular for Agency name 18px; flush left or center depending on position of Department and Agency names

Logo filename: TBA

ii. Masthead Art USDA.gov uses a static masthead on all of its pages. The masthead incorporates the standard branding with the USDA logo, Department name, background image, and 3 functional navigation elements. Agencies can define the colors and background image for their websites.

iii. Navigation 1 – Main Tabbed Navigation Dropdown

The Main Tabbed Navigation acts as the primary navigation element on the masthead and all USDA pages. Agencies have flexibility on determining which menu items are appropriate for their agencies. Depending on real estate, Agencies also have the flexibility to add or remove menu items, however, the menu should not extend the length of the page and should not encroach upon the navigation elements for Search and Help.

For USDA.gov, the menu items are as follows:

• Topics – A list of topics selected from a larger A-Z website topic list that represent the over-arching topics or subject matter under the USDA umbrella. • Programs and Services – Items in this area represent a program or service that USDA provides. These items have been selected based on USDA’s Strategic Plan and the goals outlined. • Newsroom – A link to the USDA newsroom with Newsroom items listed in the dropdown box. • Blog – No dropdown. Link to blogs.usda.gov.

Attributes: Font Series: Arial, Helvetica, Sans Serif Bold Font Size: 12px Font Color: #ffffff Hover: #d0d0d0 Background filename: TBA Corner background filenames: TBA

Dropdown Menu

Attributes: Background color = #ffffff Font Series: Helvetica, Arial, Sans Serif Bold Font Size: 12px Font Color: # 005782 Hover: underline

iv. Navigation 2 – Informational Navigation

Attributes: Font Series: Arial, Helvetica, Sans Serif Bold Font Size: 11px Font Color: #ffffff Hover: underline Background filename: TBA

v. Navigation 3 – Search and Help Navigation

Attributes: Background color = #ffffff Font Series: Arial, Helvetica, Sans Serif Font Size: 11px Font Color: #000000 Hover: underline

Search Button filename: TBA

vi. Breadcrumbs (N/A on homepage) The Bread Crumb Trail is a navigation element 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 at any time.

Attributes: Background color = #ffffff Font Series: Arial, Helvetica, Sans Serif Font Size: 11px Font Color: #000000 Link Color: Default Hover: underline

vii. Stay Connected (Not including homepage) The Stay connected bar serves as a static point of reference to USDA social media tools.

Attributes: Background color = #ffffff Font Series: Arial, Helvetica, Sans Serif Font Size: 16px Font Color: #005782 Bold, Italic

Icon dimensions: Width = 27px, Height = 27px Icon filenames: TBA

viii. Footer

The Footer consists of two lines of HTML links.

Attributes: Background color = #000000 Font Series: Arial, Helvetica, Sans Serif Font Size: 11px Font Color: #ffffff

e. Homepage Structure

i. Area 1 – Popular Topics The Popular Topics area has been designated to highlight those topics that are of most interest and receive the most page views during a specified period of time. Interest can be determined by most requested pages, current events, and issues most requested through social media channels such as Facebook and Twitter. The purpose of the Popular Topics area separate from a larger Topics list is to provide immediate access to Topics and subject matter users are most likely to come to the website in search of.

This area also provides direct links to our main social media channels and a sign up box for our email distribution system.

Attributes: Background color = # f6f3e7 Border color = # e9dfb9

Header: Popular Topics Font Series: Arial, Helvetica, Sans Serif Font Size: 16px Font Color: #005782 Bold

Links Font Series: Arial, Helvetica, Sans Serif Font Size: 13px Font Color: #000000 Bold Hover: underline

Icon dimensions: Width = 37px / Height = 37px Icon filenames: TBA

Arrow filename: TBA Arch background filename: TBA

ii. Area 2 – Photo Carousel

The Photo Carousel is the main visual element of the USDA.gov homepage and represents the great work we do. The carousel features a diverse range of images, focusing on achievements and initiatives taking place within USDA, its Agencies and Offices. All photos are clickable and should have a destination, whether it’s a news release, blog, or web page. Links from the photo carousel should never link to an outside source.

USDA.gov rotates the photos based on a weekly schedule. Agencies have the flexibility to create their own rotation schedule or to reserve this space for a static image. Understandably, it can be challenging to feature new images on Agency websites on the same aggressive schedule as USDA.gov. It is up to each Agency to determine their rotation schedule.

Background color = # 277bb1 Border color = # e9dfb9 Photo Dimensions – 513px x 320px

Title text Font Series: Arial, Helvetica, Sans Serif Font Size: 12px

Font Color: #ffffff Bold Hover: underline

Description Text Font Series: Arial, Helvetica, Sans Serif Font Size: 11px Font Color: #000000

Arrow filenames: TBA

iii. Area 3 – News Feed, Center Content, and Key Initiatives

Background Color = #f3f3f3 Border size: 2px Border Color: #bbbbbb

News Feed

The News Feed area shows 3 tabs where news items are automatically fed from their respective sources. On USDA.gov, the blog feed is featured first, as our blog consistently receives more traffic than other news sources, followed by the News feed and Agency Reports. Agencies should determine how they will use this area but should concentrate on news items.

Active Tab Title Font Series: Arial, Helvetica, Sans Serif Font Size: 13px Font Color: #000000 Bold

Inactive Tab Title Font Series: Arial, Helvetica, Sans Serif Font Size: 13px Font Color: #ffffff Bold

Links Font Series: Arial, Helvetica, Sans Serif Font Size: 12px Font Color: #000000 Hover: underline Bulleted

Tab Background filename: TBA

Center Content

Information for: This area contains a list of audience driven content (the old Browse by Audience area).

Secretary’s Priorities: A list of topics and priorities identified by the Secretary.

Feature Graphic Area: This area of real estate is reserved to highlight important items in visual form.

Agencies can use the center content area as best needed for their Agency, however, the graphic feature should remain as an area to highlight important items.

Attributes:

Header: Information for / Secretary’s Priorities Font Series: Arial, Helvetica, Sans Serif Font Size: 14px Font Color: #005782 Bold

Links: Font Series: Arial, Helvetica, Sans Serif Font Size: 12px Font Color: #000000 Hover: underline Bulleted

Graphic Feature dimensions = 250px x 100px

Key Initiatives

Attributes: Font type: Arial, Helvetica, Sans-Serif Font size: 13px Font Color: #000000 Bold

Thumbnail dimensions = 50px x 37px Thumbnail files: TBA

iv. Area 4 – Mission Areas, Offices, or Agency Focus

The Mission Areas, and Offices area was created to allow users to quickly see a big picture of USDA’s core mission structure. Agencies can use this area to show their program areas, divisions or branches, or other organizational structure.

Attributes:

Title: Mission Areas and Offices Font type: Arial, Helvetica, Sans-Serif; Font size: 15px Font Color: #ffffff Bold

Font type: Arial, Helvetica, Sans-Serif; Font size: 14px Font Color: #ffffff Bold

Font type: Arial, Helvetica, Sans-Serif; Font size: 12px Font Color: #ffffff

Background filename: TBA

v. Agency Adaptation and Customizations

All areas are highly customizable for Agencies, however, adherence to this Guide is critical for Agency sites to have the same common look and feel as USDA.gov. Colors are also customizable and selection of colors will rest on the Agencies with final approval from the Office of Communications.

It is required that all USDA websites conforming to the new look and feel be vetted through the Office of Communications prior to public launch to ensure adherence to the USDA Web Standards. It is recommended that Agency’s provide OC with design drafts prior to redesigning Agency websites in order to ensure compliance early on in the process.

f. Landing Page (Sub Page) Attributes

The new landing pages for USDA.gov have been designed to maximize the real estate in the main content area and to minimizing scrolling.

In addition to the common navigation in the masthead, Left Column navigation has been added to help users navigate specific areas of the website.

i. Breadcrumbs (N/A on homepage) The Bread Crumb Trail is a navigation element 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 at any time.

Attributes: Background color = #ffffff Font Series: Arial, Helvetica, Sans Serif Font Size: 11px Font Color: #000000 Link Color: Default Hover: underline

ii. Stay Connected (Not including homepage) The Stay connected bar serves as a static point of reference to USDA social media tools.

Attributes: Background color = #ffffff Font Series: Arial, Helvetica, Sans Serif Font Size: 16px Font Color: #005782 Bold, Italic

Icon dimensions: Width = 27px, Height = 27px Icon filenames: TBA

iii. Left Column

Attributes: Background color = # f6f3e7 Border color = # e9dfb9

Header: Popular Topics Font Series: Arial, Helvetica, Sans Serif Font Size: 16px Font Color: #005782 Bold

Links Font Series: Arial, Helvetica, Sans Serif Font Size: 13px

Font Color: #000000 Bold Hover: underline

Arrow filename: TBA

iv. Center Content

Attributes:

Page Header Font type: Arial, Helvetica, Sans-Serif Font size: 18px Bold

Secondary Header Font type: Arial, Helvetica, Sans-Serif Font size: 15px Bold

Section Title Font type: Verdana, Arial, Sans-Serif Font size: 12px bold

Font type: Verdana, Arial, Sans-Serif Font size: 13px

5. Accessibility

What It Is Web accessibility is ensuring that persons with any disability type— including motor, auditory, cognitive, seizure/neurological, and visual impairments—are able to use web content, and ensuring that content is "perceivable, operable, understandable, and robust."

Why It's Important In creating an accessible experience, it's essential to understand the needs of each disability type and build agency sites accordingly. Doing so provides the opportunity for all citizens to participate in, and contribute to, the web.

Specific Requirements To meet the mandates of Section 508, content managers, developers, designers, and all those involved in building government websites, must endeavor to provide all U.S. citizens with timely, usable access to government information. As agencies have embraced the use of social media, more than ever, it's important that our users have the ability to interact with government at every level.

http://www.usa.gov/webcontent/accessibility/

6. Multilingual Providing appropriate access to people with limited English proficiency is one of the requirements for managing Federal websites. You need to determine how much information you need to provide in other languages, based on an assessment of your website visitors. Information on implementation and examples for Multilingual Websites can be found here:

Multilingual Websites

7. Social Media

New Media Policy pending.

8. Plain Language

Plain language (also called Plain English) is communication your audience can understand the first time they read or hear it. Language that is plain to one set of readers may not be plain to others. Written material is in plain language if your audience can:

• Find what they need; • Understand what they find; and • Use what they find to meet their needs.

There are many writing techniques that can help you achieve this goal. Among the most common are:

• Logical organization with the reader in mind • "You" and other pronouns • Active voice • Short sentences • Common, everyday words • Easy-to-read design features

No one technique defines plain language. Rather, plain language is defined by results—it is easy to read, understand, and use.

http://www.plainlanguage.gov/

9. Usability In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process.

A key methodology for carrying out usability is called User-Centered Design. Usability measures the quality of a user's experience when interacting with a product or system-whether a Web site, a software application, mobile technology, or any user-operated device. It is important to realize that usability is not a single, one-dimensional property of a user interface. Usability is a combination of factors including:

• Ease of learning - How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks? • Efficiency of use - Once an experienced user has learned to use the system, how fast can he or she accomplish tasks? • Memorability - If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything? • Error frequency and severity - How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors? • Subjective satisfaction - How much does the user like using the system?

http://www.usa.gov/webcontent/usability

10. Search Engine Optimization

Creating search-friendly web pages is called organic or free search engine optimization, meaning that web pages contain the details search engines seek, putting them up farther in search results without the web owner having to pay for this ranking.

http://www.usa.gov/webcontent/technology/search/optimization.shtml

11. Records Management

http://www.usa.gov/webcontent/reqs_bestpractices/laws_regs/web_record s.shtml

http://www.usa.gov/webcontent/reqs_bestpractices/omb_policies/records. shtml

12. Contact Information

Peter Rhee [email protected]

Amanda Eamich [email protected]