Web Style Guide
KEY:
Fixed Dimension:
Variable Dimension: V1.1, SEPTEMBER 2010 Table of Contents
Navigation Page Titles Fonts & Colors 3 AUDIENCE NAVIGATION 9 DEPARTMENT 19 FONTS 3 MASTHEAD & SEARCH 9 COMMON PAGE TITLE 19 COLORS 3 TOPIC & TACTICAL NAVIGATION 9 SPECIAL PAGE TITLE 3 BREADCRUMB NAVIGATION 9 NEWS & ANNOUNCEMENTS Web Writing Guidelines 4 FOOTER SECTION TITLE 20 WEB WRITING GUIDELINES 4 SECONDARY & TERTIARY NAVIGATION Content Types Web Style Guide Column Widths 10 TOP STORY 22 PUNCTUATION 5 THREE-COLUMN (MOST COMMON) 10 ANNOUNCEMENTS 24 TECHNOLOGY & MARKETING-RELATED 5 TWO-COLUMN 11 GENERAL BODY COPY TERMS 5 FOUR-COLUMN 11 SUB HEAD 24 SCHOOL-SPECIFIC TERMS 11 GATEWAY LIST 25 OTHER Alternate Masthead & Banners Page Elements Video Guidelines 6 MINIMAL MASTHEAD 12 INLINE CITATION 26 VIDEO 6 FEATURE BANNER 12 PULL QUOTE 26 AUDIO 6 SUBPAGE BANNER 13 TABLE 14 BLOCK QUOTE Recommended Modules 14 BULLETED LIST Template Uses 7 SLIDESHOW 15 FORM 27 HOME 7 CALENDAR 27 NEWS & MULTIMEDIA 7 FEATURE Unique Elements 27 FEATURED CONTENT (ROBUST) 8 INFORMATIONAL LISTS 16 HOME PAGE 27 FEATURED CONTENT (LIGHT) 17 FEATURE PAGE 27 GENERAL CONTENT 18 NEWS & EVENTS PAGE 27 GATEWAY
Page 2 Navigation
AUDIENCE NAVIGATION
960
30 4 #FFF Vitesse Book Vitesse Bold #C00404 10px 10px #39352d #39352d
MASTHEAD & SEARCH
960 20 20 60 20 366 #261816 280
TOPIC & TACTICAL NAVIGATION
940 840
60 1 Vitesse Book Vitesse Bold #000 30 16px 10px #FFCC00 Opacity: 70% #FFF 14
BREADCRUMB NAVIGATION
#FFF Lucida Sans Opacity: 80% Demibold Roman 10px #2F2A20 Letter-spacing: 2px 25 #979289
Page 3 Navigation
FOOTER
960 4 20
168
20
20
#261816 10 15 15 15 200 200
SECONDARY & TERTIARY Line-height: 19px NAVIGATION
Lucida Sans Regular 12px #2F2A20 6px #C00404 Lucida Sans Lucida Sans Line-height: 18px Demibold Roman Regular 12px 11px Lucida Sans Regular #FFF # FFCC00 12px #C00404 Line-height: 14px Padding-left: 15px
Lucida Sans Regular 12px #C00404 Line-height: 18px
12px
30px 10px
Page 4 Column Widths
THREE COLUMN (MOST COMMON SUB-PAGE LAYOUT) 20 20 160 520 220
TWO COLUMN 20 700 220
FOUR COLUMN 20 20 20 220 220 220 220
Page 5 Alternate Masthead & Banners
MINIMAL MASTHEAD 4 55
55
940 FEATURE BANNER
340
410
Minimum 940 SUB-PAGE BANNER
200
Page 6 Modules
SLIDESHOW 15
195 13
Lucida Sans Lucida Sans Regular Lucida Sans Regular Demibold Roman 12px #C00404 12px #252525 20 10px #363636 Line-height: 17px Line-height: 17px Letter-spacing: 2px
CALENDAR FEATURE 10 10 30 170 Width of yellow box is dependent upon width of title. Padding: 10px Vitesse Bold 16px #FFF 10 10 Lucida Sans Regular 12px #FFF Line-height: 16px 45 Vitesse Bold 12px #363636 Vitesse Sans Bold 12px #FFF
Vitesse Sans Thin 24px #FFF Vitesse Bold 24px #363636 #ABA698 105 Line-height: 27px #FFCC00
Vitesse Bold 1px #CDCAC1 10px #FFF
Page 7 Modules
INFORMATIONAL LISTS Width is determined by its column. Vitesse Bold 16px #847D6A
1px # Lucida Sans Demibold Roman 10px #363636 Lucida Sans Regular 40 Letter-spacing: 2px 12px #2F2A20 Line-height: 16px 40
Padding-left: 15px Padding-right: 10px
Page 8 Page Titles
DEPARTMENT Lucida Sans Demibold Roman 12px #FFF Letter-spacing: 2px
Vitesse Bold 54px #FFF Line-height: 50px 40
COMMON PAGE TITLE Lucida Sans Demibold Roman 36px #2F2A20
10
SPECIAL PAGE TITLE
40
Vitesse Bold 21px #2F2A20
10
NEWS & ANNOUNCEMENTS 30 SECTION TITLE Vitesse Bold 36px #2F2A20 10
Page 9 Content Types
TOP STORY
Lucida Sans Regular 12px #363636 Letter-spacing: 2px
Lucida Sans Demibold Roman 24px #C00404 Variable height. Should Line-height: 28px generally not exceed 520.
520
10 15 ANNOUNCEMENTS Lucida Sans Regular 16px #2F2A20 Line-height: 21px #EEECE6 Lucida Sans Regular 12px #2F2A20 20 Line-height: 16px
Variable Lucida Sans Regular 3px #FFF 12px #2F2A20 152 1px #D7D6D2 Line-height: 16px Lucida Sans Regular 16px #C00404
1px #2F2A20 Page 10 Content Types
GENERAL BODY COPY SUB HEAD
Georgia Regular Lucida Sans Regular 14px #2F2A20 16px #2F2A20 Line-height: 21px Line-height: 21px
Visited Link #B78080
Link #C00404 Lucida Sans Regular 11px #2F2A20 Line-height: 16px Lucida Sans Demibold 16px #2F2A20 Line-height: 21px
GATEWAY LIST #EEECE6 #ABA698
Lucida Sans Regular 25 12px #2F2A20 1
Lucida Sans Regular 12px #2F2A20 Line-height: 18px
Page 11 Page Elements
INLINE CITATION Lucida Sans Regular 10px #C00404 Letter-spacing: 2px
PULL QUOTE
Lucida Sans Italic 18px #847D6A Line-height: 22px
Lucida Sans Regular 10px #363636 Letter-spacing: 2px
Page 12 Page Elements
TABLE #ABA698
15
#EFECE4
Lucida Sans Demibold Lucida Sans Regular 12px #2F2A20 12px #C00404 #D7D5D3 Line-height: 16px Line-height: 16px 10 1px
Lucida Sans Regular 12px #2F2A20 Line-height: 16px
Page 13 Page Elements
BLOCK QUOTE
Georgia Italic 14px #2F2A20 Line-height: 21px
30
BULLETED LIST
Lucida Sans Demibold 16px #2F2A20 Line-height: 21px
Georgia Regular 14px #2F2A20 Line-height: 28px
Page 14 Page Elements
FORM Lucida Sans Demibold 16px #2F2A20 Line-height: 21px
Lucida Sans Regular 10px #363636 Letter-spacing: 2px
#ABA698
#EFECE4
Georgia Regular 14px #2F2A20 Line-height: 21px
Lucida Sans Demibold 12px #C00404 Line-height: 21px
Page 15 Unique Elements
HOME PAGE
720 220
Varies according to page height.
158
517
Lucida Sans Demibold Regular 65 12px #FFF #000 Opacity: 80% Letter-spacing: 2px
Vitesse Bold 36px #FFCC00 Line-height: 36px Vitesse Bold 140 16px #FFCC00 hover state text: Line-height: 21px Lucida Sans Regular 12px #FFF Varies according to page height. hover state background: #CCC6B7 45 #989283 160 15 Padding top, bottom: 8px Padding left, right: 10px 90
10 195 13 Lucida Sans Regular 12px #3C3A35
Lucida Sans Regular Lucida Sans Regular Lucida Sans Regular 10px #363636 12px #C00404 12px #252525 20 Letter-spacing: 2px Line-height: 17px Line-height: 17px
Page 16 Unique Elements
FEATURE PAGE
15
410 Lucida Sans Regular 16px #FFF Line-height: 21px
Vitesse Bold 3px #CCC6B7 16px #2F2A20
Page 17 Unique Elements
NEWS & EVENTS PAGE
55
Vitesse Bold 54px #2F2A20 10
6px #ABA698 1px #2F2A20
Page 18 Fonts & Colors
FONTS Vitesse Lucida Sans Georgia
COLORS
#261816 #2F2A20 #645E50 #ACA698 497 C Black 2 C Warm Gray 9 C Warm Gray 6 C
#CCC6B8 #EFECE5 #C00404 #FFCA00 Warm Gray 3 C Warm Gray 1 C 193 C 123 C
Page 19 Web Writing Guidelines
• Be succinct. If there’s a shorter, simpler way to say something, do it that way. • Guard against irrelevant hyperlinking. Just because you use a word that is the name of another page on your site doesn’t mean that it is relevant. Be sure to • Keep paragraphs short and the eye-swing narrow. This—especially if para- check the content of the linked page to ensure that it is relevant and will help the graphs have topic sentences—speeds scanning and alleviates fatigue. reader.
• Make copy “scannable.” Bulleted lists, hyperlinks (links imbedded in text), and • Avoid unnecessary directions, introductions, and other words , such as: identifiable subsections bolster scanning of copy onscreen. • Welcome to the Benneton College Weaving Department Web Page. This suggests that Web pages aren’t an everyday communication tool, such as a • The name of a link should match the name of the page it links to. Click on brochure or newspaper is. (“Welcome to the New York Times front page...” “Admission” and you should get to a page named “Admission,” not “Getting See the problem?) In” or “Forms & Applications.” There is more latitude with hyperlinks, but the • Click here to find out more! The hyperlink should be imbedded in the relevance between the name of the hyperlink and the page it links to should be text—people know what a hyperlink is and what it will do without being readily apparent. (Otherwise, visitors get irritated.) told to click. • On this Web page you will find... The only time you’ll need to explicitly • Use common nomenclature. A clever, but somewhat obscure, link name can state what is on the page is when the page is lengthy and dense. cause frustration and confusion. These should be used only on minor links (links not on the main grid). • Use subheads, section titles, and anchors. When you use lots of stuff that belongs together on a single page (student organizations, for instance), create in- • Hyperlinks should be “phrased.” This means that a hyperlink should be more ternal links so that the reader can scan the list of internal clinks (called anchors), than one word., such as “Admission to QU is selective.” The reason: It’s easier to and then link to the section of the page that’s of interest, rather than scrolling in spot a phrase than a single word. a blind search.
• Create “levels of information.” The most general level is on the top of the • Remember you’re in a nonlinear medium. It’s possible for a visitor to reach hierarchy: It answers the most basic questions. The most detailed information is your page from Google...which means top-level pages in particular should rec- at the bottom of the hierarchy. This hierarchy speeds reading: Users looking for ognize that the visitor is likely to need context. This is why the Admissions page the gist get it right away; users looking for details, click downward, through links has introductory copy even though there’s an About page with introductory or hyperlinks. This structure allows for great web-like structures of information copy. (But of course you don’t want to restate everything, so...be brief.) that reverberate with connections and ideas.
Page 20 Web Writing Guidelines
• Use a style guide. Some institutions use a modified Chicago Manual of Style pages. but Brown.edu relies primarily on Associated Press (AP) style, because the book itself is much easier to use, although the style can be quirky and sometimes out- Also consider other techniques that keep copy “scannable” for users, dated. Among recommended modifications to AP: while giving pages a cleaner, more open design. These techniques may • Use the serial comma before the “and.” include adding tables of contents and section summaries; including bul- • Italicize the names of courses when they appear in text. lets, numbered lists, boldface and colored text to highlight keywords and • Use hyphens for phone numbers: 607-631-4000. additional headings.
General Rules Remember that most web users are hurried and don’t always enter a site through the home page, so their first goal is often to orient themselves in Write to get across at least one big idea about a subject and to move users to a site. information they’re seeking. Your job is to balance engaging a reader with useful information with copy that is easy and fast to read. General rules of length:
Use concise, easy to scan, and objective copy to allow users to process informa- Draft 150-250 words or less for primary landing pages tion faster and more efficiently and to direct users to key information. Draft 250-350 for secondary and tertiary pages (e.g., the deeper into the Avoid promotional speak. Web users know empty words, and false or exagger- site you go, the longer you can get) ated statements. These distract users and cut your credibility.
Remove adjectives, whenever possible (e.g., “great” and “overwhelming”), buz- zwords (e.g., “paradigm”), and claims unsupported with evidence.
Avoid overly detailed information. What you take out of copy is as important as what you leave in.
Keep sentences short, arranged in short paragraphs. Consider setting off para- graphs with subheads, as users tend to skim on the web.
Consider the use of hypertext to split long text into smaller and more focused
Page 21 Web Style Guide
This guide contains common style issues, some exceptions to AP style, and Brown University spellings. If your question is not answered in this guide, see Capitalization of Titles and Names Associated Press Stylebook. For issues not covered in either guide, see the • Upper case is used only when the title is directly before the name: President Bill Chicago Manual of Style or Webster’s New Collegiate Dictionary. Clinton, but John Jones, associate vice president of planning. • Upper-case all titles when used in an address or headline. Ampersands • Generally, lower-case references to proper names when not used in full: the Never use an ampersand instead of the word “and” in running text, even to save program, the college, EXCEPT when referring to your particular institution: the space. Ampersands may be used in graphics or if they are part of an official College, the Foundation, etc. name: •See media outlets, below, for more information. • Women & Infants Hospital of Rhode Island • Proctor & Gamble Colon Capitalize the first word after a colon only if it is the start of a complete sentence. Apostrophes For plurals, use an apostrophe only to prevent confusion: CPAs, 1980s, Ph.D.s, Comma A’s and B’s, the Joneses. For possessives, use ’s after nouns ending in s, unless the • Use a comma before the last item in a series: a, b, and c. next word begins with s: the hostess’s invitation; the hostess’ seat. But use ’ alone • Use it to set off nonessential clauses and phrases. for proper names ending in s: Dickens’ novels. • After a city name, use it to set off names of states, counties, and countries. • Use it in numbers higher than 999: 1,000,000. Bullets • Treat all items within a bulleted list consistently in terms of capitalization, Em Dash (—) punctuation, sentence structure, etc. Use an em dash to indicate emphasis or explanation, to define a complementary • Treat all bulleted lists consistently within a document. element, or to denote a sudden break in thought. Don’t put spaces around it. • Don’t use periods after each item in a list if the items are not complete sen- The influence of three impressionists—Monet, Sisley, and Degas—can tences. For instance: clearly be seen in his development as a painter. • The pantry contains: • Apples • Bananas • Oranges • When a bullet point contains a complete sentence, use a period after each bullet in the list and capitalize each item.
Page 22 Web Style Guide
En Dash (–) one.) Use an en dash to connect continuing or inclusive dates, times, or reference numbers. Don’t put spaces around it. Quotation Marks 10 a.m.–7:30 p.m. • Commas and periods always go inside quotation marks. May–June 1967 • The dash, semicolon, question mark, and exclamation point go inside quota- 1968–72 tion marks when they only apply to the quoted matter. They go outside when they apply to the whole sentence: Did you know that she said, “Let them eat Hyphen cake”? Phrases are hyphenated when used before a noun, but not after—unless the hyphen is needed to prevent confusion: Spacing A well-known man • Use one space, not two, between sentences and after a colon. He was well known. • Insert one line space before and after a bulleted list. A fuel-efficient furnace • Don’t insert the line spaces before or after a bulleted list within a bulleted list. The furnace is fuel efficient. Her reply was thought-provoking. Time/Date Lower-case and include periods (no spaces): 7:30 a.m. A word ending in -ly followed by a participle or adjective is always open: Do not include minutes for even hours: 7 p.m. (not 7:00 p.m.) Poorly attired man Avoid redundancy: 7 a.m. today (not 7 a.m. this morning) Overbearingly arrogant person Use “noon” and “midnight” in running text rather than 12 a.m. or 12 p.m. (also avoid the redundant “12 noon”) Italics AP style abbreviates month in full dates: Sept. 14, 2010 •Use italics for titles of complete, independent works: newspapers, books, maga- In text, put commas before and after the year: “On Sept. 12, 2009, she said ...” zines, movies, plays, etc. Put quotes around titles of works that are contained within other works, such as articles.
Parentheses Try to avoid using parentheses. If you do, follow these rules: • Put the period outside the parentheses if they don’t contain a full sentence (like this). • (Put the period inside the parentheses if they contain a full sentence, like this
Page 23 Web Style Guide
TECHNOLOGY & MARKETING-RELATED TERMS SCHOOL-SPECIFIC TERMS
• AOL • URL / URLs • classwork • ecommerce In text, use regular font. To cite • class years • email web sources, use bold and brack- There are many ways to denote class • eStats years. In general, use the outward ets:
Page 24 Web Style Guide
OTHER
Media Outlets Use the AP style guide to confirm each outlet’s exact name and formatting.
Numbers Use figures for 10 and above. Spell out numbers one through nine, except when used with “percent” or “million,” such as 4 percent or 5 million. Spell out “per- cent” except in tables, where % is acceptable.
State Names Use AP Stylebook abbreviations for state names when following city name: The Selma, Ala., group saw the governor. Only use the two-letter postal ab- breviations if the zip code is included.
Telephone Numbers Use the fully hyphenated style: 800-444-2121
That/Which “Which” follows a comma. “That” doesn’t: The report that Marshall had tried to suppress was greeted with hilarity. The report, which Marshall had tried to sup- press, was greeted with hilarity.
Titles of books, films, TV shows, and other stand-alone media or publications are italicized. (See media outlets above for exceptions.) Titles of songs, poems, TV episodes, etc. that are don’t occur independently are placed in quotes. Soft- ware titles are treated as products: capped appropriately but not set off by italics or quotes.
Toll-free
Page 25 Video Guidelines
Audio and Video Guidelines Note that video on the Brown Homepage is shown at 720x405 pixels (16:9 Before you start producing your own video or audio recording at Brown Univer- ratio). If your video is other than 16:9, you must convert it to 16:9 for it to show sity, you should think about the ways in which it can be distributed to your audi- on the homepage. ence. Will your project be hosted on a Brown web-page? On Brown’s iTunesU site? On physical media, such as a DVD or CD? Selecting the proper equipment to use for video or audio recording is your fist step. If you need suggestions, con- tact Brown’s Media Production Group. AUDIO
VIDEO
Please refer to our iTunes Technical Guidelines [http://brown.edu/web/itunes] for more specifics on producing video and audio which will work very well on iTunes, Vimeo, YouTube and on our University streaming server.
For consulting on your productions and on distribution please contact Brown Media Production Group.
*720p is now available on small portable devices like Flip cameras and iPhone 4. 1080p is used by professional producers on- and off-campus. **The data-rate (bit-rate) for web-based content should be between 1000 and 1500kbps (as high as 2000kbps for Vimeo HD). FLV content should be a little lower: between 500-800kbps. DVD content should have an aver- age data-rate of 6.2Mbps for programs under 90 minutes, or 3.7Mbps for programs under 150 minutes.
Page 26 Recommended Template Uses
Home is a unique template and is not to be used for other purposes.
News & Multimedia should be used to display editorial and multimedia content multiple articles including online versions of print publications./
Featured Content (Robust) is meant for departments, schools, colleges, etc. that have large amounts of varied content including occasional announcements, department-specific events, relatively frequent news updates and featured multi- media.
Featured Content (Light) is meant for departments, schools, colleges, etc. that have smaller amounts of varied content. The main content area can accommo- date evergreen copy and the calendar is fed by the university’s event calendar.
General Content is available for content-heavy pages such as a news article or information about courses.
Gateway is best for holding collections or lists of links meant to direct visitors to more information.
Page 27