Web Guidelines TABLE OF CONTENTS. Expressing and Protecting the Carnegie Mellon University Identity

Transcription

1 Web Guidelines Expressing and Protecting the Carnegie Mellon University Identity TABLE OF CONTENTS Web guidelines Content management system (CMS) 2 Wordmark 2 Colors 3 Typography 4 Links and buttons 4 Images 5 Accessibility, performance and 6 browser support Social media 6 Address and contact info 6 Signatures 6 CARNEGIE MELLON UNIVERSITY WEB GUIDELINES

2 Web guidelines Carnegie Mellon University 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 (M&C) Division is constantly working to review and update existing web policies and standards as the web evolves. Questions? Contact us at web-feedback@andrew.cmu.edu. Content management system (CMS) Computing Services and M&C offer a free, hosted CMS ( with design templates 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. To stay up-to-date on CMS upgrades and news, join the CMS announce distribution list (lists.andrew.cmu.edu/mailman/listinfo/cms-announce). If you need to build your website in another CMS, please contact the Online Strategy team at web-feedback@andrew.cmu.edu to discuss important considerations, and follow the guidelines below to ensure a consistent user experience and uphold the CMU brand. Wordmark The wordmark should always appear in a prominent position on every page and link to CMU s homepage: 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: To standardize identity hierarchy, the name of a school, department or any other unit must appear below the university wordmark: CARNEGIE MELLON UNIVERSITY WEB GUIDELINES

3 Put only one instance of the wordmark at the top of each page: Colors Tartan Plaid informs CMU s web color palette: * To prevent pinkness on screen, web red is slightly different than CMU print red. CARNEGIE MELLON UNIVERSITY WEB GUIDELINES

4 Typography Font face: Open Sans via Google Fonts (download at Open+Sans) Standard weights: 300, 400, 700 Colors: black, gray, white 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 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 sansserif. 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; } Links and buttons LINKS IN COPY Always underline links to make them distinguishable from other text. If possible, use a bottom border instead of an underline to improve readability, as bottom borders won t intersect with descenders. CARNEGIE MELLON UNIVERSITY WEB GUIDELINES

5 SAME TAB VS. NEW TAB Links within your own website should open in the same tab. Non-CMU websites, PDFs and Word Docs should open in a new tab. DON T CLICK HERE Linked text should be relevant and meaningful. Do not link words like here or this page. This is important for accessibility, readability and search engine optimization (SEO). It s difficult for humans and search robots to determine the context of poor link text. Incorrect: Watch our YouTube playlist here. Correct: Watch our YouTube playlist. CALL TO ACTION LINKS Links can stand out with a Call to Action (CTA) style. CMU s CTA is bold in caps with an arrow after the text: REGULAR BUTTONS Rectangular Use in any of the colors listed above 2px bottom-border to show dimension and clickability GHOST BUTTONS Rectangular Use on any of the colors listed above 2px border minimum Transparent center Images FILE TYPES 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 High resolution photos should only load for desktop visitors. Extravagant imagery increases load time and deters mobile visitors. COMPRESSION To improve load time and cut bandwidth consumption for visitors to your website, compress all images. We recommend using compressjpeg.com and compresspng.com. CARNEGIE MELLON UNIVERSITY WEB GUIDELINES

6 Accessibility, performance and browser support Follow web accessibility standards (see more at 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. Convert your website to grayscale to check if actionable items look clickable for people with colorblindness. Use Photoshop (Image > Adjustments > Desaturate) or a CSS filter. Webpages should load fast. Check your performance using WebPageTest ( org/) or YSlow ( Support modern, popular browsers including phones and tablets (see more at edu/feedback/index.html#browsers). Social media Popular social media channels provide official icons; please use them. Flat versions preferred. Facebook Brand Guidelines ( Twitter Brand Guidelines (brand.twitter.com/) LinkedIn Brand Guidelines (brand.linkedin.com/) YouTube Brand Guidelines ( Instagram Brand Guidelines ( Address and contact info It has become a standard to keep the address, phone number, 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. 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 application or a sans serif like Helvetica or Arial at 12px or larger. Don t use a decorative font like Comic Sans. Keep recipients from downloading superfluous files; please don t embed images. CARNEGIE MELLON UNIVERSITY WEB GUIDELINES