Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Revision History................................................................................................................................................... 3 Introduction ......................................................................................................................................................... 3 Scope................................................................................................................................................................................ 3 Audiences ......................................................................................................................................................................... 3 Purpose ............................................................................................................................................................................ 4 How to use this document ................................................................................................................................................ 4 Definitions ............................................................................................................................................................ 4 Basic Page Specifications .................................................................................................................................... 6 Supported browser / platform specifications ................................................................................................................... 6 Page display and download specifications ...................................................................................................................... 6 Anatomy of a page ............................................................................................................................................... 6 Page dimensions .............................................................................................................................................................. 6 Web page block definitions .............................................................................................................................................. 6 Overview of standard web interface elements.................................................................................................................. 9 Page Components + Color Schemes ................................................................................................................. 10 Introduction ................................................................................................................................................................... 10 Header and primary navigation Breadcrumb Footer Required ................................................................................................................. 13

Required ............................................................................................................................................. 25

Required......................................................................................................................................................... 28 Required ............................................................................................................................................. 30

Content block

Central content area ...................................................................................................................................................... 35 Page Types.......................................................................................................................................................... 36 Home.............................................................................................................................................................................. 37 Section door ................................................................................................................................................................... 40 Text page........................................................................................................................................................................ 42 Data table page.............................................................................................................................................................. 44 Form page...................................................................................................................................................................... 45 Two-column ................................................................................................................................................................... 47 Login .............................................................................................................................................................................. 48 Application no navigation.............................................................................................................................................. 51 1

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Help popup window ....................................................................................................................................................... 52 Error .............................................................................................................................................................................. 53 Styles ................................................................................................................................................................... 54 Referencing the intranet style sheet ............................................................................................................................... 55 Creating new styles ........................................................................................................................................................ 55 Buttons, Banners & Other Graphics................................................................................................................ 55 Buttons ........................................................................................................................................................................... 55 Banners .......................................................................................................................................................................... 57

2

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Revision History
Version 0.1 0.2 Date 2 December, 2002 3 December, 2002 Author Kwai Lam Cindy Furry Notes First draft Second draft

Introduction
This document is the reference for designing, creating and maintaining Seagate’s websites in accordance with the corporate brand identity. Use this document in conjunction with the published html tool kits available on http://www.seagate.com/branding/web/ . This document supercedes all previously published web style guides.

Scope
All necessary specifications for minimal and required adherence to Seagate online graphical standards—web “look and feel”—are described by this document. These include: Overall page structure Font faces, sizes and spacing Style sheets and appropriate HTML tag usage Header graphics Standards for creating banners, buttons and other graphics Back-end systems and documentation standards are beyond the scope of this document. JavaScript, CSS, HTML and other technologies are presented only as they apply in the Seagate context, most notably the application of Seagate-specific scripts and style sheets.

Audiences
This document is designed to be readable—and read—by Seagate and third party staff who create and maintain Seagate Internet, extranet, and intranet presences. The audiences include website and application developers as well as graphic designers. It is assumed that the reader is familiar, at minimum, with website design, production and the basics of web navigation.

Website Developers
Even those designing the simplest departmental websites should find this document accessible and useful. The standards presented in this document will ease and speed website implementation. This document applies regardless of HTML editor used.

Application Developers
Developers designing and building applications from scratch as well as those seeking to impose Seagate web “look and feel” on existing Seagate or third-party applications should use this document to ensure adherence to Seagate standards.

Graphic designers
Graphic designers will find concise reference materials here on the Seagate web color palette, button and banner construction, descriptions of available PhotoShop files on which to base page elements needing customization.

3

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Purpose
These web standards serve several purposes: Brand Identity. Consistent application of the Seagate brand identity across all assets, including online resources and applications, is required to protect the brand. Consistent application of these standards will improve brand awareness as well. Re-use of Seagate Assets. Simplify your work by utilizing Seagate assets created by subject matter experts throughout the organization. These assets and guidelines consider all design, usability and brand guidelines saving you the trouble. Performance. The new design minimizes the use of graphics, uses re-purposed components and straightforward table design. The use of cascading style sheets to separate presentation from functionality allows for recycled code across multiple audiences. Usability. By offering a consistent layout of standard user interface (UI) components, all users of the system will quickly and easily learn how to navigate any Seagate site or application.

How to use this document
This document is constructed with the expectation that it will be read through at least once. The introductory material, definitions, basic page specifications, page anatomy and component definitions should be thoroughly assimilated. The information on page types, graphic construction, and code snippets may be read through once or skimmed, and then referenced as needed during user experience implementation.

Definitions
The following terms are used throughout this document: Web audiences are defined by the following three terms. These progress from the broadest and most public to the most private and limited. o Internet refers to the world wide system of networked computers. For this document, it describes websites which are public in nature and accessible to the world at large: potential customers, journalists, competitors, investors, consumers, etc. The Seagate Corporate site, http://www.seagate.com, has an Internet audience. All Seagate Internet websites must be reviewed by eBusiness Solutions prior to activation. For more information, email askstandards@seagate.com. o Extranet web sites are designed for audiences associated with, but not part of, Seagate: suppliers, resellers, customers, etc. Such audiences/sites, such as the my.seagate.com Extranet Portal, have clearly defined relationships with Seagate; login is generally required for extranet sites. o Intranet web sites are internal and only available inside Seagate. The audience for intranet sites is Seagate employees and contractors. They may only be available inside the company network (‘inside the firewall’). Web pages are described by the following three terms. Moving from largest to smallest in scope, we have the following: o Blocks are rectangular chunks of the page that share common functionality or design, such as the top (‘header’), bottom (‘footer’), or left navigation (‘left navigation’). These are sometimes defined by their position on the page, sometimes by their function, and sometimes by both. Blocks are the largest unit discussed by this document. o Elements are the building blocks which make up areas. The Seagate logo, quick search, and breadcrumb are all elements. Blocks may be composed of one or many elements. o Components are the building blocks which make up elements. They are often modular and reusable. The breadcrumb JavaScript is a typical component. 4

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Various descriptors are given to web pages based on their context in the information architecture of a website or application: o A website’s home page is considered the initial page of a site, the ‘front door’ through which access to the interior of the site must be gained. The analogy to a ‘home’ is used because if you get lost, you can always go home, and resume browsing through the site. It acts as an anchor/start point in the user’s mental model of the website. o An interior web page is any web page which is not a home page; in other words, any page that is at least one step below the highest level page on a site. o A section door is an interior web page that is one level below a home page. Typically, these correspond to the links provided in a website’s global navigation. They often correspond to URLs that have only one directory name after the site’s URL; for example, http://www.seagate.com/products. o A subsection door page is an interior web page that is two levels below the home page, one level below a section door. Navigation is the act of moving from one page to another within a website or on the Internet at-large. Navigation also refers to the actual mechanism of inter-page travel; for example, text or image links, image maps, drop-down menus, et cetera. o First level navigation describes links, whether text or image, that lead a user to a section door page—one level deep, hence first level. o Second level navigation describes links which lead a user to a subsection door page—two levels deep, hence second level. o Third and fourth level navigation describes links which lead to interior pages that are, respectively, three and four levels from the home page. Miscellaneous terms used in this document include: o CSS stands for Cascading Style Sheet, which defines and redefines the fonts, sizes, colors and margins of HTML elements when displayed by the browser. o Navigation is the means by which one goes from page to page, or ‘navigates’ a web site. Navigation also refers to the labels and images used in links. The top navigation bar, for example, presents top level links for the site. o Brand identity describes a visual and conceptual shorthand associated with a company. The recently introduced ‘wave’ graphic and phrase ‘We turn on ideas’ are key components of Seagate’s branding. The goal of a brand identity is to create ideas, images and other cues with which an observer immediately and even instinctually associates the company. o Thumbnail map is a small image of a web page with an area highlighted. In this document these are used to indicate graphically which portion of the page is under discussion. o Page load refers to the length of time that it takes a web page to appear in the browser of the user. Page load is said to “begin” draw when HTML and images are actually being transmitted to the browser and it is beginning to display on the screen. Page load is complete only when all assets on the page—HTML, images, JavaScript, Flash, etc—have completely downloaded into the user’s browser. o The term fluid is applied to web pages and tables on web pages that are designed to dynamically fill the browser window as the window is resized by the user. o The term fixed is applied to web pages and tables on web pages that are fixed in width; if the user resizes the browser window beyond the size of the fixed table, empty space appears around the table.

