U.S. Department of Agriculture eGovernment Program FSIS Re-design Project Web Site Maintenance Training Day 2 March 3, 2004

U.S. Department of Agriculture

eGovernment Program

FSIS Re-design ProjectWeb Site Maintenance Training Day 2

March 3, 2004

2

FSIS Web Development Training

United States Department of AgricultureFood Safety and Inspection Service

U.S. Department of Agriculture eGovernment Program

I. Training Agenda (9:00am – 9:15am )

II. Site Map (9:15am - 10:00am)

III. Templates (10:00am - 11:00am)

IV. Content Submission Worksheets (11:00am – 11:30pm)

V. Style Guide (11:30am - 12:00pm)

Agenda

3




Training Agenda

Day 1 Topics

• HTML / ASP Development

• Homesite HTML Editor

Day 3 Topics

• Defect Tracking

• Version Control

• Browser / 508 Compliance Testing

• Question & Answer

This training program will provide you with the instructions, tools, and resources necessary to maintain and continue development of the re-designed www.fsis.usda.gov Web site.

Day 2 Topics

• Site Map

• Content Creation

• HTML / ASP Templates

• Style Guide

4




Agenda


II. Site Map (9:15am – 10:00am)

I. Purpose / Elements Review

II. FSIS Site Map

III. Interplay between Site Map & Page Navigation

IV. Exercise

III. Templates (10:30am – 11:30am)


V. Style Guide (11:30am – 12:00pm)

5




Training Progress

Content Creation

Page Development

Testing

HTML / ASP Develop.

Home Site HTML Editor

Style Guide

Visual Source Safe

Templates

Defect Tracking

Site Map

Site Map

Templates

Content Submission Worksheets

Style Guide

Defect Tracking

Visual Source Safe

Browser / 508 Compliance

Style Guide

Site Map

Finished Page

If errors… If no errors…

David_J_Theis

This is a comment

6




Agenda




II. FSIS Site Map


IV. Exercise




7




Purpose / Elements Review

A Site Map is a graphical representation of a Web site’s information architecture. It is used in order to sort Web content by subject and priority.

Pages can be placed within a Site Map according to their general subject matter, specific content, or average relevance to a typical user of the site.

Laboratories &Procedures

3.2.2

AccreditedLaboratories

3.2.2.2

Listing ofAccredited

Laboratories(PDF)

3.2.2.2.1

Application forAccreditation

9.2

FSISLaboratories

3.2.2.1

Guidebooks& Methods

3.2.2.3

MicrobiologicalLab Guidebook

3.2.2.3.1

AnalyticalChemistry Lab

Guidebook

3.2.2.3.2

Pathology LabGuidebook

3.2.2.3.3

Science

3.2

Chapters (PDF’s)

3.2.2.3.1.1

Chapters (PDF’s)

3.2.2.3.2.1

Chapters (PDF’s)

3.2.2.3.3

1st Level

3rd Level

2nd Level

4th Level

5th Level

8





Every block on a Site Map represents an individual Web page, and each connection signifies a link existing between pages of the Web site. Any block that has multiple connections represents a page that links to several other pages.

There are no maximum or minimum number of page links a page can have.


3.2.2


3.2.2.2


Laboratories(PDF)

3.2.2.2.1


9.2

FSISLaboratories

3.2.2.1

Guidebooks& Methods

3.2.2.3


3.2.2.3.1


Guidebook

3.2.2.3.2


3.2.2.3.3

Science

3.2

Chapters (PDF’s)

3.2.2.3.1.1

Chapters (PDF’s)

3.2.2.3.2.1

Chapters (PDF’s)

3.2.2.3.3

Single page with one link

Single page with three links

9





Studies have shown that Web users expect content to appear according to an ordered hierarchy. The broadest areas of content are displayed first, with subsequent layers becoming increasingly specific.

In the example below, a user can navigate from a broad topic page (Science), to a more specific topic page (Laboratories & Procedures), to an even more specific topic page (Accredited Laboratories).


3.2.2


3.2.2.2


Laboratories(PDF)

3.2.2.2.1


9.2

FSISLaboratories

3.2.2.1

Guidebooks& Methods

3.2.2.3


3.2.2.3.1


Guidebook

3.2.2.3.2


3.2.2.3.3

Science

3.2

Chapters (PDF’s)

3.2.2.3.1.1

Chapters (PDF’s)

3.2.2.3.2.1

Chapters (PDF’s)

