FSIS Re-design Project - PowerPoint PPT Presentation

Loading...

PPT – FSIS Re-design Project PowerPoint presentation | free to download - id: 3d5268-Mjk1N



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

FSIS Re-design Project

Description:

Blank Presentation. Accenture Firmwide Templates v10.0. ... Web Site Maintenance Training Day 2 March 3, 2004 Agenda Training Agenda Agenda Training Progress Agenda ... – PowerPoint PPT presentation

Number of Views:37
Avg rating:3.0/5.0
Slides: 90
Provided by: usdaGove
Learn more at: http://www.usda.gov
Category:
Tags: fsis | design | food | project | safety

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: FSIS Re-design Project


1
  • FSIS Re-design Project
  • Web Site Maintenance Training Day 2
  • March 3, 2004

2
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1000am - 1100am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am - 1200pm)

3
Training Agenda
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 1 Topics
  • HTML / ASP Development
  • Homesite HTML Editor
  • Day 2 Topics
  • Site Map
  • Content Creation
  • HTML / ASP Templates
  • Style Guide
  • Day 3 Topics
  • Defect Tracking
  • Version Control
  • Browser / 508 Compliance Testing
  • Question Answer

4
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am 1000am)
  • Purpose / Elements Review
  • FSIS Site Map
  • Interplay between Site Map Page Navigation
  • Exercise
  • Templates (1030am 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am 1200pm)

5
Training Progress
Finished Page
Content Creation
Page Development
Site Map Templates Content Submission
Worksheets Style Guide
HTML / ASP Develop. Home Site HTML Editor Style
Guide Visual Source Safe Templates Defect
Tracking Site Map
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide Site Map
6
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am 1000am)
  • Purpose / Elements Review
  • FSIS Site Map
  • Interplay between Site Map Page Navigation
  • Exercise
  • Templates (1030am 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am 1200pm)

7
Purpose / Elements Review
A Site Map is a graphical representation of a Web
sites 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.
1st Level
2nd Level
3rd Level
4th Level
5th Level
8
Purpose / Elements Review
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.
Single page with one link
Single page with three links
9
Purpose / Elements Review
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).
Broad topic area
More specific topic area
Most specific topic area
10
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am 1000am)
  • Purpose / Elements Review
  • FSIS Site Map
  • Interplay between Site Map Page Navigation
  • Exercise
  • Templates (1030am 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am 1200pm)

11
FSIS Site Map
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.
AudiencesScientists ResearchersConsumers
EducatorsBusinessesConstituent GroupsFSIS
Employees
GlobalsAbout FSISNews EventsFact
SheetsCareersFormsHelpContact UsEn Espanol
SubjectsFood Safety EducationScienceFSIS
RecallsRegulations PoliciesFood Safety
Emergency Preparedness
12
FSIS Site Map
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.
3.2
3.1.1.1.5
Science
Mobile Game
USAJobs
13
FSIS Site Map
3.2
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.
Science
USAJobs
3.1.1.1.5
Mobile Game
14
FSIS Site Map
6.1
2004 News Releases
6.1.1
News Release
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.
15
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am 1000am)
  • Purpose / Elements Review
  • FSIS Site Map
  • Interplay between Site Map Page Navigation
  • Exercise
  • Templates (1030am 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am 1200pm)

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
Interplay Between Site Map Page Navigation
The Breadcrumb Navigation represents the root of
the respective page back to the Home page.
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.
18
Interplay Between Site Map Page Navigation
Left Navigation Area
If a page resides within one of the Browse by
Audience pages, the dropdown box displays the
name of the Browse By Audience page.
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.
19
Interplay Between Site Map Page Navigation
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
Interplay Between Site Map Page Navigation
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
Interplay Between Site Map Page Navigation
Right Navigation Area (continued)
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.
22
Interplay Between Site Map Page Navigation
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 pages 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
  • Training Agenda (900am 915am )
  • Site Map (915am 1000am)
  • Purpose / Elements Review
  • FSIS Site Map
  • Interplay between Site Map Page Navigation
  • Exercise
  • Templates (1030am 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am 1200pm)

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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Page Components
  • File Structure
  • Content Submission Worksheets (1000am 1030pm)
  • Style Guide (1130am - 1200pm)

28
Training Progress
Finished Page
Content Creation
Page Development
Site Map Templates Content Submission
Worksheets Style Guide
HTML / ASP Develop. Home Site HTML Editor Style
Guide Visual Source Safe Templates Defect
Tracking Site Map
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide Site Map
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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Page Components
  • File Structure
  • Content Submission Worksheets (1000am 1030pm)
  • Style Guide (1130am - 1200pm)

45
Whats 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 its
    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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Page Components
  • File Structure
  • Content Submission Worksheets (1000am 1030pm)
  • Style Guide (1130am - 1200pm)

59
Whats 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
  • 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.
  • 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.
  • 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.4483/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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets
  • Overview Workflow
  • Creating Content
  • Various Types of Worksheets
  • Style Guide (1130am - 1200pm)

66
Training Progress
Finished Page
Content Creation
Page Development
Site Map Templates Content Submission
Worksheets Style Guide
HTML / ASP Develop. Home Site HTML Editor Style
Guide Visual Source Safe Templates Defect
Tracking Site Map
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide Site Map
67
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets
  • Overview Workflow
  • Creating Content
  • Various Types of Worksheets
  • Style Guide (1130am - 1200pm)

68
Overview Workflow
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.
69
Overview Workflow
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.
70
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets
  • Overview Workflow
  • Creating Content
  • Various Types of Worksheets
  • Style Guide (1130am - 1200pm)

71
Creating Content
  • 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.

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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets
  • Overview Workflow
  • Creating Content
  • Various Types of Worksheets
  • Style Guide (1130am - 1200pm)

74
Various Types of Worksheets
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 images file
name, size, and alt tag. Please view the various
worksheets on the shared drive.
75
Various Types of Worksheets
  • 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.

76
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am - 1200pm)
  • Purpose
  • FSIS Style Guide
  • Exercise

77
Training Progress
Finished Page
Content Creation
Page Development
Site Map Templates Content Submission
Worksheets Style Guide
HTML / ASP Develop. Home Site HTML Editor Style
Guide Visual Source Safe Templates Defect
Tracking Site Map
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide Site Map
78
Agenda
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am - 1200pm)
  • Purpose
  • FSIS Style Guide
  • Exercise

79
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
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.
Bluesfest (Apr 4, 2004)
Bluesfest 4/4/4
April 5th, 2004 Blues Fest
Bluesfest (Apr 5, 2004)
April 6 Bluesfest 2004
Bluesfest (Apr 6, 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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am - 1200pm)
  • Purpose
  • FSIS Style Guide
  • 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 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 Espanol
  • FSIS released data showing a one year

85
FSIS Style Guide
  • 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.
  • 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.

86
FSIS Style Guide
  • File formats and sizes
  • When they stand alone please capitalize file
    extensions. Please place file sizes in
    parentheses.
  • Thermy in Circle JPG (38k) TIF (454k)
  • Embedded links
  • On 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 text
  • All numbers between zero and nine should be
    spelled out in their entirety. Any number 10 or
    above should be displayed numerically.
  • States
  • All 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
  • Training Agenda (900am 915am )
  • Site Map (915am - 1000am)
  • Templates (1030am - 1130am)
  • Content Submission Worksheets (1100am 1130pm)
  • Style Guide (1130am - 1200pm)
  • Purpose
  • FSIS Style Guide
  • 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.
About PowerShow.com