5

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Basic Page Specifications
Supported browser / platform specifications
The table below lists browser platform combinations for which this page design, including the drop down menus, has been tested and is considered ‘supported.’ Platform PC Mac Unix Internet Explorer (IE) Supported: 4.X, 5.X Tested but not supported: 6.0 5.X Netscape Navigator (NS) Supported: 4.X, 6.2 Tested but not supported: 6.0 4.X 4.X

Page display and download specifications
Target Resolution: 800 x 600 pixels Target Page Weight: 50-80k, including images and scripts Target Performance at 56k o Begin page load within 3 seconds o Complete page load within 15 seconds o Maximum acceptable page load 30 seconds

Anatomy of a page
Page dimensions
All Seagate web pages should be designed for a screen size of 800 x 600 pixels and meet the following specifications: Width: 760 pixels. Although the pages are designed to display on a screen 800 pixels wide, we must allow for the browser window and a vertical scroll bar. Due to inconsistencies between browsers and platforms, 769 pixels is considered the safest, largest width for 800 pixel target resolution. Maximum length: varies according to content, but should not exceed 1.5 screens; Left and right margins: 15 pixels as shown below. While some areas (i.e., the footer) do go across the entire page, there is still a 15 pixel margin between the edge of the page within the browser and the first meaningful text content.

Web page block definitions
Most web pages—and all Seagate branded pages—can be described as having three or more blocks, high level groupings of content, design and functionality that split the page into a grid. Working from the top of the page and down, left to right, the variations on these blocks and their roles in web look and feel are summarized below.

6

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Block name Header (A)

Required? Yes

Format Variations Versions for Internet, intranet and extranet. The components in the header block may also vary due to page type.

Role

Branding This block establishes Seagate brand identity using Seagate logo, color and focus ring. Color coding is used to inform the user whether they are on an intranet, Internet or extranet Seagate site. Orientation In the tool bar element (the top white bar), the site name is present and gives an overall context for the user. Navigation In the tool bar element (the top white bar), tool links are provided in the upper right corner of the page.

Primary Navigation (B)

Yes

Color scheme of navigation varies between Internet sites and extra/intranet sites.

Navigation This provides primary site7

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Block name

Required?

Format Variations and extra/intranet sites.

Role wide navigation. At minimum there should be a site home element. Orientation The breadcrumb indicates the location of the current page within the site hierarchy. This should always be present even on very simple applications. Navigation The breadcrumb also provides an upwards navigational path from the current page to the site’s home.

Bread Crumb (C)

Yes

None

Local Navigation (D)

No

None

Navigation This presents 2nd and 3rd level navigation. With the exception of the “Application No Nav” template, the gray bar is required on all content pages even if it is empty and there is no secondary navigation.

Content (E)

Yes

Several, according to content type. No variation for audience (intranet, Internet, extranet). None

Information The content block of the page presents information; the heart and purpose of the page. Anchor As a visual cue, the footer cues the viewer that this is the end of the page and acts as an anchor to the page. Navigation The footer also always represents the site-wide navigational links, and copyright information as relevant.

Footer (F)

Yes

8

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Overview of standard web interface elements
The main building blocks of a web page are in turn composed of individual elements. The concept of elements is similar to that of blocks, only more granular. The screen shot below uses numbered call-outs to identify the key elements of web page. This is an example of a “Text Page.” This page type is chosen because it uses all of the elements. Some page types use a subset of these elements and in some instances the blocks are organized differently. Refer to the descriptions of the individual page types for more information.

Header Block
1. The site name element is required on almost all page types. This is a graphic with link to the site home. On Intranet sites, it is always my.seagate.com and links to http://my.seagate.com. This site name label can change on Internet and Extranet sites depending on the site name. For example, for the Seagate Partner Program website, the name is “Seagate Partner Program.” The site tool links are optional depending on the tools available for that particular site. Examples of tools include ‘site index’, ‘about Seagate’, ‘refresh’, ‘profile’, ‘logout’, and so on. These are frequently needed helper links. The Seagate logo on the “Seagate Green” (the teal color) background is a requirement of every web page. The logo is positioned according to brand guidelines and occupies the area to the left of the “focus ring.” It is always a link to http://www.seagate.com. The section name is a required contextual cue for the user as well as a link. This is an image on external (extranet or Internet) sites and has a text option on intranet sites. It identifies the current toplevel of the site in which the page resides as well as acts as a link to that “section door.” The background color for the section name is audience-specific. The quick search element occupies the right corner of the band and is also required. On Internet and Extranet sites it is a specific search functionality based on audience. For intranet sites, it always provides at least the minimal functionality of the my.seagate.com search.

2.

3.

4.

5.

9

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Primary Navigation Block
6. The global or top navigation element is required and always begins with a link to the site home. There are two variations of the color scheme, one for Internet and one for extranet/intranet sites. There is a graphical version that may implement DHTML drop-down menus, as well as a text-only version with no menus. External-facing sites must use images. Global navigation links connect users to section door pages or home pages.

Home: The label “home” is reserved for the corporate site navigation and refers to the explicit page found at http://www.seagate.com. All other sites or applications must have a qualifier before the word home in the global navigation and the breadcrumb. Example: “reseller home”

Breadcrumb Block
7. The breadcrumb provides a path to current website context or location. The leftmost link here always links to the site home. Its label should include the site name, e.g. ‘Reseller Home.’ ‘Home’ is reserved for the www.seagate.com home page. Breadcrumbs are required on all interior pages.

Local Navigation Block
Local navigation links are listed in this block as text. These are second-level navigational links and provide access to subsection doors. 9. Third level navigation is provided below the appropriate second level parent if third level links exist. Only the third level links for the current subsection are displayed. 10. Related links are optional and provide additional information for the user. The treatment for related links is different from that of third level navigation, and more than one related link set can appear on a page. Also, they need not be labeled “Related Links” if there is another, more appropriate, label. 11. Promotions are optional and are a means of advertising Seagate products, services, promotions, features, content and so on. These are self-promotional images with links. 8.

Content Block
12. The page title is a text descriptor of the current page. This should be a complete phrase and define completely for the user the context of the current location in the site. 13. The content of the page is required. A variety of page types are described later in detail that cover some of the most common types of content, such as data tables and forms.

Footer Block
14. The footer repeats the primary or global navigational links, in text, at the bottom of the page. Also included, if it exists for the site, is the site index link. A footer is required. 15. The copyright element includes the required Seagate copyright information, links to legal and privacy information. Other links may appear here based on audience and need. Consistent use of these elements in web page design makes sites easier to navigate and use.

Page Components + Color Schemes
Introduction
3 variations on a theme: color according to audience
The new branding brings all of Seagate’s web presences together with a family of colors based on the distinctive Seagate green. There are three variations on this theme, according to audience:

10

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Internet, or general public facing web sites such as www.seagate.com Intranet, or employee facing private/internal web sites such as my.seagate.com for Employees Extranet, or customer or supplier facing partner web sites such as my.seagate.com for Customers In order to provide the correct context and consistency, the colors used must align with the audience. Color Scheme: It is a simple fact that some applications serve multiple audiences and that it is not always cost-effective to have multiple versions of look and feel for these applications. If you can only implement one look and feel, default to the Internet color scheme if there are any Internet users. Default to the extranet scheme if there are no Internet users but are some extranet users. Use the Intranet scheme only if the audience is entirely internal. The three variations are distinguished by the color of the right portion of the header bar to the right of the curve; other elements of the look change minimally and are entirely controlled by using the style sheet for that audience. Below are home pages from each of these variations. Internet: www.seagate.com Intranet : my.seagate.com Extranet: reseller.seagate.com

Other sites: No other site uses this color scheme.

Other sites: Seagate intranet sites use this color scheme; i.e., http://inside.seagate.com.

Other sites: The my.seagate.com Extranet portal for suppliers and customers uses this color scheme.

Samples from the right two thirds of the top banner, the ‘section header’. Note that although the top color changes, the bottom color for the global navigation bar does not. Values are RGB, hexadecimal. #336666 #336699 #669966

The interior pages on sites are also color-coded to audience. Here are samples of the three headers:

11

Seagate Web Style Guide Internet: Teal-ish Green Example: www.seagate.com

Copyright Seagate Technology LLC 4/7/2003

Extranet: Bright green Example: partner.seagate.com

Intranet: Blue Example: standards.seagate.com