3.2.2.3.3

Broad topic area

More specific topic area

Most specific topic area

10




Agenda




II. FSIS Site Map


IV. Exercise




11




Prior to creating a new architecture for the redesigned FSIS Web site, all existing content was audited, and then divided into relevant subject, topic, and audience areas. This process led not only to the creation of the Navigation elements of the page, but also mandated a structure for the FSIS Site Map to follow.

There are three primary categories into which content can be divided, and multiple sub-categories within each of those areas.

FSIS Site Map

AudiencesScientists & ResearchersConsumers & EducatorsBusinessesConstituent GroupsFSIS Employees

GlobalsAbout FSISNews & EventsFact SheetsCareersFormsHelpContact UsEn Espanol

SubjectsFood Safety EducationScienceFSIS RecallsRegulations & PoliciesFood Safety & Emergency Preparedness

12




By examining the Site Map, you can begin to see how content in the redesigned Web site has been organized. For instance, pages that would seem most relevant to be placed under the Subject of Science have been placed in this area, pages that would seem most relevant to be placed under FSIS Recalls have been placed in this area.

In the Legend that is displayed on each page of the Site Map, you will notice codes for various types of pages in the redesigned Site. There are three types of pages that the Site Map will represent – FSIS pages, external pages, and pages that reside in another area of the site.

FSIS Site Map

3.2

Science

3.1.1.1.5

Mobile GameUSAJobs

13




FSIS pages represent general pages that can be found within the architecture at the location they are represented on the Site Map.

External pages represent pages from Web sites other than the FSIS site.

Pages that reside in other areas are used in instances where the content of a page logically fits in two areas of the Web site – consequently it “resides” in one area but can be linked to from the other.

FSIS Site Map

3.2

Science

3.1.1.1.5

Mobile Game

USAJobs

14




Additionally, there are several places in the FSIS Site Map where you will notice several blocks stacked upon each other. This is a graphical representation of multiple pages at the same level. Typically, this graphical representation is used whenever there is an index page (in this case, the 2004 News Releases page) that contains links to a large number of sub-pages.

FSIS Site Map

6.1

2004 News Releases

News Release

6.1.1

15




Agenda




II. FSIS Site Map


IV. Exercise




16




Interplay Between Site Map & Page Navigation

Site Maps can be used not only to help determine where a page “resides” within an information architecture, but as is the case of the FSIS redesigned site, they can also be used to help determine elements of individual pages.

17





Top / Global Navigation Area

If the page resides within one of the global navigation areas, the image is changed to look as though it is pressed down.

The Inner Header Bar will display the primary root of a page within the Site Map.

The Breadcrumb Navigation represents the root of the respective page back to the Home page.

18





Left Navigation Area

If a page resides within one of the Browse by Subject areas, a green image with white text is displayed under the Browse by Subject area of the left navigation bar.

If a page resides within one of the Browse by Audience pages, the dropdown box displays the name of the Browse By Audience page.

19





Right Navigation Area

The Heading tab for a Right Navigation indicates the primary area of the Site that contains the page that the user is viewing. In this example, the area is Food Safety Education.

Similar Heading tabs exist for all Subject, Audience, and Global / Topic areas of the Web site.

20





Right Navigation Area (continued…)

Items in the Right Navigation area are determined by the area in which the page resides.

The Right Navigation area will display the local navigation for its respective page, and will change in accordance to which sub-page a user is viewing.

While viewing a page below a primary landing page, the options below that page are displayed by and indented list.

21





When moving to a lower level page represented by an indent, the bullet moves as well in order to indicate a shift in which page the user is currently looking at.

Although there may be sub-pages below the indented level, no additional indents open within the right navigation area. If a user is viewing pages below this level, the respective element (in this case “Food Safety Mobile”) remains the bulleted item.

Only one bullet can even be highlighted at any one time.

Right Navigation Area (continued…)

22





Right Navigation Area & Content Header Graphics

In general, content header graphics will always correspond with whatever the bulleted item in the right navigation area is. In an instance where the user is viewing a sub-page below an indented item in the Site Map, a specific class of bolded text is used to indicate that page’s title just below the Content Header. Rules explaining how and when to use Content Headers and / or page titles written in HTML are explained more thoroughly in the Style Guide.

23




Agenda




II. FSIS Site Map


IV. Exercise




24




Site Map Exercise

Test the elements of the following two pages (including the global navigation, subject area navigation, audience area navigation, right navigation, and breadcrumb), using only a Site Map.

