Website Guidelines

Quick Links

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 of website audiences:

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

Unsupported Content

  • Teaching materials and instructional resources.
  • Large media files such as videos (unless embedded from YouTube).
  • Personal files and documents.
  • Non-public content. There are no password protected directories or hidden pages. Content for employees should be added to the college Intranet.
  • Content that is inaccessible to those with disabilities under applicable policy.
  • Content that does not meet the Technology Resource Standards. This includes political, defamatory, or obscene content.

Common Design

All public web pages on mesacc.edu 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 contains the following consistent items:

  • Official Mesa Community College logo
  • Website header
    • Quick links (e.g.  Canvas, Student Center, Class Schedule, Contacts, Apply Now)
    • Search box
    • Primary navigation (e.g. Programs & Degrees, Future Students, Current Students)
  • Website footer
    • List of locations
    • Social media links
    • Official Maricopa County Community College District logo
    • Quick links (e.g. Intranet, College Police)
    • District compliance links (e.g. Annual Notifications, Consumer Information)
    • Copyright line

Navigation Menus

The navigation items found in the website’s header and footer have been chosen and designed based on visitor statistics and research. As such, additional items will only be added to the three primary navigation menus (quick navigation, primary navigation, or footer) in rare cases.

Any changes to these menus must be approved by Institutional Advancement and Web Services after heavy consideration. Changes 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 follow the MCC Website Style Guide, which details the fonts, colors, and layout options available within the template.

Notable items within the style guide include:

  • Text must be in Open Sans, a single font dictated by the theme
  • Base text color must be gray / black
  • Text colors and sizes are determined by the theme and should not be changed
  • Text should use correct mixed-case and not be fully UPPERCASE in headings, titles, or body content
  • Pages should have correct headers (e.g. Heading 1, Heading 2) to semantically structure each page
  • Only use a single space following a period
  • No clip art
  • No animations or blinking text
  • Tables should not be used for page layout
  • Primary language of the website is English
  • Review the Brand Standards

Any deviations 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.

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 is available in the Brand Standards.

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 strategies. Its secondary purpose is to provide quick access to services for current students. The final purpose is to promote events and activities to our community. These three objectives fit the website's designated audiences.

Due to the focused objectives of the MCC homepage, Institutional Advancement will not generally add department- or program-specific content.

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.

This area includes program overview pages under “Programs by Name,” which are distinct disciplines, and award-specific pathway maps for each degree and certificate.

Each distinct program has its own overview page, which acts as a one-page brochure for that program. The content is written 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.

Program overview pages link to pathway maps for each award, as well as to departmental pages where more detailed information can be found (if applicable). Pathway maps are made up curricular information that imports into the website from District Office systems.

Content within Programs & Degrees is maintained by Web Services. Web Services controls the messaging and voice of these pages, and takes advice and suggestions from department chairs and program directors. Curricular information, including all text on pathway map pages, is managed separately. Any changes or additions must be submitted through the Academic Scheduling and Curriculum Development office.

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.

Website Resources (Images, Styles, Videos)

The look and feel of the MCC website is maintained by Institutional Advancement and Web Services. They are responsible for keeping the branding and design consistent with college and District style guides.

All imagery, styles, and other web resources present on the MCC website are solely for the use on the MCC website. This includes photos, videos, templates, layouts, and other web designs. None of these items may be repurposed by other entities, unless previously permitted by Institutional Advancement / Web Services.

Utilizing any of these resources outside of the website may cause brand dilution and inconsistencies with our messaging.

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 the 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 completed 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 complete the training request form 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 separate, autonomous, and not funded by college resources, the website must follow MCC standards. These unsupported websites include websites that are not hosted on the mesacc.edu domain.

In addition, MCC does not allow links to the external websites of vendors or businesses, with the exception of official academic partnerships. This is so MCC does not endorse, or appear to endorse, these entities. Ads with links for services, deals, or business partnerships are not permitted. In cases where a vendor name is mentioned, editors are advised to make sure the business has been scrutinized for some minimal qualifications, such as the "good standing" status with the Arizona Corporation Commission.

Use of the Website Theme by Users and Third-parties

Institutional Advancement / Web Services must be consulted in all cases where the MCC website theme is going to be appropriated or replicated outside the main website. Authorization to use the theme must be granted by Institutional Advancement / Web Services before it can be used.

In these rare instances, efforts must be made to have their custom templates and themes match the standards of the website as much as possible.

If a website cannot substantially replicate the theme, then they must use a design that does not implement MCC’s design, logo, or resources. 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. The college is legally obligated to meet a set of standards, WCAG 2.1 AA, to ensure the information on our websites is accessible to those with disabilities. Among the most relevant requirements for editors:

  • Images must have descriptive “alt” text
  • Videos must have closed captioning available. Any automated captioning must be reviewed and edited for accuracy.
  • Any text on the page must 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 using headings in the correct order. 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.
  • Colors have adequate contrast, such as text and background color, and color is not crucial to the use of the website.

Downloadable documents and files, such as Adobe Portable Document Format (PDF) files, must also meet accessibility requirements. Because of the difficulty in achieving this, and the ability to include information within web pages, editors may not upload files (other than images) without approval from Institutional Advancement.

In almost all cases, the content from PDFs should be transferred into the body of one or more web pages. This is because web pages:

  • Can be easily 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

Exceptions must be approved by Institutional Advancement. Requests to upload a file should include:

  1. A justification for why the information cannot be presented on a web page using existing tools.
  2. A copy of the file that has been made fully accessible. Files will be checked using accessibility software. It is the requestor’s responsibility to correct any issues that are identified.

Editors who intentionally upload files to other websites or services to avoid these requirements may have their editing privileges removed.

