Web Style Guide - brown.edu · page 2 table of contents navigation audience navigation masthead &...

Web Style Guide

KEY:

Fixed Dimension:

Variable Dimension:V1.1, SEPTEMBER 2010

Table of Contents

NavigationAUDIENCE NAVIGATION

MASTHEAD & SEARCH

TOPIC & TACTICAL NAVIGATION

BREADCRUMB NAVIGATION

FOOTER

SECONDARY & TERTIARY NAVIGATION

Column WidthsTHREE-COLUMN (MOST COMMON)

TWO-COLUMN

FOUR-COLUMN

Alternate Masthead & BannersMINIMAL MASTHEAD

FEATURE BANNER

SUBPAGE BANNER

ModulesSLIDESHOW

CALENDAR

FEATURE

INFORMATIONAL LISTS

Page TitlesDEPARTMENT

COMMON PAGE TITLE

SPECIAL PAGE TITLE

NEWS & ANNOUNCEMENTS

SECTION TITLE

Content TypesTOP STORY

ANNOUNCEMENTS

GENERAL BODY COPY

SUB HEAD

GATEWAY LIST

Page ElementsINLINE CITATION

PULL QUOTE

TABLE

BLOCK QUOTE

BULLETED LIST

FORM

Unique ElementsHOME PAGE

FEATURE PAGE

NEWS & EVENTS PAGE

Fonts & ColorsFONTS

COLORS

Web Writing GuidelinesWEB WRITING GUIDELINES

Web Style GuidePUNCTUATION

TECHNOLOGY & MARKETING-RELATED

TERMS

SCHOOL-SPECIFIC TERMS

OTHER

Video GuidelinesVIDEO

AUDIO

Recommended Template UsesHOME

NEWS & MULTIMEDIA

FEATURED CONTENT (ROBUST)

FEATURED CONTENT (LIGHT)

GENERAL CONTENT

GATEWAY

3

3

3

3

4

4

5

5

5

6

6

6

7

7

7

8

9

9

9

9

10

10

11

11

11

12

12

13

14

14

15

16

17

18

19

19

20

22

24

24

25

26

26

27

27

27

27

27

27

Navigation

AUDIENCE NAVIGATION

960

304

Vitesse Book10px#39352d

Vitesse Bold10px#39352d

#FFF#C00404

MASTHEAD & SEARCH

960

60

20

20

20

280366

60

1

TOPIC & TACTICAL NAVIGATION

BREADCRUMB NAVIGATION

840

3014

Vitesse Book16px

Vitesse Bold10px

940

#000Opacity: 70% #FFF#FFCC00

#261816

Lucida SansDemibold Roman

10px #2F2A20Letter-spacing: 2px 25

#979289

#FFFOpacity: 80%

Navigation

FOOTER

SECONDARY & TERTIARY NAVIGATION

960

10 15 15200 200

15

168

4

20

20

20

#261816

Lucida SansDemibold Roman 12px#FFF

Lucida SansRegular11px# FFCC00

Line-height: 19px

Lucida Sans Regular 12px #C00404

Line-height: 18px

Lucida Sans Regular 12px #C00404Line-height: 14pxPadding-left: 15px

Lucida Sans Regular 12px #2F2A20

Line-height: 18px

12px

10px30px

6px #C00404

Column Widths

160 520

700

220220

220

220

220220

20

20

20

20

20 20

THREE COLUMN (MOST COMMON SUB-PAGE LAYOUT)

TWO COLUMN

FOUR COLUMN

Alternate Masthead & Banners

55

4

55

940

340

200

410

MINIMAL MASTHEAD

FEATURE BANNER

SUB-PAGE BANNER

Minimum 940

Modules

195

Lucida SansDemibold Roman 10px #363636Letter-spacing: 2px

Lucida Sans Regular 12px #C00404Line-height: 17px

Lucida Sans Regular 12px #252525Line-height: 17px

20

15

13

SLIDESHOW

CALENDAR FEATURE

Lucida Sans Regular 12px #FFFLine-height: 16px

Vitesse Sans Bold12px #FFF

Vitesse Sans Thin24px #FFF

#ABA698

#FFCC00

1px #CDCAC1

10

10

10

10

30 170

Vitesse Bold16px #FFF

