NIH Enterprise Architecture Website

Front End Design Style Guide

• Introduction
• Brand and Visual Voice
• Visual Specifications
• Templates
• Navigation System
• Content Design
• Front End Technology Benchmark

Front End Technical Benchmark: Technical Assessment

Research Background

Sapient conducted research into various aspects of the web browser environment—including operating system platforms, available web browsers, user bandwidth and selected screen (monitor) metrics—to assist the Sapient team in determining the optimal benchmark for the NIH Enterprise Architecture site. These statistics were gathered to help us to understand the potential audience for the site, not only the current users within NIH, but also the more public audience within both the federal government and the general public. As most of the NIH EA site is publicly accessible if a user is so interested, the site must be usable within browsers other than NIH’s current defined technology set.

Web Platforms and Browser Support

The benchmark covers both the tactical and strategic components of the Web Browsers Brick. Conformance to these standards will result in browser support for the following browsers/platforms:

• Microsoft Internet Explorer 6.0+ (Windows),
• Mozilla Firefox (Firefox) 1.0+ (Macintosh OS X, Linux i686, Solaris, UNIX, and Windows), and
• Macintosh Safari 1.2+ (Macintosh).

Hereafter, we will simply refer to the above browsers as IE, Firefox, and Safari respectively, using the version number if necessary.

Based on our research, Sapient has determined that Firefox requires support in that it now represents a growing shift away from Internet Explorer. Since its official debut in November 2004, it has gained nearly thirty percent of the browser market. As Mozilla.org has effectively replaced their original Mozilla Suite with Firefox, the stand-alone Firefox is now the browser on which to focus. While the Mozilla Suite, now at version 1.7, still exists, it is no longer their primary focus.

While IE may be the most prevalent browser within NIH and its subdivisions, we believe that Firefox support is important because the rapidly rising market presence has occurred within the user group mostly likely to visit the Enterprise Architecture site, namely tech-savvy users. This group tends to be both market leaders and early adopters. The general public frequently follows their trail-blazing. The adoption has been most prevalent amongst users in the most rapidly expanding segment of the web—the Blogosphere, wherein some statistics show Firefox in either a dead heat with IE or in the majority.

Firefox, like its sibling browsers (Mozilla 1.7 and Netscape 7/8) based on the Gecko layout engine, is a cross-platform browser—available on Macintosh OS X, Linux, Solaris, UNIX, and Windows. Furthermore as it is a standards-based browser, it displays content practically identically across all platforms. Firefox also has another sibling dedicated to and optimized for Mac OS X called Camino, which has a Cocoa user interface and an underlying Gecko layout engine.

On the other hand, IE is no longer supported on either the Macintosh or UNIX platforms. Likewise, Safari is a Mac-centric browser. However in a fashion similar to the Mozilla family of browsers, Safari shares its underlying layout engine called KHTML with the Konqueror browser which runs within the KDE graphical interface platform on both UNIX and Linux.

The statistics show that the Windows XP platform comprises almost seventy percent of the market in March 2005. Both Linux and Macintosh each comprised about three percent of the operating system market.

Consequently, both IE 6.0+ on Windows and Safari 1.2+ on the Mac will be supported, partly because of the brick, and partly because of their installed base. Firefox 1.0+ will be supported on all platforms, but will only be fully tested on Windows. While Safari has a heavily installed base within NIH, IE has one not only in NIH, but also amongst the general user base at large, with Firefox gaining rapidly on both IE and Safari, but expanding most directly at IE’s expense.

Therefore, the Sapient development team shall ensure full visual design treatment and layout support to these three browsers in their current and future versions. Sapient shall also provide full textual access to all other browsers, including the above supported browsers in their earlier incarnations. Details regarding the current usage distribution among other browsers and earlier versions of supported browsers are available in the Appendix.

The above specification will allow the web site’s front-end to:

• Provide an enhanced user experience with more robust functionality
• Allow for more content to be visible and accessible per page
• Create a robust and interactive user experience
• Avoid excluding browsers from viewing page content

HTML/XTHML

• XHTML 1.0 will be used to construct page presentation for all material.
• Any existing material must be translated into XHTML.
• Use of HTML comments should be minimized to reduce page size, but should be used where appropriate to convey any required information to future site maintainers.
• Tables will only be employed for presentment of tabular data, as the standard allows. Tables shall not be employed for visual layout.

Sapient will use the standard version of XHTM 1.0 Strict, as defined by the W3C. Therefore, Sapient will not use any deprecated tags or attributes from past HTML versions that are no longer supported by the W3C, including the now deprecated name attribute. Use of XHTML allows for tighter control over markup, thus making code easier to maintain. The standard, which forbids any markup associated with layout, produces really clean structural markup. All layout information is transferred to externally linked style sheets. All image tag will comply with the standard, including the required employment of the alt attribute. Any tabular data will also conform to the standard via utilization of summary statements and other modes of accessibility. All elements shall contain id attributes to allow access to said elements from the Document Object Model (DOM), should such need arise. All scripts should be externally linked into the code as scripts are not allowed within the structural markup under the strict interpretation of XHTML without specialized coding.

Sapient will use the validation service from the W3C to ensure the quality of the final product. This service checks the documents for conformance to the W3C HTML and XHTML recommendations and other standards.

Cascading Style Sheets (CSS)

• CSS 2.1

CSS 2.1 will be the minimum standard used to enhance typography, color, and other layout elements for the XHTML pages. Any elements of 2.1 not supported in all test browsers will not be used. Utilization of CSS, which is the only valid presentation mode under XHTML 1.0 Strict, will prevent redundancy in HTML coding as well as improving future code maintenance.

The CSS will be available to any browser that can accurately render the commands. For browsers that do not fully support CSS, a textual rendering of the pages will occur instead.

Sapient will use the validation service from the W3C to ensure the quality of the final product. This service checks the CSS documents for conformance to the W3C CSS standard.

Graphical File Formats

• Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) formats will be used for all client viewable images.

Sapient will employ the GIF mode for all images containing defined areas of flat consistent color and small detailed text or images with hard edges (including line art, text buttons and logotypes, etc.). All realistic images like photographs and true color original images will be delivered in JPEG mode. All images will have optimal compression and have all unused or duplicate colors removed.

JavaScript

• JavaScript 1.3 must be enabled for maximizing the user experience of the site. (It is on by default in IE 6.0+ and Firefox 1.0+.)
• If a given script utilizes an earlier mode, that mode will be declared individually in its linking statement so that earlier browsers may access it.

JavaScript may be used in the client-side interface. It is anticipated that any JavaScript employed will be solely to enhance user experience in browsers in minimal aspects.

DHTML

At present, Sapient is not projecting the use of DHTML as the site navigation system will be flat, i.e., no submenuing system.

Dynamic Content

In most instances, the content of the Enterprise Architecture site will be generated out of MCMS. Consequently, page validation will be dependent upon the system producing standards-compliant code. Sapient will make every effort possible to ensure that MCMS does, in fact, produce compliant code. However, the generation of said code may be dependent upon the users entering data into the system in particular formats. Therefore, the guarantee of proper long-term validation may reside with the system’s users.

Frames

Frames will not be used in the development of this site.