Template Standards
Triage
Overview
Detail
Support
PRODUCT.DOC
1

Template Standards
Introduction/Scope ............................................................................................................................. 1
Usability Standards................................................................................................................................. 1
Accessibility Standards............................................................................................................................ 1
What does making content “accessible” mean? ..................................................................................... 1
SEO Standards....................................................................................................................................... 1
How these templates work together .......................................................................................................... 2
Required Components on All Product Pages ................................................................................................ 3
Use of Space in Primary Content Region .................................................................................................... 6
Primary Content Region .................................................................................................................... 6
Page Template Name: Product Triage (L1) Page ..................................................................................... 7
Content Strategy.................................................................................................................................... 8
Branding and Marketing Standards --- TBD!
............................................................................................... 9
Design Standards ................................................................................................................................. 10
Page Layout and TOC...................................................................................................................... 10
Font Hierarchy ............................................................................................................................... 10
Primary Content Region .................................................................................................................. 11
Secondary Content Region (“Right Rail”)............................................................................................ 13
Image Standards ................................................................................................................................. 15
Examples of Product Triage Page (L1) ..................................................................................................... 16
Examples of “Right Rails” ................................................................................................................ 17
Page Template Name: Product Overview Page (L2) .............................................................................. 18
Content Strategy.................................................................................................................................. 19
Branding and Marketing Standards ---TBD ................................................................................................ 20
Design Standards ................................................................................................................................. 21
Page Layout and TOC...................................................................................................................... 21
Font Hierarchy ............................................................................................................................... 21
TOC Region ................................................................................................................................... 22
Primary Content Region .................................................................................................................. 23
Secondary Content Region (“Right Rail”)............................................................................................ 26
Image Standards ................................................................................................................................. 28
Examples of Product Overview Pages ...................................................................................................... 29
Page Template Name: Product Detail Page (L3) .................................................................................... 30
Content Strategy.................................................................................................................................. 31
Branding and Marketing Standards ---TBD ................................................................................................ 32
Design Standards ................................................................................................................................. 33
Page Layout and TOC...................................................................................................................... 33
Font Hierarchy ............................................................................................................................... 34
TOC Region ................................................................................................................................... 35
Primary Content Region .................................................................................................................. 36
Secondary Content Region (“Right Rail”)............................................................................................ 39
Image Standards ........................................................................................................................... 41
Examples of Product Detail Page............................................................................................................. 41
Examples of Right Rail .................................................................................................................... 43
Page Template Name: Product Support (L4) ......................................................................................... 44
Content Strategy.................................................................................................................................. 45
Branding and Marketing Standards ......................................................................................................... 46
Design Standards ................................................................................................................................. 46
Required Components on All Product Support Pages ............................................................................ 46
Page Layout and TOC...................................................................................................................... 49
Font Hierarchy ............................................................................................................................... 49
Primary Content Region .................................................................................................................. 50
Secondary Content Region (“Right Rail”)............................................................................................ 51
3

Template Standards
Image Standards ............................................................................................................................ 53
Examples of a Product Support Page........................................................................................................ 54
APPENDIX A: Definitions ........................................................................................................................ 55
Grids, Page Layouts, Components ........................................................................................................... 55
What is a Template?.............................................................................................................................. 55
4

Template Standards
The V1 Template Standards were created to document the design, content and user experience vision for
Fidelity.com Investment Products pages. The expectation is that all standards are followed.
These Standards will evolve to include additional page templates as Fidelity moves towards a Content
Management System (CMS), SDL Tridion. Each new page template will have a set of standards.
These Standards are intended to be the starting point for all Product pages. Standards, combined with the use of a Content Management System (CMS), allow Fidelity to:
– Increase the visual and functional consistency of our sites; which improves the customer experience and can lead to increased customer satisfaction.
– Publish content faster than any of our existing processes.
– Reduce our design costs.
Any questions about V1 Template Standards should be addressed to: Lori LeDoux
The User Experience team has provided usability-based rationale for many of our standards, and that information is integrated as applicable throughout this document.
The key to an accessible site is “equivalence.” Providing accessible content ensures all customers—whether those with disabilities, those using Search, or those in a noisy environment—can enjoy equivalent access to Fidelity content.
Achieving accessibility of our sites requires coding our pages using best practices so that assistive technologies can “understand” our pages and content. Because accessibility is implemented in many places, achieving it requires contributions from Design (who has to design with Accessibility in mind), from Development (who has to code the pages) and from those who use Tridion to publish the actual content. The Accessibility teams will work with Development to have as much accessibility “built in” to the components and page templates as possible.
Complete accessibility guidelines are provided at http://accessibility.fmr.com/ . Below is a short list of what can be done to deliver accessibility when designing and publishing content. Specific individual references are included in context in this document.
What does making content “accessible” mean?
ƒ All images have alt text
ƒ Text alternatives exist for video and A/V content
ƒ Links are unique and descriptive
ƒ Page titles are meaningful
ƒ Elements used to organize content (i.e., headings, lists, etc.) use appropriate markup code
The overall responsibility of delivering Search Engine Optimization lies in the actual content of the page. Where applicable to specific components, this document provides links to specific SEO information.
Detailed SEO Standards for the enterprise are located at http://spaces.fmr.com/docs/DOC-28060 .
1

2
Template Standards
This document describes the following templates. The “L” number indicates the Level of the page in terms of hierarchy.
• Product Triage (L1) Page
• Product Overview (L2) Page
• Product Detail (L3) Page
• Product Support (L4) Page
Below is an example of how these templates could work together. Note that it isn’t always necessary to use an
Overview (L2) page if the breadth of content in a section is small enough to make it acceptable to link directly from a Triage (L1) page to a Detail (L3) page.

Template Standards
COMPONENT NAME
• Navigation Bar (REQUIRED)
The Navigation Bar provides consistent site-level navigation across the site, and must be provided on all pages to enable the user to explore all content on the site.
The only time we do not include a Navbar is during stepped processes such as Account Opening, when it is important for the user to finish the flow of the task at hand.
EXAMPLE AND SUPPORTING DETAIL
Visual Design Specs: http://styleguide.fmr.com/components/current/navigation/na v-bar-dropdown.html
DCLe Skin: <none available>
Continued.
3

Template Standards
• Breadcrumb (REQUIRED)
Breadcrumbs are important on a page as a
“wayfinding” device. They show the user where they are in the site. As SEO improves the
“findability” of lower-level pages, Breadcrumbs become more important.
The format is:
Home > Navbar Menu name > Triage Page name >
Overview Page name >
When a name in the Breadcrumb has an associated page, link to it.
• Print Functionality (REQUIRED )
Each page must be printable in a “friendly” format that removes the extraneous elements on the page that would get in the way of reading content, such as the Table of Contents, ad units, and other
“right-rail” content.
Print appears with E-mail and Font Sizing
Functionality, in the following order in the upper right of the page. Its position at the very top of the page indicates that it impacts the entire page.
• E-Mail Functionality (REQUIRED)
Each page must be shareable via E-Mail. The E-
Mail link is located at the top right of the page.
(See “Print Functionality.”)
This functionality enables customers to share with others by emailing a link to the page.
• Font Resizing Functionality (REQUIRED)
Placing the control on the page makes the functionality more visible to users, and doesn’t require them to be familiar with browser-provided sizing controls in the menu.
Each page must be resizable. The Font Resizing links are located at the top right of the page. (See
“Print Functionality.”)
Font Resizing enables users to increase the size of the font, potentially making it easier and more accessible for users with vision difficulties to read the site.
Visual Design Specs: http://styleguide.fmr.com/components/current/navigation/to pic-paths.html
DCLe Skin: Breadcrumb http://spaces.fmr.com/docs/DOC-29712
SEO Guidelines: http://styleguide.fmr.com/editorial/content/SEO-
QuickRefBestPractices.xls
Visual Design Specs: http://styleguide.fmr.com/formatForPrinting.html
DCLe Skin: Page-Control-Bar http://spaces.fmr.com/docs/DOC-28947
This should be published as “E-Mail.”
Visual Design Specs: <TBD>
Need to document Email handling.
DCLe Skin: Page-Control-Bar http://spaces.fmr.com/docs/DOC-28947
Visual Design Specs and Functional Details: http://styleguide.fmr.com/components/current/text/articlecontrols.html
DCLe Skin: Page-Control-Bar http://spaces.fmr.com/docs/DOC-28947
Accessibility Standards for Text Size : http://accessibility.fmr.com/standards/textSize.asp
4

