USDA Web Standards and Style Guide 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 2 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 3 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. 4 5 6 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 7 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. 8 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 9 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. 10 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 11 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 12 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 13 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.