Web Style Guide

Central Oregon Community College web pages use this style guide to ensure a professional and consistent appearance that supports the quality of the College and the COCC brand. 

This style guide applies to official COCC websites and pages. This includes all websites that are hosted by COCC and are maintained by COCC staff and faculty.

Creating Content
When creating content for the web, be sure to review the COCC graphic standards and style guide and writing style guide. The federal Plain Language Guides website is also an excellent resource. Best practices for web content include:

• Write web page content for a single audience rather than multiple audiences.
• Link to information that exists elsewhere on the COCC website rather than re-creating content.
• Most web page content should be written for the long term and avoid dates and time-specific information such as "starting this fall" or "because of changes to policy." Reserve this type of information to events or other date specific announcements.

Maintaining & Updating Content
Many times, maintenance of content can be more difficult than the initial creation of content. Develop a plan to maintain content. Establish a consistent schedule to review and maintain web content. Some pages need annual updates; others need monthly or daily work. Set a schedule and follow it.

• Remove outdated content and archive it on another storage device.
• Consistently update specific dates on pages if dates are indeed listed or cited.
• Pages that are incomplete should not be published to the web. Users become frustrated by "information coming soon" messages.

Assuring Quality
People who maintain official COCC websites should develop a quality assurance process and adhere to it. Such a process should include:

• Review pages and check to be sure all links work. This should be done at least once per term.
• Editorially check content for spelling, grammar, proper style, and correct errors.
• Check that the page works across multiple browsers (e.g., Google Chrome, Firefox, Safari). Note: Internet Explorer is no longer officially supported.
• Check to be sure the page also works on a mobile device.
• Make sure the page meets basic accessibility requirements.

Fonts

COCC uses carefully selected fonts, heading tags and css styles to ensure a consistent look across all pages.

Heading One (H1)

H1 heading style uses Josefin Sans (Google font) in all uppercase letters, with a color of #555 grey. Font size is 2.125rem on full desktop view and 1.5rem on mobile view.

Heading Two (H2)

H2 and below use Poppins (Google font) and appear darker in color, #0a0a0a. H2 size is 1.875rem (desktop), 1.25rem (mobile). 

Heading Three (H3)

H3 size 1.625rem (desktop), 1.1875rem (mobile). 

Heading Four (H4)

H4 size 1.4375rem (desktop), 1.125rem (mobile). 

Paragraph body text font is Arial, san-serif.

Images

Images can be used to enhance web pages and engage our web audience. Photography should primarily feature COCC campuses, students, faculty, and staff whenever possible. Limit use of stock photography of objects and concepts if COCC images are not available. The Marketing and Public Relations staff can help provide photos upon request.

• Do not use an image in place of text.
• Do not use clipart.
• Adhere to copyright laws and verify that you have permission to use an image. Most images found online are copyright protected.
• Photos and images should present a professional look to help convey COCC quality.
• For campus photo shoots, be sure to use the photo consent form for each student in the image.
• Photos should always include an "alt" tag, which provides a description of what’s happening in the picture. Alt tags are important for accessibility since they are read by screen readers to help vision impaired people understand the image. 
• Images for the web should be no larger than 1260 pixels wide and less than 500k in file size.
• Use images provided by Marketing and Public Relations when possible.

Visual examples of common image sizes:

Document Use

• PDF documents should only be used on the web for content that is intended to be printed such as forms and brochures.
• PDFs should be checked for ADA accessibility before uploading. 
• When possible, convert documents to HTML web pages. This provides better accessibility, usability and search.
• Avoid uploading Word Documents to the web. They may not open well on mobile devices.

Logo and mark

The Central Oregon Community College name, logo, wordmarks, and other identifying symbols are the property of the College and are protected by copyright laws. Commercial use and reproduction without permission is strictly prohibited. Since 2008, this mark has served as the exclusive logo for Central Oregon Community College.

COCC Symbol/Mark
Whenever possible, use the complete COCC logo. However, when spatial circumstances are extremely limited, it may be possible to use this single mark that has 'COCC' enclosed within the symbol. Exceptions include situations where sizing of the logo proportions would take the tagline below a legible type size.

Also see: additional info about COCC logo use.

Web Colors for the Logo
The web colors for the logo are based on the RGB color scheme and hexidecimal numbers for HTML. 

• Dark Blue: #2C5367
• Light Blue: #98AEC8
• Grey: #666666

Buttons and links
Links text are a big part of users access the web. No matter how a link or button looks, it should have a clear context that easily conveys what will happen when it is clicked. It is best to limit button text to one or two words.

Avoid using "Click here". Instead use an action word such as "Submit", "Download", or "Get Started".

A link description or "tool tip" can help convey any extra information a user will need to complete the action.

Hyperlink Button Styles:

Button Link (Standard)

Button Link (Large)

Video
Faculty and staff should be familiar with the photo consent and privacy rules. Video content that is streamed or embedded on any website must comply with the following:

• Violating the privacy rights of others is prohibited.
• Embedded content must not contain personal, private, or confidential information that is not directly relevant to the mission of the institution.
• Commercial transactions, advertisement, and unauthorized use of copyrighted material is prohibited.
• Videos must include text transcription for ADA compliance.
• Videos cannot be directly uploaded and stored on the COCC web server, but videos posted to video hosting platforms such as YouTube or Vimeo can easily be embedded.