Seagate WebStyleGuide

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
1
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
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.
3
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
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
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 Internet Explorer (IE) Netscape Navigator (NS)
PC Supported: 4.X, 5.X Supported: 4.X, 6.2

Tested but not supported: 6.0 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.
6
Block name Required? Format Role

Variations
Header (A) Yes Versions for Internet,

intranet and extranet. Branding
The components in the
header block may also This block establishes
vary due to page type. 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 Navigation
between Internet sites
and extra/intranet sites. This provides primary site-
7
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 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 Information
variation for audience
(intranet, Internet, The content block of the page
extranet). 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.
8
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.”
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.
9
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:
10
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 Other sites: Seagate intranet sites Other sites: The my.seagate.com
color scheme. use this color scheme; i.e., Extranet portal for suppliers and
http://inside.seagate.com. 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
Internet: Teal-ish Green

Example: www.seagate.com
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
Header and primary navigation Required

Purpose
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 Text/Graphic

for
intra/inter/extr
a
A Site name and/or Required No Graphic

country identifier
B Section identifier Required on content Yes Graphic on all extranet and

pages Internet sites; text option for
intranet sites
13
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 Make the logo graphic a link to anywhere else, including
www.seagate.com home page. 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 Use the wrong color or a different color than the 3 audience
of site. 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
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 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
15
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.
16
Section name specifications

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

Required Optional but recommended
Text/graphic Text, lower case
Variations Formatting: none
Content: varies according to site.
CSS class toolLink
Alignment Flush right
17
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 ( ) 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
www.seagate.com (Internet)
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
Height 68 pixels
19
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.
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

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.
Variations Formatting: none
CSS classes Form field: formSmlFieldInput

Text: header
Link: headerLink
20
Alignment Flush right, except on home pages
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
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

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.
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 Color: #669933 on www/Internet

button Color: #6699CC on intranet & extranet
Width: 1 pixel
Height: height of graphic, 20 pixels
Font face Helvetica Neue
22
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) Selected (current location as Mouse over

www.seagate.com/products)
Filename: Filename: Filename:

gn_www_products_off.gif gn_www_products_down.gif 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
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

Required Recommended
Text/graphic Graphic primary navigation with text JavaScript
Variations 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 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.
24
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">

</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] = new gMenu("gn_www_newsinfo",83,120,0);
menuElements[4][0] = new gMenuItem(4,"2nd level nav", "link");
menuElements[4][1] = new gMenuItem(4, "2nd level 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
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
Required Home pages: not required nor recommended. Do not use.

Other pages: required. Use on every page.
Text/graphic Text always, mixed case.
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
26
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'>></span> <a href='/newsinfo'
class='breadcrumbLink'>News + Information</a> <span
class='breadcrumbCaret'>></span> <a href='/newsinfo/newsroom'
class='breadcrumbLink'>News Room</a> <span
class='breadcrumbCaret'>></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">
</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
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
Required Required on all pages.

Recommended on all pop up windows.
Text/graphic Text always.
Footer bar is lower case.
28
Copyright line is mixed case
Dimensions Height: 18 pixels, set by spacer image in formatting

Width: 760 pixels minimum
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
29
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.

<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>  |  <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 ©2003, Seagate Technology LLC&
nbsp; <span class="copyrightPipe">|</span>  <a
href="/newsinfo/about/index.html"
class="copyrightLink">About Seagate</a>  <span
class="copyrightPipe">|</span>  <a
href="javascript:openHelpWindow('/help/legal/privacy.html', 'help')"
class="copyrightLink">Privacy Policy</a>  <span
class="copyrightPipe">|</span>  <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
Central content element specifications

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
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
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
www.seagate.com/products/disc
Disc and Tape are second level

links;
the links listed below the “Disc”

heading are third level links.
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

Required Required on all pages except for home pages and certain applications requiring
full page width for proper display.
Text/graphic Text
Content: varies.
32
Dimensions Height: varies

Width: 200
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
2nd level link lnavLink
3rd 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:
33
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
Fourth level link specifications

Required Optional
Text/graphic Text
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
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
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.
Required Required on all content pages
Text/graphic Text
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 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
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
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 20 pixels

banner
Column widths Left: 300 pixels

Right: 270
Banner at right: 120
38
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.
39
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
Key section door content element specifications
Description Internet Extranet Intranet
Text graphics within Omitted Omitted Omitted

content area to
Section name Required Required Required

corresponds to page
title used
Features area Required Optional Optional
Features area horizontal Required Optional Optional

graphic
Second level links in Required Recommended Recommended; content dependent

content area
Third level links in Recommended Recommended Optional; content dependent

content area
Shortcut pull down in Recommended Recommended Optional; content dependent

content area
41
Description Internet Extranet Intranet
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
42
Text page specifications
Description Specification Notes
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.)
43
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 Specifications Notes
Third level links Optional as appropriate
Breadcrumb Required
Page title Required pageTtl class <td>
Number of columns As appropriate
Formatting for text
44
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
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
Form page specifications
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 “Step 1” etc. above.
<td> reversed out text to divide
the form into sections Tip: Don’t forget to use colspan so that
the rule extends the full form width.
formFieldLbl for label For field labels

