http://consumer.att.

com

Style Guide
Document Abstract: Provides instructions for planners, designers, and copywriters building websites, website areas, single pages, and individual elements. These instructions are presented as follows to accommodate many work methods: Objectives: Brand, Business and Consumer. Fundamental Structure: Explains Service / Acquisition, and details the Tiers. Content and Editorial: Requirements and Guidelines General Properties: Provides direction for high level aspects of AT&T Consumer. Design Elements: The basics of AT&T Consumer typography, colors, and photography. Specific Tasks: How to make everything from a masthead to a submit button.

CONFIDENTIAL

AT&T Consumer Style Guide

Page 1

Table of Contents
Quick Start Guide .................................................................................................... 5
Basic Typography, Common Colors, Frequently Used Elements, Navigation Considerations, Brief Introduction to Structure of AT&T Consumer

1. Design Objectives ............................................................................................. 6

1.1 Brand Objectives..................................................................................................................................... 6 1.2 Business Objectives................................................................................................................................ 6 1.3 Customer Objectives .............................................................................................................................. 6

2. Fundamental Site Structure .............................................................................. 7

2.1 2.2 2.3 2.4 2.5 Customer Service or Customer Aquisition?.......................................................................................... 7 The Five Tiers (Levels) of AT&T Consumer ....................................................................................... 7 Considerations for Sitelets ..................................................................................................................... 7 Considerations for Landing Pages ......................................................................................................... 7 Ingredient Brand Considerations ........................................................................................................... 7

3. Content & Editorial: Requirements and Guidelines ........................................... 8

3.1 3.2 3.3 3.4 Tone and Manner .................................................................................................................................... 8 Simplified English .................................................................................................................................. 8 Search Engine Optimization .................................................................................................................. 9 Style Principles ..................................................................................................................................... 10 3.4.1 Capitalization ...................................................................................................................... 10 3.4.2 Bulleted Lists/Numbered Lists .......................................................................................... 10 3.4.3 Numbers .............................................................................................................................. 10 3.4.4 Telephone Numbers............................................................................................................ 10 3.4.5 Dates .................................................................................................................................... 10 3.4.6 Money.................................................................................................................................. 10 3.4.7 Price Points.......................................................................................................................... 10 3.4.8 Time..................................................................................................................................... 11 3.4.9 Footnotes and Notes ........................................................................................................... 11 3.4.10 Service Marks ..................................................................................................................... 11 3.4.11 Superscripts ......................................................................................................................... 11 3.4.12 Terminology........................................................................................................................ 11 3.4.13 Resources ............................................................................................................................ 12

4. General Properties: Requirements .................................................................. 14

4.1 Templates .............................................................................................................................................. 14 4.1.1 Master Template, One Column Template ......................................................................... 14 4.1.2 Two Column Template: same widths................................................................................ 15 4.1.3 Three Column Template: same widths.............................................................................. 16 4.1.4 Three Column Template: different widths, symmetrical ................................................. 17 4.1.5 Two Column Template: different widths, asymmetrical left........................................... 18

AT&T Consumer Style Guide

Page 2

4.1.6 Two Column Template: different widths, asymmetrical right......................................... 19 4.2 Global Navigation Elements ................................................................................................................ 20 4.2.1 Global Header ..................................................................................................................... 20 4.2.2 Primary Navigation............................................................................................................. 20 4.2.3 Secondary Navigation ........................................................................................................ 21 4.2.4 Local Navigation................................................................................................................. 21 4.2.5 Global Footer ...................................................................................................................... 21 4.3 In-Page Navigation Samples................................................................................................................ 22 4.3.1 Call to Action Buttons ........................................................................................................ 22 4.3.2 Progress Meter .................................................................................................................... 22 4.3.3 Tab Systems ........................................................................................................................ 23 4.3.4 Text Links ........................................................................................................................... 23

5. Design System: Guidelines .............................................................................. 24

5.1 Typography ........................................................................................................................................... 24 5.1.1 Fundamentals ...................................................................................................................... 24 5.1.2 Considerations for Mastheads and Headers ...................................................................... 24 5.1.3 Considerations for Features................................................................................................ 24 5.2 Color Palette.......................................................................................................................................... 25 5.2.1 Main Colors......................................................................................................................... 25 5.2.2 Accent Colors...................................................................................................................... 25 5.3 Photography .......................................................................................................................................... 26 5.3.1 Stock Photography Samples............................................................................................... 26 5.3.2 AT&T Photographic Library Samples .............................................................................. 26 5.3.3 Using Photography in Mastheads ...................................................................................... 27 5.3.4 Using Photography in Content Components..................................................................... 28

6. Applying the Styles to Graphical Elements ................................................... 29

6.1 Mastheads.............................................................................................................................................. 29 6.1.1 Masthead One ..................................................................................................................... 29 6.1.2 Masthead Two..................................................................................................................... 29 6.1.3 Masthead Three................................................................................................................... 29 6.1.4 Masthead Four .................................................................................................................... 30 6.2 Content Components ............................................................................................................................ 30 6.2.1 Page Title and Introduction ................................................................................................ 30 6.2.2 Basic, Main Column ........................................................................................................... 31 6.2.3 Basic, Right Column .......................................................................................................... 31 6.2.4 With Call to Action............................................................................................................. 32 6.2.5 With Price Point.................................................................................................................. 32 6.2.6 With Tinted Background.................................................................................................... 33 6.2.7 With Picture ........................................................................................................................ 34 6.3 Headers .................................................................................................................................................. 35 6.3.1 Section Header .................................................................................................................... 35 6.3.2 Clickable Header................................................................................................................. 35 6.3.3 Nonclickable Header .......................................................................................................... 35 6.3.4 Graphic Subheads ............................................................................................................... 35 6.4 Features ................................................................................................................................................. 35 6.4.1 Feature One ......................................................................................................................... 36 6.4.2 Feature Two ........................................................................................................................ 36

AT&T Consumer Style Guide

Page 3

6.5 6.6 6.7 6.8

6.4.3 Feature Three ...................................................................................................................... 37 Action Indicators................................................................................................................................... 37 Tabs ....................................................................................................................................................... 37 Linear Process Bar ................................................................................................................................ 38 Icons....................................................................................................................................................... 38 6.8.1 Visually Descriptive Icons ................................................................................................. 38

