att web guide

AT&T Consumer Style Guide

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


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..................................................................................................................................... 61.2 Business Objectives ................................................................................................................................ 61.3 Customer Objectives .............................................................................................................................. 6

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

2.1 Customer Service or Customer Aquisition?.......................................................................................... 72.2 The Five Tiers (Levels) of AT&T Consumer ....................................................................................... 72.3 Considerations for Sitelets ..................................................................................................................... 72.4 Considerations for Landing Pages ......................................................................................................... 72.5 Ingredient Brand Considerations ........................................................................................................... 7

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

3.1 Tone and Manner .................................................................................................................................... 83.2 Simplified English .................................................................................................................................. 83.3 Search Engine Optimization .................................................................................................................. 93.4 Style Principles ..................................................................................................................................... 10

3.4.1 Capitalization ...................................................................................................................... 103.4.2 Bulleted Lists/Numbered Lists .......................................................................................... 103.4.3 Numbers .............................................................................................................................. 103.4.4 Telephone Numbers............................................................................................................ 103.4.5 Dates .................................................................................................................................... 103.4.6 Money.................................................................................................................................. 103.4.7 Price Points.......................................................................................................................... 103.4.8 Time..................................................................................................................................... 113.4.9 Footnotes and Notes ........................................................................................................... 113.4.10 Service Marks ..................................................................................................................... 113.4.11 Superscripts ......................................................................................................................... 113.4.12 Terminology........................................................................................................................ 113.4.13 Resources ............................................................................................................................ 12

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

4.1 Templates .............................................................................................................................................. 144.1.1 Master Template, One Column Template ......................................................................... 144.1.2 Two Column Template: same widths................................................................................ 154.1.3 Three Column Template: same widths.............................................................................. 164.1.4 Three Column Template: different widths, symmetrical ................................................. 174.1.5 Two Column Template: different widths, asymmetrical left ........................................... 18


4.1.6 Two Column Template: different widths, asymmetrical right......................................... 194.2 Global Navigation Elements ................................................................................................................ 20

4.2.1 Global Header ..................................................................................................................... 204.2.2 Primary Navigation............................................................................................................. 204.2.3 Secondary Navigation ........................................................................................................ 214.2.4 Local Navigation................................................................................................................. 214.2.5 Global Footer ...................................................................................................................... 21

4.3 In-Page Navigation Samples................................................................................................................ 224.3.1 Call to Action Buttons ........................................................................................................ 224.3.2 Progress Meter .................................................................................................................... 224.3.3 Tab Systems ........................................................................................................................ 234.3.4 Text Links ........................................................................................................................... 23

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

5.1 Typography ........................................................................................................................................... 245.1.1 Fundamentals ...................................................................................................................... 245.1.2 Considerations for Mastheads and Headers ...................................................................... 245.1.3 Considerations for Features................................................................................................ 24

5.2 Color Palette.......................................................................................................................................... 255.2.1 Main Colors......................................................................................................................... 255.2.2 Accent Colors...................................................................................................................... 25

5.3 Photography .......................................................................................................................................... 265.3.1 Stock Photography Samples............................................................................................... 265.3.2 AT&T Photographic Library Samples .............................................................................. 265.3.3 Using Photography in Mastheads ...................................................................................... 275.3.4 Using Photography in Content Components..................................................................... 28

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

6.1 Mastheads.............................................................................................................................................. 296.1.1 Masthead One ..................................................................................................................... 296.1.2 Masthead Two..................................................................................................................... 296.1.3 Masthead Three................................................................................................................... 296.1.4 Masthead Four .................................................................................................................... 30

6.2 Content Components ............................................................................................................................ 306.2.1 Page Title and Introduction ................................................................................................ 306.2.2 Basic, Main Column ........................................................................................................... 316.2.3 Basic, Right Column .......................................................................................................... 316.2.4 With Call to Action............................................................................................................. 326.2.5 With Price Point.................................................................................................................. 326.2.6 With Tinted Background.................................................................................................... 336.2.7 With Picture ........................................................................................................................ 34