Vitesse Bold12px #363636

Vitesse Bold24px #363636Line-height: 27px


Width of yellow box is dependent upon width of title. Padding: 10px

45

105

Modules

INFORMATIONAL LISTSWidth is determined by its column.

Lucida Sans Regular 12px #2F2A20Line-height: 16px

Padding-left: 15pxPadding-right: 10px

1px #

Vitesse Bold16px #847D6A

40

40

Lucida SansDemibold Roman 10px #363636Letter-spacing: 2px

Page Titles


12px #FFFLetter-spacing: 2px


36px #2F2A20


Line-height: 50px

Vitesse Bold21px #2F2A20


DEPARTMENT

COMMON PAGE TITLE

SPECIAL PAGE TITLE

NEWS & ANNOUNCEMENTSSECTION TITLE

10

10

10

40

30

40

Lucida SansRegular

12px #363636Letter-spacing: 2px


24px #C00404Line-height: 28px

Content Types

TOP STORY

ANNOUNCEMENTS

520

Variable height. Should generally not exceed 520.


1px #2F2A20


Line-height: 21px

Lucida Sans Regular 16px #C00404


Line-height: 16px

#EEECE6

Variable

1523px #FFF

1px #D7D6D2

1015

20

Content Types

Visited Link#B78080

Link#C00404

#EEECE6 #ABA698

Georgia Regular 14px #2F2A20Line-height: 21px


Line-height: 21px

Lucida Sans Demibold 16px #2F2A20

Line-height: 21px



Line-height: 16px

251


Line-height: 18px

GENERAL BODY COPY

GATEWAY LIST

SUB HEAD

Lucida Sans Regular 10px #363636Letter-spacing: 2px

Lucida Sans Regular 10px #C00404Letter-spacing: 2px

Lucida Sans Italic 18px #847D6ALine-height: 22px

INLINE CITATION

PULL QUOTE

Page Elements

TABLE

Page Elements

15

10

#ABA698

#EFECE4

#D7D5D31px



Lucida Sans Demibold12px #2F2A20Line-height: 16px

Page Elements

Georgia Italic 14px #2F2A20Line-height: 21px

Georgia Regular14px #2F2A20Line-height: 28px

BLOCK QUOTE

BULLETED LIST

30

Lucida Sans Demibold 16px #2F2A20 Line-height: 21px

Georgia Regular14px #2F2A20Line-height: 21px

FORM

Page Elements

Lucida Sans Demibold 16px #2F2A20 Line-height: 21px

Lucida Sans Demibold 12px #C00404 Line-height: 21px


#ABA698

#EFECE4

Unique Elements

45

195

Vitesse Bold16px#FFCC00Line-height: 21px

Vitesse Bold36px #FFCC00

Line-height: 36px

hover state text:Lucida Sans Regular

12px #FFF

Lucida Sans Regular12px #3C3A35

hover state background:#989283

Padding top, bottom: 8pxPadding left, right: 10px

Lucida SansDemibold Regular

12px #FFFLetter-spacing: 2px

10



Lucida Sans Regular 12px #252525Line-height: 17px

Varies according to page height.

Varies according to page height.

158

65 #000 Opacity: 80%

220720

517

140

#CCC6B7

20

15

13

90

160

HOME PAGE

Lucida Sans Regular 16px #FFF

Line-height: 21px


3px #CCC6B7

410

15

FEATURE PAGE

Unique Elements

Unique Elements

55

10


6px #ABA698 1px #2F2A20

NEWS & EVENTS PAGENEWS & EVENTS PAGE

FONTS

COLORS

VitesseLucida Sans

Georgia

Fonts & Colors

#261816497 C

#2F2A20Black 2 C

#CCC6B8Warm Gray 3 C

#EFECE5Warm Gray 1 C

#C00404193 C

#FFCA00123 C

#645E50Warm Gray 9 C

#ACA698Warm Gray 6 C

Web Writing Guidelines

• Be succinct. If there’s a shorter, simpler way to say something, do it that way.

• Keep paragraphs short and the eye-swing narrow. This—especially if para-

graphs have topic sentences—speeds scanning and alleviates fatigue.

• Make copy “scannable.” Bulleted lists, hyperlinks (links imbedded in text), and