7. Applying the Styles to HTML Elements ......................................................... 39

7.1 Hyperlink Text ...................................................................................................................................... 39 7.1.1 In-line links ......................................................................................................................... 39 7.1.2 In-page navigation element ................................................................................................ 39 7.2 Body Text.............................................................................................................................................. 39 7.3 HTML Subheads................................................................................................................................... 39 7.4 Form Elements ...................................................................................................................................... 39 7.4.1 Phone Numbers................................................................................................................... 39 7.4.2 Dates .................................................................................................................................... 39 7.4.3 Addresses ............................................................................................................................ 39 7.4.4 Error Messages.................................................................................................................... 40 7.5 Footnotes ............................................................................................................................................... 40 7.6 Legal Text ............................................................................................................................................. 40

8. Appendix .......................................................................................................... 41
8.1 Search Engine Optimization Technical Notes .................................................................................... 41

AT&T Consumer Style Guide

Page 4

Quick Start Guide

This graphic introduces most of the elements that make up the pages for all AT&T consumer sites. While intended to provide a guideline for layouts, it is not intended to suggest optimal page design. Text (required). All graphic text is set with Trade Gothic Bold, either in all caps or upper and lower case. All HTML text is comped as Verdana, 11pt over 13pt leading, black unless otherwise specified. Spacing (required). All spacing is to be followed precisely as shown. Color scheme (guideline). From the masthead down, the color scheme may shift to accommodate the creativity of the design team. Design elements (guideline). The content components shown are drawn from several delivered site experiences. This is to begin to show some of the varieties that are possible within these flexible guidelines.

AT&T Consumer Style Guide

Page 5

1. Design Objectives
The design system supports a number of brand, business, and customer objectives. On the surface, the design provides a refreshing and consistent look and feel across all AT&T sites. The system also supports an information architecture that establishes clear hierarchical relationships between the many sites and content areas that currently exist in the Corporate and business unit domains. This architecture achieves the dual goals of clearly orienting users in the sites structure and enabling a predictable and repeatable navigation system. The design system streamlines the customer experience by deeply analyzing and reorganizing content. This will meet several AT&T business objectives, including: Merchandising AT&T Consumer products for online sales. Providing better relationships and knowledge support for business customers.

1.1

Brand Objectives The design system refreshes the overall look and feel and establishes visual and brand consistency. It creates a consistent online platform from which to support umbrella messaging spanning all business units, while allowing flexibility for each of the core sites.

1.2

Business Objectives At the main www.att.com level, the design enhances the merchandising and highlights the sales capabilities of AT&Ts self-service acquisition platforms. These platforms include E-commerce for Consumer and Small Business and also Self-service customer service for Consumer, Small Business, and Enterprise Business. This is accomplished by allowing site visitors to self-segment into one of the three customer segments, then presenting them with high-level navigation that facilitates the learn/buy and service use-modes. With customer segmentation quickly addressed at the att.com level, the need for conflicting, cross-segment messaging on the home page is eliminated and more targeted messaging can be delivered to customers on the segment (i.e., Consumer, SMB, and Enterprise Business) home pages. Clearer segmentation and messaging will enable AT&T to better deliver the right message to the right customer, and this philosophy will be reflected on each segment home page and ripple through the site architectures.

1.3

Customer Objectives A site users primary objective is to quickly identify a path to the appropriate site content and functionality to satisfy a near-term need. Although their primary task is to achieve a pressing goal, users of www.att.com also want relevant, value-added information as an integral component of their site experience. To provide this relevance, a high-level segmentation is vital to the information architecture and design. Critical content is made accessible and recognizable for each segment. This content includes: Exploratory learning and consideration information Commerce and lead generation functionality Service and assistance content

AT&T Consumer Style Guide

Page 6

2. Fundamental Site Structure

There are two main use models: servicing customers and aquiring customers. These use models are driven by a structure of five Tiers, numbered from Zero to Four. Core pages of the site should adhere to the design specifications for their respective Tiers. Sitelets, Landing Pages, and Ingredient Brand sites can deviate as necessary to achieve their unique marketing goals. 2.1 Customer Service or Customer Aquisition? Existing customers need to be led to their destinations as rapidly as possible. This will add to their brand satisfaction, leading to better retention and making it more likely that they will recommend AT&T. New customers need to be supplied with a consistent, simple navigation system so they can find what theyve come for without getting frustrated and abandoning the site. As they investigate the consumer site, its recommended to introduce related products to the customer, especially products that are bundled with what they are currently viewing. 2.2 The Five Tiers (Levels) of AT&T Consumer Tier Zero: this is the www. att.com home page. Tier One: business units home pages (Consumer, Small Business, Enterprise Business). Tier Two: main pages of the primary navigation (Products and Services, Customer Center, Assistance). Tier Three: main pages of the secondary navigation (calling plans, internet services, VoIP, Wireless, retail, bundles). Tier Four: pages with local navigation (core product pages). 2.3 Considerations for Sitelets Examples of sitelets are AT&T Traveler and AT&T Military. Sitelets are also known as boutique sites. These sitelets are aimed at a very specific market segment such as people traveling abroad or members of the armed services. Sitelets like these have some unique design elements that are designed to appeal to their particular market segment. Central design characteristics such as logo treatment, typography, photography, and grid structure should be maintained. See: http://www.usa.att.com/military/ and http://www.usa.att.com/traveler/ 2.4 Considerations for Landing Pages It can be necessary to deviate from this Style Guide when designing a page for a potential customer who is responding from other channels. The materials from these other channels will likely use a totally different design than the AT&T Consumer site. Key design decisions will often need to be influenced by the look and feel of outside creative. The designer will need to ease the users transition from the look and feel of the original communication to the core style of the AT&T Consumer site. Since the user has shown enough interest to respond, it is recommended to limit the users alternate pathways by removing the Primary and Secondary navigation. Central design characteristics such as logo treatment, typography, photography, and grid structure should be maintained where possible. 2.5 Ingredient Brand Considerations An example of an Ingredient Brand was AT&T WebCents. When designing sites for ingredient brand projects most guidelines will be at the discretion of the product manager. The identity of the ingredient brand will take precedence, with the AT&T logo and other AT&T visuals serving as secondary elements. The designs for these sites need to be approved by the AT&T Brand organization.

