LBIS Website Style Guide

Goals for the Style Guide

  1. Establish conventions for the new LBIS website and make the many different areas of the site consistent and cohesive.
  2. Incorporate best practices for web writing and design.
  3. Ensure that our site complies with accessibility standards so that all users can get the most out of the information and services we provide.

Benefits of Following the Style Guide

Not only will style conventions make the site appear more consistent to our users--consistency in the code means that in some cases we can make changes in the style sheet and you won't have to go back and make changes to individual pages.

Guidelines

Some of these guidelines refer to the Drupal rich-text editor (below).

Drupal editor

Anchors

Internal page anchors (as in the left sidebar on the old LBIS site) should be avoided in most cases. Try organizing the content on long pages and splitting it into multiple shorter pages.

If you do need to use anchors, they should be at the top of your content, in an unordered list (bullets). To do this, use the < ul > and < li > tags, or click on the icon in the rich-text editor (1).

To use the rich-text editor to create anchors, highlight the anchor text (for example, a section heading), and click on the anchor icon (2). Name the anchor. Then, when you’re ready to insert a link to the anchored text, click on the link icon (also shown in 2) and choose from the drop-down menu of anchor names.

Block Quotes (Indenting)

The < blockquote > tag is used to indent text. However, do not indent unless you are quoting something. Like the heading tags below, this is a tag that isn't just used for formatting--it also carries meaning. We want our site to meet accessibility standards, and screen-reading devices won't recognize that we're indenting to make the text move over a few spaces; these devices will read our content as a huge quotation.

Images and Tables

  • Always include an image description and title.
  • Images should be no larger than 250 pixels (width) by 300 pixels (height), with the exception of screen shots and images used for documentation which can be 500 pixels wide. You can upload your original image--whatever size it is--and resize it in Drupal.
  • The preferred format for images is .jpg or .png, rather than .gif, .bmp, or .psd.
  • Tables cannot be wider than 500 pixels.
  • Maintain consistent image scale whenever possible—don't enlarge unless absolutely necessary.
  • Crop the non-relevant portions of images.
  • It's OK to use a red oval or circle to call attention to the relevant area of image, but don't add text or captions to a screenshot unless it's truly necessary to avoid confusion.
  • Screenshots should always follow their designated step in documentation.

Links

  • Do not make links bold.
  • Do not set links to open in a new window. If you use the Drupal editor to create links, select "Open in same window" as the link target.
  • Always use relative links to other LBIS pages.
    • Relative link: < a href = "/about" >
    • Absolute link: < a href = "http://lbis.kenyon.edu/about" >
  • To create relative links in the rich-text editor, click on the link icon (2) and enter the part of the URL that follows .edu/ . In the example above, you would just type about.
  • There should be no links to the web server "internal.kenyon.edu" or other servers that are behind the firewall. For every website on internal.kenyon.edu, there should be a redirect site on www1.kenyon.edu that will route internal users to the internal page, and external users to a nice error page. For assistance with these redirect URLs, talk to the web team.
  • If you're linking to a .pdf file, let users know by including (PDF file) after the link.

Naming Conventions

  • Apple Mail (for first use in document; Mail for successive uses)
  • Check/uncheck (for boxes used to mark configuration options)
  • Click (referring to button or tab on screen)
  • CONSORT (not Consort)
  • E-mail
  • ERes
  • Finder (Mac file-browsing interface; not The Finder or the finder)
  • H: drive (applies for O:, P:, etc.)
  • Helpline
  • OhioLINK (not Ohiolink or OhioLink)
  • Olin and Chalmers Libraries
  • Online
  • Press (touchscreen item or keyboard key)
  • Pulldown menu
  • QuickSearch
  • Restart (instead of reboot)
  • Run (used instead of start when referring to a program)
  • Select (for menu item)
  • Single- or double-sided printing
  • Start menu (not Start Menu or start menu)
  • the library (not the Library)

Page Titles

  • Set page titles in title case (capitalize first and last words, verbs, nouns; words like a, and, the aren't capitalized).
  • Express as Action: Operating System (ex.: Configuring Apple Mail for Securemail: OS X 10.5)
  • Begin page titles with a verb whenever possible.
  • Use of "How to" for documentation is inherent, thus redundant.

Text Formatting

  • Use the format box (3) to adjust the text size. The page content is in "paragraph" format (< p >).
  • For section headings, use mixed upper and lowercase letters. Do not use bold or italicized text for these headings--use tags (< h2 >, etc.) or selections from the format box (Heading 2, etc.) instead.
  • Don't use < h1 > on your page. This is the tag used in the title field.
  • < h2 > is used for main section headings.
  • < h3 > is used for sub-sections within main sections.
  • The heading tags aren't just used for formatting; they also convey the structure and signifcance of information on the page. (Example: If there are three main sections of content on the page, and those sections are of equal importance, they should all have the < h2 > heading. Subordinate points within each section would be < h3 >.)
  • Use italics instead of CAPITAL LETTERS or boldface for emphasis.
  • Item user selects (clicking or w/mouse; touchscreen)       Bold
  • Proper names (i.e., the Account Information window)      Italics
  • Exact characters user is asked to type                                    Monospace
  • Value that depends on your configuration or settings        <yourusername>

URLs

  • No spaces.
  • No capital letters--this creates confusion on our case-sensitive Unix-based web servers.
  • No ".html" at the end.
  • Take a look at the URL map to determine if there's already a "directory" that could include your pages (listed in the chart as URL 1). In most cases, your URL should only extend into the URL 2 or URL 3 column. Remember that URLs should be short and meaningful--the URL should say something about the content of the page, but not exactly reproduce its title.
    • Good URL: http: //lbis.kenyon.edu/research/guides/engl
    • Bad URL: http: //lbis.kenyon.edu/research/guides/englishliteraturesubjectguide

Wording

  • Direct user to a button                            Click OK (not "Click the 'OK' button")
  • Direct user to a menu item                    Select File > Print
  • Direct user to printer touchscreen       Press the Copy tab
  • Network drives                                         H: drive
  • Use numbered lists for step-by-step directions.
  • Use one list item per action or grouped set of actions.
  • Include a period at end of each list item.
  • For clarification, list location before action ("In the 2-sided Printing pulldown menu, select Off or Long Edge Binding."

Need Help?

If you have questions about this style guide or how to apply these standards to your pages, contact the Web Team for assistance. You can also check out Writing for the Web: Selected Resources.