Website Guidelines

The primary audience of the public facing Mesa Community College website is the future student. Secondary audiences include current students and the community around the college. With this in mind, the efforts of the MCC website are tailored towards generating interest from new students and retaining them. The remaining focus is providing information and resources.

Breakdown:

60% - Future Students
30% - Current Students
10% - Community

Unsupported Content

  • Teaching materials and instructional resources
  • Large media files such as movies
  • Personal files and documents
  • Non-public content. For instance there are no password protected directories or hidden pages.
  • Content that does not meet the Technology Resource Standards. This includes political, defamatory, or obscene content.

Common Design

Moving forward, all public facing websites and web pages of MCC should use the same overall web page design and navigation structure. Visitors should not be presented with differing designs, as to not detract from the overall user experience and MCC branding. Save for a few exceptions, the overall presence of MCC on the website must be consistent.

Each college web page should contain the following consistent items:

  • Official Mesa Community College logo
  • Website header
    • Quick links (e.g. My.maricopa.edu, MyMCC, Contacts)
    • Search box
    • Primary navigation (e.g. Programs & Degrees, Future Students, Current Students)
  • Website footer
    • List of locations
    • Official Maricopa County Community College District logo / statement
    • Quick links (e.g. Intranet, Employees, Public Safety)
    • Address, phone, and copyright line

Navigation Menus

The navigation items found in the website’s header and footer have been chosen and designed based on visitor use and statistics. As such, no additional items will be added to any of the three primary navigation menus: quick navigation, primary navigation, or footer.

Any changes to these menus must be approved by Institutional Advancement, Web Services, and the Web Oversight Committee only after heavy consideration. Additions to these menus can act as a detriment to the overall goals of the website.

Style Guide

Pages that use the MCC website template must also follow the MCC Website Style Guide, that details the fonts, colors, and layout options available within the template.

Notable items within the style guide include:

  • Only use available fonts dictated by theme:
    • Georgia (primary text)
    • Arial / Helvetica (titles, buttons)
  • Base text color must be gray / black
  • Text sizes are determined by the theme
  • Text should use correct mixed-case and not be fully UPPERCASE in titles and body content
  • Pages should have correctly sized headers (e.g. Heading 1, Heading 2) to semantically structure each page
  • Only use a single space following a period
  • No differing text colors
  • No clip art
  • No Flash animations or blinking text
  • The navigation menu within a website must be present on the left-side of the page
  • HTML tables should not be used for page layout, instead existing content templates and page structures should be used
  • Primary language of the website is English
  • Review the Graphic & Communications Standards here.

Logos

With the exception of endorsed identities, separate logos for individual departments, programs and initiatives are not permitted. No logos other than the official MCC and MCCCD logos are to be displayed - more on logos and graphical elements here.

Any deviations from the supplied Style Guide must be discussed with Institutional Advancement / Web Services for consistency before implementation. Deviations from the style guide will break the defined design, the MCC brand, and the website experience.

MCC Homepage

The official Mesa Community College homepage is maintained by Institutional Advancement / Web Services. The primary goal of this page is to attract future students through the use of marketing campaigns. Its secondary purpose is quick access to services for current students.

The particular interior structure of the homepage is as such from top to bottom:

  • Campaign banner photos and messaging
  • Quick links
  • Advertising buckets (three)
  • Content tabs

The campaign banner photos and messaging are managed by the marketing area of Institutional Advancement. These are coordinated photos, messaging, and landing pages for the current marketing campaign. These are designed for first-time visitors and future students. This area is not designed to highlight current events on campus.

The quick links are meant to act as quick access to high visibility services for current and future students. Current examples in this area are links to Becoming a Student, My.maricopa.edu, Schedule a Tour, Class Schedule, and Financial Aid. The list of items here is maintained by Web Services. Options listed here are based on existing website traffic, keyword searches, and use.

The advertising buckets are a place to list upcoming events, notices, important dates, and things happening on the campuses. They are meant to be concise advertisements with a short title and short description. The concept is for these to continually rotate as new items need to be highlighted. These 3 buckets are handled by different areas under Institutional Advancement. This is the one area where other areas on campus can have their content/events highlighted on the MCC homepage. Requests to be included in this space must be sent to Institutional Advancement.

The content tabs are content-heavy mini-pages meant to present a wide variety of options for our visitors. The default highlighted tab is Programs & Degrees, and is meant to list all of our program offerings all at once here on the MCC homepage. The other tabs are designed for quick access to other services on campus such as content for Future and Current Students. The other tabs listed on this page were designated due to traffic and audience needs. These tabs are maintained by Web Services.

Programs & Degrees

One of the most important sections of the MCC website is the Programs & Degrees area. This section’s purpose is to market the currently available disciplines, programs, degrees, and certificates offered by our campus. Our programs are our primary product, and therefore need to be heavily advertised.

While the public calls them “programs”, and they are named as such on the website, internally a program is defined as a distinct discipline or field. We try to limit the repetition of disciplines as much as possible by combining them into distinct terms. It is within each of these disciplines that you can actually see the available degree programs, certificate programs, and transfer options.

Each distinct program has their own page, which acts as a one-page brochure for that program. The content is written as to entice the visitor to learn more about the program. Each is written to engage the user using a friendly, conversational tone. Main points of each program page include a program overview, career profile, available degrees and certificates, transfer options, and how to get advising help.

