Sie sind auf Seite 1von 58

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

Required

13

Breadcrumb

Required

25

Footer

Required

28

Content block

Required

 

30

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

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

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Revision History

Version

Date

Author

Notes

0.1

2 December, 2002

Kwai Lam

First draft

0.2

3 December, 2002

Cindy Furry

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.

Seagate Web Style Guide

Purpose

Copyright Seagate Technology LLC 4/7/2003

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.

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.

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

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.

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

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.

Seagate Web Style Guide

Basic Page Specifications

Copyright Seagate Technology LLC 4/7/2003

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 Internet Explorer (IE) Netscape Navigator (NS) PC Supported: 4.X, 5.X Tested but not supported:
Platform
Internet Explorer (IE)
Netscape Navigator (NS)
PC
Supported: 4.X, 5.X
Tested but not supported: 6.0
Supported: 4.X, 6.2
Tested but not supported: 6.0
Mac
5.X
4.X
Unix
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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Web Style Guide Copyright Seagate Technology LLC 4/7/2003 Block name Required? Format Role Variations

Block name

Required?

Format

Role

Variations

Header (A)

Yes

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

 
 

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 site-

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Block name

Required?

Format

Role

Variations

 

and extra/intranet sites.

wide navigation. At minimum there should be a site home element.

Bread Crumb (C)

Yes

None

 

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.

Local Navigation (D)

No

None

 

Navigation

This presents 2 nd and 3 rd 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).

 

Information

The content block of the page presents information; the heart and purpose of the page.

Footer (F)

Yes

None

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.

Seagate Web Style Guide

Overview of standard web interface elements

Copyright Seagate Technology LLC 4/7/2003

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.

of the individual page types for more information. Header Block 1. The site name element is

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.”

2. 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.

3. 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.

4. 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 top- level 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.

5. 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.

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

8. 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.

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:

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

Intranet : my.seagate.com Extranet: reseller.seagate.com Other sites: No other site uses this color scheme. Other
Intranet : my.seagate.com Extranet: reseller.seagate.com Other sites: No other site uses this color scheme. Other
Intranet : my.seagate.com Extranet: reseller.seagate.com Other sites: No other site uses this color scheme. Other

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

#336666

#336666 #336699 #669966

#336699

#336666 #336699 #669966

#669966

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

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Internet: Teal-ish Green Example: www.seagate.com

4/7/2003 Internet: Teal-ish Green Example: ww w.seagate.com Extranet: Bright green Example: partner.seagate.com

Extranet: Bright green Example: partner.seagate.com

Extranet: Bright green Example: partner.seagate.com Intranet: Blue Example: standa rds.seagate.com The key

Intranet: Blue Example: standards.seagate.com

Intranet: Blue Example: standa rds.seagate.com The key differentiator in these schemes is the color-coding

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.

Seagate Web Style Guide

Header and primary navigation

Copyright Seagate Technology LLC 4/7/2003

Required

Purpose

Copyright Seagate Technology LLC 4/7/2003 Required Purpose The header and primary navigation provide the user with

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.

by the following table. Detailed description follows. ID Name Required Format varies Text/Graphic

ID

Name

Required

Format varies

Text/Graphic

for

intra/inter/extr

a

A

Site name and/or country identifier

Required

No

Graphic

B

Section identifier

Required on content pages

Yes

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

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

ID

Name

Required

Format varies

Text/Graphic

for

intra/inter/extr

a

C

Site tools

Recommended

No

Text

navigation

D

Seagate

Required

No

Graphic

logo/corporate

signature

E

Quick search

Required

No

Text with button image

F

Primary navigation

Required

No

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

G

Secondary

Recommended as

No

Text/DHTML/

navigation

appropriate

JavaScript

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

Do not

Use the Seagate logo graphic at the upper left

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.

Make the logo graphic a link to anywhere else, including the home page for your site or application.

Use the header throughout your site.

Selectively use the header on content pages on your site.

Use the correct colors for your audience/type of 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

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

guidelines.

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

pages. Elemental specifications Site name/country Required The site name and/or country identifies the site to the

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:

seagate.com : ASEAN Here are two sample site name images: Use proper names for site names:
seagate.com : ASEAN Here are two sample site name images: Use proper names for site names:

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