AT&T Consumer Style Guide

Page 7

3. Content & Editorial: Requirements and Guidelines

Content is an often overlooked component of Web design, but is critical to the success of your site. As part of your Web strategy, you need to think through what types of content would be most appropriate for your audience, how to keep your content fresh and engaging, and most importantly, make sure that users can easily find the content they need. This section offers content and editorial guidance to ensure that users have a positive, consistent experience throughout the AT&T Consumer (ACS) Web sites.

3.1

Tone and Manner In addition to a common visual look and feel, each ACS site should reflect a consistent tone and manner in language, or copy. The following guidelines can assist you in creating appealing copy.
Guidelines Tone and Manner

Use a casual but businesslike tone and manner. Avoid language that is too formal, as well as too informal (i.e., slang). Pursue a middle ground. Copy should be clear, concise, and consistent. Use short, simple words and sentences. Avoid long narratives. Whenever appropriate, use bulleted lists. Complete sentences are recommended, although sentence fragments are acceptable in bulleted lists. Copy should be informative and easy to understand. Avoid the use of technical and industry-specific jargon. Strive to be as user-friendly as possible. Use an active voice rather than passive. Strive for language that is likeable, empathetic, and energetic. Use consistent language and terminology throughout your site. Use language that is bias-free with regard to gender, religious, and ethnic groups. For example, avoid the use of the pronouns he and she if possible. When appropriate, consider content, tone and manner used in offline media related to your site, such as direct mail pieces and television advertising. Copy should speak to the users in a tone that we (AT&T Consumer) are here to service you (users). Although our message should focus on self-servicing as much as possible, it should always be apparent to users that we are here to help them. Use words like you and your, and avoid words like my. The AT&T Customer Center is a good example of a site that has adopted this tone and manner.

3.2

Simplified English Simplified English (SE), also known as Controlled English, is a writing approach originally created by the European Association of Aerospace Industries (AECMA) for people with English as a second language. Applying the basics of Simplified English helps ensure that copy written for technical and instructional areas such as VoIP service and the signup process for online billing is easily understood by a broad audience. An excellent example of Simplified English on an ACS Web site can be viewed at https://www.customerservice.att.com/index/. Use the following guidelines as a checklist for creating Web copy with the broadest appeal.
Guidelines Simplified English

Use simple verb tenses: the infinitive, the present tense, the past tense, the simple future tense, and the past participle (as an adjective). To adjust; It adjusts; It adjusted; It will adjust; It is adjusted. Use the active voice only. Use relatively short sentences with a maximum of 20 words.

AT&T Consumer Style Guide

Page 8

 3.3

The maximum length of a paragraph should be 6 sentences. Use language consistently. Do not confuse readers by using different words to describe the same thing. Once specific words are used to describe something, continue to use these same words. One definition for each word. close = to shut OR nearby NOT both. Use articles wherever possible. (A, The). Use the official name (shortened if necessary) as much as possible. Do not use different technical names for the same thing. Make instructions as specific as possible. Write: If you increase the temperature it will decrease the curing time. NOT: Different temperatures will change the curing time. Use tabular layouts (vertical layouts) for complex texts (comparing 2 services).

Search Engine Optimization Search engines are text based. Every page of content represents an opportunity for visibility across all spider-based search properties. Better quality and a higher volume of content translates directly into more valuable "real estate" on the Web, more opportunities for rankings, and therefore, more visibility and traffic. Every page can drive traffic if constructed and integrated into the website effectively.
Guidelines

Make sure page content is rich in keywords. Use both singular and plural versions of keyword phrases. Expand terms where appropriate. Use high-speed Internet, not just Internet. Create keyword phrases that are at least two words (e.g., local rates is more specific than rates). Aim for 200-300 words of visible HTML copy on the page, and ensure that each page is unique and relevant to the targeted keyword phrase. Other nouns or keyword phrases should not be more prominent or have more frequent occurrences than the targeted keyword phrase. Repeat the keyword phrase four to five times throughout the body copy, in particular within the first and last paragraphs of the text, but be cautious of needless repetition. Make certain that no other nouns or keyword phrases are repeated more often than the primary keyword. Avoid Duplicate Content. Search engines penalize sites that contain duplicate content. Make certain that each page of your site contains unique content. Focus on nouns. Most search engine queries feature nouns. It's rare for queries to contain verbs. Focus on generic terms and not necessarily always on the brand or brand name (e.g., VoIP, not CallVantage). Most search engine queries feature generic terms and not brands. Consider bolding keyword phrases and placing them in HTML header tags (e.g., <H1>) helps to emphasize the important of these terms to search engines. Don't put all your keyword phrases on your home page. Better to have broader terms on the home page and targeted terms on key pages. Consider making seasonal or event-driven adjustments to your keyword phrases (e.g., American Idol toll-free number). Consider incorporating location within your keyword phrases where appropriate(e.g., New Jersey Local Service).

AT&T Consumer Style Guide

Page 9

3.4

Style Principles

3.4.1 Capitalization

Use initial caps for page headers, page titles, navigation menu choices, field labels, and proper nouns. That is, capitalize the first letter of each word, except for articles, conjunctions, and prepositions. Use ALL CAPS for acronyms. For commonly used acronyms, it is not necessary to spell out the words upon first reference (e.g., DSL); for uncommon acronyms, you should spell out the words upon first reference, followed by the acronym in parentheses.
3.4.2 Bulleted Lists/Numbered Lists

Use bulleted lists when listing a set of items. Use numbered lists when outlining steps in a process. When complete sentences are used, always end the list items with the relevant punctuation (e.g., period). When sentence fragments are used, it is not necessary to end list items with punctuation. Try not to mix full sentences and sentence fragments in bulleted and numbered lists. Choose one type or the other for your list.
3.4.3 Numbers

Use digits for numbers, including single digit numbers 0 to 9. On the Web, users tend to scan, and digits are easier to scan than numbers that are spelled out. When giving a range (i.e., 5 - 10), use a hyphen to separate the numbers rather than the word to. Place a space on each side of the hyphen. Use the percent symbol (%) to indicate percentage.
3.4.4 Telephone Numbers

