Website Style Guide

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.

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.

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 campus website.

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.yccd.edu/central-services/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 Apply” would have a permalink of:

• /how-to-apply

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 webmaster@yccd.edu to make changes to permalinks

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 :
  • 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.

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.

p>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 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 YCC Webmaster, webmaster@yccd.edu, if you have specific numbering scheme needs.

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

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.

See the WordPress: Block Quote How-To for instructions on creating block quotes.

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 ege. 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).
• If linking to another web page on a College site, use that page’s title and capitalize it appropriately.

Examples of Links

• Bad: Click here for the latest news and events.
• Bad: Our News and Events section has the latest updates from Yuba College and can be found by clicking here.
• Bad: Our News and Events section has the latest updates from Yuba College and can be found at: http://yc.yccd.edu/about/.
• Bad: Register for this event by filling out our online form.
• Bad: For more tips read this great article.
• Bad: This really informative website should be your next stop.
• Good: Our News and Events section contains the latest updates from Yuba College.
• Good: See the registration tips (PDF) document for further information.
• Good: Summer registration is now open.
• Good: The last blog post, How to Breed a Pet Ferret, created a lot of controversy.

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

To allow users to quickly email you they can click an email link. This will open their default email application.

Standards for Email Addresses

• Email addresses should be written out as active (clickable) links.
• Do not try to obfuscate your email address in an attempt to fool email harvesters; it does not work. WordPress will do this for you.
• Do not make the link text anything other than the email address itself.

Examples for Email Addresses

Good: jsmith@yccd.edu
Bad: jsmith [at] yccd dot edu
Bad: Email Prof. Smith

See the WordPress: Email How-To for instructions on creating email addresses.

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.

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 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, Marysville Appeal-Democrat .
• 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.

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, 2018.

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

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 Yuba College’s and Woodland Community College'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 helpdesk@yccd.edu if you need assistance placing 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 helpdesk@yccd.edu for assistance.

If there are concerns about making changes to an existing table, contact helpdesk@yccd.edu

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 helpdesk@yccd.edu before deleting pages.