• Double Horizontal Rule (REQUIRED)
A double rule separates the main content from the
Legal/Footnote text.
It spans the full width (100%) of the region.
Use 20px above the line and 10px below it.
Template Standards
• Page Title (REQUIRED)
Each page must have a single Green Page Title coded as an <H1>.
The Title is created by the Content Strategist and must be consistent with SEO and editorial style guide standards.
For accessibility, the <pagetitle> tag for the page must match the <H1> tag.
The Page Title displays in the Page Title Region, which spans above both the Primary and
Secondary Content Regions. (On pages with TOCs, the Page Title does not display above the TOC
Region.)
Visual Design Specs: http://styleguide.fmr.com/components/current/pagetitles/pa ge-title_H1.html
DCLe Skin: Big-Page-Title http://spaces.fmr.com/docs/DOC-29703
Editorial rules for Page Titles: http://styleguide.fmr.com/editorial/content/parts.html#Titles
SEO Guidelines: http://styleguide.fmr.com/editorial/content/SEO-
QuickRefBestPractices.xls
Accessibility Standards for Page Titles: http://accessibility.fmr.com/standards/pageTitles.asp
Visual Design Specs: http://styleguide.fmr.com/rules.html
DCLe Skin: Double-Horizontal-Rule http://spaces.fmr.com/docs/DOC-29577
• Legal/Footnotes (REQUIRED)
The Footnote area is the place for all disclosures that must appear on a page for risk and compliance purposes.
• Page Footer (REQUIRED)
Each page has a Page Footer at the bottom of all pages.
It provides a visual “end” to the page and provides copyright information as well as links to other sitewide content such as the Site Map.
Visual Design Specs: http://styleguide.fmr.com/components/current/text/footnote.
html
DCLe Skin: Gray-Text http://spaces.fmr.com/docs/DOC-28949
Visual Design Specs: http://styleguide.fmr.com/components/current/footers/topicfooters.html
DCLe Skin:
Grey-Background http://spaces.fmr.com/docs/DOC-29566
The Footnote also contains the G2 number, which is obtained from the Compliance Review Group after they have approved the material.
Certain disclosures have specific proximity and prominence requirements, which are described in the Communications Disclosure Library (CDL) at http://iweb.fmr.com/cdl/pages/home .
5

Template Standards
Primary Content Region
• The Primary Content Region is the largest section that contains content and images in each Page Template.
• The Primary Content Region may be divided into sections using Container components that divide the space into columns. Multiple containers can be used in each page to achieve the required layout.
Number of Columns DCLe Container
1 Column spanning 100% of the Region No Container component is necessary.
2 Columns, each spanning 50% of the Region DCLe container: http://spaces.fmr.com/docs/DOC-51534
3 Columns, spanning 33%-33%-34% of the Region DCLe container: http://spaces.fmr.com/docs/DOC-51585
4 columns, each spanning 25% of the Region DCLe container: http://spaces.fmr.com/docs/DOC-51586
Example:
6

Template Standards – Product Triage (L1) Page
7

Template Standards – Product Triage (L1) Page
A Product Triage Page provides an overview of an entire suite of content. From this page, a user makes a decision about which area of content to explore next.
• Use this template for pages that display when you make a selection from the Navbar.
• The Primary Content Region provides the main content on the page. It helps customers get to the appropriate page by providing a high-level summary of each product or service. The summary should be helpful, informative, and provide value to the customer. Customers must understand where they are and be confident that they are taking the correct path to find the information they are looking for.
• The Secondary Content Region, or “Right Rail,” provides additional, supporting information to reinforce a customer’s decision about a product. It should provide an “Open an Account” button if the product can be opened online. Next, this region should offer “Contact Us” information followed by links to content and sections of the site outside this particular section. Content can include additional reading or educational material related to the primary content, such a “Viewpoints” articles.
This type of content is appropriate for the right side of the page, since usability research has shown that users expect the right side of the page to contain “See Also”-type content as well as advertisements.
• A Product Triage page should not contain animation. WE NEED TO DEFINE THIS MORE. Are FLASH UNITS
CONSIDERED TO BE ANIMATION?
• The image below shows the template for this page. Note the “Primary Content Region” and “Secondary
Content Region” labels, which is how we refer to these areas of the page.
8

Template Standards – Product Triage (L1) Page
• The Primary Content Region must include a branding element (such as the Green Line) near the top of the page so that users know they have arrived at Fidelity. The page can include one and only one green line in this region.
• This page is not an opportunity for a hard sell, but an opportunity to build the relationship.
• The Green Line may be used alone, or combined with another element such as an image.
• The Secondary Content Region may contain only one advertising unit.
• A variety of components are currently available. Standards for using them are TBD.
9

Template Standards – Product Triage (L1) Page
Page Layout and TOC
• Product Triage pages do not have a Table of Contents. Usability testing has shown that we do not need it on this type of page, whose purpose is to present a broad view of the available content. Therefore, links to the main sections of content are provided, and a detailed TOC is reserved for the Product verview page.
• Product Triage pages are based on the “75-25” Page Layout, and the column widths are:
10px(left margin)-716px(primary content region)-21px(column margin)-238px(secondary content region)-10px(right margin)
Font Hierarchy
Properly coded headings are important for assistive devices such as screen readers, and for spiders that crawl web sites for search purposes. The headings convey hierarchy and the relationships between information.
10

Template Standards – Product Triage (L1) Page
Primary Content Region
Available Components
The Primary Content Region may contain the following components. See “Examples of Product Triage Pages” to see these elements in context.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Text
It is acceptable (but not necessary) to use a short paragraph of text between the Page Title and the beginning of the Marketing element at the top of the page.
The text would be an introduction that provides context for the page. Do not include any links in this paragraph.
Would you use text if you used the Green Arrow with text?
Multiple components may be used to implement a simple paragraph. Consult with the DCLe analyst of the project to determine the best solution in the context of a specific design.
• Marketing Element (REQUIRED)
When do you use the various Green Lines?
The green line may be used alone, or with a large image that spans 100% of the region.
For this type of image, alt= “”, since the intent of the image is to create a mood or represent a metaphor.
DCLe Skin: Layered-Text http://spaces.fmr.com/docs/DOC-53525
• Teaser with Black H2 Header
Use at least two, but no more than three of these components to show the primary sections of content in this area of the site. These Teasers should each have the same number of lines of text and the links should vertically align with each other.
The H2 Header gives the content visual prominence in the hierarchy of the page, and it should be no more than two lines long.
The content should be roughly equal to the height of the image, without going below the image.
The link goes to an Overview page for the section.
The link should be only one line long. It may span under the image, but keep it short.
The images used in each Teaser must be the same width and height. However, if the marketing element at the top of this page includes a large image, then do NOT use an image with this Teaser component.
For this type of image, alt= “”, since the intent of the image is to create a mood or represent a metaphor.
Visual Design Specs: http://styleguide.fmr.com/components/current/text/teaserwith-image-and-link-h2.html
DCLe Skin: Teaser-With-Right-Image-And-Link-H2 http://spaces.fmr.com/docs/DOC-53069
11