identifiable subsections bolster scanning of copy onscreen.

• The name of a link should match the name of the page it links to. Click on

“Admission” and you should get to a page named “Admission,” not “Getting

In” or “Forms & Applications.” There is more latitude with hyperlinks, but the

relevance between the name of the hyperlink and the page it links to should be

readily apparent. (Otherwise, visitors get irritated.)

• Use common nomenclature. A clever, but somewhat obscure, link name can

cause frustration and confusion. These should be used only on minor links

(links not on the main grid).

• Hyperlinks should be “phrased.” This means that a hyperlink should be more

than one word., such as “Admission to QU is selective.” The reason: It’s easier to

spot a phrase than a single word.

• Create “levels of information.” The most general level is on the top of the

hierarchy: It answers the most basic questions. The most detailed information is

at the bottom of the hierarchy. This hierarchy speeds reading: Users looking for

the gist get it right away; users looking for details, click downward, through links

or hyperlinks. This structure allows for great web-like structures of information

that reverberate with connections and ideas.

• 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

check the content of the linked page to ensure that it is relevant and will help the

reader.

• Avoid unnecessary directions, introductions, and other words , such as:

• Welcome to the Benneton College Weaving Department Web Page. This

suggests that Web pages aren’t an everyday communication tool, such as a

brochure or newspaper is. (“Welcome to the New York Times front page...”

See the problem?)

• Click here to find out more! The hyperlink should be imbedded in the

text—people know what a hyperlink is and what it will do without being

told to click.

• On this Web page you will find... The only time you’ll need to explicitly

state what is on the page is when the page is lengthy and dense.

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

ternal links so that the reader can scan the list of internal clinks (called anchors),

and then link to the section of the page that’s of interest, rather than scrolling in

a blind search.

• Remember you’re in a nonlinear medium. It’s possible for a visitor to reach

your page from Google...which means top-level pages in particular should rec-

ognize that the visitor is likely to need context. This is why the Admissions page

has introductory copy even though there’s an About page with introductory

copy. (But of course you don’t want to restate everything, so...be brief.)

• Use a style guide. Some institutions use a modified Chicago Manual of Style

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-

dated. Among recommended modifications to AP:

• Use the serial comma before the “and.”

• Italicize the names of courses when they appear in text.

• Use hyphens for phone numbers: 607-631-4000.

General Rules

Write to get across at least one big idea about a subject and to move users to

information they’re seeking. Your job is to balance engaging a reader with useful

information with copy that is easy and fast to read.

Use concise, easy to scan, and objective copy to allow users to process informa-

tion faster and more efficiently and to direct users to key information.

Avoid promotional speak. Web users know empty words, and false or exagger-

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

Web Writing Guidelines

pages.

Also consider other techniques that keep copy “scannable” for users,

while giving pages a cleaner, more open design. These techniques may

include adding tables of contents and section summaries; including bul-

lets, numbered lists, boldface and colored text to highlight keywords and

additional headings.

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

a site.

General rules of length:

Draft 150-250 words or less for primary landing pages

Draft 250-350 for secondary and tertiary pages (e.g., the deeper into the

site you go, the longer you can get)

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

Associated Press Stylebook. For issues not covered in either guide, see the

Chicago Manual of Style or Webster’s New Collegiate Dictionary.

Ampersands

Never use an ampersand instead of the word “and” in running text, even to save

space. Ampersands may be used in graphics or if they are part of an official

name:

•Women & Infants Hospital of Rhode Island

•Proctor & Gamble

Apostrophes

For plurals, use an apostrophe only to prevent confusion: CPAs, 1980s, Ph.D.s,

A’s and B’s, the Joneses. For possessives, use ’s after nouns ending in s, unless the

next word begins with s: the hostess’s invitation; the hostess’ seat. But use ’ alone

for proper names ending in s: Dickens’ novels.

Bullets

• Treat all items within a bulleted list consistently in terms of capitalization,

punctuation, sentence structure, etc.

• Treat all bulleted lists consistently within a document.

• Don’t use periods after each item in a list if the items are not complete sen-

tences. For instance:

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

Capitalization of Titles and Names

• Upper case is used only when the title is directly before the name: President Bill

Clinton, but John Jones, associate vice president of planning.

• Upper-case all titles when used in an address or headline.