When a telephone number is displayed within text, it should be written as xxx-xxx-xxxx (with hyphens). When a user is specifically asked to enter a telephone number, there should be three fields with no hyphens in between each field. If a format guide is cited in relation to the three fields, it should be written as xxx xxx xxxx (no hyphens). Toll-free numbers should be written as 1-xxx-xxx-xxxx (with hyphens). In some cases, telephone numbers are used as User IDs on the ACS sites (e.g., Customer Center). When a User ID is displayed within text, it should be written as xxxxxxxxxx (one consecutive string). When a user is specifically asked to enter his or her User ID, there should be one field. If a format guide or example is cited in relation to the field, it should be written as xxxxxxxxxx (one consecutive string). For additional information, refer to the Page Controls & Other Elements: Forms section.
3.4.5 Dates

When a date is displayed within text, the month should be spelled out (e.g., March 28, 2002). For data display, use the format Mmm:dd:yyyy (e.g., Nov 23 2002)
3.4.6 Money

When money is displayed within text, use a $ for amounts of $1 or more (e.g., $17, $3.75). Use a for amounts less than a dollar (e.g., 56). Put USD next to money amounts on sites used by international audiences. Example: Enjoy low rates on calls from home to countries worldwide at any hour, day or night, all for a monthly plan fee of $2.95 (USD).
3.4.7 Price Points

Price points should be presented as follows: .....................................................................................$19.95/MO. When a price point is less than one dollar, it should be presented as follows: .................................... 38/MO. It should not be presented as a decimal of a dollar ($0.38). The word month should always be abbreviated to MO. and it should be in upper case.

AT&T Consumer Style Guide

Page 10

3.4.8 Time

When expressing time within text, use a.m. or p.m. (e.g., 7 a.m.). Always use lower case for a.m. and p.m. When mentioning time zones, do not put periods in the time zone abbreviations. Example: We were supposed to meet at 8 a.m., but he didnt arrive until 9:30 a.m.
3.4.9 Footnotes and Notes

To indicate footnoted items within text, use asterisks if three or fewer items need to be footnoted (i.e., *, **, and ***). Use superscript numerals if four or more items need to be footnoted (i.e., 1, 2, 3, 4). The asterisk or superscript numeral should appear after the footnoted item. Example: In-State Rate* In cases where numerous footnotes are required (e.g., selling bundled services such as local and DSL) do not place superscript numerals near prices or number intensive information which could confuse users. If this is not possible, use an alternate footnote designator. The reference to the footnoted items should appear at the bottom of the page, below any text but above the Global Footer. The asterisk or superscript numeral should appear before the referenced item, with a space in-between. Use 8 point font size. Example: * In-state long distance calls are long distance calls placed within your state. When simply noting something on a page, bold the word Note and add a colon. Example: Note: It is recommended that you use Internet Explorer Version 4.0 or higher to view this site.
3.4.10 Service Marks

Whenever discussing a specific AT&T product or service, you must use the legal name of the product, including any relevant registered mark, trademark, or service marks. Use the required registered mark , trademark TM, or service mark SM upon the first text reference on a page. It is not necessary to repeat afterward. Example: Choose AT&T View-N-Pay or Automatic Bill Payment. With AT&T View-N-Pay, you can... For additional information or to access AT&T Trademarks & Service Marks, go to http://www.att.com/brand_res/intra/index.html.
3.4.11 Superscripts

Notifications of Service Marks (sm), Trademarks (TM), and Registered Marks () must be set as superscript.
3.4.12 Terminology

The ACS sites share a broad range of terms and nomenclature. To maintain consistency across all of the ACS sites, it is recommended that you follow these terminology guidelines. Note: Avoid line breaks in proper names. account holder Use this term when referring to a customers AT&T account (e.g., long distance) or checking account. Remember that this term refers to the specific person in a household whose name is associated with the account. AT&T Consumer Services Always spell out. Never refer to ACS since that is an abbreviation used internally at AT&T. AT&T Customer Center, Customer Center These are the only allowable references (not Online Customer Service site, online CSS or any other acronym). AT&T Customer Service Representative, AT&T Online Customer Service Representative (initial caps) Generic use of the word representative should be lower case. AT&T Online Bill, AT&T Online Billing (initial cap) Not necessary to initial cap when using the term your online bill. AT&T View-N-Pay (initial caps) Include the symbol on first text reference. AT&T Worldnet Service (initial caps) Include the symbol on first text reference.

AT&T Consumer Style Guide

Page 11

Att.com - Use Att.com when referring to any program, reference or organization such as Att.com Site Team, Att.com Style Guide or Att.com Search Services. Within a URL reference (www.att.com/business) use lower case. Automatic Bill Payment (initial caps) Not automatic bill payment. bill Not statement. Bill is more user-friendly. card holder Use this term when referring to a customers credit card or calling card. e-mail (with hyphen) Not email or e mail. Use E-mail if first word of a sentence. Use E-mail or E-mail Address as a field label (but be consistent throughout your site on the usage). Frequently Asked Questions (FAQs) Always initial cap and spell out term on first reference, with FAQs in parentheses. Not FAQS or faqs. Note: The navigation menus are an exception. When used in navigation, FAQs is not spelled out. Internet (initial cap) Not internet. intranet Lower case unless referring to a specific intranet such as the AT&T Intranet. local service, local toll service Lower case unless specifically referring to AT&T Local or Local Toll services. Example: Sign up for AT&T Local Service in Georgia. Log In, login - Use Log In (two words, initial cap) for labels and buttons. It is acceptable to use login (one word, lower case) when not specifically referring to a label or button and when not referring to an action. Use log in (two words, no initial cap) when describing the action (e.g., Log in to your Customer Center account to view your bill.). Log Out, logout - Use Log Out (two words, initial cap) for labels and buttons. It is acceptable to use logout (one word, lower case) when not specifically referring to a label, button or action. Use log out (two words, no initial cap) when describing the action. long distance service Lower case unless specifically referring to AT&T Long Distance Service. Example: Call other AT&T Residential Long Distance subscribers for just $19.95 a month. online (one word, no hyphen) Not on-line or on line. password Lower case except when used in the same reference with User ID, then initial cap. Example: Enter your User ID and Password. payment option Refers to Automatic Bill Payment and AT&T View-N-Pay. payment method Refers to credit card and checking account. phone number Preferred over telephone number as it is less formal. In cases where you are specifically referring to someones billing telephone number, use that term. plan Lower case unless referring to a specific AT&T calling plan. Example: Sign up for the AT&T Unlimited Plan. sign up Not sign-up. Avoid using the word enroll as sign up is considered more user-friendly. Social Security Number (initial caps) Not Social Security number or social security number. toll-free (with hyphen) Not toll free. User ID (initial caps) Not user ID, User Id, User id, user Id, or user id. Web browser (two words, initial cap Web). Web site (two words, initial cap Web) Not Website, website, web site, or website. Web page (two words, initial cap Web) Not Webpage, webpage, web page, or web-page. ZIP Code (initial cap) ZIP is ALL CAPS. Not Zip Code or Zip code. Remember ZIP is an acronym for Zone Information Protocol.
3.4.13 Resources

