Purpose of this Manual

This manual is designed to provide creators of online content a framework that allows content to be presented on behalf of the university in a consistent way, and in away that preserves appearance across multiple devices.

As more of our users begin to explore content with a mobile first experience, it is more important that ever to present your content in a way that ensures the best compatibility for the site visitor.

By following the guidelines, and using the tools provided in this manual, your site will be compliant with University Branding Standards for online content, and additionally will meet the needs of users on a variety of devices, from desktop to smart phone.

Lack of Consistency in Presentation

Online content has now become the primary way in which a lot of users obtain information about Marshall University. As an online content creator, one of your responsibilities is to represent the university in a consistent and professional way.

Because not all units have the same level of technical expertise, tools are being provided within the Marshall University content management system that make it very easy for your unit to utilize the same consistent theme that sites developed outside of this system will use.

Approved Branding for Online Content

The approved Marshall University branding standards dictate that the following elements should be present on any new online content representing Marshall University.

These elements are mandatory elements of any new online content, and should not be modified by site owners/content creators.

Each item discussed below is followed by an example in Figure 1.1

Primary Institution Logo and Top Toolbar

The primary institutional logo and top toolbar are the mechanisms by which users are informed that they are on a Marshall University branded site. This area contains the MU logo, along with a set of common menu elements that must be present at the top of all pages, as well as the site-wide custom search input box.

Top Level Navigational Menu

The top level navigational menu is the menu located directly below the primary institutional logo and top toolbar. This menu provides direct access to top level links serving the entire university community. Individual pages may contain their own site-wide navigational elements, but they can not replace this top level navigational menu, instead placing their own menu in the site content area.

Page Background

The page background provides a consistent user interface element across all university pages. Site owners or content editors can not replace the standard background area with any custom elements.

Common Footer

The common footer is the area at the bottom of each page that contains additional university branding, accreditation information, university contact information, and a link to contact the specified overseer of the site being viewed. This link is automatically generated based on the overseer on record for each site. Site owners cannot change the content of the footer.

Site Content Area

The site content area is the area of the page designed for site specific content. This is where all of custom content for a site will appear. Basic design elements, such as font sizes, line height, and paragraph padding are handled in the core university style sheet and must not be overridden when creating content in this area.

Responsive Design

Sites using either the Marshall University content management theme, or HTML template will be able to take advantage of the Twitter Bootstrap design framework. This framework, developed by designers at Twitter and other leading web organizations, is designed to present content in a 12-column responsive grid. The content itself is responsive – meaning that it responds to the type of device accessing it and reformats itself to best fit presentation on that particular device.

A complete reference guide to the usage and capabilities of the Bootstrap framework is available online.

Using this design framework means that there is no additional work required to prepare your site for presentation on a mobile phone or tablet. The framework itself will adapt and respond to these devic- es automatically, provided you keep the following items in mind when placing content in the content area of your site:

Embedding Video Content

Many popular video sharing sites are supported directly by the Marshall University theme so that as a content editor you need only to place the URL to the video in your content area and the video will display automatically.

Limit specifying width and height of video elements directly. By letting the theme handle the presen- tation of this video content, the content can properly be resized based on the capabilities of the device accessing the site.

Slideshows/Image Rotators

A variety of popular plugins that have been pre-screened for compatibility with the responsive design of the Marshall University template will be available to you once you begin using the theme.

A common need is to place an image slideshow or content rotator on various pages within a site. We provide a plugin called WooSlider for your use. This tool allows you to upload your images and
captions, and then place the slideshow you created anywhere in your page using the media manager. It has several customizable options to best suit your needs. You will find it in the administration menu in the dashboard under the ‘Slideshows’ tab.

The resulting slideshow will automatically reformat properly based on the device accessing your site. Plugins that utilize Adobe Flash should be avoided, as many popular mobile devices will be unable to render this content.

Tables

If using tables for displaying data in your site content area, utilize the “HTML” view of the page editor to enter your table directly. Table formatting is directly supported by the Marshall University theme.

Full details on how to create and style tables within the Bootstrap framework are available online.

Plugins that auto-generate tables within the content area should be avoided unless absolutely necessary, as many will not render table content correctly for a variety of devices.

Additional Plugin Availability

Many popular plugins that will handle a large number of content creation needs are already installed and available to site editors.

Additional plugin evaluation for specific site needs will be reviewed on a case by case basis.

When making a decision on the installation and configuration of a specific plugin, the following are considered:

  • Stability of the plugin throughout the entire campus site network
  • Ability of the output generated by the plugin to adapt to responsive design framework
  • Integrity of the code contained within the plugin package

If you wish to request that a specific plugin be added to the Marshall University site network, please send an email to webmaster@marshall.edu containing the URL of your site, along with the name and URL of the plugin you would like to have considered for installation.

Typography

Font sizes and faces are built in to the Marshall University theme. The styling uses Helvetica Neue as a base body font, with a default size of 16px and a 1.44 em line height.

Font faces and sizes were chosen carefully to carry the branding through from the established print guidelines and to ensure legibility for a variety of visual impairments.

Font color uses a hex code of #333. All of these styles are contained within the shared CSS among all University branded sites, and should not be modified by site editors.

There are a number of elements available for base styling within the visual text editor. Content editors are free to use any of these stylings when creating content – as each is handled automatically by the shared CSS.

