ATTACHMENT_I_FSA_ISE_WEB_DEVELOPER_GUIDE.pdf

April 16, 2014

FEDERAL STUDENT AID

WEB DEVELOPER GUIDE

APRIL 16, 2014

Federal Student Aid Web Developer Guide

Table of Contents

Introduction

Colors

Text Specifications

Site Header

Navigation

Page Header

Breadcrumbs

Anchor Links

Tables

Feature Boxes

Announcement Bar

Forms

Promotional Tiles

Footer

Template Examples

Resources

Federal Student Aid Web Developer Guide

Introduction

At Federal Student Aid (FSA), we take tremendous pride in providing more than $150 billion in grants, loans, and work-study funds every year to make college or career school possible for millions of students nationwide. We also understand the critical role that our websites play in communicating information to our customers and partners.

In 2012, FSA introduced a new themeline, Proud Sponsor of the American Mind®, as well as a new look and feel for our communications. FSA released a Style Guide to assist the organization in integrating the new themeline into our many customer touchpoints. This Web Developer Guide is a supplement to the Style Guide and provides additional details for business owners responsible for the look and feel of FSA websites.

This guide is intended to provide an overview of key themes and elements along with page templates and examples. Website owners have flexibility in determining how to implement this guidance based on the needs of their site and target audiences.

You can also see StudentAid.gov, FinancialAidToolkit.ed.gov and fsa.share.ed.gov/COO/ comm/News/BrandStyleGuide2014.pdf for examples of the application of colors, fonts, and components. If you would like PSD templates or other files for any of the sites or examples provided in this guide, see the contacts on the Resources page (p. 55). We also welcome any suggestions or feedback.

http://studentaid.gov http://financialaidtoolkit.ed.gov http://fsa.share.ed.gov/COO/comm/News/BrandStyleGuide2014.pdf http://fsa.share.ed.gov/COO/comm/News/BrandStyleGuide2014.pdf

Federal Student Aid Web Developer Guide

Site Header (p. 14)

Announcement Bar (p. 35)

Footer (p. 45)

Introduction

Page Referenced Link:

StudentAid.gov

This Web Developer Guide provides an overview of the key website design themes and elements. The image on this page provides an example of how the components can come together on a website’s home page.

http://StudentAid.gov

Federal Student Aid Web Developer Guide

Introduction

Page Referenced Link:

StudentAid.gov/repay-loans /understand

The image on this page provides an example of how the components can come together on a website’s interior page.

Navigation (p. 15)

Breadcrumbs (p. 26)

Page Header (p. 25)

Anchor Links (p. 27)

Promotional Tile Area

(p. 40)

Feature Box (p. 34) http://studentaid.gov/repay-loans/understand http://studentaid.gov/repay-loans/understand

Federal Student Aid Web Developer Guide

Global Color #578300

Section 1 Color #578036

Section 2 Color #917227

Section 3 Color #3d8076

Section 4 Color #7a792f

Section 5 Color #994640

Colors: Global and Sections

If your website is divided into sections, we recommend using section colors to identify each website section or area. The home page and pages that are not part of a specific section (such as the privacy notice section) should use the global color.

While it is recommended that you follow the order of the section colors, you can change the order based on the needs of your site. See StudentAid.gov and FinancialAidToolkit.ed.gov for examples of the application of the section colors.

The Template section in the back (p. 46) provides examples of the use of section colors and global color for StudentAid.gov.

http://StudentAid.gov http://FinancialAidToolkit.ed.gov

Federal Student Aid Web Developer Guide

Colors: Buttons

Buttons are used to direct users to certain sections of the site or to prompt users to take certain actions after reading the content.

For button colors, use the section color on top and button shade color on the bottom. On rollovers, colors will be reversed.

For text in the button, Arial Bold 0.75em in #ffffff should be used. The copy should be treated with

ALL CAPS.

Button shade – #4e7330 Section 1 – #578036

Button shade – #856824 Section 2 – #917227

