web site style guidelines

8/9/2019 Web Site Style Guidelines

http://slidepdf.com/reader/full/web-site-style-guidelines 1/18

Web Site Style GuideRevised 11-10-2006



Web Style Guidelines 1

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




Introduction to the PPG Web Site StyleGuide

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 externallyand internally – utilizing CMS2002 Universal Templates. The standards outlined in thisguide 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 CascadingStyle Sheets (CSS) and these guidelines will define those specifications based onapproved 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 thisdocument. Creating your site in concert with this guide will benefit your site by ensuring aconsistent 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 web-based 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 PPGweb sites.

• You can build your website and update it quickly since the hardest questionshave been answered for you.

• Consistency across web sites will enable your web visitors to find the informationthey need quickly and easily.

• Your web site will have a professional appearance and intuitive navigation toposition 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 CommunicationsCorporate CommunicationsPPG Industries, Inc.One PPG [email protected]




General Web Site RequirementsScreen 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 browsersand versions vary in the amount of screen real estate they occupy.

Browser RequirementsAll site designs must be compatible with Internet Explorer 5.5 and above, NetscapeNavigator 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 uponunless 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 dialupconnection on a relatively modern computer (800 MHz PIII or better). While mostbrowsers 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.

FramesDo not use frames. While frames are used to separate navigation windows from thecontent 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 theframeset.

• Browser navigation - users lose the expected functionality of the backbutton, because they will return the previous page within the frame insteadof the previous page from the frameset.

ImagesPlease upload appropriately sized graphics to the CMS resource gallery. Largeimages that have not been optimized for the web use will significantly impact theperformance of your site.

FlashSites designed entirely in Flash are not permitted because of the inherent problemsthey have with search engines. While you can create visual effects with Flash, searchengine 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 inFlash files.

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




Typography and StyleThese standards are included as part of the universal Cascading Style Sheet andshould 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 styleCapitalize 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 beconveyed.

• Non-ordinal lists should use solid-color bullets rather than numbers or letters.

• Capitalize the first word only!

LinksAll links (hyperlinks and hyperlinked images) should employ the standardbrowser pointer (pointing finger.) This is the default behavior of most browsersand only becomes an issue with JavaScript hyperlinks. JavaScript hyperlinksrefer to link behaviors executed through JavaScript instead of the traditional <ahref=””></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 GuidelinesGeneral guidelines for content authors to consider when creating content.

• Avoid using the first paragraph of each page to tell users what informationthey'll find there, or providing instructions on how to use the site Thisinterface 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 andcatchy phrases.




PPG Logo Usage and Corporate Identity for Web Use

The PPG corporate logo is a registered trademark. To protect the corporation’sproprietary rights, the logo may appear only in its approved form, as described

in section Basic Identity Structure of the Global Identity Standards found in theAbout Us section of ppg.com.

The space between the corporate logo and any other graphic element mustequal or exceed one-half the height of the logo (see example below.) Thesegraphic elements include typography, photos, graphics or other illustrativematerial, other logos or the edge of a working area (such as the edge of thescreen or table.)

The PPG logo should be usedconsistently across every website.

For example, if the height of the logo is “x-space” (ameasurement in inches or millimeters), then the emptyarea surrounding the logo(called the area of non-encroachment) must be at leasthalf that measurement.

The logo should accompany

the corporate or SBU name.Images can be supplied byCorporate Communications.




The PPG SupergraphicThe PPG Supergraphic is an oversizedportion of the PPG logo, angled, and inlarger size. The Supergraphic is asupporting graphic element on printmaterial.

• Do not use the Supergraphic as asubstitute for the PPG logo.However, the Supergraphic maybe used within the header as animage, or placed elsewhere on thepage.

• Do not use the Supergraphic as abackground image.




Overview of PPG Web SitesPPG 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 sitesThe Corporate and Regional Web sites, are the main landing pages for PPGIndustries, Inc., globally and at its worldwide locations. These sites provide an onlinechannel 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 DesignCorporate Web site – PPG.comPPG.com is the online point of entry for PPG’s web presence. Its purpose is toeducate 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 siteinterface 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 sitesSBU 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 educatevisitors about the businesses. Links to SBU web sites will be included from thePPG.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.




Site Design The design of an SBU web site must follow the general style guidelines outlinedwithin 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 CoatingsAutomotive OEM Glass Automotive Refinish Automotive Replacement