Specification

Text/graphic

Graphic always for Internet and extranet; graphic preferred for intranet but text may be used. See below under Section identifier. Lower case

Variations

Graphic specifications do not vary.

Internet: graphic

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Extranet: graphic Intranet: graphic preferred, but text may be substituted.

Dimensions

Height: 20 pixels Width: to content

PhotoShop file

site.psd

Font face:

Helvetica Neue Bold

Download purchase site

http://www.adobe.com/type/browser/P/P_1198.jhtml

Font size:

11 pt.

Tracking (letterspacing)

15

Antialiasing

Crisp

Color

#666666

Background color

#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.

area. Here is an example, from the top w ww.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

Specification

Text/graphic

Graphic, transparent GIF for Internet and extranet, mixed case.

Variations

Internet and extranet must use graphic

Intranet may use text instead; see “Read Me” file in intranet toolkit for more details.

Dimensions

Width: cut to fit text, but less than 181 pixels Height: 68 pixels

Font Face:

Helvetica Neue Light, http://www.adobe.com/type/browser/P/P_1198.jhtml

Font Size:

28 points for single line of text 22 points for two lines of text (leading/line spacing at 24 pts).

Tracking (letter

0

spacing)

Color

#FFFFFF

Background color

Transparent

Typical values

‘Support’, ‘Products’

PhotoShop template

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

Specification

Required

Optional but recommended

Text/graphic

Text, lower case

Variations

Formatting: none

Content: varies according to site.

CSS class

toolLink

Alignment

Flush right

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description

Specification

Typical values

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.

white background and one with teal green, are shown below. When to use the white background

When to use the white background logo

are shown below. When to use the white background logo The white background logo should be

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:

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

www.seagate.com (Internet)

Seagate Technology LLC 4/7/2003 www.seagate.com (Internet) reseller.seagate.com (extranet) Where to use the reversed (w

reseller.seagate.com (extranet)

www.seagate.com (Internet) reseller.seagate.com (extranet) Where to use the reversed (w hite on transparent) logo The

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)

Here are some examples: www.seagate.com/news (Internet) http://reseller.seagate.com/benefits (extranet interior

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

(extranet interior page) Logo specifications Description Specification Height

Logo specifications

Description

Specification

Height

68 pixels

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Width

270 pixels

Background color

White or teal Do not change the background color behind the logo. See text above for usage instructions.

Variations None between intranet, Internet or extranet sites.
Variations
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

Specification

Required

Optional but recommended except for very small sites or applications.

Text/graphic

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.

the background color the button was created on, not the button color its self. All sites

Variations

Formatting: none

Content: varies according to site.

CSS classes

Form field: formSmlFieldInput Text: header Link: headerLink

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description

Specification

Alignment

Flush right, except on home pages

Here are examples of a couple of quick searches.

Example from www.seagate.com/newsinfo section door

searches. Example from www.seagate.com/newsinfo section door Example from www.seagate.com home page Note that the

Example from www.seagate.com home page

section door Example from www.seagate.com home page Note that the www.seagate.com home page search above offers

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

www.se agate.com, or the Internet. Primary navigation bar Primary navigation to your site is provided by

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.

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

Specification

Required

At minimum must include a site home link.

 

Text/graphic

Graphic, lower case

PhotoShop reference file

gnav_prt.psd, gnav_emp.psd, etc. according to toolkit

Variations

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

Height: 20 Width: as needed according to margin specifications

Margins (per button)

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

Button colors

State

Default

Selected

Mouse over

(unselected)

(current location)

Text

#FFFFFF

#333333

#CCFFFF

Background

#003366

#CCFFFF

#003366

Flag

Not applicable

#99CCFF

Not applicable

Vertical divider rule on button

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

 

Font face

Helvetica Neue

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description

Specification

Font size

12

Font style

Bold

Tracking/letter spacing

12

Anti-aliasing

Crisp

Alignment

Buttons flush left on bar; text flush left on button

Typical values

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

Application

gnav_www.psd

www

gnav_sup.psd

Supplier

gnav_res.psd

Reseller

gnav_cust.psd

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)

