Web Site Style Guide

Revised 11-10-2006
 Table of Contents
Table of Contents..................................................................................................1
Introduction to the PPG Web Site Style Guide ......................................................2
General Web Site Requirements...........................................................................3
Screen Resolution ..................................................................................3
Browser Requirements ...........................................................................3
Designing for Connection Speed ............................................................3
Frames....................................................................................................3
Flash .......................................................................................................3
Typography and Style .............................................................................4
Links .......................................................................................................4
Content and Editorial Guidelines ............................................................4
PPG Logo Usage and Corporate Identity for Web Use...........................5
The PPG Supergraphic...........................................................................6
Overview of PPG Web Sites .................................................................................7
Corporate/Regional/SBU Web Site Design Guide...............................................10
Marketing Initiative/Product Web Site Design Guide...........................................14
E-Commerce (Consumer) Web Site Design Guide .............................................15
Intranet Site Design Guide ..................................................................................16
URL Strategy.......................................................................................................17

Web Style Guidelines 1

 Introduction to the PPG Web Site Style
Guide
The goal of this style guide is to provide general rules for the design of PPGs corporate,
strategic business unit (SBU), product and marketing initiative web sites both externally
and internally utilizing CMS2002 Universal Templates. The standards outlined in this
guide have been developed in accordance with PPGs Internet Website Policy.
Please review this policy online at:
http://insideppg.web.ppg.com/ITcommunity/standards/PPG_Internet_Website_Policy.htm

Most items such as fonts, colors and link properties are governed by use of Cascading
Style Sheets (CSS) and these guidelines will define those specifications based on
approved corporate guidelines. All pages within a Content Management System (CMS)
channel use the same CSS.

Who should read this document?

Anyone developing, creating and/or designing a PPG web site should review this
document. Creating your site in concert with this guide will benefit your site by ensuring a
consistent visual and behavioral user experience.

Why should you read this document?

Whether youre designing a web site for an SBU, a new product or developing a web-
based marketing initiative, the specifications outlined in this document are required.
Following these rules is to your businesss advantage because:

These guidelines create consistent and cohesive online branding across all PPG
web sites.
You can build your website and update it quickly since the hardest questions
have been answered for you.
Consistency across web sites will enable your web visitors to find the information
they need quickly and easily.
Your web site will have a professional appearance and intuitive navigation to
position your business unit as an industry leader.
Youll have the references you need in one place.

For More Information, contact:

Seana Miller
Manager, Web Communications
Corporate Communications
PPG Industries, Inc.
One PPG Place
412-434-2221
SeanaMiller@ppg.com

Web Style Guidelines 2

 General Web Site Requirements
Screen Resolution
PPG web sites are targeted at an 800x600 screen resolution. This translates into a
usable window size that is 770 pixels wide and 470 pixels high, although browsers
and versions vary in the amount of screen real estate they occupy.

Browser Requirements
All site designs must be compatible with Internet Explorer 5.5 and above, Netscape
Navigator 7.2 and above, and Firefox 1.5 and above. Special browser features
(Internet Explorer transitions, 8-bit PNG transparency, etc.) should not be relied upon
unless all browsers and versions in this list share those features.

Designing for Connection Speed

PPGs web sites must be designed to be accessible through a 56k modem dialup
connection on a relatively modern computer (800 MHz PIII or better). While most
browsers can support the use of high end web technologies, keep in mind that your
customer may NOT have a high-speed connection to the Internet.

Frames
Do not use frames. While frames are used to separate navigation windows from the
content of a Web page, they can cause difficulties in:

Bookmarking - only the parent frameset can be selected;

Printing - framed pages require horizontal scrolling that make printing (and
using the page) more difficult.
Indexing - some search engines have a hard time indexing framed pages
because they can't properly identify what pages to include within the
frameset.
Browser navigation - users lose the expected functionality of the back
button, because they will return the previous page within the frame instead
of the previous page from the frameset.

Images
Please upload appropriately sized graphics to the CMS resource gallery. Large
images that have not been optimized for the web use will significantly impact the
performance of your site.