Some of the references below are intranet sites and cannot be accessed by outside agencies. When there is a conflict between information in the Style Guide and the sources referenced here, this ACS Web Design Style Guide takes precedence.

AT&T Consumer Style Guide

Page 12

http://www.bartleby.com/ Bartelby.com is a literary portal containing links to reference material such as Strunks Elements of Style, Rogets Thesaurus and the American Heritage Dictionary. http://www.economist.com/library/StyleGuide/index.cfm The Economists Style Guide provides writing style advice that focuses on eliminating unnecessary words and writing in the active voice. http://www.pcwebopedia.com/ Webopedia is an online dictionary and search engine for computer and Internet technology. http://glossary.att.com/ (AT&T Intranet site) AT&T Glossary of Technical Terms contains a complete listing of technical terms. Refer to this listing for the proper usage of terms such as e-mail, online, etc. http://customercare.att.com/kmt/olwstools/styleguide/approved_terms.htm (AT&T Intranet site) A complete listing of AT&T approved acronyms can be found at KMS Approved Terms and Acronyms Page. http://customercare.att.com/kmt/olwstools/styleguide/approved_abbrev.htm (AT&T Intranet site) A complete listing of AT&T approved abbreviations can be found at KMS Approved Abbreviations Page. http://tidd.mt.att.com/resources/stylenew.html (AT&T Intranet site) TIDDs Editorial Style Guide is a comprehensive guide to writing style in AT&T. Some specific resources from the Brand Platform section are repeated here for your convenience. http://www.att.com/brand/index.html (AT&T Brand Center) http://www.att.com/brand/identity.html (AT&T Corporate Identity) http://www.att.com/brand/naming.html (AT&T Naming) http://www.att.com/brand/naming_trademark.html (AT&T Trademarks & Service Marks)

AT&T Consumer Style Guide

Page 13

4. General Properties: Requirements

4.1 Templates The Master Template defines the overall structure of all pages within ACS. All subsequent templates are based on this template. The templates have been designed to provide structure and consistency while maintaining enough flexibility to contain the various content within ACS.
4.1.1 Master Template, One Column Template

A: Global Header B: Primary BU Nav C: Secondary BU Nav D: Masthead H: Global Footer http://www.att.com/search?q= http://www.att.com/terms/ http://www.att.com/privacy/

760 x 56 760 x 25 760 x 25 760 x 81 760 x 30 Search Terms & Conditions Privacy Policy

The Master Template provides a framework from which all pages can be assembled. The top 187 pixels are used for the Global Header, Primary Nav, Secondary Nav, a Masthead, page content, and the Global Footer. Certain elements will not present on some pages. For instance, on many utility pages, Primary and Secondary Navigation do not appear. Content will be placed in the center whitespace of this template. This Master Template can be used as a One Column Template. One Column Templates should be used when no Local or Utility Navigation structures are required. They are best suited to contentonly pages and form pages.

AT&T Consumer Style Guide

Page 14

4.1.2 Two Column Template: same widths

D: Masthead

760 x 81

This Two Column Template is designed to display product section information clearly and cleanly. The pages using this template are called Bridge Pages because they act as a bridge for the user, connecting the ACS Home Page and the Product Pages.

AT&T Consumer Style Guide

Page 15

4.1.3 Three Column Template: same widths

D: Masthead

760 x 81

This Three Column Template is designed to present as much product section information above the fold as possible. These pages are called Bridge Pages because they act as a bridge for the user, connecting the ACS Home Page and the Product Pages.

AT&T Consumer Style Guide

Page 16

4.1.4 Three Column Template: different widths, symmetrical

D: Masthead

760 x 81

This Three Column Template is the most commonly used template. It is designed with a center column for content, a left column for navigation, and a right column for marketing messages, tools (like service finders where you enter your ZIP code) and other content.

AT&T Consumer Style Guide

Page 17

4.1.5 Two Column Template: different widths, asymmetrical left

D: Masthead

760 x 81

This Two Column Template is designed with an extra wide column for content and a left column for navigation.

AT&T Consumer Style Guide

Page 18

4.1.6 Two Column Template: different widths, asymmetrical right

D: Masthead

760 x 81

This Two Column Template is designed with an extra wide column for content and a right column for marketing messages, tools (like service finders where you enter your ZIP code) and other content.

AT&T Consumer Style Guide

Page 19

4.2

Global Navigation Elements The first step in presenting a more unified customer experience is to standardize the navigation, page structure, typography, color palettes, and other page elements across all AT&T Consumer pages.

The design imperative for all navigation structures is that they provide: clear graphical indication of state immediate user feedback an obvious visual connection to other graphic structures within the navigation hierarchy These small graphics are to help you visualize where a certain element appears in a full layout.

4.2.1 Global Header

background-color: default background-color: selected text color font-family font-weight

#FFFFFF #003399 #000000 Verdana Normal

The Global Header is intended to provide consistent access to key pages and functionality from any AT&T web page. There are two variations of the Global Header a Standard Global Header that resides on most AT&T web pages (detailed below).

4.2.2 Primary Navigation

background-color: default background-color: selected text color font-family font-weight

#FFFFFF #003399 #000000 Verdana Normal

Each major site area with AT&T Corporate has a Primary Navigation structure allowing consistent lateral movement through its sub-sections.

AT&T Consumer Style Guide

Page 20

4.2.3 Secondary Navigation

background-color: default background-color: selected text color font-family font-weight

#000000, #000066 #003399 #ffffff Verdana Normal

