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.

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 not permitted.

Copy and Pasting Content From Another Source

To avoid creating inaccessible content, if you are copy/pasting text from another source such as a Word document or a PDF, you must paste it into the editor in a plain text format. You will the need to format the content using the methods described on this page and the WordPress How-Tos.

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

See the WordPress: Titles How-To for instructions on creating and editing web page titles.

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

Contact the website manager, Peter Hobley (phobley@hmc.edu), to make changes to permalinks.

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.

See the WordPress: Headings How-To for instructions on creating headings.

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.

See the WordPress: Paragraphs How-To for instructions on creating paragraphs.

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

See the WordPress: Bulleted Lists How-To for instructions on creating bulleted lists.

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. Contact the website manager, Peter Hobley, if you have specific numbering scheme needs.

See the WordPress: Numbered Lists How-To for instructions on creating numbered lists.

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

  • Links external to the hmc.edu domain are automatically appended with an external icon: Example of external link.
  • 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.
  • 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
    • Formstack
  • 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

See the WordPress: Links How-To for instructions on creating links.

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.

See the WordPress: Phone Numbers How-To for instructions on creating phone/fax numbers.

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.
  • Images that are not floated left or right must be wide enough to fill the entire content area (1000 pixels wide).
  • Preferred format for photographs is JPG.
  • Preferred format for graphics is PNG.
  • WordPress will create different sized versions of images as necessary. The original image uploaded should:
    • be no wider than 1000px (landscape)
    • be no taller than 1000px (portrait)
    • be 70 percent of original quality (for JPEGs)
    • be no larger than 100 KB file size but may be up to 200 KB.

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.

See the WordPress: Images How-To for instructions on inserting images.

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.

See the WordPress: Italics How-To for instructions on using italics.

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.

See the WordPress: Boldface How-To for instructions on using boldface.

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).
  • Users should not try to create their own tables. Tables need to be constructed appropriately to ensure accessibility and consistent style.
  • Contact Peter Hobley (phobley@hmc.edu) in the Office of Communications and Marketing if you need a table on a page.
  • While users may make edits to content within existing tables, attempting to delete or add rows or columns may break the layout of the page.
  • Do not copy a table from another application or website and ‘paste’ it into a web page. Contact Peter Hobley for assistance.

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.

Contact Peter Hobley (phobley@hmc.edu) in the Office of Communications and Marketing before deleting pages.