Flash
Sites designed entirely in Flash are not permitted because of the inherent problems
they have with search engines. While you can create visual effects with Flash, search
engine spiders only look at the underlying code of a Web page the HTML code.
Important content may be hidden from search engines because it is embedded in
Flash files.

You may develop certain components, such as demos or interactive tools in Flash
and include them on your landing page.

Web Style Guidelines 3

 Typography and Style
These standards are included as part of the universal Cascading Style Sheet and
should not be altered.
Body Copy
Font Size = 10 point
Font Family = Arial
Font Color = Black
Headline style:
Capitalize initial letters of words, only!
Font Size = 14 point, Boldface
Font Family = Arial
Font Color = Black
Subhead style
Capitalize initial letters of words, only!
Font Size = 12 point
Font Family = Arial
Font Color = Black
List Styles
Use Body Copy text specs
List styles should be consistent throughout the site, with ordered (i.e.,
numbered) lists only being used when an ordinal hierarchy is to be
conveyed.
Non-ordinal lists should use solid-color bullets rather than numbers or
letters.
Capitalize the first word only!

Links
All links (hyperlinks and hyperlinked images) should employ the standard
browser pointer (pointing finger.) This is the default behavior of most browsers
and only becomes an issue with JavaScript hyperlinks. JavaScript hyperlinks
refer to link behaviors executed through JavaScript instead of the traditional <a
href=></a> tag.
Standard hypertext links are underlined and use the same color as primary
navigation scheme.
Image links do not have borders.

Content and Editorial Guidelines

General guidelines for content authors to consider when creating content.
Avoid using the first paragraph of each page to tell users what information
they'll find there, or providing instructions on how to use the site This
interface should be clear enough that it doesn't require instructions. Instead,
start with the information, written in the concise and factual prose style.

Write in easily understood sentences. Steer clear of clever headings and

catchy phrases.

Web Style Guidelines 4

 PPG Logo Usage and Corporate Identity for Web Use

The PPG corporate logo is a registered trademark. To protect the corporations

proprietary rights, the logo may appear only in its approved form, as described
in section Basic Identity Structure of the Global Identity Standards found in the
About Us section of ppg.com.

The space between the corporate logo and any other graphic element must
equal or exceed one-half the height of the logo (see example below.) These
graphic elements include typography, photos, graphics or other illustrative
material, other logos or the edge of a working area (such as the edge of the
screen or table.)

The PPG logo should be used

consistently across every web
site.

For example, if the height of

the logo is x-space (a
measurement in inches or
millimeters), then the empty
area surrounding the logo
(called the area of non-
encroachment) must be at least
half that measurement.

The logo should accompany

the corporate or SBU name.
Images can be supplied by
Corporate Communications.

Web Style Guidelines 5

 The PPG Supergraphic
The PPG Supergraphic is an oversized
portion of the PPG logo, angled, and in
larger size. The Supergraphic is a
supporting graphic element on print
material.
Do not use the Supergraphic as a
substitute for the PPG logo.
However, the Supergraphic may
be used within the header as an
image, or placed elsewhere on the
page.
Do not use the Supergraphic as a
background image.

Web Style Guidelines 6

 Overview of PPG Web Sites
PPG hosts many web sites, or web properties. They include:
Corporate and Regional web sites
Strategic Business Unit (SBU) web sites
Marketing Initiative/Product web sites
E-commerce web sites
Intranet sites

Corporate and Regional web sites

The Corporate and Regional Web sites, are the main landing pages for PPG
Industries, Inc., globally and at its worldwide locations. These sites provide an online
channel for PPG to communicate corporate initiatives and company details to:
Customers and potential customers
Media and investors
Employees and jobseekers
Suppliers and distributors
General public

Site Design
Corporate Web site PPG.com
PPG.com is the online point of entry for PPGs web presence. Its purpose is to
educate site visitors about who PPG is, what we make, facts about the company,
and what we stand for. Site content features:
Major corporate initiatives;
Links to the Strategic Business Unit (SBU) web sites;
Access to secure employee extranets.
The site is owned and maintained by Corporate Communications.

