Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Web Style Guide
KEY:
Fixed Dimension:
Variable Dimension:V1.1, SEPTEMBER 2010
Page 2
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
Page 3
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%
Page 4
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
Page 5
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
Page 6
Alternate Masthead & Banners
55
4
55
940
340
200
410
MINIMAL MASTHEAD
FEATURE BANNER
SUB-PAGE BANNER
Minimum 940
Page 7
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
Vitesse Bold10px #FFF
Width of yellow box is dependent upon width of title. Padding: 10px
45
105
Page 8
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 9
Page Titles
Lucida SansDemibold Roman
12px #FFFLetter-spacing: 2px
Lucida SansDemibold Roman
36px #2F2A20
Vitesse Bold54px #FFF
Line-height: 50px
Vitesse Bold21px #2F2A20
Vitesse Bold36px #2F2A20
DEPARTMENT
COMMON PAGE TITLE
SPECIAL PAGE TITLE
NEWS & ANNOUNCEMENTSSECTION TITLE
10
10
10
40
30
40
Page 10
Lucida SansRegular
12px #363636Letter-spacing: 2px
Lucida SansDemibold Roman
24px #C00404Line-height: 28px
Content Types
TOP STORY
ANNOUNCEMENTS
520
Variable height. Should generally not exceed 520.
Lucida Sans Regular 12px #2F2A20Line-height: 16px
1px #2F2A20
Lucida Sans Regular 16px #2F2A20
Line-height: 21px
Lucida Sans Regular 16px #C00404
Lucida Sans Regular 12px #2F2A20
Line-height: 16px
#EEECE6
Variable
1523px #FFF
1px #D7D6D2
1015
20
Page 11
Content Types
Visited Link#B78080
Link#C00404
#EEECE6 #ABA698
Georgia Regular 14px #2F2A20Line-height: 21px
Lucida Sans Regular 16px #2F2A20
Line-height: 21px
Lucida Sans Demibold 16px #2F2A20
Line-height: 21px
Lucida Sans Regular 12px #2F2A20
Lucida Sans Regular 11px #2F2A20
Line-height: 16px
251
Lucida Sans Regular 12px #2F2A20
Line-height: 18px
GENERAL BODY COPY
GATEWAY LIST
SUB HEAD
Page 12
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
Page 13
TABLE
Page Elements
15
10
#ABA698
#EFECE4
#D7D5D31px
Lucida Sans Regular 12px #C00404Line-height: 16px
Lucida Sans Regular 12px #2F2A20Line-height: 16px
Lucida Sans Demibold12px #2F2A20Line-height: 16px
Page 14
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
Page 15
Georgia Regular14px #2F2A20Line-height: 21px
FORM
Page Elements
Lucida Sans Demibold 16px #2F2A20 Line-height: 21px
Lucida Sans Demibold 12px #C00404 Line-height: 21px
Lucida Sans Regular 10px #363636Letter-spacing: 2px
#ABA698
#EFECE4
Page 16
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 10px #363636Letter-spacing: 2px
Lucida Sans Regular 12px #C00404Line-height: 17px
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
Page 17
Lucida Sans Regular 16px #FFF
Line-height: 21px
Vitesse Bold16px #2F2A20
3px #CCC6B7
410
15
FEATURE PAGE
Unique Elements
Page 18
Unique Elements
55
10
Vitesse Bold54px #2F2A20
6px #ABA698 1px #2F2A20
NEWS & EVENTS PAGENEWS & EVENTS PAGE
Page 19
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
Page 20
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.)
Page 21
• 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)
Page 22
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.
Page 23
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 ...”
Page 24
TECHNOLOGY & MARKETING-RELATED TERMS SCHOOL-SPECIFIC TERMS
• AOL
• ecommerce
• 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
Page 25
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 26
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.
Page 27
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