GlassChlor-Alkali and Derivatives Fiber Glass Fine ChemicalsFlat Glass Industrial Coatings Insurance and ServicesOptical Products Packaging Coatings Silica

Marketing Initiative/Product Web sites Marketing Initiative/Product Web sites serve the promotional needs of anorganization as they provide an online presence for SBUs to launch and market their products and services to customer segments. Marketing Initiative/Product sites canand 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 determinethe best User Interface format and navigation structure. At a minimum, mustinclude the corporate identity elements outlined in detail within the MarketingInitiative 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 arecustomer-facing also market to a customer segment; however, they are considered”applications” since they enable customers to initiate transactions in a secureenvironment.

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 mostsuccessful 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 abusiness, the user interface must include corporate identity elements (see E-Commerce Web Site Requirements section). Design is subject to approval by Corporate Communications.




Corporate/Regional/SBU Web Site DesignGuide

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 an800x600 screen resolution.

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 thisbar 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 optionspresented in the CMS guide supplied by PPG’s IT Solution Servicesdepartment. 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 pagetemplates is a breadcrumb trail indicating the page’s position in the sitehierarchy.

• Footer - use the universal footer detail provided in CMS

Header

Primary SiteNavigation

MainContent

Area

Footer




Header

• 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 placeimages behind text.

Top Bar

The top bar is used as a visual divider between the header and the pagecontent.

• Height: 23 pixels• Width: 100%•

Type specs (if being used for navigation): Arial, Bold; vertical linesare used to separate items. This is included in the CSS.

• Color: Choose background button colors consistent with the overalldesign of the site. The top navigation bar uses the same color asthe primary navigation buttons.

• The bar must always be present, whether used for navigation or left empty.

Top Bar

Site IDPPG Logo Search




Primary Site Navigation

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 beused; 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 beused in the left navigation.

Arrows are displayed only on the top-level channels in the leftnavigation; sub-channels and postings should not employ thearrow device. Arrows should appear on channels that containsubsequent items in the navigation.

• Sub-channels and postings use a background that is lighter in color than thetop-level navigation items.

Sub-Navigation LinksThese 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.

Left Navigation Menu

Sub Navigation Links

Placeholder Links




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)

Main ContentArea

Text Header




Marketing Initiative/Product Web SiteDesign Guide

Marketing initiative/ProductWeb sites enable SBUs tomarket products and servicesto specific customer segments.As such, these sites falloutside the boundaries of Corporate, Regional and SBUweb site requirements(although please design your site to fit the standard 800x600screen resolution); however , there are corporate web identity components you mustincorporate within your design:

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

• Search Field – Site search is an important tool for users. The CMStemplate positions the search field inthe upper left-hand corner of theheader. When used with the logo,place the search utility below the PPGlogo.

• Footer – The PPG universal footer (with enabled links) must run along thebottom 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 GrayMust 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)




E-Commerce (Consumer) Web SiteDesign Guide

E-Commerce (Consumer) Web sites enable business units to sell products andservices online. These sites are designed to reach a specific customer segment (B-2-Bor 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 applicationshould include the following corporate identity components:

• PPG logo - The logo should be positioned on every page to identify it as aPPG 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 USAo 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.




Intranet Site Design Guide

Intranet sites are employee facing webs designed for the purpose of providinginformation and usable content. When designing your Intranet site, consider thefollowing components within your design:

• Header – Use the chromatic PPG logo (angled) with “PPG Industries” siteID 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 willbe 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)

Header

Placeholder

Top Bar

Intranet UtilitiesIntranet Utilities




URL StrategyCreating a new web site or redesigning an existing one doesn’t ALWAYS require registering anew domain name. PPG owns over 225 unique URLs and purchasing new domains requiresbusiness justification and approval from PPG legal counsel and Corporate Communications.

Please review the PPG Internet Website Policy for information regarding the use of domainnames. 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 subfoldersEvery PPG web venture must leverage the ppg.com URL whenever possible sincesubfolder 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 enrichesrather 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 itpoints.)

Choosing a URLPPG.com and Subfolders : One of the major advantages to using the ppg.com rootdomain 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 theconvention 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 ([email protected]). Legal approval will be required toregister the domain.

web site style guidelines

Documents