can be re-used between sites as needed. Default (unselected) Filename: gn_www_products_off.gif DHTML & JavaScript

Filename:

gn_www_products_off.gif

DHTML & JavaScript

Selected (current location as www.seagate.com/products)

Select ed (current location as www.seagate.com/products) Filename: gn_www_products_down.gif Mouse over Filename:

Filename:

gn_www_products_down.gif

Mouse over

Filename: gn_www_products_down.gif Mouse over Filename: gn_www_products.gif DHTML drop down menus are

Filename:

gn_www_products.gif

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.

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

text only versions of the navigation bar. Default display DHTML menu specifications Mouse-over state Description

DHTML menu specifications

Mouse-over state

Default display DHTML menu specifications Mouse-over state Description Specification Required Recommended

Description

Specification

Required

Recommended

Text/graphic

Graphic primary navigation with text JavaScript

Variations

Formatting: The same for intranet, Internet and extranet.

Content: varies according to

JavaScript file must be customized for each site, for both links and geometry. Be sure to adjust layer positioning.

Dimensions

Not applicable; set by script

JavaScript/DHTML

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.

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] = new gMenuItem(4,"2nd&nbsp;level&nbsp;nav", "link"); menuElements[4][1] = new gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link"); menuElements[4][2] = new gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link"); menuElements[4][3] = new gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link"); menuElements[4][4] = new gMenuItem(4, "2nd&nbsp;level&nbsp;nav", "link");

= new gMenu("gn_www_newsinfo",83, 120 ,0);

Breadcrumb

Required

120 ,0); Breadcrumb Required The breadcrumb block is situated immediately below the

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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

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

from http://www.s eagate.com/newsinfo/newsroom/awards/ In this case, Awards is the current location. It is the

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

Specification

Required

Home pages: not required nor recommended. Do not use. Other pages: required. Use on every page.

Text/graphic

Text always, mixed case.

Variations

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

Alignment

Left, with 15 pixel margin Vertically centered in 30 pixel height

Constituent elements

Caret: ‘>’ Text for levels above and current location

Technology

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

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

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

preferable to static/hard-coded breadcrumbs. Footer Required The footer consists of a row of text links to

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

Specification

Required

Required on all pages. Recommended on all pop up windows.

Text/graphic

Text always.

Footer bar is lower case.

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

Alignment

Links: left, with 15 pixel margin Copyright & Legal: right, with 15 pixel margin Vertically centered on 18 pixel height

Constituent elements

Pipe symbol: ‘|’ Text links

Technology

HTML with CSS class attributes JavaScript recommended for privacy and legal notices.

CSS class

Links:

<td>: footer <HREF>: footerLink

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

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

across the entire bottom of the page. Content block Required The content block is the heart

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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Central content element specifications

Description

Specification

Required

Required on all pages.

Text/graphic

One or both

Variations

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

Alignment

Links: left except as noted

Constituent elements

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

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

page types section which follows. Local navigation element The left navigation element presents second and, depending

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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

www.seagate.com/products/disc

Disc and Tape are second level links;

the links listed below the “Disc” heading are third level links.

listed below the “Disc” heading are third level links. When to show third level links Show

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

Specification

Required

Required on all pages except for home pages and certain applications requiring full page width for proper display.

Text/graphic

Text

Variations

Formatting: none. The same for intranet, Internet and extranet.

Content: varies.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description

Specification

Dimensions

Height: varies Width: 200 Margins left and right: 15 pixels Gutters: 15 pixels

Alignment

Links: left

Constituent elements

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)

CSS classES

<td>

lnav

2 nd level link

lnavLink

3 rd level link

lnavSmlLink

Related Links

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:

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Web Style Guide Copyright Seagate Technology LLC 4/7/2003 Related Links note: A different caret is used

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>

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Fourth level link specifications

Description

Specification

Required

Optional

Text/graphic

Text

Variations

Formatting: none. The same for intranet, Internet and extranet.

Content: does not change between pages of same 4the level

Alignment

Links: left

Margins

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

CSS classES

<P>

cnav

Link

cnavLink

Pipe (‘|’)

cnavPipe

Central content area