Template Standards – Product Triage (L1) Page
• Teaser (with no header)
Use this component to link to secondary products or other related content. These links do not link to
Overview pages in this section, and may even link elsewhere in the Product section.
Group multiples of this teaser below a Standalone
H3 header.
Visual Design Specs: http://styleguide.fmr.com/components/current/text/articleteaser-right.html
DCLe Skin: Right-Image-Top-Title http://spaces.fmr.com/docs/DOC-29762
When using this skin for this teaser, do not use: green header, byline, image, link at bottom.
• Bullet List with Black H2 Header
Use this component to display a list of links to content that supports the products in this area.
This list can contain links to:
– Related content within this section of the site
– Supporting content such as tools and education
– Complimentary products
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow Link.
Visual Design Specs: http://styleguide.fmr.com/components/current/callouts/greenbullet-list-black-h2.html
DCLe Skin:Left-Aligned-Green-Bullet-H2-Nested-Blue-Arrow http://spaces.fmr.com/docs/DOC-53068
• Bullet List with Black H3 Header
Use this component to display a list of links lower down on the page, below H2 content.
The links should lead to content within this section of the site.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list.
Visual Design Specs: http://styleguide.fmr.com/components/current/callouts/greenbullet-list-black-h3.html
DCLe Skin: Left-Aligned-Green-Bullet http://spaces.fmr.com/docs/DOC-27567
• Standalone H2 Header - Black
It is important to maintain the font hierarchy on a page by using headers. Many components include
H2 or H3 headers, but not all do. “Standalone” H2 and H3 headers are available when needed to group components that do not include headers.
Use a standalone H2 header when a component or group of components logically requires a heading.
Visual Design Specs: TBD
DCLe Skin: Small-Page-Title-Black http://spaces.fmr.com/docs/DOC-52787
Example:
• Standalone H3 Header – Black
Use a standalone H3 header when a component or group of components appearing below a section of
H2 content doesn’t already include a header.
Visual Design Specs: http://styleguide.fmr.com/components/current/pagetitles/page
-title_H3.html
DCLe Skin: Sub-Page-Title-Black http://spaces.fmr.com/docs/DOC-53007
12

Template Standards – Product Triage (L1) Page
Secondary Content Region (“Right Rail”)
Right Rail Rules
Apply to All Product Pages
ƒ Maximum # of Components = 4
ƒ Contact Us is required on each page and must be at the top.
ƒ All Headings are green H3s and Headings should not be duplicated. E.g., use only one “Help with…” list.
ƒ It’s acceptable to use more than one instance of a Bullet List or Teaser.
ƒ Components in this region are separated by Horizontal Rules that span the width of the Right Rail.
Call to Action Button in Right Rail
Ad Unit at bottom
Right Rail (max = 1)
Triage Page
YES
YES
Overview Page Detail Page Support Page
YES NO NO
Available Components
This region may contain the following components. “Contact Us” is required. See “Examples of Product Triage” pages to see these elements in context.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Contact Us (REQUIRED)
This component provides up to three ways for users to contact Fidelity, and it should be at the top right of the page.
A phone number is the primary contact channel in this component. Phone numbers should always be in this format: 800-343-3548.
Do not use the 1- at the beginning and do not use periods instead of hyphens. Never use vanity numbers like 800-FIDELITY online—these should be limited to print marketing.
The business determines the appropriate phone number and contact us title (i.e., investment professional, retirement specialist). They also determine the best secondary links to add under the phone number (i.e., Find an investment center, e-mail, open an account, etc.). Use no more than two links under the phone number. These links are separated by a pipe (“|”) and must be on one line.
Call to Action:
If a Triage Page’s primary call to action is to “Open an Account,” the button belongs at the top, above the Contact Us component. This is the only time that Contact Us is not first in the Right Rail.
At this time, the orange button is used to denote actions that open an account.
Above: An example of “Contact Us” with a Call to Action button.
Above: An example of “Contact Us” with no button.
Visual Design Specs: TBD
DCLe Skin: Contact-Us http://spaces.fmr.com/docs/DOC-54155
13

Template Standards – Product Triage (L1) Page
• Teaser with Green H3 Title
This teaser highlights a link that benefits from a brief description or requires context. The link should lead to a separate section of the site or to a deeplevel page within this section of the site.
The title should be only one line; do not wrap.
The paragraph should be no longer than four lines.
The link should be only one line.
Visual Design Specs: TBD
DCLe Skin: Teaser-With-Right-Image-And-Link-H3-Green-
Header http://spaces.fmr.com/docs/DOC-54106
When using this skin, do not use the byline or the image.
• Help with…
This list of Guidance related links is implemented with a bulleted list with an H3 header, preceded by the books icon:
help_h3.gif
This icon should have alt = “”.
These links should go to supporting or contextual content that provides guidance or education. Do not link to anything that you’ve already linked to elsewhere on this page.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow Link.
It’s acceptable for the list to have only one bulleted item.
Visual Design Specs:
TBD
DCLe Skin:Left-Aligned-Green-Bullet-H3-Nested-Blue-
Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110
• Bullet List with Green H3 Header
This type of list links to supporting content. The links should lead to a separate section of the site or to a deep-level page within this section of the site that cannot be accessed directly from the TOC.
This list may be called:
• “Tools & Calculators” – Links to tools or an education page for a tool that is behind a Login.
• “Tips & Tools” – Links to widgets or Flash applications.
• “Need more info?” – Links to information that would help a user make a decision to move forward with a purchase (i.e., education pages or Viewpoints)
• “Ready to buy?” – Links directly to a page where users can choose an investment to purchase.
• “Viewpoints” – Links to contextual Viewpoints articles.
• “Resources” – Links to additional resources supporting the main content of the page.
If a header is needed for a different purpose,
14
Visual Design Specs:
TBD
DCLe Skin:Left-Aligned-Green-Bullet-H3-Nested-Blue-
Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110
Continued.

Template Standards – Product Triage (L1) Page review the headers above and write the new one in a similar style. However, do not create a new version of one of the existing headers.
Do not duplicate headings on the same page.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow Link.
It’s acceptable for the list to have only one bulleted item.
• Ad Unit
Use a Standard Ad Unit from the Interactive
Messaging system. This ad unit is 180px wide and
150px tall.
Only one ad unit may be used on a page, and it must be the last component in the Right Rail.
IAM VERSUS STATIC AD?
• Horizontal Rule
A single rule separates the components in the Right
Rail, with 20px above the line and 10px below it.
Do not use a rule below the last component in the
Right Rail.
Visual Design Specs: http://styleguide.fmr.com/rules.html
DCLe Skin: Double-Horizontal-Rule http://spaces.fmr.com/docs/DOC-29683
See the “Image Standards” document (TBD) for information on choosing appropriate and using images for the site.
15