6.3 Headers .................................................................................................................................................. 356.3.1 Section Header .................................................................................................................... 356.3.2 Clickable Header................................................................................................................. 356.3.3 Nonclickable Header .......................................................................................................... 356.3.4 Graphic Subheads ............................................................................................................... 35

6.4 Features ................................................................................................................................................. 356.4.1 Feature One ......................................................................................................................... 366.4.2 Feature Two ........................................................................................................................ 36


6.4.3 Feature Three ...................................................................................................................... 376.5 Action Indicators................................................................................................................................... 376.6 Tabs ....................................................................................................................................................... 376.7 Linear Process Bar ................................................................................................................................ 386.8 Icons....................................................................................................................................................... 38

6.8.1 Visually Descriptive Icons ................................................................................................. 38

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

7.1 Hyperlink Text ...................................................................................................................................... 397.1.1 In-line links ......................................................................................................................... 397.1.2 In-page navigation element ................................................................................................ 39

7.2 Body Text.............................................................................................................................................. 397.3 HTML Subheads................................................................................................................................... 397.4 Form Elements ...................................................................................................................................... 39

7.4.1 Phone Numbers ................................................................................................................... 397.4.2 Dates .................................................................................................................................... 397.4.3 Addresses ............................................................................................................................ 397.4.4 Error Messages.................................................................................................................... 40

7.5 Footnotes ............................................................................................................................................... 407.6 Legal Text ............................................................................................................................................. 40

8. Appendix.......................................................................................................... 41

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


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.


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 site’s 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&T’s 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 user’s 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


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 they’ve come for without getting frustrated and abandoning the site. As they investigate the consumer site, it’s 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 user’s 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 user’s 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.


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.


• 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).

3.3 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).


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 internationalaudiences.

Example: Enjoy low rates on calls from home to countries worldwide at any hour, day or night, all for amonthly 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.


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 didn’t 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 customer’s 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.


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 customer’s 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 someone’s “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.


http://www.bartleby.com/Bartelby.com is a literary portal containing links to reference material such as Strunk’s Elements of Style, Roget’s Thesaurus and the American Heritage Dictionary.

http://www.economist.com/library/StyleGuide/index.cfmThe Economist’s 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) TIDD’s 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)


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 760 x 56

B: Primary BU Nav 760 x 25

C: Secondary BU Nav 760 x 25

D: Masthead 760 x 81

H: Global Footer 760 x 30

http://www.att.com/search?q= Search

http://www.att.com/terms/ Terms & Conditions

http://www.att.com/privacy/ 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. OneColumn Templates should be used when no Local or Utility Navigation structures are required. They are best suited to content-only pages and form pages.


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.


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 pagesare called Bridge Pages because they act as a bridge for the user, connecting the ACS Home Page and the Product Pages.


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.


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 columnfor content and a left column for navigation.


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 columnfor content and a right column for marketing messages, tools (like service finders where you enter your ZIP code) and other content.


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 #FFFFFF

background-color: selected #003399

text color #000000

font-family Verdana

font-weight 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 #FFFFFF


text color #000000

font-family Verdana

font-weight Normal

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


4.2.3 Secondary Navigation

background-color: default #000000, #000066


text color #ffffff

font-family Verdana

font-weight Normal

Several site areas represented in Corporate Primary Navigation will have a corresponding Secondary Navigation structure to allow consistent lateral movementthrough the site area’s sub-sections. These menus will be

consistent in placement and operation within the site areas in whichthey 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 #000066


text color: default #ffffff

text-color: selected #000066

font-family Verdana

font-weight 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, anda Local Sub-Navigation Menu. Not all Local Navigation Menus require Sub-Navigation components. The button for the page the user is currently viewing is distinguishedwith a solid color block at the left of a white background. This colorblock can be tinted to match the site it exists within.

4.2.5 Global Footer

font-family Verdana

text color #006633, #333333

font-weight Normal

The Global Footer resides at the bottom of all AT&T webpages, 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 includesthe text “Hosted by AT&T.” This line of text only needs to be on theatt.com and ACS home pages.


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 Usually #000000

font-family Trade Gothic

font-weight Bold

Background color Usually #ffffff