The key differentiator in these schemes is the color-coding of the section name bar to the right of the “focus ring.” The second main difference is the highlight state on the primary navigation; this is a bright green for Internet sites and light blue for extranet and intranet sites. The audience-specific color of the site is carried through into the style sheet definitions for several styles in font and background color, and a complimentary audience-specific highlight color is used in search tools. Color-coding aside, all fonts, dimensions, margins, buttons, banners, etc. are the same throughout seagate.com. In summary all Seagate web sites share the following page elements: Seagate logo graphic in upper left corner; required on all pages except for popup windows One of three possible colors for the section header, to the right of the focus ring; required Fonts, colors and margins of central content block; all required Color and design of primary navigation bar; required, at least for a site “home” link Bottom navigation bar; required Bottom copyright and legal notice links; required These elements are further described in the remainder of this section. These elements will be covered in the same order presented so far: from top to bottom, left to right. We will highlight any differences between intranet, Internet and extranet specifications. 12

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Header and primary navigation
Purpose

Required

The header and primary navigation provide the user with site and brand identity for the web page. It indicates that they are on a Seagate web page, and defines their relationship with Seagate as a customer, partner or. The header identifies the web page as: A Seagate web page; A public, private or customer/supplier/extranet Seagate page; Belonging to a particular site or function, e. g. human resources, marketing, etc.

Overall size
Height: 68 pixels Width: minimum 760 pixels, fluid table design used so that header always spans entire width of page.

Constituent elements
The header and primary navigation is made up by one or more of the following elements. These elements are all contained within fluid tables that are designed to spread across the entire span of the browser window, with a minimum width of 760 pixels. Each element is implemented within a table cell. They are illustrated in the figure below and summarized by the following table. Detailed description follows.

ID

Name

Required

Format varies for intra/inter/extr a No Yes

Text/Graphic

A B

Site name and/or country identifier Section identifier

Required Required on content pages

Graphic Graphic on all extranet and Internet sites; text option for intranet sites

13

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

ID

Name

Required

Format varies for intra/inter/extr a No No

Text/Graphic

C D

Site tools navigation Seagate logo/corporate signature Quick search Primary navigation

Recommended Required

Text Graphic

E F

Required Required

No No

Text with button image Graphic on all extranet and Internet sites; text option for intranet sites Text/DHTML/ JavaScript

G

Secondary navigation

Recommended as appropriate

No

Text-only Version: A text-only template is available for intranet sites; the section name and primary navigation are text. DHTML menus are not supported with this option. Refer to HTML templates and “Read Me” files provided in the intranet tool kit at http://www.seagate.com/branding/web/intranet/.

Dos & Don’ts
Do Use the Seagate logo graphic at the upper left Do not Modify or crop it in any way Use it anywhere else Animate it, or use different colors For further reference, see brand identity guidelines on http://www.seagate.com/branding/logo/ Always link the logo graphic to the www.seagate.com home page. Use the header throughout your site. Use the correct colors for your audience/type of site. Make the logo graphic a link to anywhere else, including the home page for your site or application. Selectively use the header on content pages on your site. Use the wrong color or a different color than the 3 audience specific colors provided. Do not “mix and match” colors within a site. A site can only have one color scheme. Maintain the designated header height. Shrink the header or try to “squish” it so that it uses less vertical space. The header is already as short as it can be and still remain usable, consistent and adhere to brand 14

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

guidelines.

Background color set by table cell class
Most elements of the header—except for the Seagate logo itself—are transparent. They allow the background to show through and help support a fluid table design. Thus the color for most of the header is determined by that of the table and table cells.
<table> has a class attribute with value header

Most of the <td>s have class attribute with value header The color set by class header is set by the site style sheet, and will vary according to audience. As long as you use the appropriate style sheet for your site, you need not be concerned with this. For the Internet style sheet used by www.seagate.com, header is defined to have the color #669999. header versus headerHome: The home page header on www.seagate.com uses the teal color which is used as the logo background on interior content pages. On other sites, the same color is used in both instances because there is no conflict with the logo background color. headerHome is only used on home pages.

Elemental specifications

Site name/country

Required

The site name and/or country identifies the site to the visitor. Examples include: ‘Seagate Partner Program’, ‘Inside Seagate’ and ‘my.seagate.com’. When appropriate on international sites use the country or region name behind the site name. Example: seagate.com : ASEAN Here are two sample site name images:

Use proper names for site names: Site names are only URLs when the URL is actually the site name; for example, my.seagate.com or seagate.com. Most sites should have site names which are not URLs.

Site name specifications
Description Text/graphic Specification Graphic always for Internet and extranet; graphic preferred for intranet but text may be used. See below under Section identifier. Lower case Graphic specifications do not vary. Internet: graphic 15

Variations

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003 Extranet: graphic Intranet: graphic preferred, but text may be substituted.

Dimensions PhotoShop file Font face:

Height: 20 pixels Width: to content site.psd Helvetica Neue Bold Download purchase site http://www.adobe.com/type/browser/P/P_1198.jhtml

Font size: Tracking (letterspacing) Antialiasing Color Background color

11 pt. 15 Crisp #666666 #FFFFFF

Special Case: All employee facing websites and applications use my.seagate.com as the site name. This may apply to partner facing applications within my.seagate.com for Partners as well. Using a different site name will be evaluated on a case by case basis.

Section name

Required, varies according to audience

The section identifier provides large and clear indication of the top level node of the current page in the information architecture hierarchy of the site. Examples include Support, Products, News + Info. Note that the section name reflects the label used in the primary navigation when included as part of the primary navigation. All items in the primary navigation will have section headers; but not all section headers need to correspond to items in the primary navigation section. The section name should be linked to the section that it is naming or to the site home if it is being used for the name of the application. The background color of the section name distinguishes Seagate’s intranet, Internet and extranet web sites. Note that this color is set by the table cell in which the graphic resides. The graphic itself is transparent and saved with mask color that is the same as the background color for this area. Here is an example, from the top www.seagate.com support page, www.seagate.com/support/index.html page.

16

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Section name specifications
Description Text/graphic Variations Specification Graphic, transparent GIF for Internet and extranet, mixed case. Internet and extranet must use graphic Intranet may use text instead; see “Read Me” file in intranet toolkit for more details. Dimensions Font Face: Font Size: Tracking (letter spacing) Color Background color Typical values PhotoShop template Width: cut to fit text, but less than 181 pixels Height: 68 pixels Helvetica Neue Light, http://www.adobe.com/type/browser/P/P_1198.jhtml 28 points for single line of text 22 points for two lines of text (leading/line spacing at 24 pts). 0 #FFFFFF Transparent ‘Support’, ‘Products’
sectionTitle.psd

Special Case: For simple applications within one of the portals, the section name space may use the application name. This is appropriate when the application is considered an extension of the portal and when it does not warrant it’s own primary navigation.

Site tools navigation
The site tools navigation block is at the very upper right corner of the page. It presents text links to one or more site-wide navigation tools, the most common of which is ‘site index’. It may include: ‘help’, ‘contact us’, ‘login’, ‘logout’, etc.

Site tools specifications
Description Required Text/graphic Variations Specification Optional but recommended Text, lower case Formatting: none Content: varies according to site. CSS class Alignment
toolLink

Flush right

17

Seagate Web Style Guide Description Typical values Specification

Copyright Seagate Technology LLC 4/7/2003

site index, help, logout, refresh, profile

The following site navigation tools may be included in this element: site index provides a text index to the major content areas and sub areas of the site. help gives instructions on how the site is to be used, most particularly any aspects of the site which are peculiar to it. login/logout take the user to those pages. contact us is recommended for intranet sites, especially those not having such a link in the bottom navigation bar. Do not put contact us in the site tools if it is already in the primary navigation. Other links as appropriate to your site or application. Include links here which the user would want easy access to from any page of the site. Use non-breaking spaces: Use non-breaking spaces (&nbsp;) between words and pipe’s (|) in site tools rather than normal white space ( ). This will prevent the site tools from wrapping into two lines.

Seagate logo/corporate signature

Required

The Seagate logo is the single most important element to include on every standard Seagate web page. It informs the user that they are on a Seagate website. As the heart of Seagate brand identity, the logo or corporate signature should be used in accordance with the following rules: Always us it on every site and every full size page. Popup windows are not full size pages. Do not use it (nor the rest of the header) on pop-up windows and dialog boxes. Always Link it to http://www.seagate.com/. This graphic should always be a link to the corporate home page; it should never link to anywhere else. (For a link to your site home page, put a Home link in the primary navigation bar below.) Use only the official, unmodified and approved web versions. Do not attempt to resize, crop, edit or change the colors of this graphic. The two versions, one with a white background and one with teal green, are shown below.

