MC Brand on the Web

The audiences we reach are more likely to encounter the Merced College brand online than via any other medium. This makes delivering high-quality, effective, and consistent digital experiences critical to serving our varied audiences and achieving our institutional goals. Our visual identity reflects more than artistic designs and thoughtful type styles; it speaks volumes about our values and image.

Thank you for being part of efforts to develop and communicate our brand. View our web How To's.

Need Help?

Connect with a staff member and get your questions answered.
email: megan.fletcher@mccd.edu 

Web Guidelines

Images

The images and photography we use on mccd.edu help project a brand of professionalism and reliability. To this end, we ask that editors follow guidelines for image use on the official College website.  Please refrain from adding effects to images, such as:

  • Borders
  • Shadows
  • Text overlays
  • Other effects

Also, do not use:

  • Flyers. If it is useful content for the web add it onto the webpage as text. If it is to represent an event request for an event to be created by mcnews@mccd.edu then link to the event from your page. 
  • Animated GIFs
  • GIFs which are cartoonish or inappropriate
  • Copyrighted images or logos (without permission)

Accessible Images

please be descriptive in alt  text(Alternative Description) as this is what screen readers will read to describe the image to users with visual impairments. 

Font Styles

Type

This site uses the Google font Lato. Alternate font styles are not permitted on the official College website.

Size

To improve the readability and scan-ability of your content, uses headings and bulleted/numbered lists to break up large blocks of text. Also, do not bold heading text.

The following headings are recommended for page bodies:

This is a Heading H3

This is a Heading H4

This is a Heading H5

Large Heading sizes such as H2 and H1 are typically too large in scale when viewed in context of the entire webpage.  The heading sizes used in webpage bodies should not overwhelm the text size of "Merced College" in the logo and the page heading. 

Hyperlinks

Use descriptive hyperlinks
Use gateway pages for PDF documents when possible
  • Gateway pages are landing pages which provide a short description or executive summary about the PDF document. This allows users to link to your gateway webpage instead of directly to a PDF file.
  • Linking directly to a PDF file can be problematic because PDF files tend to be renamed as newer versions are uploaded and large PDF files can time-out. 
  • If you do link to a pdf or another document, let the user know by indicating the file type in parenthesis, such as:
    Download the New Student Brochure (pdf)
Do not set hyperlinks to open in a new browser window or tab
  • Opening links in the same browser window or tab, instead of a new one, is an accepted web standard (per W3C's WCAG 2.0).
  • Improves Accessibility! Otherwise, opening links in a new browser window or tab:
    • Breaks the back button
    • Can be disorienting and cause confusion (for less tech-savvy users and those with cognitive disabilities)
    • Can create accessibility obstacles because screen readers alert users after the link is clicked; older screen readers do not alert users at all
  • Improves user experience:
    • Consistent
    • Gives user control over browser interface

Exceptions to opening a link in a new browser window or tab:

  • If it would interrupt a process or workflow and the link provides help instructions or other context-sensitive information
  • If user is logged into a secure area of the site and opening in the same window or tab would break logon
  • If you are linking to an external website not under the mccd.edu domain

Colors

For a list of the approved Merced College colors see Graphic Elements Standards.

MC Logo

See Brand & Logo Standards.

Web How-To's

Getting Started

Advanced Editor Functions

Editing Other Parts of the Webpage

Advanced Editor Functions

Faculty Profile Pages

Troubleshooting

Clear Your Browser Cache