Follow these style guidelines to make your mccd.edu webpages look their best.


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:

  • Animated GIFs
  • GIFs which are cartoonish or inappropriate
  • Copyrighted images or logos (without permission)
The following are examples of standard image sizes on mccd.edu.

Image 600 by 350 pixels
Image of faculty/staff for profile pages which re-size responsively on the profile page template. For more information, see documentation under "Faculty Profile Pages" on the Tutorials page.

Image 500 by 350 pixels
Largest image used in a webpage body (with few exceptions). Used for Press Releases, News Stories & Student of the Month articles. Typically aligned to the right or left of a body of text.

Image 350 by 245 pixels
Alternate image size to accompany body of text. Re-sizes proportionately from an image sized at 500 x 350.

Image 250 x 175 pixels
Alternate image size to accompany body of text. Re-sizes proportionately from an image sized at 500 x 350.

Image 300 by 300 pixels
300 x 300 pixels square image typically used with the
Images & Content Grid snippet Snippet Icon. Example: Men's Sports.

Image 200 x 200 pixels
Alternate image size typically used with the
Images & Content Grid snippet Snippet Icon. Example: Baseball Photo Gallery.

Image 150 by 105 pixels
Thumbnail size. Example:  Student Success Stories.

Image 100 by 100 pixels
Alternate thumbnail sized used frequently on home page and for calendar events.

Images with Captions
Placeholder image
Replace this text with a caption describing the photo.

Use a Photo with Caption snippet Snippet Icon to insert an image wrapped in code to contain a caption. This is useful with images aligned to the right of a body of text because the caption stays with the photo.


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.

The following headings are recommended for page bodies:

This is a Heading H4

This is a Heading H5

This is a Heading H4 in Bold

This is a Heading H5 in Bold

Large Heading sizes such as H3, 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.

Examples of recommended heading size as viewed in mobile phone:

Mobile Phone View of Recommended Heading Sizes
View in detail

Additional examples:

  • This webpage uses heading H4 and H5 in bold as it is a lengthy page with multiple headlines.
  • The Health Services webpage uses heading H4 and the subtlety of the Heading unbolded works well.

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 opening a link in a new browser window or tab, indicate so in parenthesis (link opens in new window) or with an external link icon

Colors

Coming soon.


MC Logo

See Brand & Logo Standards.


Web Content Accessibility Standards

Coming soon.