Website Style Guide

This page contains information on the standards that are applied to Harvey Mudd College websites run on the WordPress platform and managed by the Office of Communications and Marketing.

It is to be used in conjunction with the Editorial Style Guide.

Adhering to these standards while creating and editing content will help ensure a consistent user experience.

See the WordPress How-Tos for step-by-step instructions on using the content editor.

Quick Guides

Specific guidances for common topics.

Content on New Pages

When creating new (or editing existing) pages, make sure you have sufficient content on it before publishing.

Pages that are empty or nearly empty and have “under construction” or “check back soon” or similar messages are to be avoided.

Page Titles

The title of a web page is the most important search engine optimization (SEO) factor. It will be used by search engine results as the title of a search snippet link.

Standards for Titles

Titles should:

  • Be highly relevant to the web pages to which they refer and include important keywords.
  • Be front-loaded with keywords.
  • Ideally contain fewer than 65 characters, although more are acceptable.
  • Be unique—not the same as any other web page on the Harvey Mudd website.
  • Follow the Editorial Style Guide for headlines.

Examples of Titles

Bad: Curriculum Vitae
Good: CV of Professor Brown
Best: Professor Brown’s Curriculum Vitae

WordPress allows users to customize the “permalink” of the web page; this is the last part of web page’s URL, shown in bold below:

  • https://www.hmc.edu/chemistry/this-is-the-permalink

WordPress automatically creates a permalink based on what is entered in the Title box. Special characters are removed and spaces are replaced with a hyphen.

For example, a web page with the title “How to Breed Ferrets” would have a permalink of:

  • /how-to-breed-ferrets

Standards for Permalinks

When creating permalinks, consider the following:

  • It should be similar or the same as the web page’s title.
  • Junk words (e.g., and, it, the, of, at) may be omitted.
  • Spaces between words should be replaced with a hyphen rather than an underscore.

Changing Permalinks

You can edit permalinks from the right settings sidebar in the editor. Select “Page” at the top and click the link next to “URL.”

Headings

Headings are the main organizational tool of a web page. Search engines use headings to index the structure and content. Users skim pages by headings, so they are important for quickly locating relevant information.

Headings are hierarchical, allowing content to be divided to four sub-levels (Note: There are six levels of heading available within HTML, the language used to construct web pages. However, we use only levels 1–4.)

Heading 1 is only used as the title of a web page; therefore Headings 2–4 are available for use within the content editor.

Standards for Headings

  • Headings should only be used as headings, not to make text big or bold.
  • Headings must be followed by associated content; they must not be used on their own.
  • Headings must be used logically and hierarchically.
  • The first level of heading within the content area must be Heading 2. Break content into sections, each with an appropriate Heading 2.
  • Heading 3 is used to subdivide content that is related to the Heading 2 above it.
  • Heading 4 can be used to subdivide content that is related to the Heading 3 above it.
  • If content needs to be subdivided beyond Heading 4, consider reorganizing it or creating new web pages.
  • The heading copy should be relevant to the section it begins.
  • Do not use colon at end of heading (e.g., “Today’s Menu:”).
  • Headings must be capitalized in accordance with the editorial style guide for headlines:
    • Capitalize words in headlines that are longer than three letters (including prepositions).
    • Don’t use punctuation unless it’s a question mark.
  • Headings that are phrased as a question (e.g. on FAQ-type pages) may use sentence-style capitalization.
  • Do not create headings by making normal paragraph text bold.

Paragraphs

Most content will be copy contained in paragraphs.

Standards for Paragraphs

  • Paragraphs are aligned left, not justified.
  • The first word of a paragraph is not indented.
  • Paragraphs should not be italicized.
  • There should be a single space after a period before the next sentence. No exceptions!
  • New paragraphs are started with a single press of return/enter.

Bulleted (Unordered) Lists

Unordered lists are used for listing content (e.g., documents, dates) when no order of precedence or importance is required.

Standards for Unordered (Bulleted) Lists

  • Bulleted lists are configured by WordPress to be square and aligned with the left edge of any heading or paragraph above or below it.
  • Hyphens, en dashes or em dashes ( -, –, —) should not be used to make bulleted lists.
  • If list items contain more than a few words (i.e., they contain sentences), unordered lists are not the best option. Instead, separate each item into a heading followed by body paragraph(s).

Numbered (Ordered) Lists

Numbered lists are similar to bulleted lists, but with a numbering (or lettering) order applied by the browser.

Ordered lists may be used to mark up a series of steps that someone has to undertake, a table of contents or a numbered list of references.

Standards for Ordered Lists

  • Numbers used are decimal (1, 2, 3).
  • Nested lists use lowercase alphanumeric characters (a, b, c).

The numbers used or type used on nested lists can be customized to meet specific needs, such as article/sub-articles in a legal or pseudo-legal document.

Block Quote

Block quote is used to display quotes from other sources. It is styled appropriately so as to be visually different from the main copy. It is only to be used for quoting actual sources, not as a shortcut for indenting text.

  • Use to display a block of text quoted from a person or another document or source.
  • If long, paragraphs may be nested within.
  • Do not use a block quote to create an indent of text.