These treatments are used for actions like Click Here, Call Now, Continue, Back, Learn More, and Submit. Call to action buttons canbe 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 consistentthroughout 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 theuser navigate through a linear experience. An example of where it is used is a shopping cart, or a lengthy features selection process.


4.3.3 Tab Systems

background-color #ffffff

text color #000000

font-family; font-weight Trade Gothic, Bold

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

4.3.4 Text Links

text color #ef4028

font-family Verdana

font-weight Normal, Bold

text-decoration 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).


5. Design System: Guidelines

5.1 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-weight Bold or Normal

style CAPS or Initial caps

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

font-family Verdana

font-weight Bold or Normal

Body text 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 usein live code.

5.1.2 Considerations for Mastheads and Headers

Text in mastheads and headers should be very brief so the message’s 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.


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 This color is used often for AT&T CallVantage. 999900

669966

66ccff

669999

9933cc This color is used often for AT&T DSL. 000066 This color is used often for the AT&T ACS foundation pages. 003399

660066 This color is used often for AT&T DSL. 6699ff

006699

6699cc

cccccc

999999

666666

5.2.2 Accent Colors

These colors should be reserved for small elements like arrowhead graphics to discreetly lead the viewer’s 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 This color is used for the orange arrows. ffcc33

ff9900

ef4028 This color is the universal HTML unvisited link color. cc3333

ff9999

ffff66

fb0404


5.3 Photography

Photography is an integral design element on the site’s 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.


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.


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.


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-weight Bold This example demonstrates using a tightly cropped and sillhouettedportrait with an ‘&’ message to communicate benefit, energy, and AT&T’s unique market position.

6.1.2 Masthead Two


font-weight Bold This masthead has a full width image and a bold marketing messageto create a powerful sense of energy for AT&T DSL.

6.1.3 Masthead Three


font-weight 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.


6.1.4 Masthead Four


font-weight 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 Trade Gothic

Title font-weight Bold

Body font-family Verdana

Body font-weight 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 tohow the page will help them make their purchase

decisions.


6.2.2 Basic, Main Column





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

6.2.3 Basic, Right Column





Width 155px

Text-margin 13px

Space between title and text 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.


6.2.4 With Call to Action





When appropriate, call to action buttons can beincluded in a content component to prompt theuser 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 havethe orange arrow head facing to the left instead of to the right.

6.2.5 With Price Point





A prominent price point will help users quicklyunderstand 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.


6.2.6 With Tinted Background





Content components, or types of content components, can be differentiated from one another with tinted backgrounds. This has beenused to great effect in current releases as a

distinguishing characteristic of content components that contain form elements for the user to fill out.


6.2.7 With Picture





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, oftencontain call to action buttons, and sometimes have prices points and/or tints. These components require the most care to be designedeffectively and should be used sparingly to avoid overwhelming therest of the experience.


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 #000000

Font Trade Gothic

Weight 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 #ffffff

Font Trade Gothic

Weight 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 thisgraphic element.

6.3.3 Nonclickable Header

background-color ff33cc

text-color 000000

font-family; font-weight Arial Narrow Bold

Color in box at left 60a2e3

Color behind text 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


text color #000000

font-family; font-weight Arial Narrow Bold

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

6.4 Features


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


text color #000000


All caps

Colors of bands in bar at top #660066, #000066, #ff66cc, #33f3f3

Colors for text bar and price point

#660066, #000066, #ff66cc, #33f3f3

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

6.4.2 Feature Two


text color #000000


All caps

Color of large text #660066

Color of text in box #666699

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


6.4.3 Feature Three


text color #000000


All caps

Color of large text #660066

Color of text in box #666699

Colors of dotted box line #77d2ff, #9999cc

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

6.5 Action Indicators


text color #000000


To indicate that a graphic or HTML text is clickable (actionable), itshould 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 importantpart 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 elsewhereas appropriate.


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 asa visual description of content, users can rapidly find the product orservice they want. They can also be combined to represent a bundle(as shown here).


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 #ef4028

font-family Verdana



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 #000000

font-family Verdana



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.)


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: Verdana 7pt. text, superscripted

7.6 Legal Text

Legal text is set as follows: Verdana 9pt. text \ 11pt. leading, #666666


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.

att web guide

Documents