When to use the white background logo
The white background logo should be used according to the following guidelines: On site home pages such as www.seagate.com, my.seagate.com, reseller.seagate.com On login pages Here are some usage samples for home pages:

18

Seagate Web Style Guide www.seagate.com (Internet)

Copyright Seagate Technology LLC 4/7/2003

reseller.seagate.com (extranet)

Where to use the reversed (white on transparent) logo
The white on transparent logo should be used in the following situations: All full sized content pages Here are some examples: www.seagate.com/news (Internet)

http://reseller.seagate.com/benefits (extranet interior page)

Logo specifications
Description Height Specification 68 pixels

19

Seagate Web Style Guide Width Background color Variations 270 pixels

Copyright Seagate Technology LLC 4/7/2003

White or teal Do not change the background color behind the logo. See text above for usage instructions. None between intranet, Internet or extranet sites.

Quick search
Quick search allows the user to submit a search directly from any page. It is always located within the header and aligned right. Use the following guidelines for quick search: Search the current site, not others. (See note below about intranet search options). Search transparently amongst application data and other site data. In other words, using the search should be the same irregardless of the search engine/application. Search consistently within the site from any page. The search should not behave differently from one page to another. (Customized searches, ‘search tools’, should be provided within the central content area of the page.) Place it in the header. Align it right so that it is to the right side of the header, except on www home page. Provide the search button for form submit. One text box and one pull down menu, for entering the search string and selecting which site to search. Provide hints for the search text to use as initial value in the text box. Enclose the search area in a self-contained table. This allows customizable formatting of the quick search tool based on parameters. Advanced search may be provided as an additional link, below the text entry field, both aligned left. See the search addendum at the end of this document for help implementing search on your website

Quick search specifications
Description Required Text/graphic Specification Optional but recommended except for very small sites or applications. Text with CSS styles below. Use ‘Search’ graphic for submit button (btn_search_grn.gif) note, the grn in the file name refers to the background color the button was created on, not the button color its self. All sites us the same blue search button. Formatting: none Content: varies according to site. CSS classes Form field: formSmlFieldInput Text: header Link: headerLink

Variations

20

Seagate Web Style Guide Description Alignment Specification Flush right, except on home pages

Copyright Seagate Technology LLC 4/7/2003

Here are examples of a couple of quick searches. Example from www.seagate.com/newsinfo section door

Example from www.seagate.com home page

Note that the www.seagate.com home page search above offers two possible quick searches, and that the initial text in the text boxes indicates possible values to enter. This is unique to home pages due to the amount of horizontal space to the right of the focus ring.

my.seagate.com quick search variations
The internal version of my.seagate.com has a pull-down menu which allows the quick search to search all Seagate intranet sites, www.seagate.com, or the Internet.

Primary navigation bar

Primary navigation to your site is provided by the row of links across the bottom of the header. These links take the user to the top level pages, e.g. support, products, jobs, etc. The left most link is always to the site home. Primary navigation should have the following characteristics: Text graphics should be used to ensure consistent display across browsers; Text graphics should follow the corporate standard; Navigation text graphics should indicate state by changing to show default (unselected), selected (this is current location) and mouse-over.

21

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Navigation text graphics should indicate current location by changing between default and selected; Navigation text graphics color does not vary between intranet and extranet sites. Use only the standard colors described below; Navigation links should work with the DHTML secondary navigation drop downs (as appropriate); Navigation text graphics color on state is uniquely bright green on Internet site; Provide a home link on the left of your navigation bar which links to the home page of your site; Align left the buttons on the navigation bar. Navigation buttons do not vary in color between Seagate’s intranet, Internet and extranet sites. Their specifications remain the same.

Primary navigation specifications
Description Required Text/graphic PhotoShop reference file Variations Specification At minimum must include a site home link. Graphic, lower case
gnav_prt.psd, gnav_emp.psd, etc. according to toolkit

Formatting: none. The same for intranet, Internet and extranet. Color: a different color scheme is used for Internet navigation graphics; you will not need to create these. Content: varies according to site.

Dimensions Margins (per button)

Height: 20 Width: as needed according to margin specifications Left: 7 pixels left edge left side of vertical line, 4 pixels between line and left edge of text. Right: 12 pixels between right edge of text and edge of graphic. Bottom: 8 pixels between baseline of text and bottom of graphic State Default (unselected) Text Background Flag #FFFFFF #003366 Not applicable Selected (current location) #333333 #CCFFFF #99CCFF Mouse over #CCFFFF #003366 Not applicable

Button colors

Vertical divider rule on button

Color: #669933 on www/Internet Color: #6699CC on intranet & extranet Width: 1 pixel Height: height of graphic, 20 pixels Helvetica Neue

Font face

22

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Font size Font style Tracking/letter spacing Anti-aliasing Alignment Typical values

Specification 12 Bold 12 Crisp Buttons flush left on bar; text flush left on button Site home, Products, Support

PhotoShop template files are provided for buttons as listed below. Each file has multiple layers, with the appropriate colors for the three states. PhotoShop file
gnav_www.psd gnav_sup.psd gnav_res.psd gnav_cust.psd

Application www Supplier Reseller Customer

Here are the three states for the www.seagate.com product button. Note that the same files cannot be used for a product link on intranet and extranet sites; however, extranet and intranet images can be re-used between sites as needed. Default (unselected) Selected (current location as www.seagate.com/products) Mouse over

Filename:
gn_www_products_off.gif

Filename:
gn_www_products_down.gif

Filename:
gn_www_products.gif

DHTML & JavaScript
DHTML drop down menus are optional and are currently only supported when images are used for the primary navigation. DHTML is optional; it is not required. The alternative is to provide primary navigation in images or text with second level navigation provided only on pages within those sections of the site. In other words, in order to see navigation for a products section you would have to be in the products section.

23

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Secondary navigation via DHTML drop-down menus

Recommended

Immediate access to second level links is provided by DHMTL menus which drop down from the primary button bar when the user mouse’s over the navigation image. This is illustrated below, although the cursor is missing from the screen capture. It is assumed that developers who use the dynamic HTML provided understand the basic principles of JavaScript. Tip: Be sure to adjust the layer positioning in the .js file so that menus align with the primary navigation image they appear under.

Supported browsers and DHTML
The script provided is intended to work with the supported browser/platform combinations. It may be unstable on unsupported combinations. Note: DHTML will not work with text only versions of the navigation bar. Default display Mouse-over state

DHTML menu specifications
Description Required Text/graphic Variations Specification Recommended Graphic primary navigation with text JavaScript Formatting: The same for intranet, Internet and extranet. Content: varies according to site. . JavaScript file must be customized for each site, for both links and geometry. Be sure to adjust layer positioning. Dimensions JavaScript/DHTML Not applicable; set by script Located in the scripts directory of your toolkit.

Tip: If your home page primary navigation is a different distance from the page top than an interior page, you will need two versions of the dhtmlMenu.js file—one for the home page and one for the interior pages.

24

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

DHTML drop-down menu usage
Before use, you must customize the provided in the scripts file to your site. You will change it to reference the appropriate top-level graphics, as well as secondary labels and URLs. To reference the secondary menu in your page, you must reference it in the following three ways: Predefine the functions in the <HEAD> of your page, as follows:
<script language="JavaScript"> <!--// Predefine all javascript functions that won't be loaded until later. // Predefine menu functions. function showMenu(menu) {} function hideMenu(menu) {} //--> </script>

Reference each menu where called. For the products menu above it is: <a href="/products/" onMouseOver="showMenu('gn_www_products')"><img
src="images/gnav/gn_www_products_off.gif" width="74" height="20" border="0" alt="Products" name="gn_www_products"></a>

Load the script at the bottom of the page:
<script language="JavaScript" type="text/javascript" src="scripts/dhtmlMenuHomeWWW.js"></script>

We do not load the script in the beginning, because it would increase the amount of time for the page to download to the browser and display. The script is more than 31KB and requires a noticeable time to download over a slow connection. By referencing it this way the browser can render the page, then download the script. Also, on non-SSL webservers, the JavaScript source file can be cached in the user’s browser so that transitions to subsequent pages are faster. To customize the width of the secondary navigation menu layer, change the bold number below in the menu elements array. Be sure to leave enough space to the right of the longest menu item.
menuElements[4] menuElements[4][0] menuElements[4][1] menuElements[4][2] menuElements[4][3] menuElements[4][4] = = = = = = new new new new new new gMenu("gn_www_newsinfo",83,120,0); gMenuItem(4,"2nd&nbsp;level&nbsp;nav", "link"); gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link"); gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link"); gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link"); gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link");