Several site areas represented in Corporate Primary Navigation will have a corresponding Secondary Navigation structure to allow consistent lateral movement through the site areas sub-sections. These menus will be consistent in placement and operation within the site areas in which they present. Secondary Navigation is designed to provide a clear visual indication of state and relation to Primary Navigation. The VoIP site does not need Secondary Navigation.

4.2.4 Local Navigation

background-color: default background-color: selected text color: default text-color: selected font-family font-weight

#000066 #003399 #ffffff #000066 Verdana Normal

Local Navigation allows consistent movement between the top-level pages of a site area. While it does not contain globally accessible menu items, it is ultimately intended to be global in design and operation. Local Navigation has two elements a Local Navigation Menu, and a Local Sub-Navigation Menu. Not all Local Navigation Menus require Sub-Navigation components. The button for the page the user is currently viewing is distinguished with a solid color block at the left of a white background. This color block can be tinted to match the site it exists within.

4.2.5 Global Footer

font-family text color font-weight

Verdana #006633, #333333 Normal

The Global Footer resides at the bottom of all AT&T web pages, beneath all site- and page-specific content and navigation. It provides direct access to key legal and support pages. Not shown is the footer from the att.com home page which includes the text Hosted by AT&T. This line of text only needs to be on the att.com and ACS home pages.

AT&T Consumer Style Guide

Page 21

4.3

In-Page Navigation Samples

4.3.1 Call to Action Buttons

Required: Orange arrow graphic. Very brief text. Usually black text on white. Buttons like Back must have the arrow facing left. Options: Border color, background color, text color black or white, ALL CAPS or Initial Caps.

text color font-family font-weight Background color

Usually #000000 Trade Gothic Bold Usually #ffffff

These treatments are used for actions like Click Here, Call Now, Continue, Back, Learn More, and Submit. Call to action buttons can be grouped as shown in the example above. Note: any button that is regressive (for example a back button) must have the arrow graphic pointing to the left. Most of the buttons delivered have been between 18px 22px high. It is required that whatever height is chosen, the height is consistent throughout the pages of a product site.

4.3.2 Progress Meter

font-family; font-weight

Trade Gothic, Bold

While this element is not clickable navigation, it serves to help the user navigate through a linear experience. An example of where it is used is a shopping cart, or a lengthy features selection process.

AT&T Consumer Style Guide

Page 22

4.3.3 Tab Systems

background-color text color font-family; font-weight

#ffffff #000000 Trade Gothic, Bold

This element was developed to help a user select features for multiple phone lines.

4.3.4 Text Links

text color font-family font-weight text-decoration

#ef4028 Verdana Normal, Bold underline

When a hyperlink appears within a string of body text, it should be colored #EF4028 and be underlined in all states (mouseoff, mouseover, mousedown, unvisited, visited).

AT&T Consumer Style Guide

Page 23

5.
5.1

Design System: Guidelines

Typography It is imperitive to maintain typographic consistency across every aspect of the AT&T Consumer site.

5.1.1 Fundamentals

Required: Trade Gothic for graphics, Verdana for HTML Options: colors, weight (bold or normal), style (CAPS or Initial Caps) Restricted: text should never be set in italics

font-family font-weight style

Trade Gothic Bold or Normal CAPS or Initial caps

These are type samples for typography in graphics like mastheads, headers, features, and calls to action.

font-family font-weight Body text

Verdana Bold or Normal 11pt / 13pt leading

These are type samples for typography in HTML elements. Note that size specifications are what should be entered into Photoshop when making comps, not necessarily what a programmer would use in live code.

5.1.2 Considerations for Mastheads and Headers

Text in mastheads and headers should be very brief so the messages impact is maximized. The content of the text should be the title of the page, or a message that communicates the benefits of products and services. It is not recommended to provide use the masthead space for directions about how to use the page. Directions should be placed in the Page Introduction content component. Because the text used for the core ACS pages is larger (20pt to 30pt) it has been possible to use all caps and reverse text without sacrificing legibility. At smaller point sizes, these reverse text and all caps treatments would be more difficult to read and are not recommended for any elements besides mastheads and headers. Mastheads: the title graphics at the top of each page. Headers: the graphics that title sections of content within the pages.

5.1.3 Considerations for Features

The text in the features needs to be smaller than in mastheads and headers because features are smaller than mastheads and have much more text than either mastheads or headers. Because of these factors, the text should usually be positive, and upper and lower case. Colors can be used to help the features stand out from one another. Features: Graphics promoting a service or bundle of services. These appear on the Home Page, and several of the Bridge pages between the Home Page and the Product pages.

AT&T Consumer Style Guide

Page 24

5.2

Color Palette The AT&T Consumer Web Design System uses the palette displayed below. These colors were chosen to differentiate the Brand, and cast it in a contemporary, energetic, and likeable context. They were also selected to complement the blue of the AT&T logo. Colors were chosen from the Web-safe 216 color options. Using this palette ensures the greatest color consistency on all computer displays. The colors below represent the approved palette of options for ACS Web site design. For shading and highlighting, these colors may be slightly darkened or lightened for emphasis. Web-safe colors should always be used in large color areas, such as solid backgrounds.

5.2.1 Main Colors

These are the recommended colors for large areas of solid color like Mastheads, and for elements that appear frequently, like Headers.
669900 999900 669966 66ccff 669999 9933cc 000066 003399 660066 6699ff 006699 6699cc cccccc 999999 666666

This color is used often for AT&T CallVantage.

This color is used often for AT&T DSL. This color is used often for the AT&T ACS foundation pages. This color is used often for AT&T DSL.

5.2.2 Accent Colors

These colors should be reserved for small elements like arrowhead graphics to discreetly lead the viewers eye around the pages. The less these colors are used the greater the effect they will have, so it is recommended they be used as sparingly as possible.
ffcc66 ffcc33 ff9900 ef4028 cc3333 ff9999 ffff66 fb0404

This color is used for the orange arrows.

This color is the universal HTML unvisited link color.

AT&T Consumer Style Guide

Page 25

5.3

Photography Photography is an integral design element on the sites higher-level pages. To maintain consistency, photo selections should follow a few key stylistic guidelines.

5.3.1 Stock Photography Samples

Qualities of the imagery should include human, optimistic, and authentic. Look for slightly unexpected cropping and placement. Locations should look desirable. Show the diversity of our country and our customers. The objective is to present customers with images they can relate to, and to convey imagination and an element of surprise in how we portray life.