Users should not override the default CSS directly, either in the HTML view of a content area, or by including links to overriding custom stylesheets.

Site editors are permitted to use Marshall University logos in presentation of content on their pages. Approved logos are available for download at http://www.marshall.edu/ webguide/.

When using university logos, individual units are not permitted to modify the logos in any way unless they have previously, explicitly been granted permission by University Communications.

Additional restrictions on logo usage are covered in the Marshall University Graphic Standards Manual.

Unacceptable Logo Uses

Unacceptable logo uses on the web follows closely with unacceptable uses in printed material. The logo must not be altered in any way for use online.

Specifically:

  • Do not stretch or condense the logo
  • Do not isolate the logo in a frame
  • Do not display the logo at an angle
  • Do not add a unit name in place of “MARSHALL” in the BAR “M” logo
  • Do not alter proportions of the words “Marshall University” or the stylized “M”
  • Do not set the words “Marshall University” in another typeface and use in the official logo
  • Do not combine the official logo with another logo

Secondary Marks

Under no circumstances should any unit be designing its own “identity” and using it as a logo on its publication or website.

Web Colors

When creating content online, there are several approved colors for use in your own designs that allow your own creations to remain consistent with overall university branding.

Marshall University Green

It is important to note that while the official print representation of MU Kelly Green is PMS 356, the on screen rendering of this color differs slightly.

The hex code used for the online representation of MU Kelly Green is #04954A.

This small variation allows the color to be more easily differentiated from other earlier shades of green when being viewed on a computer monitor, tablet, or smart phone device.

Web Color Reference

The following hex codes represent each of the approved colors in the MU palette for use online:

  • Green: #04954A
  • Brown: #794400
  • Light Brown: #BE854C
  • Gray: #B0B7BC

Accessibility

In an effort to make Marshall University’s online presence compliant with Section 508 of the Americans with Disabilities Act (ADA) and follow the Web Content Accessibility Guidelines (WCAG), we have compiled a quick overview of simple things that you can do to improve usability regardless of platform or assistive technology.

Provide Text Alternatives for Non-Text Content

For example:

<img src="./mona-lisa.jpg" alt="The Mona Lisa" />

Use Descriptive Links

Links shoud be descriptive of the content you are linking to.

Keep descriptions of links consistent throughout your page for clarity.

Don’t use the destination URL as the anchor text. Imagine relying on a screen-reading tool that would speak out every character in the URL.
Alternatively, imagine using the same screen-reading tool to skip through links described as ‘click here’ with no point of reference.

Font Faces, Text Sizes, and Text Colors Must Not be Modified

They were chosen carefully to carry the branding through from the established print guide- lines and to ensure legibility for a variety of visual impairments.

The primary text color was chosen to provide adequate contrast for color vision deficiencies but not so much that it becomes difficult to be read by those with dyslexia.

The text size we have chosen is considered to ideal for easily scanning the content of the page and reducing eyestrain. Used in conjunction with the standard page template provided, it also ensures that the optimal line length is not exceeded.

Do Not Center or Justify Blocks of Text

Centering blocks of text can make it very difficult for users to quickly scan the page.

Justifying text creates spaces between words. These spaces create “rivers of white” running down the page, which can make it difficult for people to read.

For best practices, keep your text and headings aligned to the left.

Heading Tags

Use heading tags to facilitate accessibility and create a clear information hierarchy within your content.

The <h1> <h2> <h3> <h4> <h5> & <h6> tags are used to indicate section headings and subheadings. The increased text sizes are visual cues indicating the importance of the item and are not meant to be decorative. For those relying assistive technologies, they allow for quick navigation of the content so they might easily find pertinent information.

A common mistake is to ignore the heading hierarchy and choose heading tags based on the desired size of the font.

Incorrect Usage:

<body>
<h4>Apples</h4> <p>Apples are fruit.</p>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter than green ones.</p> <h1>Color</h1>
<p>Apples come in various colors.</p>
</body>

This is semantically incorrect as each heading needs to follow the actual information hierar- chy. The heading tags are ordered from most important <h1> to least important <h6> and must be preceded by a correspoding parent heading. i.e. <h3> must be preceded by <h2>.

Correct Usage:

<body>
<h1>Apples</h1> <p>Apples are fruit.</p>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p> <h2>Color</h2>
<p>Apples come in various colors.</p>
</body>

If you are using the Marshall University WordPress theme, your individual pages and posts will be organized so that the title will be the primary heading (H1). Any headings you include in your page content will need to be subheadings ( H2 ) and so on.

Simplify Navigation Menus

A mistake content editors frequently make is to add all of their content to the primary naviga- tion menu located across the top of their site. This is not what this navigation menu is designed for and this can be overwhelming and frustrating to users, especially those access- ing your site from handheld devices or relying on assistive technologies.

To improve user experience, organize your navigation into broad top-level categories. If necessary, you may further divide each top-level category into more specific sub-level cate- gories. Keep the amount of sub-level categories limited to only a few items and avoid going more than one level deep.

The primary navigation menu should only contain content from your site. If you have links that you would like to include from other sites, include those in the sidebar.

TIP: Design engaging websites by using content navigation to take users on a journey through content they are interested in. Relying heavily on listing your pages through the primary navigation creates a stale experience and may result in them missing out on perti- nent content that you would like for them to explore. Engaging landing pages that guide users through your site could potentially entice users to click through and explore more of your content.