cnavLink Pipe (‘|’) cnavPipe Central content area This element can contain text, graphics , forms—anything

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

but the class name will remain the same across all sites. Page Title element-required on content

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 Specification Required Required on all content pages Text/graphic Text Variations Formatting: none. The
Description
Specification
Required
Required on all content pages
Text/graphic
Text
Variations
Formatting: none. The same for intranet, Internet and extranet.
Content: varies per page
Alignment
Left
Formatting
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 sh ou l d 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.

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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Web Style Guide Copyright Seagate Technology LLC 4/7/2003 Key home page characteristics The red numbers on

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

Specification

Page minimum width

760 pixels

Page margins

Left, right, top, bottom 15 pixels

Logo/corporate signature used

White, placed above the banner. See heading section for more details.

Number of content columns

2 plus banner to right

Interior gutter between content columns

20

pixels

Interior gutter between right column and banner

20

pixels

Column widths

Left: 300 pixels Right: 270 Banner at right: 120

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Characteristic

Specification

Banner dimensions

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…”

story on <td>

For table cells containing the stories

storyMore on more> links

Links to continuations of stories on other pages.

Grey rules

Color #CCCCCC Width: column Height: 1 pixel

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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Web Style Guide Copyright Seagate Technology LLC 4/7/2003 Section door Drilling down from the home page,

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.

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Web Style Guide Copyright Seagate Technology LLC 4/7/2003 Key section door content element specifications Description

Key section door content element specifications

Description

Internet

Extranet

Intranet

Text graphics within content area to

Omitted

Omitted

Omitted

Section name corresponds to page title used

Required

Required

Required

Features area

Required

Optional

Optional

Features area horizontal graphic

Required

Optional

Optional

Second level links in content area

Required

Recommended

Recommended; content dependent

Third level links in content area

Recommended

Recommended

Optional; content dependent

Shortcut pull down in content area

Recommended

Recommended

Optional; content dependent

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Left navigation bar Required Second level links Required Third level links Not required nor allowed
Left navigation bar
Required
Second level links
Required
Third level links
Not required nor allowed
Breadcrumb
Required
Page title
Required
Columns
Two
Features graphic
250 pixels wide x 110 pixels high
dimensions
Formatting
secTtl
Required for section titles, ‘Presales support’ above
storyHeadline
Required for title links, ‘New versions of…’ above
storyMore
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

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Web Style Guide Copyright Seagate Technology LLC 4/7/2003 Text page specifications Description Specification

Text page specifications

Description

Specification

Notes

Left navigation bar

Required

 

Second level links

Required

 

Third level links

Optional but probably appropriate

 

Breadcrumb

Required

 

Page title

Required

pageTtl class in the <td>

Class for text

None

 

Class for title links

None

 

Columns

One

 

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.)

Seagate Web Style Guide

Data table page

Copyright Seagate Technology LLC 4/7/2003

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 Specifications

Table page specifications

Description

Specifications

Notes

Left navigation bar

Required

 

Second level links

Required

 

Third level links

Optional as appropriate

 

Breadcrumb

Required

 

Page title

Required

pageTtl class <td>

Number of columns

As appropriate

 

Formatting for text

Seagate Web Style Guide

Copyright Seagate Technology LLC 4/7/2003

Description Specifications Notes dataTblHdr For Column/row Headers “Model Number” above dataTblVal For data
Description
Specifications
Notes
dataTblHdr
For Column/row Headers
“Model Number” above
dataTblVal
For data values
"ST1181677CV” above
dataBoldTblVal
Applies to <td>
“DataBoldTableValue” above the left upper
column
dataTblHR
Applies to <td>
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

the page http://search.seagate.com/search/www/advsearch.html Note that the colors of the horizont al bands containing

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.

Seagate Web Style Guide

Form page specifications

Copyright Seagate Technology LLC 4/7/2003

Description

Specification

Notes

Left navigation bar

Required

 

Second level links

Content specific

 

Third level links

Content specific

 

Breadcrumb

Required

 

Page title

Required

pageTtl class <td>

Columns

1 or 2

 

Formatting

formTblHdr for table header

Creates color band with reversed out text to divide the form into sections

“Step 1” etc. above.

<td>