<td>s
formFieldInput for Apply this class to all Sets the appropriate font, etc.
<input>s <input> elements.
formReq for asterix (‘*’) The asterix gets a <SPAN

class=”formReq”>
formOptn Use for <select>s
formHR Use to draw Hard Rules for Put such a rule between the Submit and
forms 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 Consult the toolkit for

cancel buttons 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
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 Note Notes
Third level links Optional as appropriate
Breadcrumb Required
Page title Required pageTtl class applied to <td>
Number of columns 2
Column widths Left: 315?? Standard??

Right:xxx?? Standard??
47
Particular Note Notes
Gutter between columns 15 pixels
Formatting
secTtl Applied to section/column secTtl

titles.
grey_ccc.gif Grey rule to delineate Set to height of 1 and desired

sections. 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 ( ) 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> </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
Login page particulars
Site name Required May include country/region
Left navigation bar Neither required nor

applicable.
Second level links Neither required nor

applicable.
Third level links Neither required nor

applicable.
Breadcrumb Neither required nor

applicable.
Page title Neither required nor

applicable.
Two columns Yes Layout modeled after home page template
Column dimensions Left: 256 pixels

Right: 300
Gutter & margin widths Left: 44 pixels to align with Right gutter/margin width: as needed to
signature (‘Seagate’) align right edge of right column with right
Central: 20 pixels edge of Go button above.
Right: 110 or as needed
Formatting
headerHome For <table> and <td>
49
formSmlFieldInput For <input>s.
story for <td> in lower content

area
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

Text/graphic Text graphic, mixed case
PhotoShop file loginSiteName.psd
Text graphic font Helvetica Neue Light
Text size 28 point
Text color #666666
Text spacing 0
Text baseline alignment Baseline of signature
Text antialiasing Crisp
Background 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

Text/graphic Text graphic, mixed case
PhotoShop file qsearch.psd
Text graphic font Helvetica Neue Roman
Text size 18 point
Text color #FFFFFF
50
Text spacing 0
Text baseline alignment Baseline of signature
Text antialiasing Crisp
Background #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
Left navigation bar Not allowed
Second level links Not applicable
Third level links Not applicable
Breadcrumb Yes
Page title Yes pageTtl class in <td>
Columns Yes as appropriate
Formatting
dataBoldTblVal Applies to <td> DataBoldTableValue above,

the left upper column
51
dataTblVal Applies to <td> dataTblVal above, the right

upper column and both
lower columns
dataTblHdrNoNav Applies to <td> The green dataHrd rule/row

above.
dataTblHdr Applies to <td> The blue total row above.
dataTblHR Applies to <td> Used above to create the

rules between table rows.
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
Description Required Notes
Overall dimensions Width: 400 pixels

Height: 400 pixels
Text content width: 370
pixels
Margins Left: 15 pixels

Right: 15 pixels
Left navigation bar Not allowed
Second level links Not applicable
Third level links Not applicable
Breadcrumb Yes
Page title Yes pageTtl class applied to <td>
Close button btn_close_window.gif Upper right corner close window button.
Columns One
Formatting
txtSubHrd <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
Error page specifications
Left navigation bar Required but empty No links go here, unless you
have sub error pages.
Second level links None
Third level links None
Breadcrumb Yes
Page title Yes pageTtl class applied to