Forms

In some cases, submittable forms may be needed on the website. Access to create or edit webforms within Drupal is limited to the Web Services team. Requests for webforms should be sent to Web Services for consideration.

Drupal webforms may not be used to collect confidential personal information such as dates of birth. Other form tools are approved for this type of data. Web Services will provide requestors with more detail about these requirements and alternatives to web forms as appropriate.

Forms for prospective students interested in MCC programs, commonly known as Request for Information or lead forms, must be created within the District’s Customer Relationship Management (CRM) software. Requests for RFI forms or exceptions to this requirement will be reviewed by Institutional Advancement.

Vanity URLs

By design and by default, web page addresses or URLs are kept short on mesacc.edu. The default URLs generated by the Drupal system are structured for brevity and clarity based on existing real-world web address standards. Examples:

This default URL structure satisfies the needs of the majority of projects.

However in certain cases, alternative vanity URLs are needed when existing web addresses are not sufficient. A vanity URL is a shorter web address that is easier to remember and easier to enter into a web browser. Traditionally these vanity URLs will redirect a user to a different, longer web address. The instances where we create and enable these types of redirects are detailed below.

Permanence and Maintenance Concerns

A key concept to keep in mind with regards to vanity URLs is that once enabled and used by visitors, it is difficult to remove a vanity URL from active use or assign it to a different page. Since it is unknown how long communications containing a URL will be circulated or used, the creation of a vanity URL essentially claims that address and nomenclature for the foreseeable future. Subsequent vanity URLs will have to use different, and possibly less effective, alternatives. As such, we traditionally shy away from using generic terms for vanity URLs. In most instances, specificity needs to be added to the vanity URL with either additional leading characters (e.g. “241”), a prefixed term (e.g. “give-”), or a suffix (e.g. “-festival”).

Each vanity URL also adds additional web maintenance cost. The list of vanity URLs is always growing, making it difficult to keep the list properly managed so that we can accurately direct website visitors. Due to this URL management concern we limit the number of vanity URLs that are created.

Request Process

Requests for new vanity URLs should be sent to IA-Web Services. Each request needs to contain:

  1. The suggested vanity URL (include any alternatives, if applicable)
  2. The web address that visitors will be redirected to
  3. Brief description and justification explaining why the vanity URL is needed

These requests will be reviewed by the IA-Web Services team in collaboration with the Marketing and Communication teams, utilizing the criteria below:

Criteria

  • Redirect employs one of the three types: service, internal, marketing (see Standards & Types for explanation)
  • Vanity URL is unique
  • Vanity URL accurately describes the destination or campaign
  • No confusion or ambiguity with the desired vanity URL
  • No anticipated conflicts with future use
  • No potential branding issues

If approved, Web Services will enable the vanity URL. If there is a question, IA-Web Services will contact the requestor with possible alternative solutions. These solutions will also be sent through the request process.

Standards & Types

There are three instances where we have previously allowed the use of shorter, vanity URLs that redirect elsewhere.

  1. Service redirects
  2. Internal redirects: a single vanity URL for an entire section
  3. Marketing campaigns

Service Redirects

For core student and employee services that exist at the district level, we have shorter URLs in place as service redirects. These have been enabled due to how long and convoluted the actual service URLs can be. Examples:

Internal Redirects

The second example is where a single vanity URL is used to point to an entire section deeper within the MCC website. These vanity URLs are for lower level pages that have long web addresses. Only a single URL is used to point to the section’s main page. Examples:

Marketing Redirects

The third example includes redirects for MCC marketing campaigns. These types of short URLs are used to accurately track the campaigns, mediums, and sources of our external advertising efforts. These shorter vanity URLs redirect to tailored marketing pages within the MCC website  which are primarily aimed at enrolling students. The actual URL structure needed to accurately track campaign details in Google Analytics requires very long URLs with query string parameters. Alternative shorter URLs are needed as these campaign mediums include billboards and print materials where short URLs need to be quickly read and easily entered by the user. In certain cases, the vanity URLs are prefixed by a term related to the campaign (e.g. “yc”, “241”). Some of the marketing vanity URLs are time-sensitive and the individual URLs have been re-used by different campaigns. Examples:

  • mesacc.edu/latestart
    • mesacc.edu/spring?utm_source=marketing&utm_medium=az%2Binformant%2Blatestart&utm_campaign=declare
  • mesacc.edu/241start
    • mesacc.edu/241?utm_source=marketing&utm_medium=direct%2Bmail%2Bpostcard%2Bstop&utm_campaign=241
  • mesacc.edu/urbanh
    • mesacc.edu/programs/urban-horticulture?utm_source=marketing&utm_medium=phoenix%2Bnew%2Btimes%2Bprint&utm_campaign=urban%2Bhorticulture

An additional variant of marketing redirects is where the Development Office has utilized redirects for their fundraising campaigns. These URLs redirect to online donation forms on the Maricopa Community Colleges Foundation website. Due to the use of generic terms and the number of redirects in use, all Development vanity URLs are prefaced with “give-”. As stated earlier, when the request for a vanity URL contains a generic term, a prefix or suffix must be utilized.

Foreign Language

English is the only language used when creating pages on the MCC website, with limited exceptions. The website offers a translation feature where visitors can select from other languages and access the entire website in that language.

Any requests to add content in a foreign language into the body of a page are to be submitted to Institutional Advancement's Web Services team for consultation and approval.

Adherence to Website Guidelines

Institutional Advancement / Web Services reserves the right to remove content, pages and files that do not comply with these guidelines, college or district policies, or applicable law. Editor access may be revoked for severe or repeated violations. We will work collaboratively with editors to address issues whenever possible.