Since Regional Web sites provide access for a geographic region, the web site
interface must be aligned with the template used for PPG.com.
Site content:
Highlights major corporate initiatives;
Promote products and services from the business units they offer;
Provides links to the Strategic Business Unit (SBU) web sites;
Enables access to secure employee extranets.
Additionally, regional sites should be written in English AND the language(s)
indigenous to that region. Site design must be approved by Corporate
Communications.

Strategic Business Units (SBU) Web sites

SBU Web sites provide content that is strategically aligned with that particular line of
business. Similar to the corporate pages, the purpose of these sites is to educate
visitors about the businesses. Links to SBU web sites will be included from the
PPG.com home page, but may also be marketed with a unique URL (i.e.
www.ppgglass.com) for details about URLs, see the URL Strategy on page 17.

Web Style Guidelines 7

 Site Design
The design of an SBU web site must follow the general style guidelines outlined
within the SBU Web site Requirements section. Site design must be approved
by Corporate Communications.

The following businesses are considered to be SBU web sites:

Aerospace Architectural Finishes Automotive OEM Coatings

Automotive OEM Glass
Chlor-Alkali and Derivatives
Flat Glass
Optical Products
Automotive Refinish Automotive Replacement
Glass
Fiber Glass Fine Chemicals
Industrial Coatings Insurance and Services
Packaging Coatings Silica

Marketing Initiative/Product Web sites

Marketing Initiative/Product Web sites serve the promotional needs of an
organization as they provide an online presence for SBUs to launch and market their
products and services to customer segments. Marketing Initiative/Product sites can
and should be creative. But more importantly, they should tie into an online strategy
as a part of an SBUs overall marketing communications plan.
Site Design
Be creative when designing a marketing initiative/product web site, although,
remember that any deviation from the standard CMS template will add to your
overall implementation costs. Please work with Solution Services to determine
the best User Interface format and navigation structure. At a minimum, must
include the corporate identity elements outlined in detail within the Marketing
Initiative Web Site Requirements section. Site design must be approved by
Corporate Communications.

Examples of marketing sites include:

Ideascapes TrueFinish Voice of Color

Ask Joe Pool Cal-Hypo CertifiedFirst

E-Commerce Web sites (Consumer)

Much like Marketing Initiative/Product web sites, E-commerce web sites which are
customer-facing also market to a customer segment; however, they are considered
applications since they enable customers to initiate transactions in a secure
environment.
Site Design
The most crucial design parameter affecting E-Commerce sites is designing
efficient navigation that gets customers to the final "place order" button. The most
successful sites keep things technically simple and basic and feature text- or tab-
based navigation along with efficient search engines.

While E-Commerce sites are unique in serving the particular needs of a

business, the user interface must include corporate identity elements (see E-
Commerce Web Site Requirements section). Design is subject to approval by
Corporate Communications.

Web Style Guidelines 8

 Intranet sites
PPGs Intranet sites exist to provide important information to employees. Some
sites serve as a repository of helpful resources with links to company events (i.e.
Womens Leadership Council web) while others offer entry into secure applications
(The Wellness Center).

Regardless of site, Intranet site owners and designers should follow basic design
principals as provided by the CMS templates. For more information, review the
Intranet Site Requirements section of this document.
Site Design
When designing your Intranet site, remember to keep it simple. Intranet sites
should:
Utilize simple and intuitive navigation;
Provide up-to-date and relevant content;
Employ a site search tool so that users can find the information quickly;
Feature text- or tab-based navigation;
Employ a clean, uncluttered layout.

Web Style Guidelines 9

Corporate/Regional/SBU Web Site Design
Guide
PPG corporate/regional/SBU web sites utilize an inverted-L metaphor, with a full page-width
header at the top and navigation running along the left side of the screen. Sites are targeted at an
800x600 screen resolution.

Header

Primary Site
Navigation

Main
Content
Area

Footer

Main elements of the template include:

