Document Sample
State-of-Alaska-Web-Site-“Look-and-Feel”-Standards-–-Final Powered By Docstoc
					State of Alaska Web Site “Look and Feel” Standards – Final

The Governor’s Office has mandated that the State of Alaska’s primary Internet website will have a uniform look and feel. When you publish information on the State of Alaska primary Internet web site you are making it available to Alaskans and to the world. Your information represents the State of Alaska to the web page viewers. It is essential that the information be presented professionally and that it reflects positively on the State of Alaska. This document describes the minimum standards for State of Alaska web pages. Each department is free to set additional guidelines or requirements beyond these minimum standards. The State of Alaska’s primary Internet website is defined as all publicly accessible pages providing official state information by departments, their divisions, programs and all sub-pages including subcontracted sites that represent official business; commissions, authorities, institutes, corporations, boards and councils created by the state which have websites that are hosted on state servers, and/or are supported by state funds.

Standard Components
The standard look and feel for State of Alaska websites can be broken down into a number of web page components: top navigation bar, footer, page background, body background, and page body. Additional requirements are defined for Department Home Pages and Sub Pages. Examples of the standard components are located at .

Top Navigation Bar
The top gold navigation bar is the first standard component for State web pages. Gold navigation bar elements and parameters are as follows:

    

The height of the bar is 24 pixels. The width for the gold navigation bar should be a maximum of 780 pixels. A sans-serif font style is to be used for text within the navigation bar. A hidden link to allow screen readers to skip beyond the navigation bar either above or to the left of the navigation bar. A gold-to-white gradient background graphic will be used in the navigation bar.  The gold hex color to be used is #FFCC00.

The following gold navigation bar elements must be present and located from left to right in the following order:  Quarter State Seal Graphic.  The left-most item in the navigation bar is to be the Quarter State Seal graphic that links to the State of Alaska’s home page.  A definitive Alt tag will be attached reading “State of Alaska Home Page”  Department or context-specific text links.  Text links are justified to the left, just after the Quarter State Seal graphic.  Graphic or text link identifier for the department or organizational unit.  The identifier is to be placed to the right of the text links and to the immediate left of the Search Box.  Search Box  A search from this box will provide department or organizational unit specific search results.  It is recommended that departments develop a customized Google Results page template that allows the user more search options (to expand to the state site or restrict further within their department). See for more information.  “Find” graphic  The Find graphic to be used will be the state-issued graphic.  When clicked on, the Find graphic activates the search for text entered into the Search Box.  The department/organization title graphic or text link title for the department/organization, the search box, and the Find graphic, as a group of elements, are justified to the right-hand side of the navigation bar.

State of Alaska Web Site “Look and Feel” Standards


Page Background  The web pages will utilize a consistent state-defined colored background.  While every effort should be made to design pages to a maximum of 780 pixels wide, for pages that require a design wider
than 780 pixels, those pages have the option to use a white background and not use the rounded footer corner graphics (see above “Footer” component).

Footer  At the bottom of the page there will be right and left justified rounded bottom corner graphics that match the background.
These graphics are 5 pixels x 5 pixels in size. A san-serif font style is to be used for all footer text. The footer links can span more than one line. The left-most item in one line of the footer will be a link to the “State of Alaska.” The following footer links are also recommended: copyright, privacy, accessibility, Office of Equal Opportunity statement and other terms of use.  Additional footer links can be determined by each department. The background color for the footer must be the same as the primary body background. For web pages that are required to be wider than 780 pixels, these pages have the option to use a white background and not use the rounded footer corner graphics (see above “Footer” component in Page Background section).

     

Page Body  A san-serif font style is required for primary body text.  Use the state-issued cascading style sheet as a foundation. Other cascading styles may be used in conjunction at the
department’s discretion.

 The primary body background should be white (#FFFFFF) as a foundation. Department Home Pages    
A photo banner will appear on all home department pages after the top navigation bar. The photo banner width will match that of the top navigation bar width. The photo banner height is at the department’s discretion with a minimum of 55 pixels. The text within the photo banner will:  be in the lower left-hand area of the photo.  left aligned allowing some space from the edges.  include the word “Alaska” followed by text that identifies the department (e.g., Alaska Department of Fish and Game).  should be in a white (#FFFFFF) Baker Signet font.  allow for optional shadowing to create separation between the text and the background image itself if necessary. An optional breadcrumb trail can be provided after the photo banner. See the “Department Sub Pages” section for the breadcrumb trail format. Section header graphics will use the Baker Signet font.  Section headers will use a font color of black (#000000), gray (#929292) or charcoal (#666666).  The section header graphic will include the gold-to-white streaking underline.

 

Department Sub Pages  Organization unit main/home pages shall follow the Department Home Page or the Department Sub Page standards. If a unit
chooses to use the Department Home Page “look and feel” for their main/home page, the following additional items should be followed:  A breadcrumb trail should appear above or below the photo banner  The unit’s name (i.e. “Division of Administrative Services”) should appear within the photo banner and be formatted according to the Department Home Page standards.  Page header appears after top navigation bar.  The page header width should match that of the top navigation bar.  The page header recommended height should be a minimum of 55 pixels.  Use the Baker Signet font for the page header title text. State of Alaska Web Site “Look and Feel” Standards 2

 The Breadcrumb trail can be above or below the page header. The Breadcrumb trail:  is left justified on the page with a sans-serif font style.  uses a “greater than” symbol (>) as separator between breadcrumb items.  is recommended to contain no more than 5 items. Addendum Look and Feel as applied to Web Applications:
(quoted from “Web e-Govt Line of Demarcation TMC Final.doc” adopted by the TMC 02/23/05) 1. 2. The Entry page of a web application will follow the State’s look and feel standards. The internal pages of a web application should retain the standard look and feel with the option of omitting any navigational elements.

“Navigational elements” referred to here are further explained in this document under the sections “Top Navigation Bar” and “Footer.”

Web Application Defined:
A “Web application” for the purposes of this document has been defined by the Web FWG and eGovt FWG as: …a software application that is accessible using a web browser or HTTP user agent and is characterized by three properties: 1. They establish a unique session and relationship with each and every visitor in order to keep track of the last-known or current status of an application or a process (stateful). They allow users to create, manipulate, and permanently store data. 3. Navigation within a web application needs to be controlled.


For something to be considered a web application it must include a server-side response dependent on user input. The application may be spread over multiple presentations.

State of Alaska Web Site “Look and Feel” Standards


Shared By:
Tags: State, -of-A
Description: State-of-Alaska-Web-Site-“Look-and-Feel”-Standards-–-Final