Hyperlinks (or “links”) are used to direct a user to another website, web page or document. They also open email, phone and fax clients.

Standards for Links

  • The text of the link should provide enough information when read out of context. Use text that describes the link destination.
  • Never explain how to use a link e.g. Do not use “click here”, “this link”.
  • Never use meaningless or generic text such as “learn more”, “read more” , “online form”, “application”.
  • Wherever possible, place the link text as close as possible to the front of a sentence.
  • The link text should not be the URL itself (exception: see Email Links below).
  • When followed, links to other web pages should not open a new browser window or tab (the system is automatically configured to prevent this).
  • Links to documents and forms will automatically open a new browser tab:
    • PDF
    • Microsoft Word, Excel
    • Google Drive
  • Any link to a file or document should be appended by an indicator of its file type in parentheses. This should form part of the link text itself:
    • PDF
    • MS Word
    • MS Excel
    • MS PowerPoint
    • Google Doc
  • If linking to another web page on the College site, use that page’s title and capitalize it appropriately.

Examples of Links

Email Links

On web pages, email addresses should be spelled out and hyperlinked.

Do not embed the email address in text as you do for content-related hyperlinks. Spelling out the email address makes it as clear as possible that by clicking/tapping on the link, you will email that person. It is also a best practice to capitalize each new word in an email address.

Phone and Fax Numbers

Making telephone and fax numbers clickable allows users to activate their computer or smartphone’s calling functionality.

Standards for Phone and Fax Numbers

Telephone numbers must follow the editorial style guide:

  • Preferred format: 909.621.8000.
  • Extensions as “ext. 2345” not “x2345.”
  • For the website, all telephone numbers should be written in full so they are easily dialed by users not using campus phones. You may include the extension in addition to the full number.

Images

Standards for Images

There is a certain degree of flexibility with image placement and dimension ratios (height x width). However, the following standards apply:

  • Images may be aligned to the left (wrapped), left (no wrap), right (wrapped), right (no wrap) or centered (no wrap and center align).
  • Images may be landscape (wider than tall) or portrait (taller than wide).
  • An optional caption can be displayed under images.
  • Images must have an “alt” text attribute that describes the content of the image.
  • Preferred format for photographs is JPG.
  • Preferred format for graphics is PNG

Images and Accessibility

Images must have text alternatives that describe the information or function represented by them. This ensures that images are accessible to the maximum number of users.

To determine the correct usage of alternative text for any given image, view the Alt Decision Tree and Alternative Text Guide.

Italics

Italics have a number of specific use cases, but must be used sparingly.

Standards for Italics

  • TV programs, movies, music albums, books, magazines, plays, journals and newspapers should be italicized: The New York Times, Harvey Mudd College Magazine.
  • Online magazines, journals and scholarly publications also should be italicized. Works of art (paintings, drawings, sculptures) are also typically italicized.
  • Do not italicize the name of a newspaper or periodical that is part of the name of a building, organization, prize or the like: Los Angeles Times Book Award, Tribune Tower.
  • Ship names: We set sail aboard RMS Titanic.
  • Taxonomic designation, technical terms and idiomatic phrases from another language are also appropriate for italicization.
  • Italics should be used for general emphasis on individual words or short phrases.
  • Do not italicize whole sentences or paragraphs. If you need to make content stand out (e.g. an important point to be noted) consider using an appropriate heading.

Bold

Making text bold can draw attention to keywords and content. However, overuse can rapidly diminish its effectiveness.

Standards for Bold

  • Do not apply bold to headings (they are already bold).
  • Using bold for emphasis is rarely appropriate.
  • Never apply bold to entire sentences or paragraphs.
  • For important points or notes, use the following format:
    Note: The deadline for submission is July 15, 2015.

Adding Emphasis

Headings are the preferred method for drawing user attention to important information.

Standards for Italics as Emphasis

See Italics above.

Standards for Bold as Emphasis

See Bold above.

Standards for Underlining as Emphasis

Underlining headings and body copy is not permitted.

Standards for Text Color as Emphasis

Changing text color is not permitted.

Standards for Other Punctuation as Emphasis

Do not use other characters or punctuation to draw attention to content. Use a heading or italics instead.

For example, do not use formatting such as:

***THIS LINK IS REALLY IMPORTANT***

##This has a nice flourish to it, no?##

Standards for Uppercase as Emphasis

Do not use uppercase to add emphasis to words. Uppercase is acceptable for acronyms and proper nouns where appropriate, e.g., LEGO, NASA, NSF.

Tables

For many years, HTML tables were used to control the layout of web pages. This was deemed inappropriate, as it was not their original intended use.

It is not considered best practice for a modern website and can even create problems for responsive sites, such as Harvey Mudd’s.

Standards for Tables

  • Tables are only to be used for data that warrants a table format (such as menus, calendars, course details, etc).

If there are concerns about making changes to an existing table, contact Peter Hobley (phobley@hmc.edu) in the Office of Communications and Marketing.

Deleting Pages

Deleting pages is easy but must be done with caution as inbound links can be broken. Page links will also need to be removed from the menus.