A full-width Header that spans the entire width of the page (100%).
Top Bar located beneath the header. This bar should be a solid color line
measuring 23 pixels high and running 100% width of the screen. Use of this
bar for additional navigation is optional.
Primary Site Navigation positioned down the left side of the page.
The formatting options in Main Content Area in the center panel are dictated
by the CMS content template you choose you can find these options
presented in the CMS guide supplied by PPGs IT Solution Services
department. Please note:
A Text Header will be dynamically generated from the Display Name of
the CMS Page. While this header may be technically hidden on a page-
by-page basis; the accepted standard is to keep them visible.
Breadcrumb Navigation: In the main content area of most page
templates is a breadcrumb trail indicating the pages position in the site
hierarchy.
Footer - use the universal footer detail provided in CMS

Web Style Guidelines 10

 Header
PPG Logo Site ID Search

Height: 90 pixels
Width: 100%
Must include a PPG logo (60x80), Site ID (SBU logo) and the search
input field.
The PPG logo must comply with PPGs Global ID standards. Use of
any other logo within this space is prohibited.
Language Selector: certain sites may require a language selector.
This tool will be placed above the search field.
Other: Background color is WHITE. The use of images is permitted
within the spacer areas (as shown above); however, do not place
images behind text.

Top Bar

Top Bar

The top bar is used as a visual divider between the header and the page
content.
Height: 23 pixels
Width: 100%
Type specs (if being used for navigation): Arial, Bold; vertical lines
are used to separate items. This is included in the CSS.
Color: Choose background button colors consistent with the overall
design of the site. The top navigation bar uses the same color as
the primary navigation buttons.
The bar must always be present, whether used for navigation or
left empty.

Web Style Guidelines 11

 Primary Site Navigation

Left Navigation Menu

Sub Navigation Links

Placeholder Links

Left Navigation Menu

Height of individual buttons (double height for wrapped text.): 30 pixels
Width of column: 190 pixels
Text colors: Choose background button colors consistent with the overall
design of the site. Your choices will become part of the CSS.
If solid color bars are not used, divider lines in the same color will be
used; text will appear in primary navigation color.
Text in the navigation bar will be bold reverse
Text in the sub-items under a menu will be primary navigation color.
The active state on the root channel is highlighted whenever it is open.
Arrows rotate when a channel is open () and are only to be
used in the left navigation.
Arrows are displayed only on the top-level channels in the left
navigation; sub-channels and postings should not employ the
arrow device. Arrows should appear on channels that contain
subsequent items in the navigation.
Sub-channels and postings use a background that is lighter in color than the
top-level navigation items.
Sub-Navigation Links
These links are required below the left navigation menu and are a part of the
CSS:
Print-Friendly Version (links to printer-version)
Contact Us (link to wither a contact us page OR mailto: address)
Site Map (link to site map)
Home (link to homepage)

Left-Navigation Placeholder
Present on all pages and your choice of content will be programmed into the
template.
Used for company/SBU address information and other details, if needed.
Web Style Guidelines 12
 Main Content Area

Text Header

Main Content
Area

Text Headers are the same color as your primary navigation.

Background color is WHITE. Do not use images behind text.
Utilize breadcrumb navigation (except landing page.)

Footer

The footer is a required universal item;

100% of the page width; 22 pixels high;
White background;
7.5 pt Arial; Color: #999999 Medium Gray
The footer has a 2-pixel solid line; #CCCCCC Light Gray
Must include the following separated by a vertical slash |:
PPG Industries (link to PPG.com)
Headquarters One PPG Place Pittsburgh, PA 15272 USA
2001-2006 PPG Industries All Rights Reserved
Legal Notices & Privacy Policies (link to policies page on ppg.com)

Web Style Guidelines 13

 Marketing Initiative/Product Web Site
Design Guide
Marketing initiative/Product
Web sites enable SBUs to
market products and services
to specific customer segments.
As such, these sites fall
outside the boundaries of
Corporate, Regional and SBU
web site requirements
(although please design your
site to fit the standard 800x600
screen resolution); however, there are corporate web identity components you must
incorporate within your design:

PPG logo The logo should be positioned prominently within the header to
clearly identify the site as a PPG web site. In certain situations, the logo
may not fit within the design. An acceptable solution is to position the
smaller PPG logo in the upper right-hand corner of the screen (above the
search field). Standard-sized logos will be supplied to you.

Search Field Site search is an important tool for users. The CMS
template positions the search field in
the upper left-hand corner of the
header. When used with the logo,
place the search utility below the PPG
logo.

