Post on 03-Mar-2015
AT&T Consumer Style Guide Page 1
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 2
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
AT&T Consumer Style Guide Page 3
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
AT&T Consumer Style Guide Page 4
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
AT&T Consumer Style Guide Page 5
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 6
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
AT&T Consumer Style Guide Page 7
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.
AT&T Consumer Style Guide Page 8
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 9
• 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).
AT&T Consumer Style Guide Page 10
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.
AT&T Consumer Style Guide Page 11
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.
AT&T Consumer Style Guide Page 12
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.
AT&T Consumer Style Guide Page 13
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)
AT&T Consumer Style Guide Page 14
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.
AT&T Consumer Style Guide Page 15
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 16
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.
AT&T Consumer Style Guide Page 17
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 18
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.
AT&T Consumer Style Guide Page 19
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.
AT&T Consumer Style Guide Page 20
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
background-color: selected #003399
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.
AT&T Consumer Style Guide Page 21
4.2.3 Secondary Navigation
background-color: default #000000, #000066
background-color: selected #003399
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
background-color: selected #003399
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.
AT&T Consumer Style Guide Page 22
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.
AT&T Consumer Style Guide Page 23
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).
AT&T Consumer Style Guide Page 24
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-family Trade Gothic
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.
AT&T Consumer Style Guide Page 25
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
AT&T Consumer Style Guide Page 26
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.
AT&T Consumer Style Guide Page 27
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 28
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 29
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 Trade Gothic
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-family Trade Gothic
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-family Trade Gothic
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.
AT&T Consumer Style Guide Page 30
6.1.4 Masthead Four
font-family Trade Gothic
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.
AT&T Consumer Style Guide Page 31
6.2.2 Basic, Main Column
Title font-family Trade Gothic
Title font-weight Bold
Body font-family Verdana
Body font-weight Normal
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
Title font-family Trade Gothic
Title font-weight Bold
Body font-family Verdana
Body font-weight Normal
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.
AT&T Consumer Style Guide Page 32
6.2.4 With Call to Action
Title font-family Trade Gothic
Title font-weight Bold
Body font-family Verdana
Body font-weight Normal
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
Title font-family Trade Gothic
Title font-weight Bold
Body font-family Verdana
Body font-weight Normal
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.
AT&T Consumer Style Guide Page 33
6.2.6 With Tinted Background
Title font-family Trade Gothic
Title font-weight Bold
Body font-family Verdana
Body font-weight Normal
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.
AT&T Consumer Style Guide Page 34
6.2.7 With Picture
Title font-family Trade Gothic
Title font-weight Bold
Body font-family Verdana
Body font-weight 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, 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.
AT&T Consumer Style Guide Page 35
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
background-color #ffffff
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
AT&T Consumer Style Guide Page 36
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 #ffffff
text color #000000
font-family; font-weight Trade Gothic, Bold
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
background-color #ffffff
text color #000000
font-family; font-weight Trade Gothic, Bold
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.
AT&T Consumer Style Guide Page 37
6.4.3 Feature Three
background-color #ffffff
text color #000000
font-family; font-weight Trade Gothic, Bold
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
background-color #ffffff
text color #000000
font-family; font-weight Trade Gothic, Bold
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.
AT&T Consumer Style Guide Page 38
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).
AT&T Consumer Style Guide Page 39
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
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).
7.1.2 In-page navigation element
text color #000000
font-family Verdana
font-weight Normal, Bold
text-decoration 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 40
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
AT&T Consumer Style Guide Page 41
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.