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 PPG’s 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 PPG’s 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 you’re designing a web site for an SBU, a new product or developing a webbased marketing initiative, the specifications outlined in this document are required. Following these rules is to your business’s 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. You’ll 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
PPG’s 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 corporation’s 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 nonencroachment) 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 PPG’s 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 Automotive OEM Glass Chlor-Alkali and Derivatives Flat Glass Optical Products Architectural Finishes Automotive Refinish Fiber Glass Industrial Coatings Packaging Coatings Automotive OEM Coatings Automotive Replacement Glass Fine Chemicals Insurance and Services 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 SBU’s 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 Ask Joe Pool TrueFinish Cal-Hypo Voice of Color 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 tabbased 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 ECommerce Web Site Requirements section). Design is subject to approval by Corporate Communications.

Web Style Guidelines

8

Intranet sites
PPG’s 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. Women’s 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 PPG’s 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 pageby-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 page’s 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 PPG’s 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. •
Web Style Guidelines

Used for company/SBU address information and other details, if needed.
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 o o o 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 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 o o HQ Address: One PPG Place Pittsburgh, PA 15272 USA Legal Notices (link to standard policies language) 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 Utilities Intranet 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 doesn’t 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 itself—there 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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.