Template Standards – Product Triage (L1) Page
Note: Above, individual images are used with the large teasers and the green line is used on its own.
Below, a large image is used with the green line, so no images should be used with the individual teasers.
Note: In the old 75-25-TOC page template (used above), the Page Title did not span the full width of the page as it should have.
Note: In the new 75-25-TOC page template (used above in both the Fixed Income and Annuities pages), the Page
Title spans the full width of the page. All future product pages will use this new template.
16

Examples of “Right Rails”
Template Standards – Product Triage (L1) Page
17

Template Standards – Product Overview (L2) Page
18

Template Standards – Product Overview (L2) Page
A Product Overview Page provides detailed descriptions of products or services along with more supporting education than the Product Triage page provides. Customers should be clear that they are on the right path and have enough information to choose the correct product. The main section of the page provides links to Product
Detail pages, and the right side of the page offers links to supporting content.
• A Product Overview page is the top page of a Section of content. A user accesses one of these pages from a
Product Triage Page.
• The Primary Content Region should provide a link to each product or service available within this section, as noted by the links provided in the top half of the TOC. These links go to Product Detail pages.
• The Secondary Content Region enables users to visit sections of the site outside this particular section, such as contextual education and related products.
• The image below shows the template for this page. Note the “TOC,” “Page Title,” “Primary Content Region,” and “Secondary Content Region” labels, which is how we refer to these areas of the page.
19

Template Standards – Product Overview (L2) Page
• The Primary Content Region must include one Branding element, with only one green line on the page.
• The Secondary Content Region may contain only one advertising unit.
20

Template Standards – Product Overview (L2) Page
Page Layout and TOC
• Product Overview pages have a Table of Contents, to enable a user to browse content within this section.
The TOC is 169px wide, and this is a change from the 140px width we’ve been using since 2009.
• Product Overview pages are based on the “75-25 with TOC” Page Layout, and the column widths are:
10px(left margin)-169px(TOC)-21px(column margin)-573px(primary content region)-21px(column margin)-
191px(secondary content region)-10px(right margin)
Font Hierarchy
Properly coded headings are important for assistive devices such as screen readers, and for spiders that crawl web sites for search purposes. The headings convey hierarchy and the relationships between information.
21

Template Standards – Product Overview (L2) Page
TOC Region
Available Components
COMPONENT NAME
• Table of Contents (REQUIRED)
The TOC is static; it does not expand or collapse. It appears at the top of the TOC region and nothing is above it.
All links in the TOC go to pages within this section of the site. All lower-level pages (L3 and L4) in this section have the same TOC as the Overview page.
The top link in the TOC must be named “Overview,” and it is the link that corresponds to this Product
Overview (L2) page.
If the TOC contains a long list of links, use groups to make it easier for users to visually scan and parse the list.
The top section of links in the TOC displays the available products in this section, and they link to
Product Detail (L3) pages. The bottom section of the TOC would contain links to information that can be categorized as “education and support.”
Product Support (L4) pages do not appear on the
TOC.
Link names in the TOC may wrap to two lines if needed, but not more than two.
Note: At this time, the standard is that no content should appear in the TOC Region below the
Table of Contents.
EXAMPLE AND SUPPORTING DETAIL
Visual Design Specs: http://styleguide.fmr.com/components/current/toc/tocsectioned.html
DCLe Skin: retail-toc http://spaces.fmr.com/docs/DOC-52876
22

Template Standards – Product Overview (L2) Page
Primary Content Region
Available Components
The Primary Content Region may contain the following components. See “Examples of Product Overview Pages” to see these components in context.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Text
It is acceptable to use a paragraph of text between the Page Title and the beginning of the Marketing element to introduce the page.
Do not include links in this paragraph.
Multiple components may be used to implement a single paragraph. Consult with the DCLe analyst of the project to determine the best solution for a specific design.
• Marketing Element…………………………….?
• Teaser with Black H2 Header
Use one of these components for each of the main sections of content. The H2 Header gives the content visual prominence in the hierarchy of the page.
The text in each of these Teasers should be approximately the same length, though it is not required for the links to align horizontally across the page.
The link goes to a Product Detail (L3)page and should not wrap to a second line.
The Product Overview (L2) pages designed so far do NOT contain images in these teasers.
Visual Design Specs: http://styleguide.fmr.com/components/current/text/teaserwith-image-and-link-h2.html
DCLe Skin: Teaser-With-Right-Image-And-Link-H2 http://spaces.fmr.com/docs/DOC-53069
When using this skin on this page, do not use the image.
• Teaser
Use this component to link to other related content that supports the product, such as a complimentary product or service.
Visual Design Specs: http://styleguide.fmr.com/components/current/text/articleteaser-right.html
DCLe Skin:
Right-Image-Top-Title http://spaces.fmr.com/docs/DOC-29762
When using this skin, do not use the green header, the byline, the image, and the link at the end.
23

Template Standards – Product Overview (L2) Page
• Label/Value Pair Table
Use a Label/Value Pair Table when only two columns are needed to display information.
The table spans the full width of the Primary
Content Region.
The Label is bold; the description is non-bold. In place of a label, the Fixed Income pages use an image.
Visual Design Specs: http://styleguide.fmr.com/components/current/tables/tablelabelvalue.html
DCLe Skin: ??
• Bullet List with Black H2 Header
Use this component to display a list of links to content that supports the products in this area.
This list can contain links to:
– Related content within this section of the site
– Supporting content such as tools and education
– Complimentary products
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow Link.
Visual Design Specs: http://styleguide.fmr.com/components/current/callouts/gree n-bullet-list-black-h2.html
DCLe Skin: Left-Aligned-Green-Bullet-H2-Nested-Blue-
Arrow http://spaces.fmr.com/docs/DOC-53068
• Bullet List with Black H3 Header
Use this component to display a list of links lower down on the page, below H2 content.
The links should lead to content within this section of the site.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list
Visual Design Specs: http://styleguide.fmr.com/components/current/callouts/gree n-bullet-list-black-h3.html
DCLe Skin: Left-Aligned-Green-Bullet http://styleguide.fmr.com/components/current/callouts/gree n-bullet-list-black-h3.html
• Tool Box/Next Steps
Use this box to display appropriate “next steps” at the bottom of the page. Most of the time, this will point to related tools.
The title can vary, and will be defined by the
Content Strategist.
Only icons in the square, glossy style can be used .
The icon should be clickable, though they currently are not.
This box contains a maximum of two icons/links, and it is preferable that two be used. However, if only one is applicable, place it in the left side and leave the right blank.
24
Visual Design Specs:
TBD
DCLe Skin: Double-Teaser-Grey-Background http://spaces.fmr.com/docs/DOC-28872
NEED A LIBRARY OF EXISTING ICONS

• Standalone H2 Header - Black
It is important to maintain the font hierarchy on a page by using headers. Many components include
H2 or H3 headers, but not all do. “Standalone” H2 and H3 headers are available when needed to group components that do not include headers.
Use a standalone H2 header when a component or group of components doesn’t already include an H2 header.
Example:
Template Standards – Product Overview (L2) Page
Visual Design Specs:
TBD
DCLe Skin: Small-Page-Title-Black http://spaces.fmr.com/docs/DOC-52787
• Standalone H3 Header – Black
Use a standalone H3 header when a component or group of components appearing below a section of
H2 content doesn’t already include a header.
Visual Design Specs: http://styleguide.fmr.com/components/current/pagetitles/pa ge-title_H3.html
DCLe Skin Sub-Page-Title-Black http://spaces.fmr.com/docs/DOC-53007
25

