Web style guide

Use of name and trademarks
1. Mystic Seaport
2. Logos, colors
3. Trademarks, usage of trademark symbols
Usage and punctuation
1. Standard reference [AP?]
2. Local exceptions [italicize names of vessels?, etc.]
Web page layout
1. Overall design philosophy. Make the Museum look so jaw-droppingly wonderful that people will just have to come for a(nother) visit. Show, don’t tell. Avoid anything that might be construed as an ad, especially carefully crafted graphics that might be confused with a web banner ad or sponsored placement. Our first goal is to invite website visitors to become a part of the Mystic Seaport community (“own a piece of the lifestyle”), not to sell them anything–if they want to be here, they’ll buy things soon enough. Maintain a consistent graphic look throughout, by sticking to the standards and avoiding stray one-off styles in images and fonts. At the same time, make sure that the standards and styles offer effective ways to promote Museum programs.
2. Standard content areas [what goes where on our pages?]
3. Optional full page layout [when is it appropriate?]
Page titles and headlines
1. Style and length. Usage. Keep titles short. Use ampersand in place of “and”. Avoid including “Mystic Seaport” in page titles–it’s already in the page banner.
2. Capitalization and markup. Capitalize words except articles and prepositions. Mark section titles as h3 headings, subsections as h4. If a page has a tagline at the top that works with the page title, mark it as an h2 heading. If a page is very hierarchical with many levels, use h2 heads for the highest level headings.
3. Images. Never include an image within a headline or title–before or after, but not within.
Text
1. Style, tone, voice
2. Markup. WordPress will automatically mark plain text as “paragraph” text; be thankful and don’t fight it. Take advantage of HTML’s automatic bullets and item numbering by using lists; don’t manually number or bullet items. Use bold and italic in accordance with the style guide. Never use underline; web readers are confused when underlined text is not a link. Never center or right-justify text.
Images
1. Selection [what makes a good image; what makes an appropriate image]
2. Sizes. Thumbnails 100×100, medium (full width of sidebar) 315 wide, large (full width of body) 650 wide.
3. Placement. With text in the page body use the predefined large (full width, align=none) or medium (roughly half-width, align=left or right) images. In the sidebar use medium images with align=none. WordPress will automatically place thumbnail size images in lists of calendar or news items.
4. Preparation for web [optimization, compression, color palette, ...]
Links
1. General rules. Don’t distract the reader from reading the current page. Avoid inline links in the page body unless they are immediately relevant to the point of the page. Provide action item links, submenu links and “related” or “learn more” links in the sidebar.
2. “Ads” and other cross-marketing links. Avoid anything that looks like a web ad–visitors are highly trained to ignore them, even if they aren’t, in fact, ads. Offer links to related programs in the sidebar, as if you are doing the visitor a favor by pointing out an opportunity. Offer cool stuff, don’t sell it.
Video, sound and other media
1. Selection
2. Preparation and hosting. Host video and sound files on YouTube or another web service.
3. Placement on page
Guidelines for individual page types
1. Home page
  1. Objectives, overall effect, messages, tone [what are we trying to convey?]
  2. Main slider [what belongs here? + image and caption guidelines]
  3. Calendar events [what belongs here?]
  4. Mystic Seaport-related news items [what belongs here?]
  5. World new items [what belongs here?]
2. Events
  1. Major events, series, programs and perennial events
  2. Events
  3. Standing or long-term events [exhibitions, exhibits]
3. Points of interest
  1. Style, voice
  2. Desired content
4. Gallery artists, works and exhibitions
5. Sponsors