Breadcrumb

Required

The breadcrumb block is situated immediately below the header and serves three roles: Indicates current location within the site hierarchy; Provides links to navigate up within the hierarchy. Helps the user construct a mental model of the site architecture which enhances usability and makes the site easier to get used to.

25

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Here is an example from http://www.seagate.com/newsinfo/newsroom/awards/

In this case, Awards is the current location. It is the third level below the Home page, within the News Room which is in turn within News + Information. The levels above are mixed case text links; the current location is in mixed case but is not a link. All links are presented as text.

Applies to all pages except home and login pages
The breadcrumb is required on all pages except for site home and login pages. The www.seagate.com home page has no breadcrumb, but all other pages on the site do have them.

Breadcrumb specifications
Description Required Text/graphic Variations Specification Home pages: not required nor recommended. Do not use. Other pages: required. Use on every page. Text always, mixed case. Formatting: none. The same for intranet, Internet and extranet. Content: varies according to page. Dimensions Height: 30 pixels, set by IMG reference to clear t.gif graphic Width: 760 pixels minimum, fluid Margins left and right: 15 pixels Left, with 15 pixel margin Vertically centered in 30 pixel height Caret: ‘>’ Text for levels above and current location HTML or JavaScript (optionally) with CSS class attributes JavaScript optionally (or static HTML) via breadCrumb.js file CSS class Anchor Tag: breadcrumbLink Caret (‘>’): breadcrumbCaret Text: breadcrumbLink

Alignment Constituent elements Technology

26

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

It is optional to use JavaScript to render the breadcrumb.

Constituent elements
Whether hard-coded or generated by the breadCrumb.js script, the breadcrumb always begins with a link to the site Home and ends with unlinked text showing the current location. In between are links to the appropriate level(s), formatted with the breadcrumbLink class, and separated by carets (‘>’), formatted with the breadcrumbCaret class. The entire breadcrumb resides in a table cell; the table is fluid and dynamically adjusts the browser window width with a minimum spread of 760 pixels. The table handles all formatting of this block. Margins are set using spacer images by way of 15 pixel wide transparent GIFs. Below is a sample code from the News page shown above:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="/images/t.gif" width="15" height="30" border="0" alt="Spacer"></td> <td width="100%" valign="middle"><a href='/' class='breadcrumbLink'>Home</a> <span class='breadcrumbCaret'>&gt;</span> <a href='/newsinfo' class='breadcrumbLink'>News + Information</a> <span class='breadcrumbCaret'>&gt;</span> <a href='/newsinfo/newsroom' class='breadcrumbLink'>News Room</a> <span class='breadcrumbCaret'>&gt;</span> Awards</td> <td><img src="/images/t.gif" width="15" height="30" border="0" alt="Spacer"></td></tr></table>

Breadcrumb via JavaScript
Optionally you can have the browser generate the breadcrumb automatically using a call to a JavaScript function. This simplifies your page design, since neither you nor your application needs to know the location of the page to generate the required breadcrumb. Instead you insert a generic reference the breadCrumb.js with a couple of lines of HTML. In the <head> portion of your page call the script:
<script src="scripts/breadCrumb.js" type="text/javascript"></script>

Set up and close the breadcrumb table normally, but substitute the following for the middle <td> above:
<td width="100%" valign="middle"> <script language="JavaScript"><!-breadCrumb("dir1~Directory One/dir2~Directory Two/Third Level Page"); //--> </script></td>

The parameters sent to the JavaScript function breadcrumb appear in a slash ‘/’ delimited list of directory name-descriptive text pairs that are in turn separated by a tilde ‘~’. Some examples of function calls and their results are below, without accurate color or formatting. Function Call: breadcrumb(“Directory One”) Result: Home > Directory One Function Call: breadcrumb(“dir1~Directory One/Directory Two”) Result: Home > Directory One > Directory Two

27

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Function Call: breadcrumb(“dir1~Directory One/dir2~Directory Two/Third Level Page”) Result: Home > Directory One > Directory Two > Third Level Page This allows you to construct URLs from directory path components but relabel them as appropriate for the user in the breadcrumb proper. The script allows you to specify the URL of your site home, and you will need to customize the script to set the site home name for the first crumb of the breadcrumb. Use multiple breadcrumb scripts: If you have a complex hosting arrangement, or for some reason your home link is not the web root (“/”) you can customize the script and/or use multiple copies of the script. Just be sure to rename the script and call the right version in your document’s <head>. Consult the comments in breadCrumb.js for more details on usage. For simple sites or applications we recommend hand coding the breadcrumb on each page.

Breadcrumb via Application Code
If you are developing an application, you can generate your breadcrumbs within the application directly. This is preferred over using JavaScript since it is actual HTML delivered to the user’s browser and therefore less subject to gremlins. Dynamic delivery of breadcrumb’s based on page attribute or application screen information is always preferable to static/hard-coded breadcrumbs.

Footer

Required

The footer consists of a row of text links to the primary navigation areas along with a site index link, followed by a copyright notice with links to the legal disclaimer. The footer serves the following roles: Offers text links to the top level areas of the site. Copyrights the page with a copyright notice. Offers Privacy Policy and legal information via a link to that page. Visually anchors the page. Indicates the end of the page content.

Footer specifications
Description Required Text/graphic Specification Required on all pages. Recommended on all pop up windows. Text always. Footer bar is lower case.

28

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description

Specification Copyright line is mixed case

Variations

Formatting: none. The same for intranet, Internet and extranet. Content: varies according to site.

Dimensions

Height: 18 pixels, set by spacer image in formatting Width: 760 pixels minimum Margins left and right: 15 pixels Links: left, with 15 pixel margin Copyright & Legal: right, with 15 pixel margin Vertically centered on 18 pixel height Pipe symbol: ‘|’ Text links HTML with CSS class attributes JavaScript recommended for privacy and legal notices. Links:
<td>: footer <HREF>: footerLink

Alignment

Constituent elements Technology CSS class

Copyright & legal:
<td>:copyright <HREF>: copyrightLink Pipe (‘|’): copyrightPipe

JavaScript

openHelpWindow from default.js (for privacy and legal notices)

About legal and privacy: Link to a single version of the content, this content always appears in a popup “help” template. Never host this content. When in doubt about which version of the legal and privacy content to link to use the following urls: Corporate Internet site: http://www.seagate.com/help/legal/privacy.html http://www.seagate.com/help/legal/terms.html Partner extranet site: http://partners.seagate.com/help/info/mySeagateprivacy.html http://partners.seagate.com/help/info/mySeagateterms.html Employee intranet site: http://my.seagate.com/help/legal Example: footer from www.seagate.com

29

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Below is a sample of the footer from the corporate home page. It has been edited to include only the first and last (home and site index) links. The first block is the row of links; the second the copyright and legal notice line: note the JavaScript calls here.
<!-- Footer and copyright. --> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr><td class="footer"><img src="/images/t.gif" width="15" height="1" border="0" alt="Spacer"></td><td valign="middle" width="100%" class="footer"><span class="footerLink">Home</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.seagate.com/newsinfo/about/sitemap/index.html" class="footerLink">Site Index</a></td><td class="footer"><img src="/images/t.gif" width="15" height="18" border="0" alt="Spacer"></td></tr> <tr><td class="copyright"><img src="/images/t.gif" width="15" height="1" border="0" alt="Spacer"></td><td align="right" valign="middle" class="copyright">Copyright&nbsp;&copy;2003,&nbsp;Seagate&nbsp;Technology&nbsp;LLC& nbsp;&nbsp;<span class="copyrightPipe">|</span>&nbsp;&nbsp;<a href="/newsinfo/about/index.html" class="copyrightLink">About&nbsp;Seagate</a>&nbsp;&nbsp;<span class="copyrightPipe">|</span>&nbsp;&nbsp;<a href="javascript:openHelpWindow('/help/legal/privacy.html', 'help')" class="copyrightLink">Privacy&nbsp;Policy</a>&nbsp;&nbsp;<span class="copyrightPipe">|</span>&nbsp;&nbsp;<a href="javascript:openHelpWindow('/help/legal/terms.html', 'help')" class="copyrightLink">Legal</a><br><img src="/images/t.gif" width="730" height="1" border="0" alt="Spacer"></td><td class="copyright"><img src="/images/t.gif" width="15" height="18" border="0" alt="Spacer"></td></tr> </table>