5.3.2 AT&T Photographic Library Samples

Photo style should be crisp, sharp, and clear. Shot framing should be panoramic, to fit the horizontal nature of Web site mastheads and branding areas. Each shot should be filled with enough color and texture to maintain viewer interest across a 760-pixel width. Models should be used in all brand-driven photography. Their clothing and surroundings should be mostly cool and neutral colors to make sure the images will work in as many areas of ACS as possible. Confidence in AT&T can be conveyed by models looking directly at the camera. This will also be more engaging for ACS users.

Usage: 2 years from February 2004 How to access this photo libarary: contact Julie Barnwell, Digitas Art Buying at 617-867-1000.

AT&T Consumer Style Guide

Page 26

5.3.3 Using Photography in Mastheads

There are three general ways to use photography in mastheads: Sillhouette, Framed, and Full-width. Sillhouette: this treatment is required for pages in the foundation areas of the site. Photos are sillhouetted out from their backgrounds and placed over bands of colors. This achieves an expansive, accessible look without the need for panoramic photos. By the time a user gets to most product sites, they will have already encountered some pages with this treatment. Using this look can help users feel like they are navigating a continuous, well thought out experience.

Framed: a photo can be framed within a box. This allows the use of active imagery without overwhelming a crowded page. It can also keep the masthead tightly within the template for the page.

Full-width: when a very active presentation is needed, a panoramic photo can greatly energize a page. This treatment should be used sparingly, as it can easily overwhelm the content if not designed with care.

AT&T Consumer Style Guide

Page 27

5.3.4 Using Photography in Content Components

When a product or service is the main subject or is being heavily promoted an image may be used to give the content component greater impact. The treatments used thus far have been sillhouettes, as shown below. Other treatments may be possible.

AT&T Consumer Style Guide

Page 28

6. Applying the Styles to Graphical Elements

The placement of imagery within the graphics and the editorial aspects of these graphics should be interpreted as guidelines, not necessarily hard and fast rules. 6.1 Mastheads The Masthead is the graphical header of each site page. It is used to title the page and orient the viewer, and, where necessary, provide a prominent space for value proposition messaging. Mastheads designs include a tightly cropped portrait on the left, a series of blue bands, and white Trade Gothic text.

6.1.1 Masthead One

font-family font-weight

Trade Gothic Bold

This example demonstrates using a tightly cropped and sillhouetted portrait with an & message to communicate benefit, energy, and AT&Ts unique market position.

6.1.2 Masthead Two

font-family font-weight

Trade Gothic Bold

This masthead has a full width image and a bold marketing message to create a powerful sense of energy for AT&T DSL.

6.1.3 Masthead Three

font-family font-weight

Trade Gothic Bold

This masthead uses a boxed photo and upper and lower case text to label the page. When labeling like this, it is recommended to keep the text as similar as possible to the button that the user clicked to get to this page.

AT&T Consumer Style Guide

Page 29

6.1.4 Masthead Four

font-family font-weight

Trade Gothic Bold

Here we have a sillhouetted head and shoulders image with a label of upper and lower cased text. Integrated into this masthead is a progress meter that will help keep the user oriented as they move through a linear process.

6.2

Content Components A content component is a group of elements including at least a header followed by some text. The header can be actionable (clickable) or non-actionable. The content component can also include a picture, a price point, one or more call to action buttons, and a tinted background for emphasis. Content components can be designed to appear in a main content column, or in the narrower right hand content column.

6.2.1 Page Title and Introduction

Options: HTML text under the title bar.

Title font-family Title font-weight Body font-family Body font-weight

Trade Gothic Bold Verdana Normal

This component appears at the top of the main content column. Containing a graphic title header and optionally some text, it helps title the page and introduces the user to how the page will help them make their purchase decisions.

AT&T Consumer Style Guide

Page 30

6.2.2 Basic, Main Column

Title font-family Title font-weight Body font-family Body font-weight

Trade Gothic Bold Verdana Normal

This is the basic simple content component. It consists of a header and some text. The header can be actionable or non-actionable. It is designed to appear in a main content column.

6.2.3 Basic, Right Column

Title font-family Title font-weight Body font-family Body font-weight Width Text-margin Space between title and text

Trade Gothic Bold Verdana Normal 155px 13px 7px

Designed to appear in the narrower right hand column, these content components should be kept as simple as possible. Ususally just a header and some text, these components lead a user to related products or special offers that are not accomodated by the local navigation in the left hand column. The header can be actionable or non-actionable.

AT&T Consumer Style Guide

Page 31

6.2.4 With Call to Action

Title font-family Title font-weight Body font-family Body font-weight

Trade Gothic Bold Verdana Normal

When appropriate, call to action buttons can be included in a content component to prompt the user to the next step. When more than one are necessary, it is suggested to align the buttons horizontally. If there is both a regressive and a progressive action (eg: Back paired with Submit) the regressive button should have the orange arrow head facing to the left instead of to the right.

6.2.5 With Price Point

Title font-family Title font-weight Body font-family Body font-weight

Trade Gothic Bold Verdana Normal

A prominent price point will help users quickly understand the relative differences between several offerings. They have been included in headers, and have been included as a tinted box near the upper right of the content component. If a content component needs a price point it also usually needs a call to action button, and the component is almost always actionable.

AT&T Consumer Style Guide

Page 32

6.2.6 With Tinted Background

Title font-family Title font-weight Body font-family Body font-weight

Trade Gothic Bold Verdana Normal

Content components, or types of content components, can be differentiated from one another with tinted backgrounds. This has been used to great effect in current releases as a distinguishing characteristic of content components that contain form elements for the user to fill out.

AT&T Consumer Style Guide

Page 33

6.2.7 With Picture

Title font-family Title font-weight Body font-family Body font-weight

Trade Gothic Bold Verdana Normal

Images can be used to enhance the visual significance of a content component. This treatment is generally reserved for product offerings and tend to be the most complex content components. These components are usually actionable, often contain call to action buttons, and sometimes have prices points and/or tints. These components require the most care to be designed effectively and should be used sparingly to avoid overwhelming the rest of the experience.

AT&T Consumer Style Guide

Page 34

6.3