<td>
Columns 1 upper level
Formats
txtHdr 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
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
Dimensions Height: 156 pixels

Width: varies
Icon area width: 15 pixels
Margins Left: 3 pixels

Right: 3 pixels
Top: 4 pixels
Bottom: 4 pixels
Border 1 pixel
55
Background Transparent
Colors Vary, see next table
Font Sevenet. Available for free download from Fountain:

http://www.fountain.nu/fonts/download/sevenet.html
Font size 7 pt
Anti aliasing None
Word spacing 3 pixels (Kern approximately 600)
Letter spacing 1 pixel (In order to create 1-pixel letter spacing in Sevenet, tracking must be
adjusted, typically around 120 to150.)
Style Text & Text Icon Border Overall Background

Icon Background Background
1 #336699 # EBF4FC* # B8D3EE #333333 Transparent
2 #FFFFFF #CC6600 #993300 #333333 Transparent
3 #666666 #F2F23F2 #CCCCCC #333333 Transparent
4 #FFFFFF #6699CC #333333 Transparent
5 #336699 #EBF4FC* #333333 Transparent
*Asterisk denotes color that is not web-safe.
56
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
58

Seagate WebStyleGuide

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Seagate WebStyleGuide

Загружено:

Авторское право:

Доступные форматы

Seagate Web Style Guide Copyright Seagate Technology LLC 4/7/2003

How to use this document ................................................................................................................................................ 4

Basic Page Specifications .................................................................................................................................... 6

Page display and download specifications ...................................................................................................................... 6

Anatomy of a page ............................................................................................................................................... 6

Web page block definitions .............................................................................................................................................. 6

Overview of standard web interface elements.................................................................................................................. 9

Page Components + Color Schemes ................................................................................................................. 10

Header and primary navigation Required ................................................................................................................. 13

Breadcrumb Required ............................................................................................................................................. 25

Content block Required ............................................................................................................................................. 30

Central content area ...................................................................................................................................................... 35

Section door ................................................................................................................................................................... 40

Data table page.............................................................................................................................................................. 44

Help popup window ....................................................................................................................................................... 52

Creating new styles ........................................................................................................................................................ 55

Buttons, Banners & Other Graphics................................................................................................................ 55

0.1 2 December, 2002 Kwai Lam First draft

0.2 3 December, 2002 Cindy Furry Second draft

Overall page structure

How to use this document

All Seagate Internet websites must be reviewed by eBusiness

Basic Page Specifications

Supported browser / platform specifications

Platform Internet Explorer (IE) Netscape Navigator (NS)

PC Supported: 4.X, 5.X Supported: 4.X, 6.2

Mac 5.X 4.X

Page display and download specifications

Web page block definitions

Block name Required? Format Role

Header (A) Yes Versions for Internet,

In the tool bar element (the top

In the tool bar element (the top

Primary Navigation (B) Yes Color scheme of

Block name Required? Format Role

and extra/intranet sites. wide navigation. At minimum

Bread Crumb (C) Yes None

The breadcrumb indicates the

The breadcrumb also provides

Local Navigation (D) No None

This presents 2nd and 3rd level

Content (E) Yes Several, according to

Footer (F) Yes None

As a visual cue, the footer cues

The footer also always

Overview of standard web interface elements

Primary Navigation Block

Local Navigation Block

Page Components + Color Schemes

Internet, or general public facing web sites such as www.seagate.com

Color Scheme: It is a simple fact that some applications serve multiple

Below are home pages from each of these variations.

Internet: www.seagate.com Intranet : my.seagate.com Extranet: reseller.seagate.com

#336666 #336699 #669966

Internet: Teal-ish Green

Extranet: Bright green

Header and primary navigation Required

A Seagate web page;

ID Name Required Format varies Text/Graphic

A Site name and/or Required No Graphic

B Section identifier Required on content Yes Graphic on all extranet and

ID Name Required Format varies Text/Graphic

C Site tools Recommended No Text

D Seagate Required No Graphic

Use non-breaking spaces: Use non-breaking spaces ( ) between