Template Standards – Product Overview (L2) Page
Secondary Content Region (“Right Rail”)
Right Rail Rules
Apply to All Product Pages
ƒ Maximum # of Components = 4
ƒ Contact Us is required on each page and must be at the top.
ƒ All Headings are green H3s and Headings should not be duplicated. E.g., use only one “Help with…” list.
ƒ It’s acceptable to use more than one instance of a Bullet List or Teaser.
ƒ Components in this region are separated by Horizontal Rules that span the width of the Right Rail.
Call to Action Button in Right Rail
Ad Unit at bottom
Right Rail (max = 1)
Triage Page
YES
YES
Overview Page
NO
YES
Detail Page Support Page
NO NO
NO NO
Available Components
This region may contain the following components. “Contact Us” is required.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Contact Us (REQUIRED)
This component provides up to three ways for users to contact Fidelity, and it should be at the top right of the page.
The title of this component may vary, as shown in the examples on the right.
A phone number is the primary contact channel in this component. Phone numbers should always be in this format: 800-343-3548.
Do not use the 1- at the beginning and do not use periods instead of hyphens. Never use vanity numbers like 800-FIDELITY online—these should be limited to print marketing.
The business determines the appropriate phone number and contact us title (i.e., investment professional, retirement specialist). They also determine the best secondary links to add under the phone number (i.e., Find an investment center, e-mail, open an account, etc.). Use no more than 2 links under the phone number. The links are separated by a pipe (“|”) and must be on one line.
Call to Action:
This type of page does not include a call to action button in the Right Rail.
Visual Design Specs: TBD
DCLe Skin: Contact-Us http://spaces.fmr.com/docs/DOC-54155
26

Template Standards – Product Overview (L2) Page
• Teaser with Green H3 Title
Use this teaser to highlight a link that benefits from a brief description or requires context. The link should lead to a separate section of the site or to a deep-level page within this section of the site.
The title should be only one line; do not wrap.
The paragraph should be no longer than four lines.
The link should be only one line.
Visual Design Specs: TBD
DCLe Skin: Teaser-With-Right-Image-And-Link-H3-
Green-Header http://spaces.fmr.com/docs/DOC-54106
When using this skin, do not use the byline or the image.
• Bullet List with Green H3 Header
This type of list links to supporting content. The links lead to a separate section of the site or to a deep-level page within this section of the site that cannot be accessed directly from the TOC. This list may be called:
• “Tools & Calculators” – Links to tools or an education page for a tool that is behind a Login.
• “Tips & Tools” – Links to widgets or Flash applications.
• “Need more info?” – Links to information that would help a user make a decision to move forward with a purchase (i.e., education pages or Viewpoints)
• “Ready to buy?” – Links directly to a page where users can choose an investment to purchase.
• “Viewpoints” – Links to contextual Viewpoints articles.
• “Resources” – Links to additional resources supporting the main content of the page.
If a header is needed for a different purpose, review the headers above and write the new one in a similar style. However, do not create a new version of one of the existing headers.
Do not duplicate headings on the same page.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow Link.
It’s acceptable for the list to have only one bulleted item.
Visual Design specs:
DCLe Skin:Left-Aligned-Green-Bullet-H3-Nested-Blue-
Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110
27

Template Standards – Product Overview (L2) Page
• Help with…
This list of Guidance related links is implemented with a bulleted list with an H3 header, preceded by the books icon:
help_h3.gif
This icon should have alt = “”.
These links should go to supporting or contextual content that provides guidance or education. Do not link to anything that you’ve already linked to elsewhere on this page.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow Link.
(Note that the H3 header is a change from the H2
“Help with” headers used on the Retirement product pages.)
Visual Design Specs:
DCLe Skin: Left-Aligned-Green-Bullet-H3-Nested-Blue-
Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110
• Ad Unit vs. Static Ad?
Use a Standard Ad Unit from the Interactive
Messaging system. This ad unit is 180px wide and
150px tall.
Only one ad unit may be used on a page, and it must be the last component in the Right Rail.
• Horizontal Rule
A single rule separates the components, with 20px above the line and 10px below it.
Do not use a rule below the last component in the
Right Rail.
Visual Design Specs: http://styleguide.fmr.com/rules.html
DCLe Skin: Double-Horizontal-Rule http://spaces.fmr.com/docs/DOC-29683
See the “Image Guidelines” document (TBD) for information on choosing and using appropriate images for the site and this page. At this time, there are no specific image standards for Overview pages.
28

Template Standards – Product Overview (L2) Page
29

Template Standards – Product Detail (L3) Page
30

Template Standards – Product Detail (L3) Page
Product Detail Pages focus on a particular product that Fidelity offers. The main purpose of the page is to educate users on the product and give them enough information to decide whether this is the right product for them.
• The Primary Content Region contains the details of the product at the top, in a scannable format. Users should be able to see the key features of the product and make a decision to buy, research, or learn more.
• Below the product detail is an area intended as “Next Steps.” Here, provide information on what the user should do next to complete the acquisition of this product. For example, the Retirement Product pages use
“How to get started” and provide a checklist. This approach may vary by product.
• If a marketing or “value proposition” is needed, it should be at the bottom of the page.
• The main call to action on a Product Detail Page is for the user to purchase the product. Therefore, the
Primary Content Region contains an “Open” button to initiate the online process. If the product cannot be opened or purchased online, the main call to action should be to call a representative.
• The Secondary Content Region contains educational information related to the product, to support the user in making a decision.
• The image below shows the template used for this page. Note the “TOC,” “Page Title,” “Primary Content
Region,” and “Secondary Content Region” labels, which is how we refer to these areas of the page.
31

Template Standards – Product Detail (L3) Page
• Product Detail pages do not contain a branding element in the Primary Content Region. The assumption is that the user has already seen the branding elements on higher level pages.
• Product Detail Pages do not contain advertising units in the Secondary Content Region. The user is already on a product page, so do not distract them with an ad that could pull them away from this page.
• Content that provides “Brand Promise” information appears at the bottom of the Primary Content Region, below the detail for the product.
WHAT ELSE?
32

Template Standards – Product Detail (L3) Page
Page Layout and TOC
• Product Detail pages have a Table of Contents to enable a user to browse content within this section.
• Product Detail pages are based on the “75-25 with TOC” page Layout, and the column widths are:
10px (left margin)-169px (TOC)-21px(column margin)-573px(primary content region)-21px(column margin)-
191px(secondary content region)-10px(right margin)
33

Template Standards – Product Detail (L3) Page
Font Hierarchy
Properly coded headings are important for assistive devices such as screen readers, and for spiders that crawl web sites for search purposes. The headings convey hierarchy and the relationships between information.
Å To explain the attributes of a particular product (which will vary), Product Detail (L3) pages may include more elements on the page than Triage (L1) and Overview (L2) pages. Therefore, depending on the visual context of the page, the designer may choose either a Green or a Black H2 for the page, depending on which color better supports the visual hierarchy.
If using a Black H2, use a Green H3.
If using a Green H2, use a Black H3.
34