The first page is the Current Openings page, and it can be found at 8.1 on page 27 of your Site Map.

The first page is the Why Join FSIS page, and it can be found at 8.1.2, also on page 27 of your Site Map.

25




Site Map Exercise

26




Site Map Exercise

27




Agenda




I. Page Components

II. File Structure



28




Training Progress

Content Creation

Page Development

Testing

HTML / ASP Develop.


Style Guide

Visual Source Safe

Templates

Defect Tracking

Site Map

Site Map

Templates


Style Guide

Defect Tracking

Visual Source Safe


Style Guide

Site Map

Finished Page


David_J_Theis

This is a comment

29




Template A

Template A: Contains a two row,

two column table at the top of the page displaying short text descriptions and related thumbnail images.

The bottom half of the page contains a two row, two column table displaying text blurbs.

This template is currently only used for the homepage.

30




Template B

Template B: Contains a two

column table at the top of the page and text headers with supporting text below the two columns.

31




Template C

Template C: Template C has a

two row, two column table at the top displaying text blurbs and related thumbnails.

The bottom half of the template consists of content header images and short text descriptions.

This template is used for global navigation area landing pages.

32




Template D

Template D: Displays a text

narrative and is often used for press releases and speeches.

The inset box is an ASP include file and can be used to display highlights from the article or links to related topics.

33




Template E

Template E: The top of the page

has narrative text wrapped around a thumbnail photograph.

This template is useful for biography pages and news articles or releases that feature a photo.

34




Template F

Template F: This template F

begins with a drop down which allows quick navigation for files which are ordered by list, series, year, alphabet, etc.

The drop down allows the user to quickly navigate to another page in the same section.

The list of items is in plain and bolded text separated by breaks.

35




Template G

Template G: The top portion of

the page includes a basic text intro inside a cell padded table.

The bottom portion of the page includes small text links and thumbnails in two column tables.

Each table is separated by a content divider image.

Notice that the right navigation is indented due to sub navigation items. This is not specific to the template but shows an example of indented navigation.

36




Template H

Template H: The top of the page

displays a short text intro inside a cell padded table.

The bottom content of the page displays a table. It is important to note that the total width of the table cells and padding cannot exceed 368 pixels.

37




Template I

Template I: Template I begins

with a short narrative under the content header image.

There is no right navigation, allowing for the use of a wider table.

The items in the right navigation are moved to and expanded left navigation bar.

38




Template J

Template J: This template begins

with a short narrative intro under the content header graphic.

There is a content divider image under the bolded text header. Please note that content divider images cannot be inside a table with cellpadding.

Below the content divider image, a series of thumbnail images with associated links are displayed in table rows.

39




Template K

Template K: This template is used

to display expanded images of thumbnails while retaining the navigational structure of the site.

40




Template L

Template L: This template

provides the basis for creating forms across the site.

This basic form can be used to solicit a number of inputs from the user. The only configuration required would be to change the names of the input fields.

Note that the state option box provides a good model for creating form dropdowns.

41




Template M

Template M: Template M is

another format for a form. Instead of using a single column for input, two columns are used to allow for a shorter overall Web page.

The top of the page consists of two columns containing a search box and dropdown boxes.

The bottom of the page contains a narrative.

Note that the right navigation contains a narrative instead of local navigation items.

42




Template N

Template N: This template has a

child window which can be used for popup items.

43




Template O

Template O: This template does

not contain the common navigational elements of the rest of the pages. It is used for printer friendly pages.

44




Agenda




I. Page Components

II. File Structure



45




What’s in a page?

Page components: Index: Entire file Main Header Global

Navigation Header

Left Navigation Section Header

Image Section Header Content Right Navigation Footer

46




File Naming Convention