Button shade – #37736a Section 3 – #3d8076

Button shade – #626d2b Section 4 – #7a792f

Button shade – #8e413c Section 5 – #994640

Button shade – #527c00 Global – #578300

Inactive – #6d6f70 Button shade – #636566

Section 1 – #578036 Button shade – #4e7330

Section 2 – #917227 Button shade – #856824

Section 3 – #3d8076 Button shade – #37736a

Section 4 – #7a792f Button shade – #626d2b

Section 5 – #994640 Button shade – #8e413c

Global – #578300 Button shade – #527c00

Button RolloverButton Default

Federal Student Aid Web Developer Guide

Section 1 Divider Color #578036 Stroke – 2pt

Section 2 Divider Color #917227 Stroke – 2pt

Section 3 Divider Color #3d8076 Stroke – 2pt

Section 4 Divider Color #7a792f Stroke – 2pt

Section 5 Divider Color #994640 Stroke – 2pt

Global Divider Color #578300 Stroke – 2pt

Colors: Section Dividers

Section dividers are used in the content area to divide or break up blocks of text/content.

Use the primary section color for divider lines between content blocks and the borders of tables.

Federal Student Aid Web Developer Guide

News Cycle Regular is the primary font for web headers, subheaders, and navigation. Substitute fonts are Arial, Tahoma, and Myriad.

All fonts included in the developer guide are available as a Google web font. You can pull the font from the Google server or download the font locally.

Please refrain from using fonts other than those noted above.

For header text colors, please follow global or section colors.

See example on p. 10.

Header Font