Template Standards – Product Detail (L3) Page
TOC Region
Available Components
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Table of Contents (REQUIRED)
The TOC is static; it does not expand or collapse. It appears at the top of the TOC Region, with nothing above it.
All links in the TOC go to pages within this section of the site.
The top link in the TOC, must be named “Overview,” and it is the link that corresponds to this Product
Overview (L2) page.
Note that the links in the TOC on the Product Detail
(L3) page are the same as the TOC on the Product
Overview (L2) page. All Product Detail pages in the same section have the same TOC.
If the TOC contains a long list of links, use groups to make it easier for users to visually scan and parse the list.
The top section of links in the TOC displays the available products in this product area, and they link to Product Detail (L3) pages. The bottom section of the TOC contains links to information that can be categorized as “education and support.”
Link names in the TOC may wrap to two lines if needed, but not more than two.
Note: At this time, the standard is that no content should appear in the TOC Region below the
Table of Contents.
Visual Design Specs: http://styleguide.fmr.com/components/current/toc/tocsectioned.html
DCLe Skin: retail-toc http://spaces.fmr.com/docs/DOC-52876
35

Template Standards – Product Detail (L3) Page
Primary Content Region
Available Components
This region may contain the following components. See “Examples of Product Detail Pages” to see these components in context.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Text
Use a paragraph at the top of the page to provide a short summary of the product.
If a standalone paragraph is required elsewhere on the page, it may require a Standalone H2 Header to maintain the information hierarchy on the page.
Multiple components may be used to implement a simple paragraph. Consult with the DCLe analyst of the project to determine the best solution in the context of a specific design.
• Call to Action
The main call to action is to lead the customer to the accounting opening process.
If the product may be opened online, use a
Medium-sized orange “Glassy” button in the
Primary Content Region, to the right of the summary paragraph.
Text on the button is:
Open a/an {product name}
If the call to action is not account opening, use a blue button with the appropriate language.
DCLe Skin for Orange button:
GeneralText-Image http://spaces.fmr.com/docs/DOC-51395
Visual Design Specs: http://styleguide.fmr.com/components/current/links/buttonsnew-glassy.html
• Label/Value Pair Table
Use a Label/Value Pair Table when only two columns are needed to display the main attributes of the product.
The attributes must be the same on all Product
Detail pages in this section to enable a user to compare products.
The table spans the full width of the Primary
Content Region.
The Label is bold; the description is non-bold. Do not use column dividers in this table.
Visual Design Specs: http://styleguide.fmr.com/components/current/tables/tablelabelvalue.html
DCLe Skin: ?
36

Template Standards – Product Detail (L3) Page
• Simple Table
Use a Simple Table when you have more than two columns of detail to display to explain the attributes of the product.
Column labels are bold. Data is non-bold.
The label row is separated from the data rows by a
2px bottom border.
Visual Design Specs: http://styleguide.fmr.com/components/current/tables/tablesimple.html
DCLe Skin?
Accessibility: Semantic Structure for Data Tables: http://accessibility.fmr.com/standards/tableHeaders.asp
• Standalone H2 Header
Use a standalone H2 header when a component or group of components doesn’t already include an H2 header.
Use Green or Black, depending on the font hierarchy on the page.
Example:
Visual Design Specs—Green: http://styleguide.fmr.com/components/current/pagetitles/pa ge-title_H2.html
DCLe Skin: Small-Page-Title http://spaces.fmr.com/docs/DOC-29704
Visual Design Specs—Black:
TBD
DCLe Skin : Small-Page-Title-Black http://spaces.fmr.com/docs/DOC-52787
• Tab Set
Use a tab set when the attributes of a product are complex enough to require multiple “pages” of detail.
The tabs appear at the top of the content, but do not have left, right, or bottom borders.
• Tool Box/Next Steps
Use this box to display appropriate “next steps” at the bottom of the page. Most of the time, this will point to related tools.
The title can vary, and will be defined by the
Content Strategist.
Only icons in the square, glossy style can be used.
The icon should be clickable, though they currently are not.
This box contains a maximum of two icons/links, and it is preferable that two be used. However, if only one is applicable, place it in the left side and leave the right blank.
Visual Design Specs:
TBD
DCLe Skin: Tabby Container No Border
In development
Visual Design Specs:
TBD
DCLe Skin: Double-Teaser-Grey-Background http://spaces.fmr.com/docs/DOC-28872
NEED A LIBRARY OF EXISTING ICONS.
37

Template Standards – Product Detail (L3) Page
• Blue Arrow/More Link
Use a Blue Arrow Link when a “summary” or “next steps” type of link is needed at the bottom of a section of content.
Some components have this link built in, but it is available separately when needed.
The link text can be bold if needed to make it stand out.
The icon has alt = “”.
• Teasers with Black H3 and no link/no image
These teasers are intended to support the brand.
Write a meaningful description of how the product supports the brand pillar.
If used in pairs or groups, each teaser needs to be the same number of lines of text.
Visual Design Specs: http://styleguide.fmr.com/components/current/links/morelink.html
DCLe Skin: Blue-Arrow http://spaces.fmr.com/docs/DOC-29702
• Video
The image is the first frame?
The image is clickable and launches the video in a separate window. The “Watch…” link below the image also launches the video. Include a timestamp that indicates the length of the video.
For accessibility purposes:
ƒ Do not auto-play the content. Let users start it.
ƒ Make it clear which link actually launches the content, and whether it opens in a new window.
ƒ Provide a transcript.
• Expand/Collapse
Use Expand/Collapse for content that is necessary for only a small percentage of users, or for lowpriority content that is not required for users to make a decision.
Use Expand/Collapse when there are several categories of information but only a subset applies to certain users. Users can click on only the headings that are useful to them.
Accessibility: Multi-Media Captioning http://accessibility.fmr.com/standards/multimediaCaptioning.
asp
Visual Design Specs: http://styleguide.fmr.com/components/current/special/expan d-collapse-area.html
DCLe Skin: Expand-Collapse http://spaces.fmr.com/docs/DOC-53506
DCLe Skin: teaser-with-right-image-and-link-h3 http://spaces.fmr.com/docs/DOC-54105
When using this skin, do not use the Byline, the image, and the link at the end.
38

Template Standards – Product Detail (L3) Page
Secondary Content Region (“Right Rail”)
Right Rail Rules
Apply to All Product Pages
ƒ Maximum # of Components = 4
ƒ Contact Us is required on each page and must be at the top.
ƒ All Headings are green H3s and Headings should not be duplicated. E.g., use only one “Help with…” list.
ƒ It’s acceptable to use more than one instance of a Bullet List or Teaser.
ƒ Components in this region are separated by Horizontal Rules that span the width of the Right Rail.
Call to Action Button in Right Rail
Ad Unit at bottom
Right Rail (max = 1)
Triage Page Overview Page Detail Page
YES NO NO
YES YES NO
Support Page
NO
NO
Available Components
This region may contain the following components. “Contact Us” is required.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Contact Us (REQUIRED)
This component provides up to three ways for users to contact Fidelity, and it should be at the top right of the page.
A phone number is the primary contact channel in this component. Phone numbers should always be in this format: 800-343-3548.
Do not use the 1- at the beginning and do not use periods instead of hyphens. Never use vanity numbers like 800-FIDELITY online—these should be limited to print marketing.
The business determines the appropriate phone number and contact us title (i.e., investment professional, retirement specialist). They also determine the best secondary links to add under the phone number (i.e., Find an investment center, e-mail, open an account, etc.). Use no more than 2 links under the phone number.
Call to Action:
If the Product Detail Page has a primary call-toaction, it belongs on the Primary Content Region, not in the Right Rail.
Visual Design Specs: TBD
DCLe Skin: Contact-Us http://spaces.fmr.com/docs/DOC-54155
39