Notice also the 730 pixel wide spacer graphic used at the end; given the 15 pixel margins on each side, this forces the whole table to 760 pixels. The table is, however, fluid and will expand across the entire bottom of the page.

Content block

Required

The content block is the heart of the page and contains the page title, local navigational sidebar if any, fourth level navigation if any, and page content. The central content element includes the following elements. Page title Content: text, graphics and other information. Local navigation containing second and third navigation elements Fourth level navigation in the content component if present Content level inline navigation elements, particular to that page.

30

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Central content element specifications
Description Required Text/graphic Variations Specification Required on all pages. One or both Formatting: several according to information type. The same for intranet, Internet and extranet. Content: varies. Dimensions Height: varies Width: 760 pixels minimum, may spread to fit Margins left and right: 15 pixels Gutters: 15 pixels Links: left except as noted Left navigation block, required except for home pages, pop up windows login pages, and application screens without navigation Central content element: required CSS classES See constituent elements

Alignment Constituent elements

Further details are given below under the respective elements: left navigation and central content, and within the page types section which follows.

Local navigation element

The left navigation element presents second and, depending on location, third level navigation. Here is an example from www.seagate.com. Again we look at the product area.

31

Seagate Web Style Guide www.seagate.com/products/disc Disc and Tape are second level links; the links listed below the “Disc” heading are third level links.

Copyright Seagate Technology LLC 4/7/2003

When to show third level links
Show third level links (the various disc choices in the example above) for the current location. Do not show third level links for other locations. In the example above there are no links below Tape, for example. In other words: continue to show the third links when you ‘drill down’ further into that section of the site. Third level links remain visible in the in the pages of that section of the site or below. Do not worry about indicating the current location in the left navigation area: the breadcrumb and other devices are adequate. For the example above the left navigation bar would not change from the lower illustration in any of the pages linked to under Disc, neither those on the left navigation bar (Disc Datasheets…) nor those on the right (Select a Disc Drive…) Note: notice how the breadcrumb follows the navigational directory structure.

When to show fourth level links
Fourth level navigation is not recommended, but sometimes unavoidable. Fourth level and below links are never shown in the left navigation bar. They may be displayed in the content area proper; see the section on fourth level links below.

When to show “Related Links”
Related links are optional, but may make your site more usable. There is no convention regarding what level(s) of the site they link to—they may even link to other sites both within and outside of seagate.com. Related links have their own CSS class, as shown below.

Left navigation specifications
Description Required Text/graphic Variations Specification Required on all pages except for home pages and certain applications requiring full page width for proper display. Text Formatting: none. The same for intranet, Internet and extranet. Content: varies.

32

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Dimensions

Specification Height: varies Width: 200 Margins left and right: 15 pixels Gutters: 15 pixels Links: left Second level if at top level (e.g. /products) Third level if at second level or below (e.g. /products/discsales or below) Related Links (optional) Promotional banner(s) (optional)

Alignment Constituent elements

CSS classES
<td> lnav

2nd level link 3rd level link Related Links

lnavLink

lnavSmlLink

rnavLabel; used for the “Related Links” label and is audience-specific in

color
lnavSmlLink; used for the links

Related Links

Optional

Related links may be placed in the bottom of the left navigation bar. An example from the www site is below:

33

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Related Links note: A different caret is used for the related links to visually differentiate them from a third level navigation link.

Fourth level navigation links
In situations where one needs to provide navigation to other fourth level pages, a text navigation bar across the top of the content area can be used. The example above, for related links, also shows fourth level navigation in the content area below the page title. As with third level navigation, the same set of link labels should appear on every fourth level page in the list of links. Showing context: Second and third level links do not change state to show that you are actually on a particular page; this is often difficult to implement and it’s easier to re-use the same HTML for every page in the section. Fourth level links, however, are content-level specific and should change state and not be an HTML link if you are on a particular page. Note that the links are contained only by a paragraph of class cnav; no table is used for formatting. A separate class is used for the pipe ( | ) between links. An HTML snippet is provided here as an example. Note that a <p> begins the list of links, and that a <p> precedes any content after the list of links.
<p><span class="cnav">Company</span> <span class="cnavPipe">|</span> <a href="/cda/newsinfo/newsroom/releases/financial/0,4717,1^2,00.html" class="cnavLink">Financial</a> <span class="cnavPipe">|</span> <a href="/cda/newsinfo/newsroom/releases/disc/0,4717,1^3,00.html" class="cnavLink">Disc Products</a> <span class="cnavPipe">|</span> <a href="/cda/newsinfo/newsroom/releases/tape/0,4717,1^6,00.html" class="cnavLink">Tape Products</a> <span class="cnavPipe">|</span> <a href="/cda/newsinfo/newsroom/releases/networkstorage/0,4717,1^7,00.html" class="cnavLink">Network Storage Products</a> <span class="cnavPipe">|</span> <a href="/cda/newsinfo/newsroom/releases/technology/0,4717,1^4,00.html" class="cnavLink">Technology</a> <p><span class="txtHdr">Latest Company News Headlines:</span>

34

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Fourth level link specifications
Description Required Text/graphic Variations Specification Optional Text Formatting: none. The same for intranet, Internet and extranet. Content: does not change between pages of same 4the level Alignment Margins CSS classES
<P> cnav

Links: left
<p> required to begin navigation block, and <p> required before content immediately below links

Link Pipe (‘|’)

cnavLink

cnavPipe

Central content area

This element can contain text, graphics, forms—anything that is appropriate for web-delivered content. The text could be a simple paragraph or a complex table. The standards and specifications for each of these content types will be discussed in their own sections below. Most of these specifications do not vary by site audience, nor by page type. There may be color differences based on style sheet definitions that are audience-specific, but the class name will remain the same across all sites.

Page Title element-required on content pages

35

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

All interior content pages, that is, all pages other than home pages and section doors, must have a page title element. This element presents the page name in a large font, and also draws the colored rule across to delineate the central content area. Description Required Text/graphic Variations Specification Required on all content pages Text Formatting: none. The same for intranet, Internet and extranet. Content: varies per page Alignment Formatting Left
pageTtl class within <td>

Use descriptive page titles: There are limitations in the way content can be labeled in navigation, HTML <title> tags, breadcrumbs, local navigation and so on—the one place where you should be verbose is in the page title. Page titles should be self-contained concepts that gives context to the user as well. For example, consider the following breadcrumb: Home > Contact Us > Support > Pre-Sales Rather than use “Pre-Sales” for the page title, it is much more appropriate to use “Contact Seagate Pre-Sales Support.” This concludes our discussion of repeated areas and elements. The following sections describe in detail the various types of pages that they may make up.

Page Types
This section describes the different page types, when to use them, and how to build them. The focus here is on the central content element, as this is the primary distinction between page types. Use of repeated elements is also noted, with special mention of required variations. All Seagate web pages are one of the types listed below. On occasion a page may contain combinations of more than one page type format, such as one and two column areas, or text and a form. The types/formats are: Home page, such as www.seagate.com Section door a top level section page, such as www.seagate.com/products Text page, such as www.seagate.com/products/discsales/index.html Data table, such as http://www.seagate.com/cda/products/discsales/index/1,,,00.html Form page, such as http://search.seagate.com/search/www/advsearch.html Two-column layout, such as http://www.seagate.com/newsinfo Login, such as http://reseller.seagate.com Application no navigation, such as prtappnonav.html in the partner toolkit. This page has no left navigation element; the central content occupies the entire page width.

36

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Help popup, such as the popup from the Privacy Policy link on www.seagate.com’s footer Error, such as http://www.seagate.com/cgi-bin/404.pl?request=http://www.seagate.com/products/dfjkd

Home
The home page is often the first page that a user sees on a visit to a particular site. It is not a destination in and of itself, but a starting place: articles are rarely presented in their entirety, but in short summary. Placement of the logo above the header bar distinguishes the home pages from the other pages on those sites.

