Website Guidelines

Quick Links

Documents

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 videos.
  • Personal files and documents.
  • Non-public content. 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.  Enroll, Financial Aid, 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, College Police)
    • 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 Brand 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 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.

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

  • Campaign banner photos and messaging
  • Quick links
  • 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, 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 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.

Due to the focused objectives of the MCC homepage, there are certain types of content that do not meet our requirements and should not be published on the homepage. Content not permitted on the homepage includes private events, job postings, and content that does not address our core audiences. 

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).

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 existing college 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 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 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 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.

In addition, MCC does not allow links to the external websites of vendors or businesses. 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

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.

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.

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:

  • mesacc.edu/departments/math

  • mesacc.edu/students/phi-theta-kappa

  • mesacc.edu/financial-aid

This default URL structure satisfies the needs of the majority of our clients.

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

    1. 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 been 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 website

  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 website deeper within the MCC website. These vanity URLs are for lower level websites that have long web addresses. Only a single URL is used to point to the website’s homepage. Examples:

  • mesacc.edu/c4s

    • mesacc.edu/students/connect-4-success

  • mesacc.edu/coe

    • mesacc.edu/about/administration/college-president/commission-excellence-education

  • mesacc.edu/theatre

    • mesacc.edu/departments/communication-theatre-film-arts/theatre-film-arts

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 (mcccdf.org). 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 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.