AaBbCcDdEeFfGgHhI iJ jKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz 1234567890 [{?@$& – News Cycle Regular

Header Text Size

H1 Header – 1.5em

H2 Header – 1.4em

H3 Header – 1.2em

H4 Header – 1em

Header Text Colors

Global Color – #578300

Section 1 Color – #578036

Section 2 Color – #917227

Section 3 Color – #3d8076

Section 4 Color – #7a792f

Section 5 Color – #994640

Text Specifications: Headers

Federal Student Aid Web Developer Guide

H1

H2 H3 H4

Page Referenced Link:

StudentAid.gov/prepare-for-college/checklists/12th-grade

An example of how headers are used.

Text Specifications: Header Usage http://StudentAid.gov/prepare-for-college/checklists/12th-grade http://StudentAid.gov/prepare-for-college/checklists/12th-grade http://StudentAid.gov/prepare-for-college/checklists/12th-grade

Federal Student Aid Web Developer Guide

Droid Serif Regular is the body font for web.

Substitute fonts are Times New Roman and Times.

All fonts included in the developer guide are available as a Google web font. You can pull the font from the Google server or download the font locally. Please refrain from using fonts other than noted above.

Body Font

AaBbCcDdEeFfGgHhIiJjK k LlMmNnOo PpQqR rSsTtUuVvWwX xYyZz 123 4567890[{?@$& – Droid Serif Regular

Body Text Size

Cras et lectus quis massa dapibus external link at vel mauris. Donec quis magna lacus, grammar tool tip auctor massa. Sed quis elit odio. – 1em, 0.9em

Text Specifications: Body ras et lectus quis massa dapibus external link at vel mauris. Donec quis magna lacus, grammar tool tip auctor massa. Sed quis elit odio. – #494b4c

*FSA is able to adjust this shade of body text from light to dark.

Body Text Colors ras et lectus quis massa dapibus external link at vel mauris. Donec quis magna lacus, grammar tool tip auctor massa. Sed quis elit odio. – #000000

Federal Student Aid Web Developer Guide

Page Referenced Link:

StudentAid.gov/eligibility /intellectual-disabilities

The glossary term hover is using the HTML <cite> tag. The title attribute in the <cite> tag is what is causing the tooltip to appear upon hover.

StudentAid.gov currently uses this glossary term hover function.

Here’s a cite tag example:

<li>are maintaining <cite title =“A school’s standards for satisfactory academic progress toward a degree or certificate offered by that institution. Check with your school to find out its standards.”>satisfactory academic progress</cite>;

and</li>

Highlighting a Word in Body Text

Cras et lectus quis massa dapibus external link at vel mauris. Donec quis magna lacus, grammar tool tip auctor massa. Sed quis elit odio. – Highlighted word is for glossary term, pop-up bubble appears on hover.

Text Specifications: Body http://StudentAid.gov/eligibility/intellectual-disabilities http://StudentAid.gov/eligibility/intellectual-disabilities

Federal Student Aid Web Developer Guide

1. Lorem ipsum dolor sit amet, consectetur

2. Aliquam vestibulum lacus quis quam imperdiet

3. Nullam vel magna vel velit gravida pretium

4. Nulla facilisi Interdum et malesuada

Text Specifications: Links, Bullets, and Lists

Links can be incorporated in the site content.

Keeping the link colors consistent throughout the site is important so that users can quickly see links on a page.

Link colors are distinguished by link states.

You should not use the section colors for the links.

Link fonts can be either News Cycle or Droid Serif font. Their use can be flexible, depending on whichever fits the design system best.

Bullets are used for content lists. They should be circular and should follow the section colors.

If a numbered list is used as headers, then it should follow section color. But if it is used in the body section, then it should use the body font and body text color.

Link Colors link – a normal unvisited link, underlined – #267399 visited – a link the user has visited, underlined – #443283 hover – a link when the user mouses over it – #8c3f3b active – a link the moment it is clicked, underlined – #443283

Bullet Style

• For primary bullet – solid bullet

For secondary bullet – outlined bullet

Bullet Color

• Global Color – #578300

• Section 1 – #578036

• Section 2 – #917227

• Section 3 – #3d8076

• Section 4 – #7a792f

• Section 5 – #994640

Numbered List

1. Lorem ipsum dolor sit amet, consectetur

2. Aliquam vestibulum lacus quis quam imperdiet

3. Nullam vel magna vel velit gravida pretium

4. Nulla facilisi Interdum et malesuada

Federal Student Aid Web Developer Guide

Site Header

Every site should include FSA’s logo and site name in the header. One exception is StudentAid.gov since it is viewed as FSA’s primary customer information website. The logo should be clickable and should take users to the site’s home page.

For display on mobile browsers, the site name and logo should be stacked.

Dimensions and placement of graphic elements (including logos) may vary.

Guidance to Site Title Mobile View

Federal Student Aid Web Developer Guide

(1) Gray header bar

(3) Menu(2) Header

Navigation

Site navigation is divided into three parts: (1) the gray header bar, (2) the header, and (3) the menu. The site header is discussed on

p. 14. Stage descriptions are used to illustrate the functional specifications of this navigation.

The gray header bar can be used to highlight certain links or functions, such as About Us, Search, Login/ Logout, English/Español, or site-specific links like StudentAid.gov. This is a utility nav, not a main nav, so there shouldn’t be more than four links in this area.

For mobile display of the gray header bar, you may want to limit the number of items that appear in the header and move the other utility nav items to the footer.

Stage 1: Default Navigation

Federal Student Aid Web Developer Guide

Stage 2: Nav on the rollover is treated with section colors and white text. If there are multiple pages in a section, the menu expands vertically to show secondary navigation. A section that has level 3 navigation has arrows on the right side as an indication.

Navigation

Federal Student Aid Web Developer Guide

Navigation

Stage 3: If you roll onto one of the drop-down secondary menu items (level 2), the level 2 item will turn to the section color with white text and the level 1 nav will turn white. If the level 2 item has a level 3 menu, the level 3 menu will appear. The location of the level 3 menu will be either on the right or left side of the level 2 menu depending on its location in the browser.

Federal Student Aid Web Developer Guide

Stage 4: If you roll onto the level 3 menu item, it gets highlighted with a section color.

Federal Student Aid Web Developer Guide

Stage 5: Once you select a page, the level 1 menu item stays white to highlight the section you are currently on. When hovering over a different level 1 menu item, that item will be highlighted by its section color.

Federal Student Aid Web Developer Guide

Section 1 Bar Color #c2e0a6

Section 2 Bar Color #d9c597

Section 3 Bar Color #a1c5c0

Section 4 Bar Color #d1d0a6

Section 5 Bar Color #e0aea6

Navigation: Main Menu Color Bar

To further establish section color, a color bar may be added above the title of the section on the rollover and selected state. The color is a derivative of the primary section color.

Federal Student Aid Web Developer Guide

Pages 21–24 provide examples of the navigation for StudentAid.gov.

The StudentAid.gov examples include a promotional area at the bottom of the level 2 menu that can be used to highlight resources or information, if desired.

Note: You can also see an example of the navigation on FinancialAidToolkit.ed.gov.

Navigation: StudentAid.gov Desktop Example http://StudentAid.gov

Federal Student Aid Web Developer GuideNavigation: StudentAid.gov

Tablet Example

At a 724px breakpoint, main nav turns into tablet nav. All functionality remains the same except the page width is reduced.

The level 2 promotional area is still displayed.

Federal Student Aid Web Developer Guide

Stage 1: Default navigation Stage 2: When the “menu” button is touched, it drops down to display sections.

Navigation: StudentAid.gov Mobile Example

At a 480px breakpoint, main nav turns into a mobile nav. The menu collapses so users can easily reach each section.

The level 2 promotional area is not displayed.

Federal Student Aid Web Developer Guide

Stage 3: When you select a level 1 menu item, the level 1 menu slides over and the level 2 menu is displayed.

Stage 4: When you select a level 2 menu item, a level 3 menu slides in.

Navigation: StudentAid.gov Mobile

Federal Student Aid Web Developer Guide

Page Header

The page header appears on all interior pages. It provides the page’s headline as a Header 1 (see p. 9 for details on headers).

The page header may also include a subhead. The subhead provides a little more description or lead-in for the page content. Subhead class specifications are as follows:

<p class=”BasicParagraph”> #block-views-preface-block .views-field-field-preface-text p { font-family: ‘Droid Serif’,serif;

font-size: 1em;

font-style: italic;

line-height: 1.3em;

margin: 0;

In addition, the page header can also feature an image.

The image would be the same for an entire site section. In this example, the page header image appears on all of the Repay Your Loans pages on StudentAid.gov.

Headline (H1)

Subhead

Federal Student Aid Web Developer Guide

Breadcrumbs

Breadcrumb navigation helps users find their way around a site. Breadcrumbs are also an effective visual aid that indicates the location of the user within the site.

Breadcrumb links are treated the same as all standard links (please refer to p. 13).

Federal Student Aid Web Developer Guide

Button treatment for anchor links

Button treatment for going back to the top

For pages with a large amount of content, anchor links can provide an easy way for users to find relevant content on a page. The anchor links are usually placed at the beginning of the page and link users to specific sections within the page. The “top” link returns the user to the top of the content page.

The anchor link text should use the section color. See the Repay Your Loans page on StudentAid.gov (StudentAid.gov/repay) for an example of anchor links.

Anchor Links http://studentaid.gov/repay

Federal Student Aid Web Developer Guide

10% of section color

Section 1 – #eef2eb

Section 2 – #f4f1e9

Section 3 – #ebf2f1

Section 4 – #f5ecec

Section 5 – #f1f1ea

Global – #eef2e5

Tables

A table may be used when you need to display comparable content. A combination of tables and bullet points makes it easier for users to digest information.

As a user scrolls down on desktop/tablet/mobile devices, the header of a two-column chart should be sticky and follow the user to the last row of the chart. You can see an example of a table on the FAFSA Updates page on FinancialAidToolkit.ed.gov (FinancialAidToolkit.ed.gov /tk/learn/fafsa/updates.jsp).

Two-column tables retain their full-width layout on all devices.

For all table row colors except the accordion table, every other row should use 10% of the section color to help with readability.

http://financialaidtoolkit.ed.gov/tk/learn/fafsa/updates.jsp http://financialaidtoolkit.ed.gov/tk/learn/fafsa/updates.jsp

Federal Student Aid Web Developer Guide

Any three-column table, table with a large number of rows, or table with a large amount of content within its rows should consider using the accordion style layout.

The “Expand All” link should open all accordions in the table. When “Expand All” is clicked, then the text should change to “Collapse All” and the “+” icon should change to “-”.

A three-column chart can retain its full-width layout until there is a vertical tablet view (724px breakpoint).

Tables: Accordion Desktop

Federal Student Aid Web Developer Guide

Example of a single-column table.

Federal Student Aid Web Developer Guide

Example of a two-column table.

Federal Student Aid Web Developer Guide

At a 724px breakpoint, three-column tables are broken down into a one-column accordion table and vertical column dividers disappear.

FSA provides its developers with the option to be flexible when it comes to link font.

The font can be either News Cycle or Droid Serif depending on the content.

Tables: Accordion Tablet

Federal Student Aid Web Developer Guide

Tables: Accordion Mobile

When the display breaks down to mobile view at a 480px width, it still stays as a one-column accordion table with stacked content.

FSA provides its developers with the option to be flexible when it comes to link font. The font can be either News Cycle or Droid Serif depending on the content.

Federal Student Aid Web Developer Guide

Feature Boxes

Feature boxes can be used whenever you want to call out information on a page.

They can be used at full width in the main content area of a page and can include an image.

Highlight the background of the feature box using section colors.

You can see an example of a feature box with an image on the StudentAid.gov Careers page at StudentAid.ed.gov/prepare-for-college/careers.

Section 1- #eef2eb

Section 2- #f4f1e9

Section 3- #ebf2f1

Section 4- #f5ecec

Section 5- #f1f1ea

Global- #eef2e5

10% of Section color http://StudentAid.ed.gov/prepare-for-college/careers http://StudentAid.ed.gov/prepare-for-college/careers

Federal Student Aid Web Developer Guide

An announcement bar is used on the site’s home page to highlight key updates or information. The announcement bar should use a flashing display.

Clicking on one of the announcements displayed in this bar should take users to a more detailed page. You can also set up the “Announcements” link so that it takes users to a page that lists each of the announcements.

An announcement bar is used on the home page of both StudentAid.gov and FinancialAidToolkit.ed.gov.

Announcement Bar

Federal Student Aid Web Developer Guide

Forms

This page provides examples of form elements.

Developers can implement these different elements for any form.

The form elements should follow the color scheme of its particular section.

Uncategorized pages use the global green color. For more information on color usage, see p. 6.

Federal Student Aid Web Developer Guide

Forms may be used on a site for functions such as Contact Us/E-mail and a site survey. The example on this page illustrates an e-mail submission form.

To see an example of a form, see the Financial Aid Toolkit Contact Us page at FinancialAidToolkit.ed.gov /tk/contact.jsp.

Forms: Contact http://FinancialAidToolkit.ed.gov/tk/contact.jsp http://FinancialAidToolkit.ed.gov/tk/contact.jsp

Federal Student Aid Web Developer Guide

This page provides an example of a form’s drop-down menu with multiple selection options.

To see an example of a form, see the Financial Aid Toolkit Resources page at FinancialAidToolkit.ed.gov /tk/resources.jsp.

Forms: Multi-Section Drop-Down Menu http://FinancialAidToolkit.ed.gov/tk/resources.jsp http://FinancialAidToolkit.ed.gov/tk/resources.jsp

Federal Student Aid Web Developer Guide

Once a user selects the options and clicks “Done Selecting,” the “Selected Options” box displays and shows their selection.

Forms: Multi-Section Drop-Down Menu

Federal Student Aid Web Developer Guide

Promotional Tile Area

Promotional tiles can be used to highlight specific content, such as glossary terms or features on the site.

Both StudentAid.gov and FinancialAidToolkit.ed.gov use promotional tiles.

Pages 41–44 provide examples of promotional tiles. In addition to these examples, you may wish to create new promotional tiles based on your website’s needs.

Promotional Tiles

Federal Student Aid Web Developer Guide

EXAMPLES:

Quick Links Tile This tile provides links to related sections of the site that might be of interest to the user.

Both StudentAid.gov and FinancialAidToolkit.ed.gov use this tile.

Resources Tile This tile can be used to feature resources relevant to that particular page. For example, the StudentAid.gov/ibr page uses this tile to highlight a fact sheet.

Glossary Tile:

If you use the Glossary function discussed on p.

12, then you can also use the Glossary tile to define FSA terms. StudentAid.gov uses this tile.

Announcements Tile This tile can be used to highlight important announcements. Both StudentAid.gov and FinancialAidToolkit.ed.gov use this tile.

Promotional Tiles http://StudentAid.gov http://FinancialAidToolkit.ed.gov http://StudentAid.gov/ibr http://StudentAid.gov

Federal Student Aid Web Developer Guide

EXAMPLES:

Contact Us Tile This tile can be used to alert users to the different ways in which they can contact your office.

Stay Connected Tile This tile lists and links to FSA’s social media properties.

Both StudentAid.gov and FinancialAidToolkit.ed.gov use this tile.

Twitter Feed Tile This tile displays the three most recent @FAFSA tweets. You will want to select a Twitter plug-in based on the site’s back-end CMS. The Follow Us button links users to FSA’s Twitter account at https://twitter.com/FAFSA.

Both StudentAid.gov and FinancialAidToolkit.ed.gov use this tile.

Facebook Plug-in Tile This tile displays posts to FSA’s page. Facebook has many different plug-ins. Use the one that best meets your site’s needs. You can see examples at https://developers.facebook.com /docs/plugins.

Promotional Tiles http://StudentAid.gov http://FinancialAidToolkit.ed.gov https://twitter.com/FAFSA http://StudentAid.gov http://FinancialAidToolkit.ed.gov https://developers.facebook.com/docs/plugins https://developers.facebook.com/docs/plugins

Federal Student Aid Web Developer Guide

EXAMPLES:

Chat With Us Tile If you offer a chat function, this tile can be used to highlight this capability and link to additional information or to begin a chat session.

FSA Calendar Tile This tile can be used to highlight events or other calendar items.

Upcoming Events Tile This tile can be used to feature upcoming events with a link for more details.

StudentAid.gov uses this tile.

Video/Image Tiles This tile can be used to highlight a relevant video or image.

Promotional Tiles

Federal Student Aid Web Developer Guide

EXAMPLES:

Did You Know Tile This tile can be used to highlight answers to common user questions.

Pull Quote Tile This tile can be used to highlight quotes.

Promotional Tiles

Federal Student Aid Web Developer Guide

The footer always appears on the bottom of all site pages. The footer consists of two components:

1. A mandatory section which includes links to basic site information (such as the site’s privacy notice), links to key websites (such as ed.gov and whitehouse.gov), and links to other important items. Because space is limited, there should be no more than ten links.

2. A non-mandatory section that can serve as an additional tool for navigating the site and can provide shortcuts to important areas or features. Generally, this footer section will mirror the site navigation but it can be adjusted based on what areas you want to highlight or feature.

You can determine whether your website footer will include both the mandatory and non-mandatory sections.

In addition, the mandatory footer section can include icons which link to FSA’s social media sites if it is appropriate based on the site’s purpose.

Footer

FinancialAidToolkit.ed.gov uses the mandatory footer section while StudentAid.gov uses both the mandatory and non-mandatory footer sections.

Note: Public federal agency websites are required to include certain content (or link to that content). A full list of the required items can be found at howto.gov/web-content /manage/categorize/links/required-links.

Non-Mandatory Footer Section

Mandatory Footer Section http://howto.gov/web-content/manage/categorize/links/required-links http://howto.gov/web-content/manage/categorize/links/required-links

Federal Student Aid Web Developer Guide

StudentAid.gov Home Page

Page Referenced Link:

StudentAid.gov

The StudentAid.gov site template and layout is based on the principles of responsive design.

Responsive web design (or “RWD”) is a type of web design that provides a customized viewing browser platform. A website created with RWD will display a different interface depending on what device is used to access the site.

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Template Examples

Federal Student Aid Web Developer Guide

Financial Aid Toolkit on Desktop

Page Referenced Link:

FinancialAidToolkit.ed.gov

Federal Student Aid Web Developer Guide

Interior Page With Tile Area

Page Referenced Link:

StudentAid.gov/prepare http://StudentAid.gov/prepare

Federal Student Aid Web Developer Guide

Interior Page With Tile Area

Page Referenced Link:

StudentAid.gov/repay-loans /disputes

Template Examples http://StudentAid.gov/repay-loans/disputes http://StudentAid.gov/repay-loans/disputes

Federal Student Aid Web Developer Guide

Template Examples

Interior Page Without Tile Area

Page Referenced Link:

StudentAid.gov/events http://StudentAid.gov/events

Federal Student Aid Web Developer Guide

Interior Page Without Tile Area

Page Referenced Link:

FinancialAidToolkit.ed.gov /resources

Template Examples http://FinancialAidToolkit.ed.gov/resources http://FinancialAidToolkit.ed.gov/resources

Federal Student Aid Web Developer Guide

Template Examples

Interior Page: Contact Us

Page Referenced Link:

StudentAid.gov/contact http://StudentAid.gov/contact

Federal Student Aid Web Developer Guide

Template Examples

Interior Page: Survey

Page Referenced Link:

StudentAid.gov/contact /feedback http://StudentAid.gov/contact/feedback http://StudentAid.gov/contact/feedback

Federal Student Aid Web Developer Guide

Template Examples

Interior Page: Glossary

Page Referenced Link:

StudentAid.gov/glossary http://StudentAid.gov/glossary

Federal Student Aid Web Developer Guide

Available Assistance

The guidelines set forth in this Web Developer Guide are intended to assist business owners and developers in applying Federal Student Aid’s look and feel to FSA sites.

The Enterprise Communications Team is available to assist throughout this process.

Accessibility

FSA business owners are required to ensure FSA websites comply with Section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C 794d). Section 508 requires that when federal agencies develop, procure, maintain, or use electronic and information technology, they must ensure that federal employees and/or individuals with disabilities who are seeking information or services from a federal agency have access to and use of information and data that is comparable to that provided to those who do not have disabilities. Information on Section 508 is available at connected.ed.gov.

Implementing the Look and Feel

In most cases, this Web Developer Guide assumes that you will use your own in-house resources or contractors to implement these styles across your sites. As you move forward, we strongly encourage you to consult with the Enterprise Communications Team to ensure alignment across all Federal Student Aid products and services and to help answer any questions.

Specifically, we recommend that you reach out to the Enterprise Communications Team to

• answer any questions you have after your initial review of the Web Developer Guide,

• answer any questions or provide input for the site design requirements, and

• review design mock-ups or drafts.

To contact the Enterprise Communications Team, please e-mail FSA_Communications@ed.gov.

Requesting Additional Design Support

In addition to reviewing Federal Student Aid products and websites to ensure compliance with the Web Developer Guide, the Enterprise Communications Team has limited resources available to offer additional design support, if required. If you are in need of design support, please contact FSA_Communications@ed.gov.

Every effort will be made to assist you with your design request, but funding for design support is limited.

Resources http://connected.ed.gov/index.cfm?cid=80ee69db-0a5e-4fb7-b398-fefffc2a1068 mailto:FSA_Communications@ed.gov