Each page consists of a number of included files. Those may include: Leftnav Rightnav Header (contains banner image and global navigation bar) Section_Header (contains the breadcrumbs and a link to the section

header image like “Fact Sheets”) Section_Header_Image (contains only the section header image like

“Fact Sheets” News_Article_Inset (only for template D. This file contains the

contents of the inset news article on template D). Content (Contains the bulk of page content, as would appear in the

center column. Use the content page of the Templates file to change to Template A, B, C… etc.).

Promo/adrotator.asp (This include file holds the rotating promo and can be referenced from the promo file. Each section of the site has a different promo to rotate as needed for that section).

Index.asp (index ties all of the above components together using include files).

47




File Naming Convention

All files and folders across the site follow a consistent naming convention. Each page is contained in its own folder named with the page name.

The page name can be found on the Site Map or in a Content Submission Worksheet.

Words in the filename are separated by the underscore. For example, the folder for the Food Safety Mobile page would be titled Food_Safety_Mobile, and all files specific to that page would be in that folder.

You will need to change include file names to match the name of your pages. For example, section_header_home.asp is the name of the section header for the 1.0 home page.

Each file is named after the directory that it’s in with the underscore used to separate elements. For example, the different files in the Food Safety Education directory would be named:

• Content_Food_Safety_Education.asp

• Rightnav_Food_Safety_Education.asp

• Index.asp

• Section_header_Food_Safety_Education.asp

• NOTE: This file does not have its

48




File Types

Index File: Name: index.asp Location: Local file folder Function: The index file

brings together all other files which comprise a page using the ASP include function.

Changes Required during development:• Page Title

• Meta Tags

• Include file names should reflect local file folder name

49




File Types

Main Header Name: header_main3.asp Location: /fsis/main/ Function: Contains the mast head image and its links. Changes Required during development: None

50




File Types

Global Navigation Header Name: header_globalnavarea.asp or

header_main_globalnavarea.asp Location:

• Global navigation folder.

• If the file is part of an area outside of the global navigation area, the file is called /fsis/main/header_main.asp.

Function: This file contains the global navigation for the site including mouse-overs and links to global navigation home pages.

Changes Required during development: These pages should all be coded to date. For the top level page in a given global navigation area (Home, About FSIS, News & Events etc.) use the “header_main_globalnavarea.asp” file, for the files below that level, use the “header_globalnavarea.asp” file.

51




File Types

Left Navigation Name:

• For Browse by Audience or Subject areas, the left nav is named left_nav_browsebymainfolder.asp.

• For other areas of the site, use the leftnav_main.asp file.

Location: • For Browse by areas, located in top level

folder

• For all other areas, located in /fsis/main/folder

Function: Contains the left navigation file. This file is globally uniform except in the Browse By areas.

Changes Required during development: None.

52




File Types

Section Header Image Name: Section_header_image_topnavarea.asp Location: Highest level folder in a given area. Function: Contains section header image and formatting. Changes Required during development: None

53




File Types

Section Header Name: Section_header_localfoldername Location: Specific to each page, this file is located in the

local folder. Function: Contains the breadcrumbs and a link to the

section_header_image file. Changes Required during development: Change

breadcrumb names and links; breadcrumb file paths are determined by the location of the page on the site map. Change file name path for section_image include file.

54




File Types

Content Name:

content_localfilefolder.asp Location: Since this page is

specific to each local page, it is contained in the local file folder.

Function: Contains the center column content on the redesign page, which is the bulk of content on a page.

Changes Required during development: Choose correct content template and insert all content as outlined by the content author in the content submission worksheet.

55




File Types

Right Navigation Name: rightnav_localfilefolder.asp Location: Local file folder. Function: Contains the right

navigation table. May contain indented bullets if part of a sub-navigated area.

Changes Required during development: Right navs are specific to areas on the site, but most right navs have been built. Many right navs link to archived pages since redesigned pages have not yet been completed, so these links will need to be updated. For sites using Adobe PDF, Realplayer, or other media devices, a media help file should be included.

56




File Types

Media Help Name:

Media_help_typeofmediahelp.asp

Location: /fsis/main Function: Provides a link to

a software download area if certain software is required to view a page.

Changes Required during development: Media help is part of the right navigation. There are different files depending on the media being used (PDF, Flash, Realplayer) and whether there are dots around the lower left hand corner.

57




File Types

Footer Name: footer_main.asp Location: /fsis/main/ Function: Footer contains the entire footer contents with

links. Changes Required during development: The footer is

globally uniform, so no changes are required.

58




Agenda




I. Page Components

II. File Structure



59




What’s in a page?

Page components: Index: Entire file Main Header Global

Navigation Header

Left Navigation Section Header

Image Section Header Content Right Navigation Footer

60




File Structure

Files are stored in three places during development and testing:1. Visual Source Safe (VSS) Database: The latest version of all files

should be stored in the VSS database unless a developer is working on a file at that moment. When a file needs to be edited, it can be checked out from the database. When edits are complete, the file is checked back into the database. This is discussed in further detail in Day Three training. • The folder structure of VSS mirrors that of development and test. • The Visual Source Safe Database can be viewed by opening VSS and viewing the FSIS

Web project.

2. Development Environment: All development work and unit testing should be done in the development environment. This is the only place where files should be edited. • The Development environment can be found at C:/fsis/wwwroot/• To view files in this environment, type http://localhost/fsis/filepath• The folder structure of development mirrors that of VSS and test.

3. Test Environment: Complete testing of files should be done in the testing environment. When development of a file is complete, read only copies should be tested in the testing environment. • The folder structure of the test environment mirrors that of development and VSS. • The testing environment is located in E:/fsis/wwwroot/• To test in this environment, type http://199.140.65.44:83/FSIS/filepath

61




File Structure

Folder Structure There are two levels of folders under the c:/fsis/wwwroot folder. The first level, shown, contains all global nav items, browse by items,

and the main and images directories. • A portion of this directory is shown below.

62




File Structure

Folder Structure The second folder level contains all folders within a given global

navigation or browse by area. • The About FSIS folder is shown below.

63




File Structure

The primary files required to build a given page are contained in a folder that mirrors the page name. Below, the files contained in the /fsis/about_fsis/administrator folder are shown.

Notice only four of the required 9 files are contained in the Administrator folder.

Where are the footer, left nav, section header image, header, and global navigational header? Since the other files are uniform across large segments of the site, they are located in higher level folders.

• Note the vssver.scc file: This file is not part of the page and was placed by Visual Source Safe. The file is used to aid version control and should not be deleted.

64




File Structure

How do we put together the About FSIS: Administrator file?

The files that comprise the Administrator file are located in several places. Learning how and when to use these different files will significantly aid development:• Index, content, rightnav, and section header are all located in the

Administrator file.

• Main Header: This file is located in the main directory.

• Global Navigation Header: Since Administrator and every other About_FSIS file use the same global navigation header, this file is located in the /fsis/About_FSIS folder.

• Left Navigation: Since this page uses the global left navigation, the left navigation file is located in the /fsis/main folder.

• Section Header Image: This file is contained in the /fsis/About_FSIS folder.

• Footer: Since this is a globally uniform page, it is contained in the /fsis/main directory.

65




Agenda




IV. Content Submission Worksheets

I. Overview & Workflow

II. Creating Content

III. Various Types of Worksheets


66




Training Progress

Content Creation

Page Development

Testing

HTML / ASP Develop.


Style Guide

Visual Source Safe

Templates

Defect Tracking

Site Map

Site Map

Templates


Style Guide

Defect Tracking

Visual Source Safe


Style Guide

Site Map

Finished Page


67




Agenda









68




Content Submission Worksheets are forms that break-down the elements of a Web page into a specific template, and make it easier for the authors of Web content to communicate to developers the information that they would like to appear on a particular page.

Each Content Submission Worksheet contains fields for the appropriate content, files, and links that go with each respective page.

Overview & Workflow

69




An author of Web content will complete a content submission worksheet by including all of the content and characteristics for a page they wish to have designed.

Depending on the appearance (template) they have selected, their submission worksheet will have various fields for them to complete.

Overview & Workflow

70




Agenda









71




When creating Content Submissions, it is important to follow best-practices for writing for the Web.

As a general rule, users do not “read” content off of a Web page. Instead, they “scan” it – searching for high level content in the first few passages of a page, and quickly scrolling through a document to see if any content headings are relevant to their search.

In a study¹ conducted by Usability experts Jakob Nielson and John Morkes, it was found that close to 80% of Web users scan all pages they examine. Consequently, they recommend organizing content so that:

• keywords are highlighted• sub-Headings are meaningful (not “clever”)• there is one concept per paragraph.

1 – Results of this study can be found at: http://www.useit.com/alertbox/9710a.html.

Creating Content

72




Creating Content

Remember: People generally come to a website with something particular in mind. They will scan for clues.

Best practices for creating content include:

Break content into smaller, more digestible “chunks” (aka topic, node, module, unit, piece, block, part)

Write summaries for pieces that are long and detailed

Write topic sentences; one idea per paragraph; one breath per sentence

Use headings and subheads to draw attention to main points

Use bulleted or numbered lists instead of long narrative lists.

Use tables & charts when dealing with repeated info (that lends itself to “columns”)

73




Agenda









74




There are various Content Submission Worksheet forms – once for each type of page, or design template, needed to create any and all pages for the site.

By selecting the proper Content Submission Worksheet based on their design needs (tables, images, etc.), a content author can very easily be sure that they are giving a content developer all of the information that they need to complete a page.

For instance, Worksheets for pages that require tables will include blanks for information such as table, column and row headings. Worksheets for pages that require images will include blanks for the image’s file name, size, and alt tag. Please view the various worksheets on the shared drive.

Various Types of Worksheets

75




When transferring information from Content Submission Worksheet to a coded page, there are certain best-practices that should always be followed:

Always be sure that you are building a page from the correct template, based on the submission that you have received and its respective content.

Be sure to correctly include the page title and meta tags in the index file as detailed in the Content Submission.

Double-check that the content written is appropriate for the template that is requested.

Ensure that all elements of the template that are necessary have been accounted for somehow by the content author.

Various Types of Worksheets

76




Agenda






I. Purpose

II. FSIS Style Guide

III. Exercise

77




Training Progress

Content Creation

Page Development

Testing

HTML / ASP Develop.


Style Guide

Visual Source Safe

Templates

Defect Tracking

Site Map

Site Map

Templates


Style Guide

Defect Tracking

Visual Source Safe


Style Guide

Site Map

Finished Page


David_J_Theis

This is a comment

78




Agenda






I. Purpose


III. Exercise

79




By utilizing the Style Guide for image characteristics, naming conventions, date labels, and spacing, listed items can become much easier for a user to understand and utilize.

Purpose

Style Guides are the source of all standards for a particular Web site. They provide listings of font types, image sizes, and specific layout guidelines that all pages within a Web site must adhere to.

When several individuals are developing unique pages either simultaneously or over an extended period of time, it is essential that previously agreed upon standards are utilized by all in order to ensure the clarity of how content is displayed throughout the site. For example:

Bluesfest (Apr 4, 2004)



Bluesfest 4/4/4

April 5th, 2004

Blues Fest

[April 6] Bluesfest 2004

80




Purpose

In the current design, there are several areas with their own unique look and feel.

Home Page

Food Safety Mobile

Science Page

81




Purpose

By utilizing a single Style Guide for the entire FSIS Web site, pages from each different area will maintain a cohesive look and feel that increases the usability of the site as a whole.

Home Page

Food Safety Mobile

Science Page

82




Agenda






I. Purpose


III. Exercise

83




FSIS Style Guide

The FSIS Style Guide has been developed in conjunction with the USDA redesign effort, Web Presence standards, and general usability and design best-practices.

Please refer to the Style Guide during all stages of creating and updating new pages – whether you are authoring content, writing code, or testing a completed page, the Style Guide is an essential tool.

The Style Guide contains standards for design conventions such as:

Page layouts for each template and page element

Palette of colors used to create elements of each page

Image characteristics (size, border, shape)

Labeling conventions (dates, section titles)

Font (size, color, click-ability)

84




FSIS Style Guide

Templates have already been created that incorporate all elements of the FSIS Style Guide. For instance, in order to adhere to page development standards for the Right, Left, and Global Navigation areas, a developer simply needs to begin creating a page by first selecting a template.

Consequently, the primary concern for page developers going forward will be style and consistency issues related to how text is displayed on each page.

These consistency standards include:

Article titles and datesPlease 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 EspanolFSIS released data showing a one year…

85




FSIS Style Guide

Phone NumbersToll free numbers should include the preliminary “1” and be separated by dashes. For all other phone numbers the area code should appear in parentheses.

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

AbbreviationsThe 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”.

86




FSIS Style Guide

File formats and sizesWhen they stand alone please capitalize file extensions. Please place file sizes in parentheses.

Thermy in Circle | JPG (38k) | TIF (454k)

Embedded linksOn many Web pages, you will see written “Click here for more information.” However, this does not meet accessibility requirements. 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.

87




FSIS Style Guide

Numbers in textAll numbers between zero and nine should be spelled out in their entirety. Any number 10 or above should be displayed numerically.

StatesAll states should be either spelled out or abbreviated with two capitalized letters.

Maryland, MD

Remember – the key to following any Style Guide is consistency.

88




Agenda






I. Purpose


III. Exercise

89




Style Guide Exercise

Style Guide Exercise

Please transfer the Content Submission Worksheet onto a coded page from the submission form using the skills you have gained from the Template, Content Submission, and Style Guide lessons.

Documents

U.S. Department of Agriculture eGovernment Program FSIS Re-design Project Web Site Maintenance Training Day 2 March 3, 2004