Template Standards – Product Detail (L3) Page
• Help with…
This list of Guidance related links is implemented with a bulleted list with an H3 header, preceded by the books icon:
help_h3.gif
This icon should have alt = “”.
These links should go to supporting or contextual content that provides guidance or education. Do not link to anything that you’ve already linked to elsewhere on this page.
To optimize the user’s ability to visually scan and parse the page, use no more than 4 links in this list, or 3 links followed by a Blue Arrow Link.
Visual Design Specs:
TBD
DCLe Skin: Left-Aligned-Green-Bullet-H3-Nested-
Blue-Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110
• Teaser with Green H3 Title
This teaser highlights a link that benefits from a brief description or requires context. The link should lead to a separate section of the site or to a deep-level page within this section of the site.
The title should be only one line: do not wrap.
The paragraph should be no longer than four lines.
The link should be only one line.
The icon has alt = “”.
Visual Design Specs: TBD
DCLe Skin: Teaser-With-Right-Image-And-Link-H3-
Green-Header http://spaces.fmr.com/docs/DOC-54106
When using this skin, do not use the byline or the image.
• Bullet List with Green H3 Header
This type of list links to supporting content. The links lead to a separate section of the site or to a deep-level page within this section of the site that cannot be accessed directly from the TOC. This list may be called:
• “Tools & Calculators” – Links to tools or an education page for a tool that is behind a
Login.
• “Tips & Tools” – Links to widgets or Flash applications.
40
• “Need more info?” – Links to information that would help a user make a decision to move forward with a purchase (i.e., education pages or Viewpoints)
• “Ready to buy?” – Links directly to a page where users can choose an investment to purchase.
• “Viewpoints” – Links to contextual Viewpoints articles.
• “Resources” – Links to additional resources supporting the main content of the page.
If a header is needed for a different purpose, review the headers above and write the new one in a similar style. However, do not create a new
Visual Design specs:
TBD
DCLe Skin:Left-Aligned-Green-Bullet-H3-Nested-Blue-
Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110

Template Standards – Product Detail (L3) Page version of one of the existing headers.
Do not duplicate headings on the same page.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow
Link.
It’s acceptable for the list to have only one bulleted item.
The icon has alt = “”.
• Horizontal Rule
A single rule separates the components, with
20px above the line and 10px below it.
Do not use a rule below the last component in the
Right Rail.
-
Visual Design Specs: http://styleguide.fmr.com/rules.html
DCLe Skin:
Double-Horizontal-Rule http://spaces.fmr.com/docs/DOC-29683
Image Standards
See the “Image Guidelines” document for information on choosing and using the appropriate images for the site and this page. At this time, there are no specific standards for choosing images for this page.
Fixed Income Product Detail Page
Fixed Income Product Detail Page
41

Template Standards – Product Detail (L3) Page
Annuities Product Detail Page
42

Examples of Right Rail
Template Standards – Product Detail (L3) Page
43

Template Standards – Product Support (L4) Page
44

Template Standards – Product Support (L4) Page
Product Support Pages provide in-depth, unbiased information about a particular topic and support the products
Fidelity offers. User should feel they are getting impartial education and are not being sold a Fidelity product.
• The Primary Content Region contains the main content and any required disclosures. The content is written by Fidelity.
• The Secondary Content Region contains logical next steps such as related products, additional education, and tools.
• The image below shows the layout for this page. Note the “Primary Content Region” and “Secondary Content
Region” labels, which is how we refer to these areas of the page.
45

Template Standards – Product Support (L4) Page
• Support Pages do not include brand elements or other marketing because they are meant to be unbiased.
These articles provide educational content that supports a product that Fidelity offers.
The Support page must include all required components indicated below, and those components are described in the Region descriptions below.
Required Components on All Product Support Pages
46

Template Standards – Product Support (L4) Page
COMPONENT NAME
• Navigation Bar (REQUIRED)
The Navigation Bar provides consistent site-level navigation across the site, and must be provided on all pages to enable the user to explore all content on the site.
The only time we do not include a Navbar is during stepped processes such as Account Opening, when it is important for the user to finish the flow of the task at hand.
EXAMPLE AND SUPPORTING DETAIL
Visual Design Specs: http://styleguide.fmr.com/components/current/navigation/na v-bar-dropdown.html
DCLe Skin: <none available>
• Breadcrumb (REQUIRED)
Breadcrumbs are important on a page as a wayfinding device. They show the user where they are in the site. As SEO improves the “findability” of lower-level pages, Breadcrumbs become more important.
Articles typically “live” off a detailed product page, and have a breadcrumb such as:
Home > Navbar Menu name > Triage Page name >
Overview Page name > Detail Page name >
When a name in the Breadcrumb has an associated link, link to it.
• E-Mail Functionality (REQUIRED)
Each article page must be shareable via E-Mail. The
E-Mail link is located at the top left of the Primary
Content Region. (See “Print Functionality.”)
This functionality enables customers to share with others by emailing a link to the page.
Visual Design Specs: http://styleguide.fmr.com/components/current/navigation/to pic-paths.html
DCLe Skin: Breadcrumb http://spaces.fmr.com/docs/DOC-29712
CONFIRM WITH ANN
• Print Functionality (REQUIRED)
Each article page must be printable in a “friendly” format that removes the extraneous Right Rail content.
Print appears with E-Mail and Share Functionality, in the following order in the upper right of the page.
Its position at the top of the page indicates it impacts the entire page.
Visual Design Specs: Article Controls http://styleguide.fmr.com/components/current/text/articlecontrols.html
Visual Design Specs: Printing Functionality http://styleguide.fmr.com/formatForPrinting.html
Visual Design Specs: Article Controls http://styleguide.fmr.com/components/current/text/articlecontrols.html
Visual Design Specs: Email Functionality
Need to document Email handling.
• Share Functionality (REQUIRED)
Each article page must be shareable across a variety of social media sites that have been approved, as shown on the right.
Do not add to this list.
47

Template Standards – Product Support (L4) Page
• Font Resizing Functionality (REQUIRED)
Each article page must be resizable.
The Font Resizing links are located at the top right of the page. (See “Print Functionality.”)
Font Resizing enables users to increase the size of the font, potentially making it easier and more accessible for users with vision difficulties to read our content.
Placing the control on the page makes the functionality more visible to users, and doesn’t require them to be familiar with browser-provided sizing controls in the menu.
Visual Design Specs and Functional Details: http://styleguide.fmr.com/components/current/text/articlecontrols.html
DCLe Skin: Page-Control-Bar http://spaces.fmr.com/docs/DOC-28947
• Double Horizontal Rule (REQUIRED)
A double rule separates the main content from the
Legal/Footnote text.
It spans the full width (100%) of the region.
Use 30px above the line and 10px below it.
• Legal/Footnotes (REQUIRED)
The Footnote area is the place for all disclosures that must appear on a page for risk and compliance purposes. It is included within the Article template.
The Footnote also contains the G2 number, which is obtained from the Compliance Review Group after they have approved the material.
Certain disclosures have specific proximity and prominence requirements, which are described in the Communications Disclosure Library (CDL) at http://iweb.fmr.com/cdl/pages/home .
• Page Footer (REQUIRED)
Each page has a Page Footer at the bottom of all pages.
It provides a visual “end” to the page and provides copyright information as well as links to other sitewide content such as the Site Map.
Visual Design Specs: http://styleguide.fmr.com/rules.html
DCLe Skin: Double-Horizontal-Rule http://spaces.fmr.com/docs/DOC-29577
Visual Design Specs: http://styleguide.fmr.com/components/current/text/footnote.
html
Visual Design Specs: http://styleguide.fmr.com/components/current/footers/topicfooters.html
DCLe Skin: Grey-Background http://spaces.fmr.com/docs/DOC-29566
48

