Search form

You are here

Home ยป Style Guide

Style Guide

Photography

Skewing and distorting an image is not allowed. Please only use high resolution images and save in appropriate image formats like JPG, PNG, and GIF.

When using images or video of students, staff, or visitors, please make sure all subjects have consented and signed a release form.

QCC Web Guidelines

To make all of our pages consistent in style and navigation, we follow the following rules:

General

  • Text blocks can to be defined depending on how they are being used on the page. To set a format, click somewhere in the text block, and select the format you want from the paragraph format menu for paragraphs and headers, or click the appropriate button for ordered and unordered lists.
  • If you are pasting text from Microsoft Word or another program, in most situations we use the "Paste as Plain Text" button. This will remove all formatting so your text will match the rest of the site.
  • Do not add blank lines to add spacing to your page. The spacing is built in to the styles and should be used for consistency.

Style

  • Never use ALL CAPS for emphasis- Convert to upper and lower case letters.
    • If the text is in a paragraph and needs emphasis, bold it.
    • If the text is a heading, use the appropriate heading tag.
  • Never use underlining as this could be confused with a link.
    • If the text is underlined because it is the name of a book, etc, italicize it.
    • If the text is underlined because it is a heading, use the appropriate heading format.
  • When entering copy, always use "e-mail" not "email", and "homepage" not "home page".
  • Abbreviations should not be used, if possible, as they are difficult for automatic translators and non-American audiences to understand.

Headings

Headings are a great way to make longer pages easier to scan and helps screen readers as well as search engine rankings. To create a section header on your page, click on the block of text and select the appropriate heading level from the paragraph format menu.

  • Always use header tags in numerical order. The title of the page is generated as a "Heading 1". Therefore, section headers should start with "Heading 2"s, sub-section headers should be "Heading 3"s and so on.
  • If the text block is a header for a section, use the appropriate header format selection. Do not try to emulate the look by using simply bolding the text. It may look the same on the screen, but screen readers and search engines read it differently.
  • Do not use heading format for a page's subtitle text, since this is just additional information, not a header of a new section. Instead, make the paragraph format a "Normal" and select the "Subtitle" style.
  • Do not use a heading format just to make something stand out on the page or for decoration. If it's not the heading of a new section, use a "Normal" paragraph format and select the "Promotional" style, or another appropriate style.

Paragraphs

Most of the text blocks on your page will be normal paragraphs. To create a paragraph on your page, click on the block of text and select "Normal" from the format menu.

The kind of paragraph a text block is can be changed by using the styles menu.

  • "Subtitle" - Used for a subtitle that appears under the main title.
  • "Promotional" - Used for promotional text. Typically makes the text bold and centered. Use this for things you want to stand out on the page but are not section headers. Use this sparingly on a page. If a whole page is emphasized, then none of it stands out.
  • "List Header" - See Lists section below
  • "Citation" - Used for citations and creates a hanging indent.
  • "Note" - Used if you have a note about the text, typically for footnote or legal type text.
  • "Sponsor Logos Paragraph" - Used if you will have a line of small logos on a page.
  • "Centered" - Used to center align a paragraph.
  • "Right" - Used to right align a paragraph.

Lists

Lists should be used whenever appropriate on your website since they are easy for a visitor to scan. To create a list, hilight the text blocks of your items and click on either the unordered list (bullets) or ordered list (numbers) button.

  • If there is a heading for the list, but it isn't actually a section header, such as "The following things are important:", use a paragraph with the "List Header" style which will make it bold and bring it closer to the list.
  • List items do not need to have a format selected, and shouldn't unless you plan to have multiple paragraphs in a single list item.
  • If it is possible to show information in a list rather than a table, always use a list instead. Lists are cleaner visually, wrap around graphics, and increase handicap accessibility.

Links

To create a link, hilight the text that will become a link, and then click the "LinkIt" button if you are linking to another page on the www.QCC.edu site, or click the "Link" button if you are linking to a page on another site.

  • Don't print a URL on a page. Always find the title of the page it links to and use that for the linking text. This helps blind users as well as search engines and just looks nicer, especially for long URLs.
  • E-mail links: The text of an e-mail link should be the person's e-mail address. Do not use an e-mail link around someone's name. Otherwise, if people print out the page, they will not know the person's e-mail address.  E-mail addresses in your text will become links automatically with spam reduction tricks, so do not try to make them links manually.
  • "Click Here": Do not use the words "click here" or other similar phrases for links. For handicap accessibility, links should be understandable out of context. Instead, rephrase the text so that you can link text describing what the person will get when they follow the link, preferably the title of the page.
  • Links off-site: When possible, external links should open in a new window.
randomness