Carnegie Mellon University

Web standards

CMU launched a new web design in early 2016 to improve functionality and heighten the impact of the university's digital space, while building consistency across university websites. The Marketing & Communications division is constantly working to review and update existing web policies and standards as the web evolves. Questions? Contact us.

Content Management System (CMS)

Computing Services and Marketing & Communications offer a free, hosted CMS and provide support for official units to create and maintain their own websites. More than 200 sites are hosted within the centrally maintained CMS, from small administrative units to large academic programs and colleges. 

In late fall 2016, the joint Computing Services and Marketing & Communications team will update current CMS site managers on the timing and process to upgrade their sites to the new design. To stay up-to-date on CMS upgrades and news, join the "CMS announce" distribution list

If you need to build your website in another CMS, please contact the Online Strategy team to discuss important considerations, and follow the guidelines below to ensure a consistent user experience and uphold the CMU brand.

Wordmark

Top Left is Best

wordmark in top left of page

The wordmark should always appear in a prominent position on every page and link to CMU's homepage: www.cmu.edu. For consistency and maximum brand recall, the top left corner is best. People are 89% more likely to remember logos shown in the traditional, top-left position than logos placed on the right.

Above All Else

unitmark under wordmark

To standardize identity hierarchy, the name of a school, department or any other unit must appear below the university wordmark.

There's Only One

2 wordmarks

Put only one instance of the wordmark at the top of each page.

Colors

Primary

CMU Red *

#b00
187, 0, 0

Gray

#e0e0e0
244, 244, 244

Dark Gray

#666
102, 102, 102

* To prevent pinkness on screen, web red is slightly different than print red (Pantone 187).

Secondary

Gold

#a60
170, 102, 0

Teal

#067
0, 102, 119

Blue

#247
34, 68, 119

Green

#085
0, 136, 85

Dark Green

#243
34, 68, 51

Plaid to the Bone

Tartan plaid swatch

Tartan informs CMU's color palette.

Download the digital tartan graphic

Typography

Font Face

Google makes it easy; they host the files and provide the embed code. For a fast website, only load the weights you need.


Loading Fonts

To speed up load time, only use Open Sans for screens larger than tablet.

@media only screen and (min-width: 768px) { html, button, input, select, textarea { font-family: 'Open Sans', 'Helvetica', sans-serif }}

Mobile visitors should see Roboto (Android), Helvetica (iOS), or the browser's default sans-serif. If you don't apply Open Sans to any elements in the CSS, then browsers won't download it.

html, button, input, select, textarea { font-family: 'Roboto', 'Helvetica', sans-serif }
chart of Open Sans characters

Images

File types

JPG PNG

Web images should have a resolution of 72dpi (dots per inch). Use JPG for photos and PNG for graphics. Other acceptable file types include GIF and SVG.

Oversized photos

CMU's homepage on desktop screen

High resolution photos should only load for desktop visitors. Extravagant imagery increases load time and deters mobile visitors.

Compression

the act of compressing

To improve load time and cut bandwidth consumption for visitors to your website, compress all images. We recommend using compressjpeg.com and compresspng.com.

Accessibility, performance & browser support

WAVE Accessibility Tool

Web accessibility means that people with disabilities can use the web. It ensures that all people can understand and interact with your website. We urge university website owners to provide equal opportunity to people with disabilities and be A and AA compliant. Read about CMU's web accessibility standards.

www.cmu.edu in greyscale

Convert your website to grayscale with Photoshop (Image > Adjustments > Desaturate) or use a CSS filter to check if actionable items look clickable for people with colorblindness.

web performance pie chart

Webpages should load fast. Check your performance using WebPageTest.org or YSlow.

Android & IE logos

Please support modern, popular browsers including phones and tablets.

Social media & contact info

Social media icons

Popular social media channels provide official icons; please use them. Flat versions preferred.

Address & contact info

It has become a standard to keep the address, phone number, email address, contact us link and social media icons for websites in the footer of every page. Visitors to your website will expect them to be there.

Email signatures

Electronic signatures can support the university's brand. Some suggestions:

  • Use Carnegie Mellon University's full name. Don't use CMU.
  • For ease of reading, use the default font of your email application or a sans serif like Helvetica or Arial at 12px or larger. Don't use a decorative font like Comic Sans.
  • To keep recipients from downloading superfluous files, please don't embed images.

Good


Andrew Carnegie
Philanthropist & Founder
Carnegie Mellon University
412-268-2000

Bad


Andrew Carnegie
Philanthropist & Founder, CMU
CMU Wordmark
(412) 268-2000
tree Please consider the environment before printing this email.