Footer The PPG universal footer (with enabled links) must run along the
bottom of every page.

100% of the page width; 22 pixels high; white background;

7.5 pt Arial; Color: #999999 Medium Gray
The footer has a 2-pixel solid line; #CCCCCC Light Gray
Must include the following separated by a vertical slash |:
o PPG Industries (link to PPG.com)
o Headquarters One PPG Place Pittsburgh, PA 15272 USA
o 2001-2006 PPG Industries All Rights Reserved
o Legal Notices & Privacy Policies (link to Policies on ppg.com)

Web Style Guidelines 14

 E-Commerce (Consumer) Web Site
Design Guide
E-Commerce (Consumer) Web sites enable business units to sell products and
services online. These sites are designed to reach a specific customer segment (B-2-B
or B-2-C) and are hosted as application within a secure we session.

To maintain consistency and leverage the PPG brand, the design of the application
should include the following corporate identity components:

PPG logo - The logo should be positioned on every page to identify it as a

PPG web property. Standard-sized logos will be supplied to you for
use in your design.
Copyright references and links to corporate information, such as:
o PPG Industries (link to PPG.com)
o HQ Address: One PPG Place Pittsburgh, PA 15272 USA
o Legal Notices (link to standard policies language)
o Privacy Policies (link to standard policies language)

PPG Logo &

Footer

Please Note: This does not apply to current E-Commerce sites only for future development.

Web Style Guidelines 15

 Intranet Site Design Guide
Intranet sites are employee facing webs designed for the purpose of providing
information and usable content. When designing your Intranet site, consider the
following components within your design:

Header

Top Bar
Intranet
Intranet
Utilities
Utilities

Placeholder

Header Use the chromatic PPG logo (angled) with PPG Industries site
ID and the Intranet section title within your header.

Top Bar must include these standard drop-down navigation elements

(drop-down navigation details will be provided by Solution Services):

Intranet Utilities on the top left of the site navigation are required and will
be included in all intranet sites: Printer Friendly, Phone lookup and Search.

Placeholder (bold face/same color as primary navigation):

Contact Us/Feedback (link to email or feedback form)
Site Map (link to Site Map page)
Home (link to Intranet landing page)

Web Style Guidelines 16

 URL Strategy
Creating a new web site or redesigning an existing one doesnt ALWAYS require registering a
new domain name. PPG owns over 225 unique URLs and purchasing new domains requires
business justification and approval from PPG legal counsel and Corporate Communications.
Please review the PPG Internet Website Policy for information regarding the use of domain
names. You can find this policy online at:
http://insideppg.web.ppg.com/ITcommunity/standards/PPG_Internet_Website_Policy.htm.

The Corporate URL Strategy: PPG.com and the use of subfolders

Every PPG web venture must leverage the ppg.com URL whenever possible since
subfolder content will contribute directly to how search engines (and users for that matter)
view the domain as a whole. Links to subfolders are considered relevant to the domain,
and by promoting the ppg.com URL, we also ensure that our online strategy enriches
rather than dilutes the PPG brand.

Benefits of Using Subfolders

Leverage PPG.com brand;
Easily configurable names - with private domains you may have to slog through many
variations of a name to come up with a domain that is available;
No external costs required to set-up a subfolder domain name (this is only associated
with the domain itselfthere is a cost assessed to maintain the web site to which it
points.)

Choosing a URL
PPG.com and Subfolders: One of the major advantages to using the ppg.com root
domain is that you have flexibility in naming the subfolder so that it clearly identifies your
business. The following examples would be acceptable:

www.ppg.com/oemglass
www.ppg.com/industrialcoatings
www.ppg.com/aquapel

Private Domains: If your web venture requires a new URL, in addition to using the
convention described above, you may opt to requester for a new domain name
(additional charges will apply for domain search and registration.)
Document your justification to register a new URL;
When deciding on a name, keep the URL consistent with your web venture
(www.voiceofcolor.com).
To get started, submit your request to Seana Miller in Corporate
Communications (seanamiller@ppg.com). Legal approval will be required to
register the domain.

Web Style Guidelines 17