• Generally, lower-case references to proper names when not used in full: the

program, the college, EXCEPT when referring to your particular institution: the

College, the Foundation, etc.

•See media outlets, below, for more information.

Colon

Capitalize the first word after a colon only if it is the start of a complete sentence.

Comma

• Use a comma before the last item in a series: a, b, and c.

• Use it to set off nonessential clauses and phrases.

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

Em Dash (—)

Use an em dash to indicate emphasis or explanation, to define a complementary

element, or to denote a sudden break in thought. Don’t put spaces around it.

The influence of three impressionists—Monet, Sisley, and Degas—can

clearly be seen in his development as a painter.

Web Style Guide

En Dash (–)

Use an en dash to connect continuing or inclusive dates, times, or reference

numbers. Don’t put spaces around it.

10 a.m.–7:30 p.m.

May–June 1967

1968–72

Hyphen

Phrases are hyphenated when used before a noun, but not after—unless the

hyphen is needed to prevent confusion:

A well-known man

He was well known.

A fuel-efficient furnace

The furnace is fuel efficient.

Her reply was thought-provoking.

A word ending in -ly followed by a participle or adjective is always open:

Poorly attired man

Overbearingly arrogant person

Italics

•Use italics for titles of complete, independent works: newspapers, books, maga-

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

one.)

Quotation Marks

• Commas and periods always go inside quotation marks.

• The dash, semicolon, question mark, and exclamation point go inside quota-

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

cake”?

Spacing

• Use one space, not two, between sentences and after a colon.

• Insert one line space before and after a bulleted list.

• Don’t insert the line spaces before or after a bulleted list within a bulleted list.

Time/Date

Lower-case and include periods (no spaces): 7:30 a.m.

Do not include minutes for even hours: 7 p.m. (not 7:00 p.m.)

Avoid redundancy: 7 a.m. today (not 7 a.m. this morning)

Use “noon” and “midnight” in running text rather than 12 a.m. or 12 p.m.

(also avoid the redundant “12 noon”)

AP style abbreviates month in full dates: Sept. 14, 2010

In text, put commas before and after the year: “On Sept. 12, 2009, she said ...”

TECHNOLOGY & MARKETING-RELATED TERMS SCHOOL-SPECIFIC TERMS

• AOL

• ecommerce

• email

• eStats

• FAQ

• hotlink

• hyperlink is used as both a noun and

• a verb

• HTML

• interactivity

• Internet

• intranet

• Java

• listserv

• login (noun—a username)

• log in (verb—Use this on a clickable

buttons.)

• online

• on-screen

• Perl

• readability

• scalability

• tagline

• themeline

• timeframe

• timeline

• UNIX

• classwork

• class years

There are many ways to denote class

years. In general, use the outward

facing apostrophe ( ’ ) without

commas. Mickey Mouse ’23 was an

top-notch student, but something of

a class clown.

• coursework

• day care

• fundraising

• health care

• long-term

• nonprofit

• not-for-profit

• viewbook

• URL / URLs

In text, use regular font. To cite

web sources, use bold and brack-

ets: <www.brown.edu> In general,

when writing a web address (www)

delete the http://. However, if the

URL doesn’t include www, keep the

http://.

• usability

• web

• website

• webmaster

Web Style Guide

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

Video Guidelines

AUDIO

Audio and Video Guidelines

Before you start producing your own video or audio recording at Brown Univer-

sity, you should think about the ways in which it can be distributed to your audi-

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.

VIDEO

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

NotethatvideoontheBrownHomepageisshownat720x405pixels(16:9ratio).Ifyourvideoisotherthan16:9,youmustconvertitto16:9forittoshowonthehomepage.

PleaserefertoouriTunesTechnicalGuidelines[http://brown.edu/web/itunes]formorespecificsonproducingvideoandaudiowhichwillworkverywelloniTunes,Vimeo,YouTubeandonourUniversitystreamingserver.

ForconsultingonyourproductionsandondistributionpleasecontactBrownMediaProductionGroup.

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.

Recommended Template Uses

Web Style Guide - brown.edu · page 2 table of contents navigation audience navigation masthead &...

Documents

Transcript of Web Style Guide - brown.edu · page 2 table of contents navigation audience navigation masthead &...