Each program page is designed to be viewed quickly and give visitors the ability to “shop around” other programs. We do this so they can quickly glance at the multitude of program options available to them, so they can choose one that truly fits their needs.  Each program page also links to our “Become a Student” enrollment process.

Program overview pages are meant to link to departmental program pages where more detailed information about a program can be found (if applicable). Subtle differences, regulations, unique application processes, and other program specific data are shifted to these departmental program pages.

Content within Programs & Degrees is maintained by Web Services. Web Services controls the messaging and voice of these pages, and takes advisement and suggestions from department chairs and program directors when requested.

Technology Support

Content on the MCC website must work within the confines of the technology that runs it. The Content Management System (CMS) installed on the website is called Drupal. Web pages found on the public website must utilize and be built using the CMS. Exceptions include internal applications (Class Schedule, Contacts Directory) and other special cases (Athletics, individual user websites).

Access and Training

Access to edit within Drupal is maintained by Institutional Advancement / Web Services, and is based on the MCCCD LDAP directory. Access is limited in order to keep the user experience consistent through the entire website. Access to edit the MCC website is a privilege.

Drupal is designed with a tiered access system so that editors can only edit or update their particular section of the website to which they have been assigned. This limits updates from this user to only within their particular area of the website, protecting other areas outside of their purview.

Users wishing to become website editors must first attend a Drupal training session provided by Web Services. In addition, an acknowledgement form must be signed by the user and their immediate supervisor before access is granted. These training sessions provide hands-on experience on the use of MCC's installation of Drupal. The sessions include an overview of the website's tools, features, styles, and guidelines.  Please contact Trisha Brazda in order to get started.

External Websites

MCC does not officially support college websites that are hosted outside of the mesacc.edu website structure. Unless the entity is a separate, autonomous entity and not funded by college resources, the college website must follow our standards. These unsupported websites include websites that are not hosted on the mesacc.edu domain.

Use of the Website Theme by Users and Third-parties

There are certain college websites that are either hosted internally or run by our partners. These are websites that are not hosted within the CMS. This includes both MCC user websites (www.mesacc.edu/~MEID) and third-party websites such as the Online Community Public Events Calendar (alumniconnections.com/olc/pub/MES/geventcal/).

Institutional Advancement / Web Services must be consulted in all cases where the MCC website theme is going to be appropriated outside the main website. Authorization to use the theme must be granted by Institutional Advancement / Web Services before it can be used. In addition, Web Services has a third-party template and additional resources available for these types of outside websites.

In these instances, application of the MCC website theme must also follow the correct standards. Since these websites cannot use the theme provided for the CMS, efforts must be made to have their custom templates and themes match the standards of the website as much as possible.

If these non-CMS websites cannot replicate the theme, then they must use a design that does not implement MCC’s design, logo, or resources as to not confuse visitors.

Use of the MCC website theme by outside parties must not detract from the MCC brand and standards.

Accessibility

A strong importance was placed on accessibility when building the MCC website. As such, certain standards must be kept in this regard to keeping the website accessible.

  • Navigation structures should use accessible methods. No technologies such as Javascript / Ajax are to be used with regards to navigation.
  • Images have descriptive “alt” and “title” tags
  • Text links should have descriptive title tags
  • Any text on the page should be displayed using actual text, not images
    • Allows for a better screen reader experience
    • Allows for font sizes to be increased by the user
    • Allows for overall larger default font sizes
  • Content is built semantically with structure and distinct headers. This denotes structure / importance to screen readers and other accessibility tools.
  • Visual enhancements, such as tabs and animations, should use progressive enhancement with fallbacks. This is so that visitors can still get to pages without the need of a mouse or other pointing device, to limit barriers to accessing content regardless of the device.
  • Contrasting colors are used, and color is not crucial to the use of the website.
  • No Adobe Flash content is present on the main website with regards to primary content

Adobe Portable Document Format (PDF) files should be used in moderation. These rules also apply for content presented as attached documents (e.g. Microsoft Word, PowerPoint, Excel).

  • In most cases, the content from PDFs should be transferred into webpage(s) as the primary means of sharing the content. This is because webpages:

    • Can be read on any device (e.g. desktop, mobile, screen readers).

    • Are indexed and are more searchable than PDFs

    • Present the most current content, as uploaded documents can become out-of-date

  • PDFs are not usually meant to be read by screen readers, and as such can lead to issues where content is presented in the incorrect order or without context.

  • PDFs usually have images and graphical elements that may prohibit users from understanding the content correctly.

  • In all cases, whenever possible, present the content in an accessible manner in webpage(s); link a PDF document as a secondary resource of the information.

Foreign Language

English is the only language used on the MCC website, with some exceptions.  No other language is to be used when directly related to the college's brand or anything that can be construed as MCC's brand.

Exceptions to this guideline are twofold.  First, the college must deem that there is a significant sized audience whose access to MCC is limited due to the audience's English barrier. Second, all the content written in a foreign language is overseen by an MCC employee who is completely fluent in the language and has been approved by college leadership. Although these exceptions allow content in another language to be presented on the website, only a limited amount of such content should exist.

Additionally, any requests to add content in a foreign language to the MCC website are to be submitted to Institutional Advancement's Web Services team for consultation and approval.