Distinctive characteristics
The home page differs from most other pages in that: The logo is placed above the banner, not in it (required); A full-sized logo is used. The normal Seagate logo has five rings on the ‘wave’. To keep the logo from distorting at small sizes, interior pages use logos that have only four rings. Ad banners are used within the content (optional). No page title (pageTtl) is used. The use of text graphics within the content area varies between Internet, intranet and extranet. The www home page is the only page which requires use of a text graphic within the central content area (‘What’s new’ and ‘Top Stories’ below). The home page has no page title text. The illustration below shows the home page. CSS classes are called out in red. For example the class of the ‘more>’ link is storyMore.

37

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Key home page characteristics
The red numbers on the illustration below indicate margins, gutters and key dimensions for the home page. They are listed in the table below: Characteristic Page minimum width Page margins Logo/corporate signature used Number of content columns Interior gutter between content columns Interior gutter between right column and banner Column widths Specification 760 pixels Left, right, top, bottom 15 pixels White, placed above the banner. See heading section for more details. 2 plus banner to right 20 pixels 20 pixels Left: 300 pixels Right: 270 Banner at right: 120

38

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Characteristic Banner dimensions

Specification 120 pixels wide by varying height; different combinations of banner layouts may be used but overall height is limited to 240 pixels

Key styles used
storyHeadline on <HREF>

For headlines of stories, which are links, e.g. “PC World Looks…” For table cells containing the stories Links to continuations of stories on other pages. Color #CCCCCC Width: column Height: 1 pixel

story on <td> storyMore on ‘more>’ links

Grey rules

Note that the margins and page size are no different for the home page than for other pages; they are listed here as explanation for the figure. Further observe that the left edges of the Site/country identifier, quick country navigation drop down, quick search and right text column are in alignment. The right banner is optional. It is not used on intranet sites. Finally see that the quick search has two text fields (and search buttons) instead of the usual one. This is the generic location for search tools on a home page.

Seagate Partner Program (Reseller Site) variation
The reseller.seagate.com home page is given below. It illustrates the extranet banner color, and more typical single search text box. All other dimensions and characteristics are the same as the www.seagate.com home page above.

39

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Section door
Drilling down from the home page, each of the header navigation bar links takes one to a ‘section door’ page, such as www.seagate.com/products. This page introduces the breadcrumb, and left navigation bar. Central content is divided into two horizontal areas: the top shows features, the bottom primarily links rather than information. The section door design falls between that of the home page and that of lower level pages.

Distinctive characteristics
The logo is placed in the banner using the ‘four ring’ version of the wave; A horizontal graphic occupies the top of the second column; There may be a Features area, and one or more areas below; Second level link categories presented in the right element mirror those on the left navigation bar Third level links are not presented because this is a first level page—third level links only appear on second level pages and below. Shortcut pull-down is placed in content area; Left navigation shows only 2nd level links.

40

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Key section door content element specifications
Description Text graphics within content area to Section name corresponds to page title used Features area Features area horizontal graphic Second level links in content area Third level links in content area Shortcut pull down in content area Internet Omitted Required Extranet Omitted Required Intranet Omitted Required

Required Required Required Recommended Recommended

Optional Optional Recommended Recommended Recommended

Optional Optional Recommended; content dependent Optional; content dependent Optional; content dependent

41

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Left navigation bar Second level links Third level links Breadcrumb Page title Columns Features graphic dimensions Formatting
secTtl storyHeadline storyMore

Internet Required Required

Extranet

Intranet

Not required nor allowed Required Required Two 250 pixels wide x 110 pixels high

Required for section titles, ‘Presales support’ above Required for title links, ‘New versions of…’ above Required for ‘More…’ links

Text page
A text page is the simplest of pages. By definition it has a one-column content element; and it is usually not divided horizontally. www.seagate.com/products/discsales/index.html

42

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Text page specifications
Description Left navigation bar Second level links Third level links Breadcrumb Page title Class for text Class for title links Columns Specification Required Required Optional but probably appropriate Required Required None None One
pageTtl class in the <td>

Notes

Note that none of the text in the content area has styles applied to it. (The page title has a style applied to it, but that is part of the page’s overall formatting.)

43

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Data table page
Data tables are useful to compactly publish lots of information. Their formatting is simple and does not vary by audience (the same formatting could be used on an intranet table and Internet table). The format of a data table page is not very different from that of a text page, except that the table page uses a table. Here is a table showing disc products: http://www.seagate.com/cda/products/discsales/index/1,,,00.html.

Table page specifications
Description Left navigation bar Second level links Third level links Breadcrumb Page title Number of columns Formatting for text Specifications Required Required Optional as appropriate Required Required As appropriate
pageTtl class <td>

Notes

44

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description
dataTblHdr dataTblVal dataBoldTblVal

Specifications For Column/row Headers For data values Applies to <td> Applies to <td>

Notes “Model Number” above "ST1181677CV” above
“DataBoldTableValue” above the left upper

column
dataTblHR

Used above to create the rules between table rows.

Good practices for tables
To ensure readability, consistency and robust display we recommend the following practices when designing data tables: Keep it narrow enough to print if possible. If it will be too wide for a typical portrait page, it is advisable to warn the user. Left or right align data cells consistently. It is preferable to establish a convention within your site and stick to it unless there is good reason to depart from the standard. Left is preferred for text data; right for numerical.

Form page
Below is the page http://search.seagate.com/search/www/advsearch.html

Note that the colors of the horizontal bands containing “Step 1”, “Step 2” and so on do vary according to audience. The style name used is the same, but its definition would differ within the style sheet. 45

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Form page specifications
Description Left navigation bar Second level links Third level links Breadcrumb Page title Columns Formatting
formTblHdr for table header <td>

Specification Required Content specific Content specific Required Required 1 or 2

Notes

pageTtl class <td>

Creates color band with reversed out text to divide the form into sections For field labels Apply this class to all <input> elements. The asterix gets a <SPAN
class=”formReq”>

“Step 1” etc. above. Tip: Don’t forget to use colspan so that the rule extends the full form width.

formFieldLbl for label <td>s formFieldInput for <input>s formReq for asterix (‘*’) formOptn formHR

Sets the appropriate font, etc.

Use for <select>s Use to draw Hard Rules for forms Put such a rule between the Submit and Cancel buttons and the rest of the form. Don’t forget to use colspan so that the rule extends the full form width.

Appropriate submit and cancel buttons

Consult the toolkit for appropriate graphics

Form page variations according to audience
Submit and Cancel buttons are specific to audience: Internet and intranet forms use buttons of similar design but different coloring. Make sure to use the buttons from the appropriate toolkit. The colors for form headers and rules should also vary accordingly, but this is handled automatically by the site style sheet.

Form page best practices
Keep the following in mind when building forms to make them more usable. Use a <table> so that your form fields line up; 46

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Indicate required values with an asterix (‘*’); Break up long forms into sections and give each section a reason or step and some explanatory text; Provide good default values if possible; Allow caching of the form unless confidentiality is of concern. This makes it easier to submit the form again, changing one parameter but leaving the rest the same.

Two-column
This page uses a two-column layout for text content and is used when it enhances the visual communication of the concepts for the page, such as http://www.seagate.com/products/

Two-column page particulars
Particular Left navigation bar Second level links Third level links Breadcrumb Page title Number of columns Column widths Note Required Required Optional as appropriate Required Required 2 Left: 315?? Standard?? Right:xxx?? Standard??
pageTtl class applied to <td>

Notes

47

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Particular Gutter between columns Formatting
secTtl

Note 15 pixels

Notes

Applied to section/column titles. Grey rule to delineate sections.

secTtl

grey_ccc.gif

Set to height of 1 and desired width. Tip: Don’t forget colspan for the containing <td> so that it runs the full width. Use <td> above and below with white space (&nbsp;) for spacing.

No classes for links or other text

Two column page best practices
Keep the following in mind when building two column pages to promote consistent rendering by different browsers. Use a transparent spacer image to force column width. The best place to put the gif is as the bottom of the column; give it a height of 1 and whatever width you need. Use a transparent spacer image to force gutter. The gutter width should be 15 pixels. Grey rules separate sections. Use them. Put a blank <td>&nbsp;</td> above and below for spacing.

Login
Most extranet sites, such as my.seagate.com, require log in before access. Hence the home page is a login page. For such pages the login goes right into the header element: taking the place prominence to the right of the focus ring. Other key elements of the login page are login related links in the left column. Below is the Partner Login from my.seagate.com

