SOO_Attachment_L_-_USDA_Web_Standards_and_Style_Guide.pdf
PDF 1 MB Posted
- Solicitation number
- AG-7604-S-13-0033
About this file
Amendment 001 SOO Attachment L USDA Web Standards and Style Guide
View the file
Other files
Show all 29
On GovTribe
Work with this file
- Download the original file
- Contacts named in this file
- Similar government files
- Ask GovTribe AI about this file
Text version
USDA
Web Standards and Style Guide
Version 1.1
Table of Contents
USDA
WEB
STANDARDS
AND
STYLE
GUIDE
INTRODUCTION
1.
FEDERAL
LAWS
AND
REGULATIONS
2.
OVERVIEW
3.
OVERALL
STYLE
GUIDELINES
A.
FONTS
B.
LINKS
C.
DOMAIN
NAMES
4.
REQUIRED
ELEMENTS
D.
COMMON
ELEMENTS
E.
HOMEPAGE
STRUCTURE
F.
LANDING
PAGE
(SUB
PAGE)
ATTRIBUTES
5.
ACCESSIBILITY
6.
MULTILINGUAL
7.
SOCIAL
MEDIA
8.
PLAIN
LANGUAGE
9.
USABILITY
10.
SEARCH
ENGINE
OPTIMIZATION1
11.
RECORDS
MANAGEMENT
12.
CONTACT
INFORMATION
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 functional navigation elements.
Agencies can define the colors and background image for their websites.
iii. Navigation 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 Informational Navigation
Attributes:
Font Series:
Arial, Helvetica, Sans Serif
Bold
Font Size:
11px
Font Color:
#ffffff
Hover:
underline
Background filename:
TBA
v. Navigation 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.
USDA.gov Site Map Policies Links Our Performance
Report Fraud on
USDA
Contracts Visit
OIG
FOIA
Accessibility Statement Privacy Policy Non-‐ Discrimination Statement Information Quality USA.gov
Whitehouse.gov
Attributes:
Background color #000000
Font Series:
Arial, Helvetica, Sans Serif
Font Size:
11px
Font Color:
#ffffff
e. Homepage Structure
i. Area 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 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 News Feed, Center Content, and Key Initiatives
Background Color #f3f3f3
Border size:
2px
Border Color:
#bbbbbb
News Feed
The News Feed area shows 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 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
Peter.rhee@oc.usda.gov
Amanda Eamich
Amanda.eamich@oc.usda.gov
File details come from the government source that posted it. Updated .