Headers Headers delineate page body content, and visually draw users to key page content areas. The standard Header described below may be used wherever subject matter requires, and should be consistent in presentation, although it may vary in width based on grid structure deployed.

6.3.1 Section Header

Color Font Weight

#000000 Trade Gothic Bold

This header can be used when a page has more content than can be defined solely with a masthead.

6.3.2 Clickable Header

Color Font Weight

#ffffff Trade Gothic Bold

This clickable header identifies content blocks, separates the page into discreet sections, and can be clicked to go to another page of content. The arrow denotes clickability and is a required part of this graphic element.

6.3.3 Nonclickable Header

background-color text-color font-family; font-weight Color in box at left Color behind text

ff33cc 000000 Arial Narrow Bold 60a2e3 1f53af

This header identifies content and separates the page into discreet sections. The flat color block on the left matches the margins established by the arrow in the clickable headers.

6.3.4 Graphic Subheads

background-color text color font-family; font-weight

#ffffff #000000 Arial Narrow Bold

This subhead can be used with the headers defined above to separate larger sections of content into smaller pieces. This can aid comprehension and will help users quickly find what they want.

6.4

Features

AT&T Consumer Style Guide

Page 35

Features promote special offers and bundles. Feature Ones appear only on the AT&T consumer home page. Feature Twos appear on the Products and services page. Feature Threes are used on content pages where a promotional message is appropriate.
6.4.1 Feature One

background-color text color font-family; font-weight Colors of bands in bar at top Colors for text bar and price point

#ffffff #000000 Trade Gothic, Bold All caps #660066, #000066, #ff66cc, #33f3f3 #660066, #000066, #ff66cc, #33f3f3

This feature appears on the AT&T Consumer home page to promote current offers. It can include a price point.

6.4.2 Feature Two

background-color text color font-family; font-weight Color of large text Color of text in box

#ffffff #000000 Trade Gothic, Bold All caps #660066 #666699

This feature appears on the AT&T Consumer Products and Services page to promote current offers.

AT&T Consumer Style Guide

Page 36

6.4.3 Feature Three

background-color text color font-family; font-weight Color of large text Color of text in box Colors of dotted box line

#ffffff #000000 Trade Gothic, Bold All caps #660066 #666699 #77d2ff, #9999cc

This feature appears within the AT&T Consumer site with relevant content to promote related offers and bundles.

6.5

Action Indicators

background-color text color font-family; font-weight

#ffffff #000000 Trade Gothic, Bold

To indicate that a graphic or HTML text is clickable (actionable), it should contain or be preceded by an iconic arrow, as shown above. The user will be able to rapidly scan the page and keep moving forward. When used consistently these arrows become an important part of the language of the AT&T Consumer site.

6.6

Tabs

font-family; font-weight

Trade Gothic, Bold

The color palette for this element can be based on the site. It is designed to appear at the top of the main content area when a user is setting up several phone lines at once, but can be used elsewhere as appropriate.

AT&T Consumer Style Guide

Page 37

6.7

Linear Process Bar

Font, Weight

Trade Gothic, Bold

The color palette for this element can be based on the site. It appears in the masthead as a guide through a lenthy linear process like a shopping cart.

6.8

Icons Icons can be used to visually represent a product or service.

6.8.1 Visually Descriptive Icons

This treatment gives a page area weight and prominence. Serving as a visual description of content, users can rapidly find the product or service they want. They can also be combined to represent a bundle (as shown here).

AT&T Consumer Style Guide

Page 38

7. Applying the Styles to HTML Elements

HTML elements make up at least 50% of every page on the AT&T Consumer site. Some pages are entirely rendered from HTML elements. These elements must be created in a consistent way. 7.1 Hyperlink Text

7.1.1 In-line links

text color font-family font-weight text-decoration

#ef4028 Verdana Normal, Bold underline

When a hyperlink appears within a string of body text, it should be colored #EF4028 and be underlined in all states (mouseoff, mouseover, mousedown, unvisited, visited).

7.1.2 In-page navigation element

text color font-family font-weight text-decoration #000000 Verdana Normal, Bold underline

When linked HTML text is used as a distinct navigational item, it should appear as shown above, although it can be all caps or upper and lower case text.

7.2

Body Text The basic typeface setting for body text is: Verdana 11pt. text / 13pt. leading Bold can be used for emphasis. Italics should not be used under any circumstances.

7.3

HTML Subheads These are set as follows: Arial Narrow Bold 12 pt, all caps

7.4

Form Elements

7.4.1 Phone Numbers

When a user is asked to enter a telephone number, there should be three fields with no hyphens in between each field: xxx xxx xxxx. Example: 617 867 1000 If the phone number is being used as a customer ID number, there should be one field to capture this number: xxxxxxxxxx.
7.4.2 Dates

When a user is asked to enter a date, there should be three fields with no slashes or other marks between each field: Month DD YYYY. Example: February 28, 2005
7.4.3 Addresses

Addresses should be captured with the following set of fields: Street Number, Street Name, Unit Number, Other Info, City, State, Country, ZIP code. (Please remember that ZIP is an acronym and must be capitalized.)

AT&T Consumer Style Guide

Page 39

7.4.4 Error Messages

Error messages appear at the top of a form if a user has not filled in a required form item, or has filled in a required form element incorrectly. The basic typeface setting for error messages is: Verdana 11pt. text / 13pt. leading, #660000 7.5 Footnotes These are set as follows: 7.6 Legal Text Legal text is set as follows: Verdana 9pt. text \ 11pt. leading, #666666 Verdana 7pt. text, superscripted

AT&T Consumer Style Guide

Page 40

8. Appendix
8.1 Search Engine Optimization Technical Notes Ensure the <title tag> is built around target keywords for that page. Every page should have a unique DESCRIPTIVE title. Recommended length is 5 to 15 words. Ensure each page contains meta tags to appeal to the search engine properties and to allow pages to be listed accurately. Utilize keywords in <H1> tags to indicate increased importance to search engines. Text-based conent should be placed near the top of your HTML code. Reference all JavaScript functions and style sheets externally. Remove large gaps between lines of code and especially at the top of a particular page. Remove items that have been "commented out" and other extraneous characters.

For more details, please refer to the Search Engine Marketing SEO Best Practices at AT&T guide.

AT&T Consumer Style Guide

Page 41