48

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Login page particulars
Description Site name Left navigation bar Second level links Third level links Breadcrumb Page title Two columns Column dimensions Gutter & margin widths Specification Required Neither required nor applicable. Neither required nor applicable. Neither required nor applicable. Neither required nor applicable. Neither required nor applicable. Yes Left: 256 pixels Right: 300 Left: 44 pixels to align with signature (‘Seagate’) Central: 20 pixels Right: 110 or as needed Right gutter/margin width: as needed to align right edge of right column with right edge of Go button above. Layout modeled after home page template Notes May include country/region

Formatting
headerHome

For <table> and <td>

49

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description
formSmlFieldInput story

Specification For <input>s. for <td> in lower content area

Notes

storyHeadline for headline

If applicable

Login-specific header graphics:

Site identifier
The site identifier for the login page is different from that of the usual home page. Its’ baseline is aligned with that of the logo graphic’s signature line (‘We turn on ideas.’).

Site identifier specifications
Description Text/graphic PhotoShop file Text graphic font Text size Text color Text spacing Text baseline alignment Text antialiasing Background Specification Text graphic, mixed case
loginSiteName.psd

Helvetica Neue Light 28 point #666666 0 Baseline of signature Crisp Transparent

Partner login text graphic
This graphic differs from the regular Section ID graphic since it must be smaller to allow for the login form in the header element.

Partner login text graphic specifications
Description Text/graphic PhotoShop file Text graphic font Text size Text color Specification Text graphic, mixed case
qsearch.psd

Helvetica Neue Roman 18 point #FFFFFF

50

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Text spacing Text baseline alignment Text antialiasing Background

Specification 0 Baseline of signature Crisp #669966

Application no navigation
Applications sometimes require a wide table to properly present their data. In such instances the left navigation area can be omitted. This is the only page type other than home/home login pages where the left navigation area can be omitted. The central content occupies the entire page width.

Application no navigation specifications
Description Left navigation bar Second level links Third level links Breadcrumb Page title Columns Formatting
dataBoldTblVal

Specification Not allowed Not applicable Not applicable Yes Yes Yes as appropriate

Notes

pageTtl class in <td>

Applies to <td>

DataBoldTableValue above, the left upper column

51

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description
dataTblVal

Specification Applies to <td>

Notes dataTblVal above, the right upper column and both lower columns The green dataHrd rule/row above. The blue total row above. Used above to create the rules between table rows.

dataTblHdrNoNav

Applies to <td> Applies to <td> Applies to <td>

dataTblHdr dataTblHR

Help popup window
The help, legal and privacy notices links all use JavaScript to open a popup window. This page design is tailored for a concise and compact display of content and in some ways is similar to that for the application no navigation page type in that neither uses the left navigation area. The Help popup window should be 400 pixels by 400 pixels. The Close Window link image in the upper right is unique to this page type.

Help popup specifications
Description Required Notes

52

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Overall dimensions

Required Width: 400 pixels Height: 400 pixels Text content width: 370 pixels Left: 15 pixels Right: 15 pixels Not allowed Not applicable Not applicable Yes Yes
btn_close_window.gif

Notes

Margins Left navigation bar Second level links Third level links Breadcrumb Page title Close button Columns Formatting
txtSubHrd

pageTtl class applied to <td>

Upper right corner close window button.

One

<span>

Bold headline text above. Remainder of text has no class.

JavaScript for the Help window
JavaScript is used to open, close, and close after linking from the help window. The link which opens the window:
<a href="javascript:openHelpWindow('/help/legal/privacy.html', 'help')">

To redirect the user to another page of the site (closing this help popup window):
<a href="javascript:popupRedirect('http://www.seagate.com/')">

The JavaScript required for the close window link is
<a href="javascript:popupClose()">.

These functions are defined in the default.js file.

Error
Error pages, such as those for a “404, file not found,” should appear to be at the same level as section door, and have a Section ID graphic in the header. They have an area for the left navigation, but it is empty. Otherwise, the error page is formatted as if it is a simple text page.

53

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Error page specifications
Description Left navigation bar Second level links Third level links Breadcrumb Page title Columns Formats
txtHdr

Specification Required but empty None None Yes Yes 1 upper level

Notes No links go here, unless you have sub error pages.

pageTtl class applied to <td>

Bold header text

“404 Error: File Not Found” in the example above.

Error page best practices
Provide explanation and error code; Suggest alternative actions to avoid the error. Say ‘Thank you’

Styles
Formatting of all text elements is accomplished by using CSS styles. All styles for each site reside that site’s style sheet, which is externally reference by each page. This promotes consistency, decreases download times, and makes maintenance easier. Dynamically generated sites may deliver different style sheets to each type of browser, optimized for accurate display. For example a different style sheet might be delivered for Internet Explorer than for Netscape Navigator or Mozilla.

54

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Most styles are the same for Internet, intranet and extranet sites as Seagate. The most notable exception for this is that used to generate the background color on the header: it distinguishes the three types of sites. Any documentation of other differences (such as browser variation) in style sheets is beyond the scope of this document.

Referencing the intranet style sheet
If you have a simple website or application on the intranet, the best way to go is to reference the my.seagate.com intranet style sheet in your website. This is hosted on a robust server and updated as news styles are defined. Simply reference http://my.seagate.com/styles/emp.css.

Creating new styles
To suggest or request a new style, contact us via the contact form at http://www.seagate.com/branding/contact with the purpose of the style, the context for its use, as well as the style definition. We will consider your request. If there is already a style appropriate for your needs, we will inform you; otherwise, we may add the style to the master style sheet for everyone to use. To make your code as portable as possible, it is highly recommended that you use styles defined in the style sheet in the toolkits and avoid over-customizing your own to prevent future name conflicts. If you have an absolute need for several unique styles, be sure to use a naming convention with a site identifier that will allow you relatively assured unique names!

Buttons, Banners & Other Graphics
Buttons
Note:
As of October 11, 2002 the following buttons have been updated and should be replaced with the updated versions from the accompanying Photoshop templates: "Customize" "Search" Delete button ("x") on my.seagate.com "Customize Content & Layout" page Small "Edit" button

Button specifications
Description Dimensions Specification Height: 156 pixels Width: varies Icon area width: 15 pixels Left: 3 pixels Right: 3 pixels Top: 4 pixels Bottom: 4 pixels 1 pixel

Margins

Border

55

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Background Colors Font

Specification Transparent Vary, see next table Sevenet. Available for free download from Fountain: http://www.fountain.nu/fonts/download/sevenet.html

Font size Anti aliasing Word spacing Letter spacing

7 pt None 3 pixels (Kern approximately 600) 1 pixel (In order to create 1-pixel letter spacing in Sevenet, tracking must be adjusted, typically around 120 to150.)

Style 1 2 3 4 5

Text & Icon #336699 #FFFFFF #666666 #FFFFFF #336699

Text Background # EBF4FC* #CC6600 #F2F23F2

Icon Background # B8D3EE #993300 #CCCCCC #6699CC #EBF4FC*

Border #333333 #333333 #333333 #333333 #333333

Overall Background Transparent Transparent Transparent Transparent Transparent

*Asterisk denotes color that is not web-safe.

56

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Button colors
Use the orange palette when the action needs to be eye catching because it is imperative to drive the user through a process or is the preferred action to use. Use the blue palette for optional neutral or forward progressing actions. Use the gray palette for actions that halt a process.

Banners
Design guidelines

Dimensions
Banners for the home page should be 120 pixels wide by 240 pixels high. Those for section doors should be 120 pixels wide by 60 pixels high. All these dimensions include a 3 pixel border.

Typography
Banner type can vary, but should be clean, simple and legible. No more than four type sizes/treatments (preferably no more than two sizes and two weights) should be applied to a single banner.

Color
Remember that these banners are promotional in nature, but should not overpower the rest of the content on the page. Generally, it is best to use more subtle colors (neutrals, greens, blues). Use brighter, higher-contrast colors sparingly when you need the banner to stand out more.

Imagery
Banner imagery can consist of: product photos screenshots background pattern photos.

Border
Banners possess a 3-pixel colored border. Border color should complement the background and content of the banner, and still make sense in the context of the page. Generally avoid very light colors, especially ones that are lighter than banner content. Note that banner borders are slightly rounded (anti-aliased).

"GO" button
The Go button in the lower right-hand corner, accompanied by an arrow, indicates that the banner is clickable. The background should always be the same color as the border. Make sure it's clearly visible and use it consistently.

Transparency
When creating GIF files, the background should be transparent so that the anti-aliased corners of the banner borders will work against the background.

57

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

58

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.