Template Standards – Product Support (L4) Page
Page Layout and TOC
• Product Support pages have a Table of Contents to enable a user to browse content within this section.
• Product Support pages are based on the “75-25 with TOC” page Layout, and the column widths are:
10px (left margin)-169px (TOC)-21px(column margin)-573px(primary content region)-21px(column margin)-
191px(secondary content region)-10px(right margin)
Font Hierarchy
49

Template Standards – Product Support (L4) Page
Primary Content Region
Available Components
COMPONENT NAME
• Page Title (REQUIRED)
Each page must have a single Green Page Title coded as an <H1>.
The Title is created by the Content Strategist and must be consistent with SEO and editorial style guide standards.
For accessibility, the <pagetitle> tag for the page must match the <H1> tag.
The Page Title displays in the Page Title Region, which spans above both the Primary and
Secondary Content Regions. (On pages with TOCs, the Page Title does not display above the TOC
Region.)
• Article (REQUIRED)
The Article Template includes an H2, but it is reserved for an article subtitle, which isn’t used frequently.
The H3 is defined as Arial 14px, bold.
The Article includes a footnote preceded by a dotted line. Since this line is included within this component, we will continue to use it, even though it doesn’t match the current standard (double horizontal rule).
EXAMPLE AND SUPPORTING DETAIL
Visual Design Specs: http://styleguide.fmr.com/components/current/pagetitles/page
-title_H1.html
DCLe Skin: Big-Page-Title http://spaces.fmr.com/docs/DOC-29703
Editorial rules for Page Titles: http://styleguide.fmr.com/editorial/content/parts.html#Titles
SEO Guidelines: http://styleguide.fmr.com/editorial/content/SEO-
QuickRefBestPractices.xls
Accessibility Standards for Page Titles: http://accessibility.fmr.com/standards/pageTitles.asp
Visual Design Specs: http://styleguide.fmr.com/components/current/pagetitles/page
-title_H1.html
DCLe Skin: Article http://spaces.fmr.com/docs/DOC-25761
SEO Guidelines: ??????????????
50

Template Standards – Product Support (L4) Page
Secondary Content Region (“Right Rail”)
Right Rail Rules
Apply to All Product Pages
ƒ Maximum # of Components = 4
ƒ Contact Us is required on each page and must be at the top.
ƒ All Headings are H3s and Headings should not be duplicated. E.g., use only one “Help with…” list.
ƒ It’s acceptable to use more than one instance of a Bullet List or Teaser.
ƒ Components in this region are separated by Horizontal Rules that span the width of the Right Rail.
Triage Page Overview Page Detail Page Support Page
Call to Action Button in Right Rail
Ad Unit at bottom
Right Rail (max = 1)
YES YES NO NO
Available Components
This region may contain the following components. “Contact Us” is required.
COMPONENT NAME EXAMPLE AND SUPPORTING DETAIL
• Contact Us (REQUIRED)
This component provides up to three ways for users to contact Fidelity, and it should be at the top right of the page.
If the Product Detail Page has a primary call-toaction, it belongs on the Primary Content Region, not in the Right Rail.
A phone number is the primary contact channel in this component. Phone numbers should always be in this format: 800-343-3548.
Do not use the 1- at the beginning and do not use periods instead of hyphens. Never use vanity numbers like 800-FIDELITY online—these should be limited to print marketing.
The business determines the appropriate phone number and contact us title (i.e., investment professional, retirement specialist). They also determine the best secondary links to add under the phone number (i.e., Find an investment center, e-mail, open an account, etc.). Use no more than 2 links under the phone number.
Visual Design Specs: TBD
DCLe Skin: Contact-Us http://spaces.fmr.com/docs/DOC-54155
51

Template Standards – Product Support (L4) Page
• Help with…
This list of Guidance related links is implemented with a bulleted list with an H3 header, preceded by the books icon:
help_h3.gif
This icon should have alt = “”.
These links should go to supporting or contextual content that provides guidance or education. Do not link to anything that you’ve already linked to elsewhere on this page.
To optimize the user’s ability to visually scan and parse the page, use no more than 4 links in this list, or 3 links followed by a Blue Arrow Link.
Visual Design Specs:
TBD
DCLe Skin: Left-Aligned-Green-Bullet-H3-Nested-
Blue-Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110
• Teaser with Green H3 Title
This teaser highlights a link that benefits from a brief description or requires context. The link should lead to a separate section of the site or to a deep-level page within this section of the site.
The title should be only one line: do not wrap.
The paragraph should be no longer than four lines.
The link should be only one line.
The icon has alt = “”.
Visual Design Specs: TBD
DCLe Skin: Teaser-With-Right-Image-And-Link-H3-
Green-Header http://spaces.fmr.com/docs/DOC-54106
When using this skin, do not use the byline or the image.
• Bullet List with Green H3 Header
This type of list links to supporting content. The links lead to a separate section of the site or to a deep-level page within this section of the site that cannot be accessed directly from the TOC. This list may be called:
• “Tools & Calculators” – Links to tools or an education page for a tool that is behind a
Login.
• “Tips & Tools” – Links to widgets or Flash applications.
52
• “Need more info?” – Links to information that would help a user make a decision to move forward with a purchase (i.e., education pages or Viewpoints)
• “Ready to buy?” – Links directly to a page where users can choose an investment to purchase.
• “Viewpoints” – Links to contextual Viewpoints articles.
• “Resources” – Links to additional resources supporting the main content of the page.
If a header is needed for a different purpose, review the headers above and write the new one in a similar style. However, do not create a new
Visual Design specs:
TBD
DCLe Skin:Left-Aligned-Green-Bullet-H3-Nested-Blue-
Arrow-Green-Header http://spaces.fmr.com/docs/DOC-54110

Template Standards – Product Support (L4) Page version of one of the existing headers.
Do not duplicate headings on the same page.
To optimize the user’s ability to visually scan and parse the page, use no more than four links in this list, or three links followed by a Blue Arrow
Link.
It’s acceptable for the list to have only one bulleted item.
The icon has alt = “”.
• Horizontal Rule
A single rule separates the components, with
20px above the line and 10px below it.
Do not use a rule below the last component in the
Right Rail.
-
Visual Design Specs: http://styleguide.fmr.com/rules.html
DCLe Skin:
Double-Horizontal-Rule http://spaces.fmr.com/docs/DOC-29683
Image Standards
Do these articles have images? (Some News Articles do.)
53

Template Standards – Product Support (L4) Page
54

Appendix
A Template is a Page Layout with a defined set of components that can be used in it, along with rules around the types of content that need to be presented on the page.
For example, this document describes templates to be used for pages that provide information about Products.
55